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

/* Логотип — градиент «чернила → петроль», фон ленты — тёплая бумага вместо белого: глаза меньше устают.
   Белыми остаются только то, что поверх ленты: поле ввода, карточки, пузыри пользователя. */
/* Акцент — бирюза логотипа, а не красный кабинета RoboWB: красный у нас — только ошибки и удаление (--rb-bad) */
:root { --rb-sidebar: #F6F5F0; --rb-accent: #1F6E7A; --rb-accent-strong: #1E2240; --rb-accent-soft: #E2EFEE;
  --lz-brand-flow: linear-gradient(120deg, #1E2240, #1F6E7A, #2B3A86, #1F6E7A, #1E2240) }
:root { --lz-logo-color: #1F4E5F; --lz-logo-gradient: linear-gradient(100deg, var(--lz-navy), var(--lz-teal)); --lz-paper: #FAF9F6;   /* --lz-paper-deep, --lz-hover — в brand/tokens.css */
  /* Состояния интерфейса — тёплые и одинаковые везде: наведение, выбранное, отметка (галочки, полоски).
     Градиент логотипа — только у логотипа. */
  --lz-selected: #EBE3D5; --lz-mark: #B0582F; --lz-mark-soft: #F6E7DC }
/* Сглаживание шрифтов в оттенках серого: без него на macOS текст рисуется субпиксельно и выглядит жирным,
   особенно светлый на тёмном (решение владельца 04.11.2026; так у T3 и claude.ai) */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
/* Кнопки поля ввода (плюс, микрофон) — то же наведение, что у чипов модели и мышления */
.rb-composer__tool:hover { background: var(--lz-hover) }
/* Фон страницы — та же «бумага», что у ленты: Safari на iPhone красит в него полосу под часами — иначе она другого тона */
html, body { background: var(--lz-paper) }
body { margin: 0; color: var(--rb-ink); font-family: var(--rb-font-body) }
.rb-workspace { background: var(--lz-paper) }
/* плашка сообщения пользователя — цветом панели бесед слева; кегль — как у ответов ассистента (17 px) */
.rb-chat__message.is-user { background: var(--rb-sidebar); font-size: 17px }
.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% }
/* в пустую беседу поле встаёт сразу, без анимации (10.11.2026: быстрее), из пустой в ленту — плавно опускается */
.rb-chat:not(.is-empty) .rb-chat__compose { 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) + 40px); 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 }
/* в панели — мельче главного, не спорит с беседами (31.10.2026 пробовали Literata, Exo 2, Golos — вернули Unbounded) */
.rb-sidebar__brand .lz-logo, .rb-mobilebar .lz-logo { font-size: 14.4px; letter-spacing: .06em }
/* Логотип в панели (31.10.2026): «Ложка» — Unbounded цветом текста, без градиента; «бот» — рукописным Caveat,
   бледнее и крупнее (у Caveat мелкие строчные). Шрифт — свой файл в static/brand (OFL) */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/brand/caveat-600-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/brand/caveat-600-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
.lz-logo--split, .lz-logo--split:hover { background: none; color: var(--rb-ink) }
.lz-logo--split > .lz-logo__bot { margin-left: .08em; font: 600 1.55em/1 'Caveat', cursive; letter-spacing: 0; opacity: .5 }

/* ---------- вход ---------- */
.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 }
/* Пункты панели — 16,5 px: «Новый чат» вровень с названиями бесед (у бесед свой кегль — .lz-nav-chat__copy b) */
.rb-sidebar .rb-nav-item { font-size: 16.5px }
/* Активный пункт и беседа — только плашкой, без жирного (брендбук даёт is-active 600) */
.rb-sidebar .rb-nav-item.is-active { font-weight: 500 }
.rb-sidebar .rb-nav-item--chat.is-active { font-weight: 400 }
.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-item--chat.is-draft > .lz-logo-img, .rb-nav-item--chat.is-draft > .ic { opacity: .45 }
.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: 12.5px; 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: 12.5px; color: var(--rb-faint); font-variant-numeric: tabular-nums }
.rb-nav-chat .rb-nav-item--chat .lz-busy span { overflow: visible }
.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(--rb-ink) }
.lz-copy.is-done { color: var(--rb-good) }
/* «Озвучить»: синтез — дуга крутится, играет — «пауза» цветом акцента и видна всегда */
/* динамик рисуется мельче квадратных значков в той же рамке 24×24 — на глаз выравниваем с «скопировать» */
.lz-speak svg { width: 18px; height: 18px }
.lz-speak { padding: 1px }
.lz-speak.is-busy svg { animation: lz-spin .9s linear infinite }
.lz-speak.is-busy, .lz-speak.is-playing { opacity: 1; color: var(--rb-accent) }
@keyframes lz-spin { to { transform: rotate(360deg) } }
@media (hover: none) { .lz-copy { opacity: .7 } }
.lz-msg--history { opacity: .78 }
/* История из Telegram — той же колонкой, что лента: без flex сообщения пользователя не прижимались вправо
   (align-self: flex-end) и стояли левее сайтовых — «скакали» */
.lz-tghist__list { display: flex; flex-direction: column; gap: 10px; min-width: 0 }

.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: заголовки, цитаты, свёрнутые блоки, формулы */
/* Ответ ассистента — с воздухом между блоками: абзацы, списки, заголовки по базе RoboWB стояли тесно (8 px) */
.rb-richtext.lz-rich p { margin: 0 0 14px }
.rb-richtext.lz-rich ul, .rb-richtext.lz-rich ol { margin: 6px 0 16px }
.rb-richtext.lz-rich li + li { margin-top: 6px }
.rb-richtext.lz-rich h2, .rb-richtext.lz-rich h3, .rb-richtext.lz-rich h4, .rb-richtext.lz-rich h5 { margin: 24px 0 8px }
.rb-richtext.lz-rich > :first-child { margin-top: 0 }
.rb-richtext.lz-rich > :last-child { margin-bottom: 0 }
.lz-rich blockquote, .lz-text blockquote { margin: 10px 0 14px; padding: 4px 12px; border-left: 3px solid var(--rb-line); color: var(--rb-muted) }
.lz-rich details { margin: 12px 0 16px; 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: 20px 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: flex; flex-wrap: wrap; gap: 4px; max-width: min(680px, 100%) }
.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% }
/* плитки альбома — целиком: ширина по пропорциям картинки (collageItem: --ar), высота — от ширины */
.lz-collage .lz-media { position: relative; flex: var(--ar, 1) 1 0; min-width: 120px; max-width: none }
.lz-collage .lz-media__img, .lz-collage .lz-media__video { display: block; width: 100%; height: auto; max-width: none; object-fit: cover; border-radius: var(--rb-radius-xs) }
.lz-media__dl { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  /* светлая плашка с тёмной иконкой и тенью: тёмный кружок сливался с тёмными картинками (28.10.2026) */
  background: rgba(255, 255, 255, .92); color: #191622; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); opacity: 0; transition: opacity .15s, background .15s }
.lz-media__dl .lz-act__icon { width: 16px; height: 16px; margin: 0 }
.lz-media:hover .lz-media__dl, .lz-media__dl:focus-visible { opacity: 1 }
.lz-media__dl:hover { background: #fff; color: #191622 }
@media (hover: none) { .lz-media__dl { opacity: 1 } }
.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: currentColor; animation: lz-status-pulse 1.6s ease-in-out infinite }
/* «Думаю…», статусы и «работает» в панели бесед — обычным цветом текста, без цветов логотипа и переливов:
   точки — цветом текста и пульсируют (rb-agent-work__dots), время — приглушённо */
.lz-thinking .rb-agent-work__dots span, .lz-busy .rb-agent-work__dots span { background: currentColor }
.lz-thinking__text { color: var(--rb-ink) }
.rb-nav-chat .rb-nav-item--chat .lz-busy .lz-busy__time { color: var(--rb-muted) }
.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 }

/* Модель, мышление, окно выбора моделей, комментарий «Нового задания» — в brand/pickers.css (общий слой с сайтом) */

.rb-composer__foot { gap: 4px }



/* ---------- медиа и файлы беседы ---------- */
.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__head { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 28px }
.lz-gallery__head .lz-gallery__title { flex: 1; min-width: 0 }
/* Чьё: знак Ложкабота или буква пользователя (как аватар в профиле) — вместо плашек «Ложка» / «Вы» */
.lz-gallery__who { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50% }
.lz-gallery__who.is-bot { color: var(--rb-ink) }
.lz-gallery__who.is-bot svg { width: 18px; height: 18px; fill: currentColor }
.lz-gallery__who.is-user { background: var(--rb-ink); color: var(--rb-canvas); font: 600 10px/1 var(--rb-font-body) }
.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; flex: none; gap: 2px; opacity: 0; transition: opacity .15s }
.lz-gallery__item:hover .lz-gallery__actions, .lz-gallery__actions:focus-within { opacity: 1 }
@media (hover: none) { .lz-gallery__actions { opacity: 1 } }
.lz-gallery__act { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--rb-muted); text-decoration: none; cursor: pointer; transition: background var(--rb-ease), color var(--rb-ease) }
.lz-gallery__act:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-gallery__act .lz-act__icon { width: 16px; height: 16px; margin: 0; opacity: 1 }
.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) }
  /* затемнение — внутри рабочего места: оно закреплено (position: fixed) и само держит слои, иначе затемнение легло бы и на шторку */
  html.lz-sheet-open .rb-workspace::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-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-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) }
/* Без бирюзовой рамки фокуса брендбука (robowb :focus-visible) у вкладок, пунктов панели и кнопок баланса: в Safari
   она оставалась вокруг «Баланса» при входе в профиль, как «вы здесь». С клавиатуры фокус виден подсветкой наведения */
.lz-tabs__item:focus-visible, .rb-sidebar .rb-nav-item:focus-visible, .rb-account:focus-visible,
.lz-balance__topup:focus-visible { outline: none }
.lz-tabs__item:focus-visible { color: var(--rb-ink) }
.rb-sidebar .rb-nav-item:focus-visible, .rb-account:focus-visible { background: color-mix(in srgb, var(--rb-ink) 6%, transparent) }
.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-fit, minmax(150px, 1fr)); gap: 8px }   /* 150: «+10,000円» со значком влезает; auto-fit — кнопки на всю ширину, без пустой колонки */
.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 }
/* Выбор одного из нескольких — кнопками брендбука (rb-btn): контур, выбранная залита чернилами */
.lz-choice__item { height: 40px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-sm); background: var(--rb-canvas); color: var(--rb-muted); font: 500 14px/1 var(--rb-font-body); cursor: pointer; transition: background var(--rb-ease), color var(--rb-ease), border-color var(--rb-ease) }
.lz-choice__item:hover { border-color: var(--rb-ink); color: var(--rb-ink) }
.lz-choice__item.is-active { border-color: var(--rb-ink); background: var(--rb-ink); color: var(--rb-canvas) }
/* Голос озвучки: список со своей прокруткой; строка — «послушать», имя и подпись, галочка у выбранного */
.lz-voices { position: relative; max-height: 312px; overflow-y: auto; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-sm); background: var(--rb-canvas) }
.lz-voice { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 6px; border-top: 1px solid color-mix(in srgb, var(--rb-ink) 7%, transparent); cursor: pointer }
.lz-voice:first-child { border-top: 0 }
.lz-voice:hover { background: var(--rb-surface-soft) }
.lz-voice:focus-visible { outline: 2px solid var(--rb-ink); outline-offset: -2px }
.lz-voice__play { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rb-ink); cursor: pointer }
.lz-voice__play:hover { background: color-mix(in srgb, var(--rb-ink) 7%, transparent) }
.lz-voice__play svg { width: 18px; height: 18px }
.lz-voice__play.is-busy svg { animation: lz-spin .9s linear infinite }
.lz-voice__copy { display: grid; gap: 1px; min-width: 0; flex: 1 }
.lz-voice__copy b { font: 500 14px/1.3 var(--rb-font-body); color: var(--rb-ink) }
.lz-voice__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.3; color: var(--rb-muted) }
.lz-voice__check { width: 18px; height: 18px; flex: none; color: var(--rb-ink); visibility: hidden }
.lz-voice.is-active .lz-voice__check { visibility: visible }
.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-hero__value { font-size: 32px }
  .lz-model { max-width: 40vw }
}

html.lz-dark .lz-models__tag { background: color-mix(in srgb, #8FD6CF 14%, transparent); color: #8FD6CF }
html.lz-dark .lz-models__tag.is-pricey { background: color-mix(in srgb, #F5E1A4 18%, transparent); color: #F5E1A4 }
/* Предупреждение о дорогой модели — над полем ввода */
.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 }
/* Карточка «привяжите вход» (app.js linkBar) — справа вверху под «Поделиться», как пуши RoboWB (.rb-toast):
   стекло, тень, заметная иконка; не лежит поверх ленты посередине */
.lz-linkbar { position: absolute; z-index: 13; top: 70px; right: 16px; width: min(340px, calc(100% - 32px)); align-items: flex-start;
  padding: 14px; box-shadow: var(--rb-shadow-modal); transform-origin: top right }
/* Приход пуша: выезжает справа с лёгким пружинящим масштабом, знак «выскакивает» следом (кривые — как в пушах XMath AI) */
.lz-linkbar.is-in { animation: lz-push-in .6s cubic-bezier(.16, 1, .3, 1) both }
.lz-linkbar.is-in .lz-linkbar__icon { animation: lz-push-icon .5s cubic-bezier(.34, 1.56, .64, 1) .2s both }
.lz-linkbar.is-out { animation: lz-push-out .26s ease-in both }
@keyframes lz-push-in { from { opacity: 0; transform: translateX(32px) scale(.94) } to { opacity: 1; transform: none } }
@keyframes lz-push-icon { from { opacity: 0; transform: scale(.4) rotate(-12deg) } to { opacity: 1; transform: none } }
@keyframes lz-push-out { to { opacity: 0; transform: translateX(24px) scale(.97) } }
@media (prefers-reduced-motion: reduce) { .lz-linkbar.is-in, .lz-linkbar.is-in .lz-linkbar__icon, .lz-linkbar.is-out { animation-duration: .01s } }
.lz-linkbar[hidden] { display: none }
.lz-linkbar__icon { flex: none; width: 36px; height: 36px; border-radius: 50% }
/* Запасной вход — знак Ложки на градиенте логотипа */
.lz-linkbar__icon--mark { display: grid; place-items: center; background: var(--lz-logo-gradient) }
.lz-linkbar__icon--mark svg { width: 22px; height: 22px; fill: #fff }
.lz-linkbar__icon[hidden] { display: none }
.lz-linkbar__text { flex: 1; padding-top: 1px }
.lz-linkbar__text b { font-size: 14px }
.lz-linkbar__text span { display: block; margin-top: 2px; line-height: 1.4 }
.lz-linkbar__go { margin-top: 10px; height: 32px; padding: 0 16px; border: 0; border-radius: var(--rb-radius-pill); background: var(--rb-accent-strong);
  color: #fff; font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-linkbar__go:hover { background: color-mix(in srgb, var(--rb-accent-strong) 86%, #fff) }
/* Тёмная тема: стекло над картинками в ленте становилось серым и глушило текст, а кнопка и знак горели —
   плотная тёмная подложка, светлый текст, кнопка и знак — мягкой мятой, без яркой заливки */
html.lz-dark .lz-linkbar { background: color-mix(in srgb, #22232C 94%, transparent); border-color: rgba(255, 255, 255, .09) }
html.lz-dark .lz-linkbar__text b { color: #F7F5F0 }
html.lz-dark .lz-linkbar__text span { color: rgba(247, 245, 240, .74) }
html.lz-dark .lz-linkbar__icon--mark { background: rgba(143, 214, 207, .14) }
html.lz-dark .lz-linkbar__icon--mark svg { fill: #8FD6CF }
html.lz-dark .lz-linkbar__go { background: rgba(143, 214, 207, .16); color: #BFEAE5 }
html.lz-dark .lz-linkbar__go:hover { background: rgba(143, 214, 207, .26) }
.lz-linkbar__close { width: 26px; height: 26px; margin: -4px -4px 0 0 }
.lz-linkbar__close:hover { background: var(--lz-hover) }
@media (max-width: 720px) {
  .lz-linkbar { top: calc(env(safe-area-inset-top, 0px) + 64px); right: 10px; width: calc(100% - 20px) }
}
/* Свернуть панель — кнопка у правого края панели, логотип слева (владелец, 11.11.2026); свёрнута — панели нет, та же
   кнопка в шапке у названия беседы. На телефоне панель и так выезжает по кнопке меню */
.lz-panel-toggle { display: grid; place-items: center; flex: none; order: 2; width: 32px; height: 32px; margin: 0 -6px 0 auto; padding: 0; border: 0;
  border-radius: var(--rb-radius-sm); cursor: pointer }   /* цвета — роль «системная иконка» (brand/roles.css) */
.lz-panel-toggle .ic { width: 18px; height: 18px }
.rb-chat__toolbar .lz-panel-show { display: none }
@media (min-width: 821px) {
  html.lz-panel-hidden .rb-sidebar { transform: translateX(-101%) }
  html.lz-panel-hidden .rb-workspace { margin-left: 0 }
  html.lz-panel-hidden .rb-chat__toolbar .lz-panel-show { display: grid }
}
@media (max-width: 820px) { .lz-panel-toggle { display: none } }

/* Кнопки «Стоп» и «Отправить» всегда справа. В 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(--rb-ink) !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: 14px 0 16px; 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)) }
/* Ячейка готового текста (render.js cellFrame): заголовки списком без рамок — номер, заголовок, под ним тускло
   кликабельность и редактор; выбранный — галочкой вместо номера и тёмным текстом, остальные бледнее, он же — первой
   строкой текста. Цвета — только брендбук (без --lz-mark). «Как на телефоне» — колонка ~375 px, как в ленте ВК */
.lz-cell { width: 100% }
.lz-cell.is-prose:focus-within { border-color: color-mix(in srgb, var(--rb-ink) 30%, var(--rb-line)) }
.lz-cell .lz-code__text:focus { background: var(--rb-surface-soft) }
.lz-cell__heads { display: grid; gap: 2px; padding: 8px 14px 10px; border-bottom: 1px solid var(--rb-line); font-family: var(--rb-font-body) }
.lz-cell__hlabel { padding: 0 0 4px; color: var(--rb-faint); font-size: 12px }
.lz-cell__opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 0 }
.lz-cell__opt[role="button"] { cursor: pointer }
.lz-cell__num { padding-top: 1px; color: var(--rb-faint); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums }
.lz-cell__hbox { display: grid; gap: 2px; min-width: 0 }
.lz-cell__htext { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--rb-ink); overflow-wrap: anywhere; transition: color var(--rb-ease) }
.lz-cell__hmeta { font-size: 12px; line-height: 1.35; color: var(--rb-faint) }
.lz-cell__rec { margin-left: 8px; color: var(--rb-good); font-size: 12px; font-weight: 500; white-space: nowrap }
.lz-cell__acts { opacity: 0; transition: opacity var(--rb-ease) }
.lz-cell__opt:hover > .lz-cell__acts, .lz-cell__opt:focus-within > .lz-cell__acts { opacity: 1 }
.lz-cell__opt[role="button"]:hover .lz-cell__htext { text-decoration: underline; text-decoration-color: var(--rb-line); text-underline-offset: 3px }
.lz-cell__heads.has-pick .lz-cell__opt:not(.is-on) .lz-cell__htext { color: var(--rb-muted) }
.lz-cell__opt.is-on .lz-cell__num { color: var(--rb-good); font-size: 0 }
.lz-cell__opt.is-on .lz-cell__num::before { content: "✓"; font-size: 14px; font-weight: 600 }
.lz-cell__title { padding: 12px 14px 0; font: 600 16px/1.45 var(--rb-font-body); color: var(--rb-ink) }
.lz-cell__title[hidden] { display: none }
.lz-cell__title + .lz-code__text, .lz-cell__title + .lz-code__text[hidden] + .lz-cell__view { padding-top: 8px }
.lz-cell__view { padding: 12px 14px; max-height: 70vh; overflow-y: auto }
.lz-cell__view > :first-child { margin-top: 0 }
.lz-cell__device { margin-left: 2px }
@media (max-width: 720px) { .lz-cell__acts { opacity: 1 } }
.lz-cell.is-phone { background: var(--rb-surface-soft) }
.lz-cell.is-phone > .lz-cell__heads, .lz-cell.is-phone > .lz-cell__title, .lz-cell.is-phone > .lz-code__text, .lz-cell.is-phone > .lz-cell__view {
  box-sizing: border-box; max-width: 375px; margin-inline: auto; background: var(--rb-canvas); border-inline: 1px solid 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 }

/* ---------- первый экран (до входа) ----------
   Смотрим на ураган сверху: на холсте (app.js storm) пыль закручивается в рукава, логотипы моделей по спирали уходят
   в воронку под круглым стеклом. Стекло мелко дрожит — его вот-вот затянет. Цвета — из логотипа. */
.lz-land { --land-ink: #12152B; --land-navy: #1E2240; --land-paper: #F7F5F0; --land-yolk: #FFC83D; --land-teal: #1F6E7A; --land-mint: #8FD6CF;
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--land-ink); color: var(--land-paper); font-family: var(--rb-font-body) }
.lz-land[hidden] { display: none }
/* Фон самой страницы под первым экраном тёмный: Safari на iPhone красит в него панели сверху и снизу (и «резинку» при протяжке) */
html.lz-landing, html.lz-landing body { background: #12152B }
.lz-land__storm { position: absolute; inset: 0; z-index: -2; display: block }
/* Глубина воронки: к центру темнее, по краю — свет облаков */
.lz-land::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 54%, rgba(4, 5, 14, .85) 0, rgba(4, 5, 14, .35) 18%, transparent 46%),
              radial-gradient(120% 90% at 50% 54%, transparent 55%, rgba(31, 110, 122, .28) 100%) }
.lz-land__swarm { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden }
.lz-land__fly { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 110px; height: 110px; margin: -55px 0 0 -55px;
  border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 30px rgba(4, 5, 14, .35) }
.lz-land__fly img { width: 54%; height: 54%; object-fit: contain }
.lz-land__ball { display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .96), rgba(247, 245, 240, .8) 42%, rgba(200, 210, 222, .62));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 -10px 22px rgba(18, 21, 43, .22), inset 0 6px 12px rgba(255, 255, 255, .8), 0 18px 40px rgba(0, 0, 0, .4) }
.lz-land__ball img { width: 46%; height: 46%; object-fit: contain }

/* Шапка главной — та же стеклянная плашка-остров, что на страницах сайта, закреплена сверху, с теми же разделами
   (seo/pages.py land_nav; владелец 11.11.2026). Цвет — токены --land-nav-* (витрина меняет только их) */
:root { --land-nav-bg: color-mix(in srgb, var(--lz-night) 45%, transparent); --land-nav-menu-bg: color-mix(in srgb, var(--lz-night) 92%, transparent); --land-nav-blur: blur(20px) saturate(1.6);
  --land-nav-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 8%, transparent),
    0 18px 40px -18px color-mix(in srgb, var(--lz-black) 80%, transparent) }
.lz-land__top { position: fixed; z-index: 30; top: 10px; left: 0; right: 0; display: flex; align-items: center; gap: 28px; width: min(1180px, calc(100% - 20px));
  margin: 0 auto; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--land-nav-bg);
  -webkit-backdrop-filter: var(--land-nav-blur); backdrop-filter: var(--land-nav-blur); box-shadow: var(--land-nav-shadow) }
.lz-land__links { display: flex; gap: 22px; font: 500 15px/1 var(--rb-font-body) }
.lz-land__links a, .lz-land__more nav a { color: color-mix(in srgb, var(--land-paper) 78%, transparent); text-decoration: none; transition: color .15s }
.lz-land__links a:hover, .lz-land__more nav a:hover { color: var(--land-paper) }
.lz-land__top .lz-land__enter { margin-left: auto }   /* видна одна из двух («Войти» или «Войти по почте») — обе прижаты вправо */
.lz-land__more { display: none; position: relative; order: 9 }   /* кнопка меню — справа, после «Войти» */
.lz-land__more summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; list-style: none; cursor: pointer; color: var(--land-paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 22%, transparent) }
.lz-land__more summary::-webkit-details-marker { display: none }
.lz-land__more summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.lz-land__more nav { position: absolute; right: 0; top: 50px; display: grid; gap: 2px; min-width: 200px; padding: 8px; border-radius: 18px; background: var(--land-nav-menu-bg);
  -webkit-backdrop-filter: var(--land-nav-blur); backdrop-filter: var(--land-nav-blur); box-shadow: var(--land-nav-shadow) }
.lz-land__more nav a { padding: 11px 12px; border-radius: 12px; font: 500 15px/1 var(--rb-font-body) }
@media (max-width: 760px) {
  .lz-land__top { gap: 8px; padding-left: 16px }
  .lz-land__links { display: none }
  .lz-land__more { display: block }
}
.lz-land__brand { display: flex; align-items: center; gap: 10px }
.lz-land__mark { width: 30px; height: 30px; flex: none }   /* знак без плашки, цветом бумаги — как в роликах */
.lz-land__logo, .lz-land__logo:hover { font-size: 17px; letter-spacing: .06em; color: var(--land-paper) }   /* логотип как в панели */
.lz-land__enter { padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--land-paper); font: 600 14px/1 var(--rb-font-body); cursor: pointer; transition: background .15s }
.lz-land__enter:hover { background: rgba(255, 255, 255, .18) }

.lz-land__stage { position: relative; z-index: 2; display: grid; place-items: center; padding: 84px 16px 56px }   /* сверху — место под закреплённое меню */
/* Ссылки на разделы под первым экраном (server.py _land_foot): как подвал страниц для поиска; скрыты вместе с ним */
.lz-land[hidden] + .lz-landfoot { display: none }
.lz-landfoot { padding: 56px clamp(20px, 4vw, 56px) 48px; background: var(--lz-night); border-top: 1px solid color-mix(in srgb, var(--lz-white) 10%, transparent);
  color: color-mix(in srgb, var(--lz-white) 66%, transparent); font: 14px/1.45 var(--rb-font-body) }
.lz-landfoot__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px }
.lz-landfoot b { display: block; margin-bottom: 8px; color: var(--lz-white); font-weight: 600 }
.lz-landfoot a { display: block; padding: 4px 0; color: inherit; text-decoration: none }
.lz-landfoot a:hover, .lz-landfoot b a { color: var(--lz-white) }
.lz-landfoot b a { display: inline; padding: 0 }
.lz-landfoot a.foot__all { color: var(--lz-mint) }
/* Знак и описание слева — как в подвале остальных страниц (seo/pages.py footer) */
.lz-landfoot__brand { max-width: 22em }
.lz-landfoot__brand .lz-logo, .lz-landfoot__brand .lz-logo:hover { display: inline-flex; padding: 0; color: var(--lz-white) }
.lz-landfoot__brand p { margin: 14px 0 0; line-height: 1.6 }
@media (max-width: 640px) { .lz-landfoot__in { grid-template-columns: 1fr 1fr } .lz-landfoot__brand { grid-column: 1 / -1 } }

/* Стекло — круглое «око» урагана */
.lz-land__glass { --mx: 30%; --my: 10%; position: relative; width: min(620px, 90vw, 78vh); aspect-ratio: 1; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 45%, rgba(10, 12, 30, .18) 80%, rgba(255, 255, 255, .1));
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -30px 60px rgba(4, 5, 14, .35), 0 50px 120px rgba(4, 5, 14, .7) }
/* Постоянной дрожи нет (укачивала) — шар только «проседает», когда сменяется команда */
.lz-land__glass.is-pull { animation: lz-pull .7s cubic-bezier(.3, 1.5, .5, 1) }
@keyframes lz-tremble {
  0%, 100% { transform: translate(0, 0) rotate(0) } 18% { transform: translate(.8px, 1.2px) rotate(.25deg) } 36% { transform: translate(-1px, .4px) rotate(-.2deg) }
  54% { transform: translate(.6px, -.8px) rotate(.15deg) } 72% { transform: translate(-.7px, 1px) rotate(-.3deg) } 88% { transform: translate(.4px, .3px) rotate(.1deg) } }
@keyframes lz-pull { 0% { transform: none } 35% { transform: translateY(6px) scale(.955) rotate(-1.4deg) } 100% { transform: none } }
.lz-land__shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .55), transparent 50%) }
.lz-land__lens { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 14%; border-radius: 50% }
.lz-land__lens.is-gl > :not(.lz-login__state) { opacity: 0 }     /* их рисует холст шара (app.js sphereGL) */
.lz-land__lens.is-gl .lz-land__chip.is-in { animation: none }      /* анимация трогает opacity — DOM-чип проступал поверх шара */
.lz-land__refract { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none }
/* Объём шара поверх содержимого: блик слева сверху, затенение и светлая кромка по краю */
.lz-land__rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 56%, rgba(4, 5, 14, .32) 80%, rgba(4, 5, 14, .1) 93%, rgba(255, 255, 255, .16) 99.5%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 10px 14px 30px rgba(255, 255, 255, .08) }
.lz-land__cmd { min-height: 3.4em; display: grid; place-content: center; margin: 0; max-width: 15ch;
  font: 600 clamp(24px, 3.3vw, 44px)/1.13 var(--rb-font-brand); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance }
.lz-land__cmd > span { display: inline }
.lz-land__cmd .lz-land__ghost, .lz-land__cmd .lz-land__ghost mark, .lz-land__cmd mark .lz-land__ghost { color: transparent; text-shadow: none }   /* ненапечатанное — сильнее подсветки mark */
.lz-land__cmd mark { background: none; color: var(--land-yolk); text-shadow: 0 0 28px rgba(255, 200, 61, .55) }
.lz-land__caret { display: inline-block; width: 0; height: .9em; margin-right: -3px; vertical-align: -.08em; border-left: 3px solid var(--tone-arrow, var(--land-yolk)); animation: lz-land-caret 1s steps(1) infinite }
@keyframes lz-land-caret { 50% { opacity: 0 } }
.lz-land__chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2); font: 600 14px/1 var(--rb-font-body) }
.lz-land__chip img { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--land-paper) }
.lz-land__chip.is-in { animation: lz-chip .45s cubic-bezier(.2, 1.4, .4, 1) }
@keyframes lz-chip { from { transform: scale(.8); opacity: .3 } }
.lz-land__cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 26px 10px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #FFD566, var(--land-yolk)); color: var(--land-navy); font: 700 clamp(15px, 1.2vw, 17px)/1 var(--rb-font-brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px rgba(255, 200, 61, .35); transition: transform .15s, box-shadow .15s }
.lz-land__cta img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 2px 8px rgba(30, 34, 64, .25) }
.lz-land__cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 40px rgba(255, 200, 61, .5) }
.lz-land__cta:disabled { opacity: .7; cursor: progress }
.lz-land__cta:focus-visible, .lz-land__enter:focus-visible { outline: 3px solid var(--land-mint); outline-offset: 3px }
.lz-land .lz-login__state { margin: 0; max-width: 30ch; font-size: 13px; line-height: 1.45; color: var(--land-paper) }
/* Вход с Яндекс ID — по правилам Яндекса: тёмная кнопка, красный круг с «Я» */
.lz-land__ya { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px 10px 10px; border-radius: 999px; background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 255, 255, .18); color: #fff !important; font: 600 15px/1 var(--rb-font-body); text-decoration: none !important; transition: background .15s, transform .15s }
.lz-land__ya svg { width: 28px; height: 28px; flex: none }
.lz-land__ya:hover { background: #000; transform: translateY(-1px) }
.lz-land__ya:focus-visible { outline: 3px solid var(--land-mint); outline-offset: 3px }
.lz-land__lens.is-gl .lz-land__ya { opacity: 1 }
.lz-login-ok { color: var(--rb-good); font-weight: 700 }
/* Подсказка после «Войти» — внизу шара поверх, не сдвигая кнопку из-под курсора */
.lz-land__lens .lz-login__state { position: absolute; left: 50%; bottom: 9%; width: 62%; transform: translateX(-50%) }
.lz-land .lz-login__alt { color: var(--land-yolk) }

/* Сцена «космос»: туманность вместо глаза урагана, логотипы — звёзды со вспышкой-искрой */
.lz-land.is-space::before { background: radial-gradient(60% 45% at 22% 28%, rgba(31, 110, 122, .32), transparent 70%),
  radial-gradient(50% 40% at 82% 72%, rgba(70, 64, 160, .3), transparent 70%), radial-gradient(35% 30% at 70% 18%, rgba(255, 200, 61, .07), transparent 70%) }
.lz-land__star { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  animation: lz-twinkle var(--d) ease-in-out var(--delay) infinite }
.lz-land__star img { position: relative; width: 100%; height: 100%; object-fit: contain }
.lz-land__star::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 2.6); height: calc(var(--s) * 2.6); pointer-events: none;
  background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .95) 50%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .95) 50%, transparent 54%);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 60%); mask: radial-gradient(circle, #000 8%, transparent 60%);
  transform: translate(-50%, -50%) scale(0) rotate(0deg); animation: lz-glint var(--g) ease-in-out var(--delay) infinite }
@keyframes lz-twinkle { 0%, 100% { opacity: .5; transform: scale(.92) } 50% { opacity: 1; transform: scale(1.04) } }
@keyframes lz-glint { 0%, 84%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0 }
  90% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1 } 96% { transform: translate(-50%, -50%) scale(.3) rotate(80deg); opacity: .4 } }
/* Кнопка, вариант 2: самолётик Telegram вылетает из шара в звёзды со шлейфом (app.js flyPlane) */
.lz-land__plane-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden }
.lz-land__plane { position: absolute; width: 30px; height: 30px; fill: #F7F5F0; filter: drop-shadow(0 0 10px rgba(143, 214, 207, .9)) }
.lz-land__trail { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(143, 214, 207, .85); box-shadow: 0 0 10px rgba(143, 214, 207, .8) }
/* Кнопка, вариант 3: ближние звёзды-логотипы вспыхивают */
.lz-land__star.is-flash { animation: lz-star-flash .9s ease-out }
.lz-land__star.is-flash::after { animation: lz-glint-now .9s ease-out }
@keyframes lz-star-flash { 0% { opacity: .6; transform: scale(1) } 30% { opacity: 1; transform: scale(1.45) } 100% { opacity: .8; transform: scale(1) } }
@keyframes lz-glint-now { 0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0 } 30% { transform: translate(-50%, -50%) scale(1.3) rotate(40deg); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0 } }
/* Без шара (LAND_BALL = false): команда и кнопка — прямо в космосе, без плашки */
.lz-land.is-flat .lz-land__glass { width: min(820px, 94vw); aspect-ratio: auto; border-radius: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; animation: none }
.lz-land.is-flat .lz-land__shine, .lz-land.is-flat .lz-land__rim, .lz-land.is-flat .lz-land__refract { display: none }
.lz-land.is-flat .lz-land__lens { position: relative; inset: auto; padding: 0; gap: 26px }
/* Команда — Onest Bold: уже и легче читается, чем широкий Unbounded */
.lz-land.is-flat .lz-land__cmd { max-width: 19ch; min-height: 2.3em; font: 700 clamp(38px, 5.8vw, 80px)/1.06 'Onest', var(--rb-font-body); letter-spacing: -.025em;
  text-shadow: 0 4px 30px rgba(4, 5, 14, .6) }
.lz-land.is-flat .lz-land__lens .lz-login__state { position: static; transform: none; width: auto }
/* Без шара: жёлтая кнопка скрыта, вход — плашкой «Войти через» Telegram · Яндекс ID */
.lz-land.is-flat .lz-land__cta { display: none }
.lz-land__login { display: none }
.lz-land.is-flat .lz-land__login { display: inline-flex; align-items: stretch; margin-top: 6px; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 50px rgba(4, 5, 14, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
/* Сегменты одной плашки: подпись | Telegram | Яндекс ID — одинаковые, белые значки; цвет бренда — только при наведении */
/* По рамке плашки входа бежит свет — как подсветка правильного ответа в xmathai: слой-рамка (маска вырезает середину,
   остаётся линия 2px), под ним вращается конический градиент мята → лаванда → розовый */
.lz-land.is-flat .lz-land__login { position: relative }
.lz-land__run { position: absolute; inset: -1px; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude }
.lz-land__run i { position: absolute; left: 50%; top: 50%; width: 220%; padding-top: 220%; margin-left: -110%; margin-top: -110%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(143, 214, 207, 0) 0deg, rgba(143, 214, 207, .95) 60deg, rgba(201, 184, 255, .95) 115deg, rgba(255, 158, 207, .9) 150deg,
    rgba(255, 158, 207, 0) 200deg, rgba(143, 214, 207, 0) 360deg);
  animation: lz-run 3.2s linear infinite; will-change: transform }
@keyframes lz-run { to { transform: rotate(360deg) } }
.lz-land__login-label { display: inline-flex; align-items: center; padding: 0 16px 0 18px; color: rgba(247, 245, 240, .6); font: 500 15px/1 var(--rb-font-body); white-space: nowrap }
.lz-land__opt { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 999px; background: none;
  color: #F7F5F0 !important; font: 600 16px/1 var(--rb-font-body); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s }
.lz-land__opt::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255, 255, 255, .16) }
.lz-land__opt svg { width: 20px; height: 20px; flex: none; fill: currentColor; transition: fill .18s }
.lz-land__opt:hover::before, .lz-land__opt:hover + .lz-land__opt::before { opacity: 0 }
.lz-land__opt.is-tg:hover { background: rgba(42, 171, 238, .16) }
.lz-land__opt.is-tg:hover svg { fill: #2AABEE }
.lz-land__opt.is-ya:hover { background: rgba(252, 63, 29, .14) }
.lz-land__opt.is-ya:hover svg { fill: #FC3F1D }
/* Вход через Google — у витрины с ключами Google (data-google, webchat/google_login.py); у Nanako нет бота в Telegram
   и MAX (data-no-telegram) — их кнопки и жёлтая «Войти через Telegram» не показываются */
html[data-google="1"] [data-login-google], html[data-google="1"] [data-glogin-google] { display: inline-flex !important }
html[data-no-telegram] .lz-land__opt.is-tg, html[data-no-telegram] .lz-land__opt.is-max, html[data-no-telegram] .lz-land__cta,
html[data-no-telegram] .lz-glogin__opt.is-tg, html[data-no-telegram] .lz-glogin__opt.is-max { display: none !important }
html[data-no-telegram] .lz-land__opt.is-google::before { display: none }
.lz-land__opt img, .lz-glogin__opt img { flex: none; display: block }
.lz-land__opt.is-google:hover { background: rgba(66, 133, 244, .14) }
.lz-land__opt:focus-visible { outline: 3px solid var(--land-mint); outline-offset: 1px }
.lz-land__opt:disabled { opacity: .6; cursor: progress }
@media (max-width: 760px) {
  /* Телефон — одна строка, как на компьютере, но кнопки — только иконки: «Войти через  [Telegram] [Яндекс]» */
  .lz-land.is-flat .lz-land__login { flex-direction: row; align-items: center; gap: 6px; width: auto; padding: 6px 6px 6px 4px; border-radius: 999px }
  .lz-land__login-label { padding: 0 8px 0 14px; font-size: 15px }
  .lz-land__opt { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .09) }
  .lz-land__opt-t { display: none }
  .lz-land__opt svg { width: 22px; height: 22px }
  .lz-land__opt.is-tg svg { fill: #2AABEE } .lz-land__opt.is-ya svg { fill: #FC3F1D }
  .lz-land__opt::before { display: none }
  .lz-land__opt.is-tg:active { background: rgba(42, 171, 238, .2) }
  .lz-land__opt.is-ya:active { background: rgba(252, 63, 29, .18) }
}
/* Надзаголовок над командой — читаемый, не служебная мелочь */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/brand/onest-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/brand/onest-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+FEFF, U+FFFD }
.lz-land__kicker { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .42em; margin: 0 0 -6px; color: rgba(247, 245, 240, .76); font: 500 clamp(17px, 1.6vw, 22px)/1.3 'Onest', var(--rb-font-body); letter-spacing: .005em }
/* стрелка — прежняя, жирная из Golos; цвет — как у ключевых слов текущей команды */
/* стрелка — прежняя, жирная из Golos, цветом самого надзаголовка (точки «печатает» — запасной вариант: .lz-land__dots) */
/* Справка «Что такое Ложкабот» — whatis.css */
.lz-land__arrow { margin: 0; font-family: var(--rb-font-body); font-weight: 600; color: #F7F5F0 }   /* светлее текста надзаголовка */
.lz-land__dots { display: inline-flex; gap: .22em; margin: 0 .5em; vertical-align: .12em }
.lz-land__dots i { width: .26em; height: .26em; border-radius: 50%; background: currentColor; animation: lz-dot 1.4s ease-in-out infinite }
.lz-land__dots i:nth-child(2) { animation-delay: .18s } .lz-land__dots i:nth-child(3) { animation-delay: .36s }
@keyframes lz-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-.18em) } }
/* Тона ключевых слов, по кругу (app.js LAND_TONES) */
.lz-land__lens[data-tone="lavender"] { --tone-arrow: #B9A8FF }
.lz-land__lens[data-tone="sunset"] { --tone-arrow: #FF8A6B }
.lz-land__lens[data-tone="electric"] { --tone-arrow: #5EE7FF }
.lz-land__lens[data-tone="lavender"] .lz-land__cmd mark { background: linear-gradient(100deg, #C9B8FF, #FF9ECF); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(201, 184, 255, .45)) }
.lz-land__lens[data-tone="sunset"] .lz-land__cmd mark { background: linear-gradient(100deg, #FFC83D, #FF6B8B); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(255, 140, 90, .45)) }
.lz-land__lens[data-tone="electric"] .lz-land__cmd mark { color: #6FE9FF; text-shadow: 0 0 26px rgba(94, 231, 255, .5) }
.lz-land__lens.is-gl .lz-land__kicker { display: none }
/* Модель — без плашки: логотип и название */
.lz-land.is-flat .lz-land__chip { padding: 0; background: none; border: 0; gap: 10px; font-size: 16px; color: rgba(247, 245, 240, .85) }
.lz-land.is-flat .lz-land__chip img { width: 26px; height: 26px; padding: 0; background: none; border-radius: 0 }
.lz-land.is-flat .lz-land__cta { --px: 0px; --py: 0px; --gx: 50%; --gy: 50%; position: relative; overflow: hidden; padding: 12px 30px 12px 12px;
  font-size: clamp(16px, 1.3vw, 18px); transform: translate(var(--px), var(--py)); transition: transform .18s ease-out, box-shadow .2s, filter .2s }
.lz-land.is-flat .lz-land__cta img { width: 36px; height: 36px }
.lz-land.is-flat .lz-land__cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(90px circle at var(--gx) var(--gy), rgba(255, 255, 255, .65), transparent 70%) }
.lz-land.is-flat .lz-land__cta:hover { transform: translate(var(--px), var(--py)) scale(1.06); filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 48px rgba(255, 200, 61, .55) }
.lz-land.is-flat .lz-land__cta:hover::before { opacity: 1 }
.lz-land.is-flat .lz-land__cta:hover svg { transform: none }
.lz-land.is-flat .lz-land__cta.is-jelly { animation: lz-jelly .6s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes lz-jelly { 0% { transform: translate(var(--px), var(--py)) scale(1.06) } 20% { transform: translate(var(--px), var(--py)) scale(1.18, .84) }
  45% { transform: translate(var(--px), var(--py)) scale(.94, 1.1) } 70% { transform: translate(var(--px), var(--py)) scale(1.06, .97) } 100% { transform: translate(var(--px), var(--py)) scale(1.06) } }
.lz-land__ring { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 3px solid rgba(255, 200, 61, .75); pointer-events: none;
  animation: lz-ring .85s ease-out forwards }
@keyframes lz-ring { to { transform: scale(9); opacity: 0; border-width: 1px } }

/* Шар можно взять и покрутить */
.lz-land__glass.is-spin { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none }
.lz-land__glass.is-spin.is-grab { cursor: grabbing }
.lz-land__glass.is-spin .lz-land__cta { cursor: inherit }   /* палец/руку ставит app.js ctaHit — по нарисованной кнопке */

@media (max-width: 760px) {
  .lz-land__fly { width: 60px; height: 60px; margin: -30px 0 0 -30px }
  .lz-land__glass { width: 92vw }
  .lz-land__lens { gap: 14px; padding: 13% 9% }
  .lz-land__cmd { font-size: 6.4vw; min-height: 3.5em }
  .lz-land.is-flat .lz-land__cmd { font-size: 9.6vw; min-height: 3.2em }
  .lz-land__cta { gap: 10px; padding: 8px 18px 8px 8px; font-size: 14px }
  .lz-land__cta img { width: 30px; height: 30px }
}
@media (prefers-reduced-motion: reduce) {
  .lz-land__star, .lz-land__star::after, .lz-land__glass, .lz-land__glass.is-pull, .lz-land__caret, .lz-land__chip.is-in, .lz-land__dots i { animation: none }
  .lz-land__run { display: none }
}

/* ---------- «Поделиться» ---------- */
.lz-share-open { display: inline-flex; align-items: center; gap: 6px; width: auto !important; padding: 0 12px !important; border-radius: 999px !important; font: 500 13px/1 var(--rb-font-body) }
.lz-share-open svg { width: 16px; height: 16px }
.lz-share { position: relative; width: min(460px, 94vw); padding: 0 }
.lz-share__close { position: absolute; top: 12px; right: 12px }
.lz-share__body { display: grid; justify-items: center; gap: 14px; padding: 34px 28px 26px; text-align: center }
.lz-share__badge { display: grid; place-items: center; color: var(--rb-ink) }
.lz-share__badge.is-ready { color: var(--rb-good) }
.lz-share__badge svg { width: 32px; height: 32px }
.lz-share__title { margin: 0; font: 600 20px/1.25 var(--rb-font-body) }
.lz-share__points { display: grid; gap: 8px; margin: 2px 0 6px; text-align: left }
.lz-share__point { display: flex; align-items: center; gap: 10px; color: var(--rb-muted); font-size: 14px; line-height: 1.4 }
.lz-share__point-icon { display: grid; place-items: center; flex: none; color: var(--rb-ink) }
.lz-share__point-icon svg { width: 18px; height: 18px }
.lz-share__main { gap: 8px }
.lz-share__btn-icon svg { width: 17px; height: 17px; display: block }
.lz-share__meta { margin: 0; font-size: 13px; line-height: 1.5 }
.lz-share__link { display: flex; gap: 8px; width: 100% }
.lz-share__link .rb-input { flex: 1; min-width: 0; font-size: 14px }
.lz-share__actions { display: flex; flex-wrap: wrap; gap: 8px }
.lz-share .lz-share__actions { justify-content: center }
.lz-share__delete { color: var(--rb-bad) !important }
/* Чужая беседа по ссылке: без боковой панели и поля ввода; вместо него — войти или открыть свою Ложку */
.lz-share-mode .rb-sidebar, .lz-share-mode [data-menu-open], .lz-share-mode [data-delete-group], .lz-share-mode [data-share-open],
.lz-share-mode [data-media-open], .lz-share-mode .rb-chat__title-button i, .lz-share-mode .rb-composer, .lz-share-mode [data-models],
.lz-share-mode [data-think], .lz-share-mode [data-notice], .lz-share-mode .lz-under, .lz-share-mode [data-starters],
.lz-share-mode [data-mentions] { display: none !important }
.lz-share-mode .rb-workspace { margin-left: 0 }
.lz-share-mode .rb-chat__title-button { pointer-events: none }
/* Гость с черновиком со страницы модели (app.js guestCompose): только поле с черновиком — беседы, модель беседы,
   мышление и голосовое — после входа */
.lz-guest .rb-sidebar, .lz-guest [data-menu-open], .lz-guest [data-panel-show], .lz-guest [data-delete-group], .lz-guest [data-share-open],
.lz-guest [data-media-open], .lz-guest [data-chat-more], .lz-guest .rb-chat__title-button i, .lz-guest .lz-under .lz-model,
.lz-guest .lz-under .lz-think-chip, .lz-guest .lz-under [data-mic], .lz-guest [data-notice], .lz-guest [data-starters] { display: none !important }
.lz-guest .rb-workspace { margin-left: 0 }
.lz-guest .rb-chat__title-button { pointer-events: none }
.lz-guest-login__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 16px }
.lz-guest-login__btns .rb-btn { justify-content: center; text-align: center }
.lz-share-by { margin-left: 4px; color: var(--rb-faint); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lz-share-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; padding: 16px 18px; border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-lg); background: var(--rb-canvas); box-shadow: var(--rb-shadow-card) }
.lz-share-cta p { margin: 0; font-size: 15px; line-height: 1.45 }
.lz-share-cta__btns { display: flex; flex-wrap: wrap; gap: 8px }
@media (max-width: 760px) { .lz-share-open span { display: none } .lz-share-open { padding: 0 !important; width: 36px !important; justify-content: center } }

/* Шапка беседы: значки медиа, удалить, переименовать — крупнее (было 17px в 34px) */
.rb-chat__header-action { width: 40px; height: 40px }
.rb-chat__header-action .ic { width: 21px; height: 21px }
.rb-chat__title-button .ic { width: 17px; height: 17px }
.lz-share-open svg { width: 19px; height: 19px }
/* Модель с ценой и «Войти через» — обычным весом */
.lz-land.is-flat .lz-land__chip { font-weight: 400 }
.lz-land__login-label { font-weight: 400 }
/* Шлейф за курсором: подсветка звёзд и логотипов рядом с курсором (app.js landTrail) */
.lz-land__star { transition: filter .5s ease-out }
.lz-land__star.is-lit { filter: brightness(1.7) drop-shadow(0 0 10px rgba(201, 184, 255, .85)); transition: filter .12s }

/* Шапка окон «Вход по почте» и «Оплата / Пополнить баланс»: заголовок слева, крестик справа (правило ушло вместе с
   окном профиля в 4d4829aa — заголовок налезал на край, крестик падал под него; 11.11.2026) */
.lz-profile__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px }

/* ---------- вход по почте ---------- */
.lz-email { width: min(440px, 94vw); padding: 0 }
.lz-email__body { display: grid; gap: 12px; padding: 4px 22px 22px }
.lz-email__error { margin: 0; color: var(--rb-bad); font-size: 13.5px }
/* Код — 6 ячеек, как везде: вставка и автозаполнение из письма заполняют все сразу */
.lz-email__cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px }
.lz-email__cells[hidden] { display: none }
.lz-email__cell { width: 100%; height: 54px; padding: 0; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-canvas);
  color: var(--rb-ink); font: 600 24px/1 var(--rb-font-mono); text-align: center; caret-color: var(--rb-accent); transition: border-color .15s, box-shadow .15s }
.lz-email__cell:focus { outline: none; border-color: var(--rb-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-ink) 12%, transparent) }
.lz-email__cell:disabled { opacity: .6 }
.lz-email__cells.is-shake { animation: lz-shake .4s }
@keyframes lz-shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }

/* Боковая панель: название беседы крупнее */
.lz-nav-chat__copy b { font-size: 16.5px; line-height: 1.3; color: var(--rb-ink) }
/* Переименование: в название влезает 40 знаков (maxlength) — поле по размеру названия, а не на всю шапку */
.rb-chat__title-edit { flex: 0 1 auto }
.rb-chat__title-edit .rb-input { flex: 0 1 auto; width: 360px; max-width: 46vw }
/* «Поделиться» — отдельно, у правого края шапки */
.rb-chat__toolbar .lz-share-open { margin-left: auto; border: 1px solid var(--rb-line) !important; height: 34px }
/* Баланс в панели — спокойнее: в тон панели, без белой карточки */
.lz-balance { background: transparent; border-color: color-mix(in srgb, var(--rb-line) 70%, transparent) }
/* Суммы пополнения: иконка кошелька, сумма, «пополнить»; при наведении — заливка акцентом */
.lz-amount { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; height: auto; padding: 12px 14px; text-align: left }
.lz-amount .ic { grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--lz-teal); transition: color var(--rb-ease) }
.lz-amount__sum { grid-column: 2; grid-row: 1; white-space: nowrap; font: 600 16px/1.2 var(--rb-font-body) }
.lz-amount__hint { grid-column: 2; grid-row: 2; color: var(--rb-faint); font: 400 12px/1.2 var(--rb-font-body); transition: color var(--rb-ease) }
/* Цвета логотипа Lozhkabot (тёмно-синий → бирюза), а не терракота */
/* сумма пополнения — платная кнопка (brand/roles.css, токены --btn-paid-*): наведение — её вид; светлый мятный градиент
   с белым текстом в тёмной теме не читался (владелец, 11.11.2026) */
.lz-amount:hover:not(:disabled) { background: var(--btn-paid-bg); background-size: var(--btn-paid-size, auto); border-color: transparent;
  color: var(--btn-paid-ink); box-shadow: var(--btn-paid-shadow, none); -webkit-backdrop-filter: var(--btn-paid-blur, none); backdrop-filter: var(--btn-paid-blur, none) }
.lz-amount:hover:not(:disabled) .ic, .lz-amount:hover:not(:disabled) .lz-amount__hint { color: var(--btn-paid-ink) }
/* Окно приветственного бонуса */
.lz-welcome { width: min(420px, 92vw); padding: 30px 28px 26px; text-align: center }
.lz-welcome__gift { font-size: 52px; line-height: 1; animation: lz-gift .9s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes lz-gift { 0% { transform: scale(.3) rotate(-20deg); opacity: 0 } 100% { transform: none; opacity: 1 } }
.lz-welcome__title { margin: 14px 0 8px; font: 700 22px/1.25 var(--rb-font-heading) }
.lz-welcome__text { margin: 0 0 20px; color: var(--rb-muted); font-size: 15px; line-height: 1.5 }
.lz-welcome__go { min-width: 180px; justify-content: center }
@media (prefers-reduced-motion: reduce) { .lz-welcome__gift { animation: none } }

/* «Новая затея»: значок и подпись на одной линии */
.lz-nav-new { display: flex; align-items: center; gap: 12px; line-height: 1 }
.lz-nav-new .ic { display: block; width: 18px; height: 18px }
.lz-nav-new span { display: block; line-height: 18px; transform: translateY(-.5px); flex: none; white-space: nowrap }   /* надпись не переносится (японское «新しいチャット»), уступает место горячая клавиша */
.lz-nav-new .lz-hotkey { min-width: 0; overflow: hidden }
/* Колонка списка панели — не шире панели: иначе длинная подсказка клавиш («Ctrl+Shift+O») раздвигает сетку,
   и пункты вылезают за край (12.11.2026) */
.rb-sidebar .rb-nav__list { grid-template-columns: minmax(0, 1fr) }
/* Черновик в списке бесед — блёкло */
.rb-nav-item--chat.is-draft .lz-nav-chat__copy b { color: var(--rb-faint); font-style: italic; font-weight: 400 }
/* Панель (08.11.2026, макет mockups/sidebar-fonts): меню и названия бесед — Onest 700, тёмно-серым, а не чёрным; логотип как был.
   Черновик остаётся блёклым — правило выше специфичнее */
.rb-sidebar { --lz-nav-ink: color-mix(in srgb, var(--rb-ink) 80%, var(--rb-sidebar)) }
.rb-sidebar .lz-nav-new, .rb-sidebar .lz-nav-new:hover, .rb-sidebar .lz-nav-new.is-active, .rb-sidebar .lz-nav-chat__copy b {
  font-family: 'Onest', var(--rb-font-body); font-weight: 700; color: var(--lz-nav-ink) }
.rb-sidebar .lz-nav-new .ic { stroke-width: 2.1 }   /* иконки меню — в тон жирному тексту */
/* Горячая клавиша пункта меню (app.js hotkeys) — справа, бледно и только при наведении; на телефоне и планшете её нет.
   Не .lz-kbd: это класс <html> «клавиатура iPhone открыта» (fitViewport) — 10.11.2026 правило прятало всю страницу */
.lz-hotkey { margin-left: auto; padding-left: 8px; color: var(--rb-faint); font: 500 12px/18px var(--rb-font-body); letter-spacing: .02em;
  white-space: nowrap; opacity: 0; transition: opacity var(--rb-ease) }
.rb-nav-item:hover .lz-hotkey, .rb-nav-item:focus-visible .lz-hotkey { opacity: 1 }
@media (hover: none) { .lz-hotkey { display: none } }

/* ---------- «Компания» ---------- */
.lz-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap }
.lz-inline > .rb-input, .lz-inline > .lz-field { flex: 1 1 140px; min-width: 0 }
.lz-field { display: grid; gap: 6px; margin-top: 10px }
.lz-field__hint { font-size: 12.5px }
.lz-corp-hero__sub { color: color-mix(in srgb, var(--rb-canvas) 60%, transparent); font-size: 13px }
.lz-corp-src { margin: 4px 0 12px }
.lz-corp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px }
.lz-corp-cell { display: grid; gap: 3px } .lz-corp-cell .rb-muted { font-size: 12px } .lz-corp-cell b { font-variant-numeric: tabular-nums }
.lz-member { padding: 10px 0; border-top: 1px solid var(--rb-line) }
.lz-member:first-of-type { border-top: 0 }
.lz-member__head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.lz-member__head p { margin: 2px 0 0; font-size: 12.5px }
.lz-member__edit { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--rb-surface-soft) }
.lz-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer }
.lz-invoice__found { margin: 8px 0 0; font-size: 14px }
.lz-invoice__result { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--rb-good-soft) }
.lz-invoice__result p { margin: 0; font-size: 14px; line-height: 1.5 }
.lz-corp-topup { margin: 6px 0 0; font-size: 13.5px; color: var(--rb-muted) }
/* 4 вкладки профиля на телефоне — прокручиваются, а не распирают окно */
@media (max-width: 760px) { [data-profile].rb-dialog-backdrop { padding: 0 } }   /* окно профиля во весь экран, без сдвига */

/* ── Телефон: чат как в приложениях ассистентов ───────────────────────────────────────────────────────────
   Одна строка сверху: круглая «меню» слева, название беседы по центру, «⋯» справа (вместо ряда иконок).
   Поле ввода — карточка: текст сверху, снизу «+», модель с мышлением одной пилюлей, микрофон и отправка. */
.lz-chat-more, .lz-chat-menu { display: none }
.lz-chat-more svg { width: 20px; height: 20px }
@media (max-width: 720px) {
  .rb-workspace, html.rb-sidebar-collapsed .rb-workspace { --rb-mobilebar-height: 0px }
  /* кнопка меню — в одном слое с шапкой беседы (не fixed): двигаются вместе, шторки и затемнение ложатся на обе одинаково */
  .rb-workspace { position: relative }
  .rb-mobilebar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; z-index: 13; height: auto; padding: 0; border: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none }
  .rb-mobilebar .lz-logo { display: none }
  .rb-mobilebar__menu, .lz-chat-more { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rb-line); background: var(--rb-canvas); color: var(--rb-ink);
    box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--rb-ink) 35%, transparent) }
  .rb-mobilebar__menu .ic { width: 20px; height: 20px }
  .rb-workspace__main--chat { padding: 0 }
  .rb-chat { height: 100dvh; min-height: 240px }
  .rb-chat__toolbar { min-height: 64px; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 14px 66px }
  /* Подложка цвета чата под верхней строкой (меню, название беседы, «…») — от верха экрана, снизу мягкая линия:
     лента не просвечивает за кнопками (как и под полем ввода) */
  .rb-chat__toolbar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0;
    background: var(--lz-paper); pointer-events: none }
  .rb-chat__toolbar::after { left: 12px; right: 12px }
  .rb-chat__title-button { flex: 0 1 auto; min-width: 0; margin: 0 auto; justify-content: center; padding: 8px 16px; font-size: 16px }
  .rb-chat__title-button .ic { display: none }
  .rb-chat__title-edit { flex: 1; padding-right: 0 }
  .rb-chat__title-edit .rb-input { flex: 1; width: auto }
  .rb-chat__toolbar [data-media-open], .rb-chat__toolbar [data-delete-group], .rb-chat__toolbar .lz-share-open { display: none !important }
  .lz-chat-more { display: grid; place-items: center; flex: none; padding: 0; cursor: pointer }
  .rb-chat__title-edit:not([hidden]) ~ .lz-chat-more { display: none }
  .lz-chat-menu:not([hidden]) { position: absolute; top: calc(100% - 4px); right: 12px; z-index: 30; display: grid; min-width: 220px; padding: 6px;
    border: 1px solid var(--rb-line); border-radius: 18px; background: var(--rb-canvas); box-shadow: var(--rb-shadow-modal); animation: lz-menu-in .14s ease-out }
  .lz-chat-menu button { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 0; border-radius: 12px; background: none; color: var(--rb-ink);
    font: 500 15px/1.2 var(--rb-font-body); text-align: left; cursor: pointer }
  .lz-chat-menu button[hidden] { display: none }
  .lz-chat-menu button:active { background: var(--lz-hover) }
  .lz-chat-menu .ic, .lz-chat-menu svg { width: 19px; height: 19px; flex: none; color: var(--rb-muted) }
  .lz-chat-menu .is-danger, .lz-chat-menu .is-danger .ic { color: var(--rb-bad) }
  .rb-chat__messages { padding-top: calc(env(safe-area-inset-top, 0px) + 72px) }

  /* Поле ввода */
  .rb-chat__compose { width: calc(100vw - 20px); bottom: calc(var(--rb-keyboard-height, 0px) + 10px) }
  .rb-chat__compose .rb-composer { border-radius: 26px }
  .rb-chat__compose .rb-composer__input { min-height: 52px; padding: 14px 18px 6px; font-size: 16px }
  .rb-chat__compose .rb-composer__foot { gap: 6px; padding: 4px 10px 10px }
  .rb-chat__compose .rb-composer__foot > * { margin-left: 0 !important }
  /* места мало — пять круглых кнопок: модель (логотип), мышление (лампочка), «+» … микрофон, отправить */
  .rb-chat__compose .lz-model, .rb-chat__compose .lz-think-chip, .rb-chat__compose [data-attach], .rb-chat__compose [data-mic],
  .rb-chat__compose .rb-chat__stop, .rb-chat__compose .rb-chat__send.rb-btn--round {
    flex: none; width: 40px; min-width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50% }
  /* без плашек: кнопки — просто иконки, зато крупнее; нажатие подсвечивает кругом */
  .rb-chat__compose .lz-model, .rb-chat__compose .lz-think-chip { background: none; color: var(--rb-ink) }
  .rb-chat__compose .lz-model:active, .rb-chat__compose .lz-think-chip:active, .rb-chat__compose [data-attach]:active, .rb-chat__compose [data-mic]:active { background: var(--lz-hover) }
  .rb-chat__compose .lz-model__name, .rb-chat__compose .lz-model > i, .rb-chat__compose [data-think-label], .rb-chat__compose .lz-think-chip > i:last-child { display: none }
  .rb-chat__compose .lz-model__logo img, .rb-chat__compose .lz-model__logo > * { width: 24px; height: 24px; font-size: 22px; line-height: 24px }
  .rb-chat__compose .lz-think-chip .ic, .rb-chat__compose [data-attach] .ic, .rb-chat__compose [data-mic] .ic { width: 23px; height: 23px }
  .rb-chat__compose .lz-model { order: 0 } .rb-chat__compose .lz-think-chip { order: 1 }
  .rb-chat__compose [data-attach] { order: -1; border: 0 }
  .rb-chat__compose [data-attach], .rb-chat__compose [data-mic] { color: var(--rb-ink) }     /* один цвет у всех кнопок без плашек */
  .rb-chat__compose [data-mic] { order: 3; margin-left: auto !important }
  .rb-chat__compose .rb-chat__stop, .rb-chat__compose .rb-chat__send { order: 4 }
  .rb-chat.is-empty .rb-chat__compose { bottom: calc(var(--rb-keyboard-height, 0px) + 10px) }
  .rb-chat.is-empty .rb-chat__empty { top: 34%; bottom: auto; transform: translateY(-50%) }
  .rb-chat.is-empty .rb-chat__empty strong { font-size: 31px }

  /* «Прокрутить вниз» — круглая стрелка над полем ввода */
  .rb-chat__scroll-end { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50% }
  .rb-chat__scroll-end span { display: none }
  /* Клавиатура iPhone: Safari не сжимает страницу, а сдвигает её — чат подгоняем под видимую часть экрана (app.js
     fitViewport: --lz-vvh и --lz-vvtop), шапка остаётся наверху, поле ввода — вплотную к клавиатуре */
  /* Сама страница на телефоне не прокручивается вовсе (листается только лента): рабочее место закреплено
     и ровно по видимой части экрана. Иначе 100vh у Safari — экран без панелей, страница длиннее видимого,
     и её можно сдвинуть: шапка уезжает под часы, под полем ввода — пустая полоса */
  html:not(.lz-landing), html:not(.lz-landing) body { height: 100%; overflow: hidden; overscroll-behavior: none }
  .rb-workspace, html.rb-sidebar-collapsed .rb-workspace { position: fixed; top: var(--lz-vvtop, 0px); left: 0; right: 0; height: var(--lz-vvh, 100dvh); min-height: 0 }
  .rb-workspace .rb-chat { height: var(--lz-vvh, 100dvh) }
  html.lz-kbd .rb-chat__compose { bottom: 8px; padding-bottom: 0 }
  .rb-chat__scroll-end .ic { width: 18px; height: 18px }
}
/* Шапка беседы — поверх ленты на всех экранах: сообщения уходят под название и кнопки, как под поле ввода.
   Подложка — градиент цвета страницы, сама полоса клики пропускает, ловят только её кнопки */
.rb-workspace__main--chat { padding-top: 0 }
.rb-chat { height: 100vh; height: 100dvh }
.rb-chat__toolbar { position: absolute; z-index: 12; top: 0; left: 0; right: 0; min-height: 64px; pointer-events: none }
/* 28.10.2026 размытую подложку шапки убирали (ложилась на картинки ленты); 30.10 на компьютере вернули стеклом, как у поля
   ввода, — по просьбе владельца (правило ниже, @media min-width: 721px) */
.rb-chat__toolbar { gap: 6px }
/* У ленты Ложки нет растворения сверху (брендбук гасит верхние 26px): лента уходит под шапку, и маска размывала
   картинки у самого верха */
.rb-chat__messages { -webkit-mask-image: none; mask-image: none }
.rb-chat__title-button, .rb-chat__toolbar .rb-chat__header-action, .rb-chat__toolbar .lz-share-open {
  border: 1px solid var(--rb-line) !important; background: var(--rb-canvas);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--rb-ink) 35%, transparent) }
.rb-chat__title-button { padding: 8px 14px }
.rb-chat__title-button:hover, .rb-chat__toolbar .rb-chat__header-action:hover, .rb-chat__toolbar .lz-share-open:hover { background: var(--lz-hover) }
.rb-chat__toolbar .rb-chat__header-action { width: 36px; height: 36px }
.rb-chat__toolbar .rb-chat__header-action .ic { width: 18px; height: 18px }
.rb-chat__toolbar > * { pointer-events: auto }
/* Компьютер: шапка — подложка цвета чата во всю ширину, стеклом, как поле ввода (просвечивает и размывает ленту),
   снизу линия со скруглёнными концами (::after); название и кнопки — прямо
   на ней, без своих плашек; значки — того же размера, что под полем (--lz-icon, как --lz-under-icon) */
@media (min-width: 721px) {
  .rb-chat__toolbar::before { content: ""; position: absolute; z-index: -1; inset: 0 -34px;   /* -34: боковые поля страницы (robowb .rb-workspace__main) */
    background: color-mix(in srgb, var(--lz-paper) var(--rb-composer-glass-opacity), transparent);
    -webkit-backdrop-filter: blur(var(--rb-composer-glass-blur)) saturate(var(--rb-composer-glass-saturation));
    backdrop-filter: blur(var(--rb-composer-glass-blur)) saturate(var(--rb-composer-glass-saturation));
    pointer-events: none }
  .rb-chat__title-button, .rb-chat__toolbar .rb-chat__header-action, .rb-chat__toolbar .lz-share-open {
    border: 0 !important; background: transparent; box-shadow: none }
  .rb-chat__toolbar .rb-chat__header-action { width: 38px; height: 38px }
  .rb-chat__toolbar .rb-chat__header-action .ic, .rb-chat__toolbar .lz-share-open svg { width: var(--lz-icon); height: var(--lz-icon) }
}
.rb-chat__messages { grid-row: 1 / -1 }
@media (min-width: 721px) {
  /* шапка ниже, чем была (64+ px): кнопка 38 + по 7 сверху и снизу */
  .rb-chat__toolbar { min-height: 0; padding-top: 7px; padding-bottom: 7px }
  .rb-chat__messages { padding-top: 64px }
}
/* Под полем ввода подложки нет (28.10.2026): лента видна и под ним, как под шапкой; само поле — стекло с размытием */
/* знак Ложкабота слева от приветствия — чёрный, в тёмной теме белый */
:root { --lz-mark-ink: #111111 }
.rb-chat.is-empty .rb-chat__empty { display: flex; align-items: center; justify-content: center; gap: .32em; max-width: none; font-size: clamp(30px, 3.2vw, 40px) }
.lz-empty__logo { display: grid; place-items: center; flex: none }
.lz-empty__logo svg { width: 1.15em; height: 1.15em; fill: var(--lz-mark-ink) }
/* телефон: приветствие длинное — знак над ним, текст по центру в две строки при нужде */
@media (max-width: 720px) {
  .rb-chat.is-empty .rb-chat__empty { flex-direction: column; gap: 14px; text-align: center }
  .lz-empty__logo svg { width: 46px; height: 46px }
}
@keyframes lz-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98) } }


/* ── Тёмная тема — по настройке системы ───────────────────────────────────────────────────────────────────
   Только токены: компоненты RoboWB и наши берут цвета из --rb-* / --lz-*. Тёплая графитовая гамма с оттенком
   «чернил» логотипа; логотип — светлый градиент, как на первом экране; чёрные логотипы моделей — белыми. */
/* Тёмная тема — класс html.lz-dark (static/theme.js: «Авто» по часам 18:00–7:00 или выбор в настройках) */
  html.lz-dark { color-scheme: dark;
    --rb-page: #121318; --rb-sidebar: #121318; --rb-canvas: #24252E; --rb-surface-soft: #1F2028;
    --rb-ink: #ECEAE4; --rb-muted: #A9A6B3; --rb-faint: #7D7A88; --rb-line: #34353F;
    --rb-accent: #8FD6CF; --rb-accent-strong: #C9F0EB; --rb-accent-soft: #1C3335;
    --lz-brand-flow: linear-gradient(120deg, #F7F5F0, #8FD6CF, #C9B8FF, #8FD6CF, #F7F5F0);
    --rb-good: #4CC38A; --rb-good-soft: #163024; --rb-warn: #E8A54B; --rb-warn-soft: #3A2D16;
    --rb-bad: #F2667F; --rb-bad-soft: #3B1D26; --rb-info: #6AA7F0; --rb-info-soft: #172A44; --rb-chart-grid: #2A2B33;
    --rb-glass-border: color-mix(in srgb, #FFFFFF 10%, transparent);
    --lz-logo-color: #8FD6CF; --lz-logo-gradient: linear-gradient(100deg, #F7F5F0, #8FD6CF);
    --lz-paper: #17181E; --lz-paper-deep: #1F2028; --lz-hover: #2C2D37; --lz-selected: #363744; --lz-mark: #E8956A; --lz-mark-soft: #3A2A22 }
  html.lz-dark img[src*="/logos/openai."], html.lz-dark img[src*="/logos/grok."], html.lz-dark img[src*="/logos/kimi."], html.lz-dark img[src*="/logos/glm."], html.lz-dark img[src*="/logos/suno."] { filter: brightness(0) invert(.93) }
  html.lz-dark .rb-chat__compose .rb-composer { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .8) }
  html.lz-dark .lz-tab.is-active .lz-logo-img { filter: brightness(0) }
  html.lz-dark { --lz-mark-ink: #F7F5F0 }
  /* выбранная вкладка — светлая пилюля, логотип на ней тёмный */
  /* тени и затемнения — от чёрного: от светлых «чернил» они светились бы */
  html.lz-dark { --rb-shadow-hover: 0 6px 18px rgba(0, 0, 0, .35); --rb-shadow-card: 0 4px 14px rgba(0, 0, 0, .4); --rb-shadow-lift: 0 10px 30px rgba(0, 0, 0, .45);
    --rb-shadow-glass: 0 14px 38px rgba(0, 0, 0, .5); --rb-shadow-modal: 0 30px 70px rgba(0, 0, 0, .65) }
  html.lz-dark .rb-dialog-backdrop { background: rgba(5, 6, 10, .62) }
  html.lz-dark.lz-sheet-open .rb-workspace::after { background: rgba(5, 6, 10, .55) }
  /* Тёмные карточки баланса (профиль, компания) остаются тёмными: внутри них «чернила» и «холст» меняются местами обратно */
  html.lz-dark .lz-hero, html.lz-dark .lz-corp-hero { --rb-ink: #0D0E13; --rb-canvas: #ECEAE4; border: 1px solid var(--rb-line) }


/* ── Новая беседа: приветствие книжной антиквой Literata и подсказки задач ───────────────────────────────────────── */
/* Literata — переменная (400–700) с курсивом: приветствие новой беседы и текст ответов ассистента */
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/brand/literata-var-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/static/brand/literata-var-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/static/brand/literata-it-var-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
@font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/static/brand/literata-it-var-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
/* Ответы ассистента — Literata (антиква для чтения с экрана, как приветствие): кегль 17 px, крупнее Golos: у неё
   ниже строчные. Служебное в ответе (шапка цитаты, «Работала», «Источники», код) остаётся своим шрифтом.
   31.10.2026 пробовали Unbounded, шрифтом логотипа, — для длинного текста не пошёл */
.lz-msg.is-assistant .lz-rich, .lz-msg.is-assistant .lz-text { font-family: 'Literata', Georgia, serif; font-size: 17px; line-height: 1.65 }
.lz-msg.is-assistant .rb-richtext h2, .lz-msg.is-assistant .rb-richtext h3, .lz-msg.is-assistant .rb-richtext h4,
.lz-msg.is-assistant .rb-richtext h5 { font: 600 1.06em/1.35 'Literata', Georgia, serif }
.lz-msg.is-assistant .lz-rich b, .lz-msg.is-assistant .lz-rich strong { font-weight: 650 }
.lz-msg.is-assistant .lz-rich blockquote.lz-quote__text { font-family: 'Literata', Georgia, serif; font-size: 17px }
.rb-chat__empty strong { margin-bottom: 0; font: 500 clamp(30px, 3.2vw, 40px)/1.15 'Literata', Georgia, serif; letter-spacing: -.012em; color: var(--rb-ink) }
/* Подсказки — под полем ввода, пока беседа пустая; на телефоне поле внизу экрана — над ним, лентой вбок */
.lz-starters { display: none }
.rb-chat.is-empty .lz-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 44px auto 0; max-width: 680px; pointer-events: auto }
/* значок задачи в подсказке — одноцветный и приглушённый (бледнее текста), при наведении чуть темнеет */
.lz-starter { display: inline-flex; align-items: center; gap: 7px }
.lz-starter .ic { width: 15px; height: 15px; color: var(--rb-faint); opacity: .8; transition: color .15s, opacity .15s }
.lz-starter:hover .ic { color: var(--rb-muted); opacity: 1 }
.lz-starter { padding: 8px 14px; border: 1px solid var(--rb-line); border-radius: 999px; background: color-mix(in srgb, var(--rb-canvas) 70%, transparent);
  color: var(--rb-muted); font: 500 13.5px/1.2 var(--rb-font-body); cursor: pointer; transition: color .15s, border-color .15s, background .15s }
.lz-starter:hover { color: var(--rb-ink); border-color: color-mix(in srgb, var(--rb-ink) 25%, var(--rb-line)); background: var(--rb-canvas) }
.lz-starter:focus-visible { outline: 2px solid var(--lz-logo-color); outline-offset: 2px }
@media (max-width: 720px) {
  .rb-chat.is-empty .rb-chat__compose { display: flex; flex-direction: column }
  .rb-chat.is-empty .lz-starters { order: -1; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -10px 14px; padding: 0 10px; scrollbar-width: none }
  .rb-chat.is-empty .lz-starters::-webkit-scrollbar { display: none }
  .lz-starter { flex: none; white-space: nowrap }
}

/* Боковая панель: под кнопками «закрепить» и «удалить» — никакой своей заливки (была цвета панели и рисовала
   прямоугольник на наведённой и выбранной плашке); текст уступает им место, пока кнопки видны */
.rb-nav-chat__actions { background: none }
@media (hover: hover) { .rb-nav-chat:hover .rb-nav-item--chat, .rb-nav-chat:focus-within .rb-nav-item--chat { padding-right: 70px } }

/* «Enter — отправить» — только при наведении на кнопку отправки (на телефоне подсказка скрыта и так) */
.rb-composer__enter { opacity: 0; transition: opacity .15s }
.rb-composer__foot:has(.rb-chat__send:hover) .rb-composer__enter { opacity: 1 }

/* Поле ввода и его всплывающие окна (выбор модели, мышления) — над шапкой беседы с её размытием */
.rb-chat__compose { z-index: 13 }

/* Кнопки по ролям (brand/roles.css — привязка «роль → классы»): здесь только значения ролей в приложении Ложки.
   Главная (отправить, «Создать ссылку»…) — градиент логотипа --lz-brand-flow, медленно переливается; в тёмной теме токен
   светлый, как сам логотип там. Витрина (brands/<бренд>/theme.css) меняет эти же токены */
:root {
  --btn-main-bg: var(--lz-brand-flow); --btn-main-size: 320% 320%; --btn-main-ink: var(--lz-paper-warm); --btn-main-anim: lz-send-flow 9s ease-in-out infinite;
  --btn-main-hover-filter: brightness(1.12);
  --btn-main-off-bg: var(--rb-sidebar); --btn-main-off-ink: var(--rb-faint); --btn-main-off-filter: saturate(.4) opacity(.7); --btn-main-off-anim: lz-send-flow 9s ease-in-out infinite;
  --btn-main-idle-opacity: .38; --btn-main-idle-filter: grayscale(1);
  --btn-paid-bg: linear-gradient(100deg, #2E3A87, #1F6F8B); --btn-paid-ink: var(--lz-white); --btn-paid-shadow: 0 8px 20px -10px rgba(31, 60, 140, .7);
  --btn-paid-anim: lz-send-flow 9s ease-in-out infinite; --btn-paid-hover-filter: brightness(1.12); --btn-paid-dis-opacity: .6;
  --btn-paid-off-bg: var(--rb-line); --btn-paid-off-ink: var(--rb-muted);
  --btn-second-bg: var(--rb-canvas); --btn-second-ink: var(--rb-accent); --btn-second-border: var(--rb-line); --btn-second-border-w: var(--rb-border-frame);
  --btn-second-hover-border: var(--rb-accent); --btn-second-hover-ink: var(--rb-accent-strong);
  --choice-on-bg: var(--rb-canvas); --choice-on-ink: var(--rb-ink); --choice-on-shadow: var(--rb-shadow-card);
  --btn-lift: none; --btn-press: none;     /* кнопки приложения Ложки под курсором не двигаются */
  --btn-icon-ink: var(--rb-muted); --btn-icon-hover-bg: var(--lz-hover); --btn-icon-hover-ink: var(--rb-ink);
}
html.lz-dark { --btn-main-ink: #17181E }
@keyframes lz-send-flow { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@media (prefers-reduced-motion: reduce) { .rb-btn--primary, .rb-chat__send.rb-btn--round { animation: none } }
/* Тёмная тема — класс html.lz-dark (static/theme.js: «Авто» по часам 18:00–7:00 или выбор в настройках) */

/* Кнопки-иконки (крестик окна, действия шапки): фокус с клавиатуры — подсветка фоном, без кольца вокруг */
.rb-chat__header-action:focus-visible { outline: none; background: var(--lz-hover); color: var(--rb-ink) }

/* Просмотр фото: фон всегда тёмный (от «чернил» в тёмной теме он был бы светлым), листалка и «Скачать» */
.lz-viewer { background: rgba(10, 11, 15, .9) }
.lz-viewer__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .15s }
.lz-viewer__nav:hover { background: rgba(255, 255, 255, .24) }
.lz-viewer__nav.is-prev { left: 18px } .lz-viewer__nav.is-next { right: 18px }
.lz-viewer__nav .ic { width: 22px; height: 22px }
.lz-viewer__nav.is-prev .ic { transform: rotate(180deg) }
.lz-viewer__bar { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); font: 500 13px/1 var(--rb-font-body) }
.lz-viewer__count:empty { display: none }
.lz-viewer__download { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none }
.lz-viewer__download:hover { background: rgba(255, 255, 255, .28); color: #fff }
.lz-viewer__download svg { width: 16px; height: 16px }
@media (max-width: 720px) { .lz-viewer__nav { width: 40px; height: 40px; margin-top: -20px } .lz-viewer__nav.is-prev { left: 8px } .lz-viewer__nav.is-next { right: 8px } }

/* «Источники · N» под ответом: свёрнуто — тихая строка-пилюля; раскрыто — список сайтов и файлов */
.lz-rich details.lz-sources { margin: 10px 0 2px; padding: 0; border: 0; background: none; font-size: 13px }
.lz-rich details.lz-sources > summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--rb-line); border-radius: 999px;
  background: color-mix(in srgb, var(--rb-canvas) 70%, transparent); color: var(--rb-muted); font: 500 12.5px/1.2 var(--rb-font-body); list-style: none; cursor: pointer }
.lz-rich details.lz-sources > summary::-webkit-details-marker { display: none }
.lz-rich details.lz-sources > summary::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat }
.lz-rich details.lz-sources > summary:hover { color: var(--rb-ink); background: var(--rb-canvas) }
.lz-rich details.lz-sources[open] { padding: 10px 14px 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); line-height: 1.9; color: var(--rb-muted) }
.lz-rich details.lz-sources[open] > summary { display: flex; width: fit-content; margin: -2px 0 6px; padding: 0; border: 0; background: none; color: var(--rb-ink) }
.lz-rich details.lz-sources a { color: var(--rb-accent); text-decoration: none }
.lz-rich details.lz-sources a:hover { text-decoration: underline }

/* Боковая панель светлее (#F3F1EC, в тёмной теме — на тон темнее ленты): карточка баланса — фоном на тон темнее
   панели без рамки, «Пополнить» — мягкая: рамка цвета линии, текст бирюзой; подсказки задач — текст чуть темнее */
.lz-balance { border-color: transparent; background: color-mix(in srgb, var(--rb-ink) 4%, transparent) }
/* «Пополнить» — роль «второстепенная» (brand/roles.css, токены --btn-second-* выше) */
.lz-starter { color: color-mix(in srgb, var(--rb-ink) 78%, transparent) }

/* Цитата из источника (render.js quoteCards ← agent_quotes.block): сверху источник и иконки, текст — маркером, как
   выделение на самой странице, вокруг — несколько слов источника до и после (бледнее), снизу замок «вставлено кодом».
   Маркер — прозрачный серый (цветной горчичный спорил с палитрой сайта; 01.11.2026) */
.lz-rich .lz-quote { --lz-marker: rgba(25, 22, 34, .05); position: relative; max-width: min(640px, 100%); margin: 16px 0 18px; padding: 12px 16px 11px;
  border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas); white-space: normal }
html.lz-dark .lz-rich .lz-quote { --lz-marker: rgba(255, 255, 255, .07) }
.lz-quote__head { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 28px; margin: -4px -8px 0 0;
  color: var(--rb-muted); font: 400 12.5px/1.3 var(--rb-font-body) }
.lz-quote__icon { display: grid; flex: none } .lz-quote__icon svg { width: 14px; height: 14px }
.lz-quote__label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-quote__dot { flex: none; color: var(--rb-line) }
.lz-quote__date { flex: none; margin-right: auto; color: var(--rb-faint); white-space: nowrap; cursor: default;
  text-decoration: underline dotted color-mix(in srgb, var(--rb-faint) 55%, transparent); text-underline-offset: 3px }
.lz-quote__label:last-of-type { margin-right: auto }
@media (hover: hover) { .lz-quote__upd { display: none } }      /* с мышью «обновлено» — в подсказке */
@media (hover: none) { .lz-quote__date { text-decoration: none } }      /* подсказки нет — и пунктира нет */
.lz-quote__acts { display: flex; flex: none; gap: 2px }
.lz-quote__act { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--rb-faint); cursor: pointer; transition: background var(--rb-ease), color var(--rb-ease) }
.lz-quote__act:hover, .lz-rich a.lz-quote__act:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-rich a.lz-quote__act { color: var(--rb-faint); text-decoration: none }
.lz-quote__act.is-done { color: var(--lz-mark) }
.lz-quote__act svg { width: 16px; height: 16px }
.lz-rich blockquote.lz-quote__text { margin: 6px 0 0; padding: 0; border: 0; color: var(--rb-ink);
  font: 400 15.5px/1.65 var(--rb-font-body); overflow-wrap: anywhere }
/* цитата — обычным шрифтом на едва заметной подложке; слова вокруг неё — бледнее (lz-quote__ctx) */
.lz-quote__mark { padding: 1px 2px; border-radius: 3px; background: var(--lz-marker); color: inherit; font-weight: inherit;
  -webkit-box-decoration-break: clone; box-decoration-break: clone }
.lz-quote__ctx { color: var(--rb-faint) }
.lz-quote__proof { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--rb-faint); font: 400 11.5px/1.35 var(--rb-font-body) }
/* С мышью «Цитата вставлена из источника…» — только при наведении на карточку, подписью на её нижней рамке (как
   легенда): места в ленте не занимает и ничего не сдвигает. На телефоне наведения нет — строкой под цитатой, как была */
@media (hover: hover) {
  .lz-quote__proof { position: absolute; right: 14px; bottom: -8px; margin: 0; padding: 0 6px; line-height: 15px; white-space: nowrap;
    background: linear-gradient(var(--rb-canvas) 50%, var(--lz-paper) 50%); pointer-events: none; opacity: 0; transition: opacity .2s ease }
  .lz-quote:hover .lz-quote__proof { opacity: 1 }
}
.lz-quote__proof svg { width: 13px; height: 13px; flex: none }

/* «Работала 38 с ›» над итогом хода агента (agent_work.block ← render.js markDiffs): без плашки — светлых блоков
   в ленте и так много; ход работы раскрывается бледным списком с тонкой чертой слева */
.lz-rich details.lz-work, .lz-rich details.lz-work:not([open]) { margin: 0 0 6px; padding: 0; border: 0; background: none }
.lz-rich details.lz-work > summary { display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; list-style: none;
  color: var(--rb-faint); font: 500 13px/1.4 var(--rb-font-body); cursor: pointer; transition: color var(--rb-ease) }
.lz-rich details.lz-work > summary::-webkit-details-marker { display: none }
.lz-rich details.lz-work > summary::after { content: ""; width: 14px; height: 14px; background: currentColor; transition: transform var(--rb-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat }
.lz-rich details.lz-work > summary:hover { color: var(--rb-muted) }
.lz-rich details.lz-work[open] > summary { margin-bottom: 4px }
.lz-rich details.lz-work[open] > summary::after { transform: rotate(90deg) }
.lz-rich details.lz-work[open] { padding: 0 0 2px; color: var(--rb-muted); font: 400 13.5px/1.65 var(--rb-font-body) }
.lz-work__icon { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: currentColor }
.lz-work__icon svg { width: 14px; height: 14px }
.lz-work__steps { margin: 2px 0 6px; padding: 2px 0; white-space: normal }   /* без полосы слева — она читалась как цитата (владелец, 12.11.2026) */
/* «Работаю N с» по ходу ответа (app.js workBlock): статусы списком под строкой, текущий — темнее и мигает значком;
   отдельный чип «Думаю» под ним не нужен — ход видно по строке */
.lz-work__line { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere }
.lz-work__line .lz-wsprog__icon { width: 14px; height: 14px } .lz-work__line .lz-wsprog__icon svg { width: 14px; height: 14px }
.lz-work__line.is-now { color: var(--rb-ink) }
.lz-work__line.is-now .lz-wsprog__icon { animation: lz-wsprog-pulse 1.2s ease-in-out infinite }
.lz-msg.is-draft.has-work .lz-thinking { display: none }
.lz-msg.is-draft.has-think .lz-thinking:not(.lz-think-live) { display: none }     /* «Думаю · N с» — одной строкой, свой статус черновика не дублируем */
.lz-think-live__t { color: var(--rb-faint); font-variant-numeric: tabular-nums }

/* «Класс» / «отстой» под ответом ассистента (render.js rating): как «Копировать» — при наведении; выбранное видно всегда */
.lz-rate { display: contents }      /* кнопки оценок — в строке подписи наравне с «Копировать», тот же отступ */
.lz-rate__btn { display: grid; place-items: center; width: 22px; height: 22px; padding: 3px; border: 0; border-radius: 50%; background: transparent;
  color: var(--rb-faint); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, background .15s }
.lz-rate__btn svg { width: 14px; height: 14px }
.lz-msg:hover .lz-rate__btn, .lz-rate__btn:focus-visible, .lz-rate__btn.is-on { opacity: 1 }
/* Под ответом ассистента «Копировать», «класс» и «отстой» видны всегда (без наведения казалось, что оценка пропала) */
.lz-msg.is-assistant .lz-copy, .lz-msg.is-assistant .lz-rate__btn { opacity: 1 }
.lz-rate__btn:hover { color: var(--rb-ink) }
.lz-rate__btn.is-on { color: var(--rb-ink); background: var(--lz-hover) }
@media (hover: none) { .lz-rate__btn { opacity: .7 } }
.lz-rate-form { scroll-margin-bottom: calc(var(--rb-compose-height, 138px) + var(--rb-keyboard-height, 0px) + 40px); max-width: 520px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg);
  background: var(--rb-canvas); white-space: normal }
.lz-rate-form__q { margin-bottom: 8px; color: var(--rb-ink); font: 500 13.5px/1.4 var(--rb-font-body) }
.lz-rate-form__opt { color: var(--rb-faint); font-weight: 400 }
.lz-rate-form__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px }
.lz-rate-form__chip { padding: 5px 11px; border: 1px solid var(--rb-line); border-radius: 999px; background: transparent; color: var(--rb-muted);
  font: 400 12.5px/1.3 var(--rb-font-body); cursor: pointer; transition: background var(--rb-ease), color var(--rb-ease), border-color var(--rb-ease) }
.lz-rate-form__chip:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-rate-form__chip.is-on { border-color: var(--rb-ink); background: var(--lz-hover); color: var(--rb-ink) }
.lz-rate-form__text { display: block; width: 100%; min-height: 56px; padding: 9px 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-sm);
  background: var(--rb-canvas); color: var(--rb-ink); font: 400 14px/1.45 var(--rb-font-body); resize: vertical; outline: none }
.lz-rate-form__text:focus { border-color: color-mix(in srgb, var(--rb-ink) 35%, var(--rb-line)) }
.lz-rate-form__row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px }
.lz-rate-form__row .rb-btn { min-height: 34px; padding: 0 14px; font-size: 12.5px }
.lz-rate-form__done { color: var(--rb-muted); font: 400 13.5px/1.4 var(--rb-font-body) }

/* Подсказка вместо браузерной (app.js tips): тёмная пилюля над элементом, в тёмной теме — светлая */
.lz-tip { position: fixed; z-index: 1000; max-width: 360px; padding: 5px 9px; border-radius: 8px; background: var(--rb-ink); color: var(--rb-canvas);
  font: 500 12px/1.3 var(--rb-font-body); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none; opacity: 0; transition: opacity .12s }
.lz-tip.is-on { opacity: 1 }

/* ---------- поле ввода: одна строка со скруглёнными краями (29.10.2026) ----------
   Внутри поля — только текст и «отправить»; «+», модель, мышление и микрофон — строкой под полем,
   как у Claude: пустое поле без кнопок не пугает. Файлы и запись голосового — внутри поля, над строкой текста.
   Высота в одну строку = кнопка 38 + отступы 7 сверху и снизу = 52: края поля — те же круги, что у кнопки. */
.rb-chat__compose .rb-composer { border-radius: 26px }
.rb-chat__compose .rb-composer:hover { box-shadow: var(--rb-shadow-lift) }
/* тёмная тема: тень на тёмном не видна — при наведении и вводе светлеет обводка */
.rb-chat__compose .rb-composer { transition: box-shadow .18s ease, border-color .18s ease }
html.lz-dark .rb-chat__compose .rb-composer:hover { border-color: color-mix(in srgb, var(--rb-ink) 24%, var(--rb-line)) }
html.lz-dark .rb-chat__compose .rb-composer:focus-within { border-color: color-mix(in srgb, var(--rb-ink) 34%, var(--rb-line)) }
.lz-cmp__row { display: flex; align-items: flex-end; gap: 4px; padding: 7px }
/* Знак Ложки слева в поле (app.js inputMark ставит html.lz-field-mark): по центру строки из одной строки
   текста, со второй строки прячется (.lz-multiline) — текст занимает всю ширину */
.lz-cmp__mark { display: none }
html.lz-field-mark .lz-cmp__mark { display: grid; place-items: center; flex: none; width: 30px; height: 38px; margin: 0 -6px 0 6px }
html.lz-field-mark .lz-cmp__mark svg { width: 20px; height: 20px; fill: var(--rb-faint); transition: fill 1.6s ease }
/* пустое поле — знак тёмно-серый; начали писать — медленно бледнеет, чтобы не спорить с текстом */
html.lz-field-mark .lz-idle .lz-cmp__mark svg { fill: var(--rb-muted) }
html.lz-field-mark .lz-multiline .lz-cmp__mark { display: none }
/* новый чат — знак уже крупно над полем (приветствие), в поле второй не нужен */
html.lz-field-mark .rb-chat.is-empty .lz-cmp__mark { display: none }
.rb-chat__compose .lz-cmp__row .rb-composer__input { flex: 1; min-width: 0; min-height: 38px; max-height: 240px; padding: 8px 6px 8px 12px; font-size: 16px; line-height: 22px }
.lz-cmp__row .rb-chat__send.rb-btn--round, .lz-cmp__row .rb-chat__stop { flex: none; width: 38px; height: 38px; margin: 0 !important }
/* Пустое поле — «отправить» на месте, но неактивна: бледная и серая; с первым символом (или файлом) плавно наливается
   цветом. Кнопка не исчезает — так понятно, куда нажимать */
.lz-cmp__row .rb-chat__send { transition: opacity .6s ease, filter .6s ease }
.rb-chat__compose.lz-idle .lz-cmp__row .rb-chat__send:not(.is-mic) { pointer-events: none }   /* вид пустого поля — роль «главная», --btn-main-idle-* */
@media (prefers-reduced-motion: reduce) { .lz-cmp__row .rb-chat__send, .rb-chat__compose.lz-idle .lz-cmp__row .rb-chat__send { transition: opacity .12s } }
.rb-chat__compose .rb-composer__files:not([hidden]) { padding: 12px 16px 0 }
/* под полем: слева «прикрепить файл» и микрофон, справа модель и мышление — и на компьютере, и на телефоне;
   значки на 20% крупнее, чем были в поле. На телефоне у модели только логотип (название скрыто правилами выше) */
.lz-under { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0; pointer-events: auto }
.lz-under .rb-composer__enter { display: none }
.lz-under [data-attach] { order: 0 } .lz-under [data-mic] { order: 1 }
.lz-under .lz-model { order: 2; margin-left: auto } .lz-under .lz-think-chip { order: 3 }
/* Размер значков, стрелок и вид подписей строки — общими переменными: раньше у каждой кнопки были свои числа
   (мозг 18, стрелки 17 и 14 при значках 22) и подпись мышления серая — кнопки разъехались */
:root { --lz-icon: 22px }                     /* значки шапки и строки под полем — один размер */
/* Границы шапки и левой панели — мягкие (как у Claude): граница панели бледнее линии брендбука; линия под шапкой —
   отдельной полоской со скруглёнными концами, не до самых краёв (.rb-chat__toolbar::after) */
:root { --lz-soft-line: color-mix(in srgb, var(--rb-line) 55%, transparent) }
.rb-sidebar { border-right-color: var(--lz-soft-line) }
.rb-sidebar .rb-nav__section { border-top: 0 }               /* над «Беседами» в панели — без линии */
.rb-chat__toolbar::after { content: ""; position: absolute; z-index: -1; bottom: 0; left: 0; right: 0; height: 1.5px;
  border-radius: 999px; background: var(--rb-line); pointer-events: none }
.lz-under { --lz-under-icon: var(--lz-icon); --lz-under-chevron: var(--rb-icon-chevron) }
.lz-under .lz-model, .lz-under .lz-think-chip { height: 36px; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body) }
.lz-under .rb-composer__tool .ic, .lz-under .lz-brain .ic { width: var(--lz-under-icon); height: var(--lz-under-icon) }
.lz-under .lz-model__logo img, .lz-under .lz-model__logo > * { width: var(--lz-under-icon); height: var(--lz-under-icon);
  font-size: calc(var(--lz-under-icon) - 3px); line-height: var(--lz-under-icon) }
.lz-under .lz-model > i:last-child .ic, .lz-under .lz-think-chip > i:last-child .ic { width: var(--lz-under-chevron); height: var(--lz-under-chevron); color: var(--rb-muted) }
@media (max-width: 720px) {
  .rb-chat__compose .rb-composer { border-radius: 26px }
  .rb-chat__compose .lz-cmp__row .rb-composer__input { min-height: 38px; padding: 8px 4px 8px 12px }
  .lz-cmp__row .rb-chat__send.rb-btn--round, .lz-cmp__row .rb-chat__stop { width: 38px; min-width: 38px; height: 38px }
  .rb-chat__compose .lz-under { justify-content: space-evenly; gap: 4px; padding: 6px 2px 0 }
  .rb-chat__compose .lz-under > * { margin-left: 0 !important }
  /* телефон: файл, модель, мышление, микрофон — поровну по всей ширине (решение владельца 04.11.2026) */
  .rb-chat__compose .lz-under [data-attach] { order: 0 } .rb-chat__compose .lz-under .lz-model { order: 1; margin-left: 0 !important }
  .rb-chat__compose .lz-under .lz-think-chip { order: 2 } .rb-chat__compose .lz-under [data-mic] { order: 3; margin-left: 0 !important }
  .rb-chat__compose .lz-under { --lz-under-icon: 27px }
}
/* Подложка цвета чата под строкой значков — от середины поля до низа экрана и чуть шире колонки ленты: лента не
   просвечивает за значками — и на телефоне, и на компьютере. Границей служит само поле: оно непрозрачное и перекрывает
   ленту, текст виден до его верхнего края */
.rb-chat__compose::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: 26px; bottom: -48px;
  background: var(--lz-paper); pointer-events: none }
.rb-chat__compose .rb-composer { background: var(--rb-canvas); -webkit-backdrop-filter: none; backdrop-filter: none }
@media (max-width: 720px) { .rb-chat__compose::before { left: -12px; right: -12px } }

html.lz-dark { --lz-think-grey: #9A97A6 }
html.lz-dark { --lz-think-violet: #A78BFA; --lz-think-magenta: #E879F9 }

/* Компьютер: модель и мышление — справа под полем, их окна открываются справа, над кнопками. Окно модели с кнопки —
   без ряда разделов (он только у «@»); на телефоне ряд остаётся ради крестика «закрыть» */
@media (min-width: 721px) {
  .lz-think, .lz-models.is-base { left: auto; right: 0 }
  .lz-models.is-base .lz-models__kinds { display: none }
}

/* Телефон: кнопка меню, название беседы и «…» лежат прямо на верхней подложке — без своих кружков, рамок и теней
   (правило в конце файла: общее для компьютера, выше, ставит им рамку с !important). Компьютер — как был */
@media (max-width: 720px) {
  .rb-chat__title-button, .rb-mobilebar__menu, .lz-chat-more, .rb-chat__toolbar .lz-chat-more { border: 0 !important; background: transparent; box-shadow: none }
  .rb-chat__title-button:active, .rb-mobilebar__menu:active, .rb-chat__toolbar .lz-chat-more:active { background: var(--lz-hover) }
  .rb-chat__title-button { font-weight: 600 }
}

/* ---------- разделы в окне выбора модели и «@» (app.js KINDS, drawKinds) ----------
   Одно окно: «Тексты» — модель беседы (вкладки семейств, как было); видео, фото, музыка, звуки — строки моделей,
   нажатие ставит модель чипом над текстом в поле. «@» в поле открывает это же окно. Чипы — бирюзой брендбука */
/* разделы полного окна, крестик, строка под стрелками — в brand/pickers.css (общий слой) */
.lz-mention .lz-logo-img { width: 18px; height: 18px }
.lz-mentions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0 }
.lz-mentions[hidden] { display: none }
.lz-mention { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px 3px 7px; border-radius: 8px;
  background: color-mix(in srgb, #1F6E7A 12%, var(--rb-canvas)); color: #13505A; font: 500 13.5px/1.4 var(--rb-font-body) }
.lz-mention > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-mention__x { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: inherit; font: 400 15px/1 var(--rb-font-body); opacity: .6; cursor: pointer }
.lz-mention__x:hover { opacity: 1; background: color-mix(in srgb, #1F6E7A 16%, transparent) }
.lz-mentions--msg { padding: 0 0 6px }
html.lz-dark .lz-mention { background: rgba(143, 214, 207, .14); color: #BFEAE5 }

/* пункт беседы в панели — ссылка без href (app.js drawConversations): курсор руки оставляем */
.rb-nav-item--chat { cursor: pointer }

/* черновик грузится — поле спрятано до «рождения» (app.js loadFeed) */
.rb-chat__compose.lz-wait { visibility: hidden }

/* ---------- Задачи (user_tasks.py, 01.11.2026) ----------
   Ложка сама собирает задачу из повторяющихся просьб. /tasks — сетка карточек; /tasks/<id> — беседа задачи и справа
   «Как я делаю» (правится руками). Иконки — только из набора сайта (icons.json), знак Ложки — «собрала Ложка» */
.lz-nav-tasks { margin-top: 2px; text-decoration: none; color: inherit }
.lz-nav-tasks.is-active { background: var(--rb-surface-soft); color: var(--rb-ink) }
.lz-nav-count { margin-left: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rb-surface-soft);
  color: var(--rb-muted); font: 600 11px/18px var(--rb-font-body); text-align: center; font-variant-numeric: tabular-nums }
.lz-nav-tasks.is-active .lz-nav-count { background: var(--rb-canvas) }
.lz-ticon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: color-mix(in srgb, var(--lz-mark) 12%, var(--rb-canvas)); color: var(--lz-mark) }
.lz-ticon .ic { width: 20px; height: 20px }
.lz-mark-sm { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%; vertical-align: -3px;
  background: url(/static/favicon.svg) center / contain no-repeat }

/* список: /tasks */
.lz-tpage { height: 100vh; height: 100dvh; overflow-y: auto; padding: 28px 34px 48px }
.lz-tpage[hidden] { display: none }
.lz-tpage__head { display: flex; align-items: flex-start; gap: 12px; max-width: 1080px; margin: 0 auto 26px }
.lz-tpage__title { margin: 0 0 6px; font: 600 30px/1.15 var(--rb-font-heading); letter-spacing: -.02em }
.lz-tpage__lead { margin: 0; max-width: 640px; color: var(--rb-muted); font-size: 15px; line-height: 1.55 }
.lz-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 1080px; margin: 0 auto }
.lz-tcardlink { display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 18px; border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-lg); background: var(--rb-canvas); color: var(--rb-ink); text-decoration: none;
  transition: border-color var(--rb-ease), box-shadow var(--rb-ease), transform var(--rb-ease) }
.lz-tcardlink:hover { border-color: color-mix(in srgb, var(--rb-ink) 22%, var(--rb-line)); box-shadow: var(--rb-shadow-hover); transform: translateY(-1px) }
.lz-tcardlink__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px }
.lz-tcardlink__meta { color: var(--rb-faint); font-size: 12px; white-space: nowrap }
.lz-tcardlink__title { font: 600 17px/1.3 var(--rb-font-heading) }
.lz-tcardlink__hint { flex: 1; margin: 0; color: var(--rb-muted); font-size: 13.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.lz-tcardlink__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px;
  border-top: 1px solid var(--rb-line); color: var(--rb-faint); font-size: 12px }
.lz-tcardlink__go { color: var(--rb-ink); font-weight: 600 }
.lz-tcardlink__go::after { content: " →" }
.lz-tempty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 48px 16px; text-align: center }
.lz-tempty__mark { width: 44px; height: 44px; border-radius: 50%; background: url(/static/favicon.svg) center / contain no-repeat }
.lz-tempty b { font: 600 17px/1.3 var(--rb-font-heading) }
.lz-tempty p { max-width: 460px; margin: 0; color: var(--rb-muted); font-size: 14px; line-height: 1.55 }

/* страница задачи: беседа + «Как я делаю» */
.rb-workspace__main.is-task { display: flex; align-items: stretch }
.rb-workspace__main.is-task > .rb-chat { flex: 1; min-width: 0 }
.lz-task-crumb { color: var(--rb-muted); font-size: 13px; text-decoration: none; white-space: nowrap }
.lz-task-crumb:hover { color: var(--rb-ink) }
.lz-task-crumb::after { content: "/"; margin: 0 2px 0 8px; color: var(--rb-faint) }
.lz-task-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: color-mix(in srgb, var(--lz-mark) 12%, var(--rb-canvas)); color: var(--lz-mark) }
.lz-task-icon .ic { width: 16px; height: 16px }
.lz-tpanel-toggle { display: none; height: 32px; padding: 0 12px; font-size: 13px }
.lz-tpanel { width: 360px; flex: none; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 28px; border-left: 1px solid var(--rb-line); background: var(--lz-paper) }
.lz-tpanel[hidden] { display: none }
.lz-tpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.lz-tpanel__head b { font: 600 16px/1.3 var(--rb-font-heading) }
.lz-tpanel__close { display: none }
.lz-tpanel__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--rb-muted); font-size: 12.5px; line-height: 1.45 }
.lz-tpanel__when { margin: 2px 0 0; color: var(--rb-faint); font-size: 12px; line-height: 1.45 }
.lz-tpanel__delete { align-self: flex-start; color: #B4442F }
.lz-tsec { padding: 13px 14px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas) }
.lz-tsec h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--rb-muted);
  font: 600 11.5px/1.2 var(--rb-font-body); letter-spacing: .05em; text-transform: uppercase }
.lz-tsec h4 .ic { width: 15px; height: 15px }
.lz-tsec p { margin: 0; font-size: 14px; line-height: 1.5 }
.lz-tsec.is-memory { background: color-mix(in srgb, #F5C850 9%, var(--rb-canvas)); border-color: color-mix(in srgb, #E3A57F 35%, var(--rb-line)) }
html.lz-dark .lz-tsec.is-memory { background: rgba(232, 188, 88, .07) }
.lz-titems { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none }
.lz-titem { position: relative; display: flex; align-items: flex-start; gap: 6px; margin: 0 -6px; padding: 5px 6px; border-radius: 8px;
  font-size: 14px; line-height: 1.45 }
.lz-titems .lz-titem::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--rb-faint) }
.lz-titem__text { flex: 1; min-width: 0 }
.lz-titem__edit, .lz-titem__del { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--rb-faint); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s }
.lz-titem__edit .ic, .lz-titem__del .ic { width: 14px; height: 14px }
.lz-titem:hover { background: var(--rb-surface-soft) }
.lz-titem:hover .lz-titem__edit, .lz-titem:hover .lz-titem__del, .lz-titem:focus-within .lz-titem__edit, .lz-titem:focus-within .lz-titem__del { opacity: 1 }
.lz-titem__edit:hover, .lz-titem__del:hover { color: var(--rb-ink); background: var(--rb-canvas) }
@media (hover: none) { .lz-titem__edit, .lz-titem__del { opacity: .7 } }
.lz-tadd { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 0; border: 0; background: none;
  color: var(--rb-muted); font: 500 13px/1.2 var(--rb-font-body); cursor: pointer }
.lz-tadd .ic { width: 14px; height: 14px }
.lz-tadd:hover { color: var(--rb-ink) }
.lz-tedit { display: grid; gap: 8px; margin: 4px 0 }
.lz-tedit textarea { width: 100%; resize: vertical; font-size: 14px }
.lz-tedit__row { display: flex; gap: 6px }
.lz-tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.lz-tchip { padding: 3px 9px; border-radius: 999px; background: var(--rb-surface-soft); color: var(--rb-muted); font: 500 12.5px/1.4 var(--rb-font-body) }
.lz-tsteps { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: st }
.lz-tsteps li { position: relative; padding: 6px 10px 6px 32px; border: 1px solid var(--rb-line); border-radius: 8px; font-size: 13.5px; line-height: 1.4; counter-increment: st }
.lz-tsteps li::before { content: counter(st); position: absolute; left: 9px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--rb-surface-soft); color: var(--rb-muted); font: 600 10.5px/16px var(--rb-font-body); text-align: center }
@media (max-width: 1100px) {
  .lz-tpanel { width: 320px }
}
@media (max-width: 900px) {
  .lz-tpanel-toggle:not([hidden]) { display: inline-flex; align-items: center }
  .lz-tpanel { position: fixed; z-index: 60; inset: auto 0 0 0; width: auto; height: auto; max-height: 82dvh; border-left: 0;
    border-top: 1px solid var(--rb-line); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
    transform: translateY(105%); transition: transform .25s ease }
  html.lz-tpanel-open .lz-tpanel { transform: none }
  .lz-tpanel__close { display: grid }
  .lz-task-crumb { display: none }
  .lz-tpage { padding: 18px 14px 40px }
  .lz-tpage__title { font-size: 26px }
}

/* плитка задачи в ленте (render.js taskTiles) */
.lz-rich .lz-ttile, .lz-ttile { display: flex; align-items: center; gap: 12px; max-width: min(520px, 100%); margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas); color: var(--rb-ink);
  text-decoration: none; white-space: normal; transition: border-color var(--rb-ease), box-shadow var(--rb-ease) }
.lz-ttile:hover { border-color: color-mix(in srgb, var(--rb-ink) 22%, var(--rb-line)); box-shadow: var(--rb-shadow-hover) }
.lz-ttile__copy { display: grid; gap: 2px; flex: 1; min-width: 0 }
.lz-ttile__copy b { font: 600 15px/1.3 var(--rb-font-body) }
.lz-ttile__hint { color: var(--rb-muted); font-size: 13px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-ttile__meta { color: var(--rb-faint); font-size: 12px }
.lz-ttile__go { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--rb-ink); color: var(--rb-canvas); font: 600 12.5px/1 var(--rb-font-body) }
.lz-ttile.is-gone { opacity: .6 }
@media (max-width: 560px) { .lz-ttile__go { display: none } }
.lz-starter--task { border-color: color-mix(in srgb, var(--lz-mark) 35%, var(--rb-line)); color: var(--rb-ink) }
.lz-starter--task .ic { color: var(--lz-mark); opacity: 1 }
.rb-chat[hidden] { display: none }

/* Задачи, 01.11.2026 (вторая итерация): панель — вплотную к правому краю, свёрнутая — кнопкой «Как я делаю» в шапке;
   шапка беседы не залезает подложкой на панель; пустая беседа задачи — вступление задачи вместо приветствия */
.lz-tpage__head .lz-panel-show { display: none }
@media (min-width: 821px) { html.lz-panel-hidden .lz-tpage__head .lz-panel-show { display: grid } }
.rb-workspace__main.is-task { padding-right: 0 }
@media (min-width: 721px) { .rb-workspace__main.is-task .rb-chat__toolbar::before { inset: 0 0 0 -34px } }
.rb-workspace__main.is-task .lz-starters { display: none !important }
.lz-tpanel { padding-top: 0 }
.lz-tpanel__head { position: sticky; top: 0; z-index: 2; min-height: 64px; margin: 0 -18px; padding: 12px 12px 12px 18px;
  background: var(--lz-paper); border-bottom: 1px solid var(--rb-line) }
.lz-tpanel__close { display: grid }
@media (min-width: 901px) {
  .rb-workspace__main.is-task.is-tpanel-collapsed .lz-tpanel { display: none }
  .rb-workspace__main.is-task.is-tpanel-collapsed .lz-tpanel-toggle:not([hidden]) { display: inline-flex; align-items: center }
}
.lz-tsec.is-connect { border-style: dashed }
.lz-tconnect { display: grid; gap: 6px; justify-items: start }
.lz-tconnect + .lz-tconnect { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rb-line) }
.lz-tconnect b { font: 600 14px/1.35 var(--rb-font-body) }
.lz-tconnect p { margin: 0; color: var(--rb-muted); font-size: 13px; line-height: 1.45 }
.lz-tconnect .lz-tchips { margin-top: 0 }
.lz-tconnect .rb-btn { height: 32px; padding: 0 14px; font-size: 13px }
.lz-tconnect__later { color: var(--rb-faint); font-size: 12px; line-height: 1.4 }
.lz-ticon--lg { width: 56px; height: 56px; border-radius: 16px }
.lz-ticon--lg .ic { width: 26px; height: 26px }
.lz-task-intro { display: grid; justify-items: center; gap: 8px; text-align: center }
.lz-task-intro strong { font: 600 26px/1.2 var(--rb-font-heading); letter-spacing: -.01em }
.lz-task-intro__hint { max-width: 520px; margin: 0; color: var(--rb-muted); font-size: 15px; line-height: 1.5 }
.lz-task-intro__steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 620px; margin-top: 4px }
.lz-task-intro__label { color: var(--rb-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px }
.lz-task-intro__step { padding: 4px 10px; border: 1px solid var(--rb-line); border-radius: 8px; background: var(--rb-canvas); font-size: 13px; line-height: 1.35 }
.lz-task-intro__steps i { color: var(--rb-faint); font-style: normal }
.lz-task-intro__note { margin: 2px 0 0; color: var(--rb-faint); font-size: 12.5px }
.rb-chat.is-empty .rb-chat__empty.lz-task-intro { display: grid; justify-items: center; gap: 8px; font-size: 15px; text-align: center }
.rb-chat.is-empty .lz-task-intro strong { font: 600 26px/1.2 var(--rb-font-heading) }
.lz-ttile__mark { width: 28px; height: 28px }

/* Задачи, 01.11.2026 (третья итерация): значки — обычные SVG из набора без плашек, слева от текста; список показывает
   последний результат; шапка задачи без карандаша и «Поделиться»; пустая задача — зона приёма материала; исполнения —
   «прислали» компактно, результат карточкой с «В образцы»; «Как я делаю» — плоская, без рамок у разделов */
.lz-tcardlink { gap: 12px; min-height: 0 }
.lz-tcardlink__head { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start }
.lz-tcardlink__icon .ic, .lz-tcardlink__icon { width: 28px; height: 28px; color: var(--rb-ink) }
.lz-tcardlink__htext { display: grid; gap: 3px; min-width: 0 }
.lz-tcardlink__title { font: 600 17px/1.3 var(--rb-font-heading) }
.lz-tcardlink__meta { color: var(--rb-faint); font-size: 12.5px; white-space: normal }
.lz-tcardlink__result { flex: 1; padding: 10px 12px; border-left: 2px solid var(--lz-mark); border-radius: 0 10px 10px 0; background: var(--rb-surface-soft) }
.lz-tcardlink__label { display: block; margin-bottom: 3px; color: var(--rb-faint); font-size: 11.5px }
.lz-tcardlink__result p { margin: 0; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.lz-tcardlink__rules { flex: 1; margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--rb-muted); font-size: 13.5px; line-height: 1.4 }
.lz-tcardlink__foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.lz-tcardlink__foot { gap: 14px }
.lz-tcardlink__go { flex: none }

/* шапка задачи */
.lz-task-icon { width: 22px; height: 22px; background: none; border-radius: 0; color: var(--rb-ink) }
.lz-task-icon .ic { width: 20px; height: 20px }
.rb-workspace__main.is-task [data-title-open] .ic,
.rb-workspace__main.is-task [data-media-open],
.rb-workspace__main.is-task [data-delete-group] { display: none !important }
.rb-workspace__main.is-task [data-title-open] { cursor: default; padding-left: 4px }

/* пустая задача: название с иконкой слева, «Получите» строкой, поле — зона приёма */
.rb-chat.is-empty .rb-chat__empty.lz-task-intro { gap: 10px }
.lz-task-intro__head { display: flex; align-items: center; justify-content: center; gap: 14px }
.lz-task-intro__icon, .lz-task-intro__icon .ic { width: 34px; height: 34px; color: var(--rb-ink) }
.rb-chat.is-empty .lz-task-intro strong { font: 600 30px/1.2 var(--rb-font-heading); letter-spacing: -.015em }
.lz-task-intro__get { max-width: 640px; margin: 0; color: var(--rb-muted); font-size: 15px; line-height: 1.5 }

/* исполнения: что прислали — компактно, результат — карточкой */
.rb-workspace__main.is-task .lz-msg.is-user .lz-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden }
.rb-workspace__main.is-task .lz-msg.is-assistant > .lz-rich { padding: 14px 18px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg);
  background: var(--rb-canvas) }
.lz-msg-sample { display: inline-flex; align-items: center; gap: 5px; width: auto !important; padding: 0 8px !important; font: 500 12.5px/1 var(--rb-font-body) }
.lz-msg-sample svg { width: 15px; height: 15px }
.lz-msg-sample.is-done { color: var(--lz-mark) }

/* «Как я делаю» — плоская: разделы без рамок, тонкие разделители, пункты на всю ширину, правка — поверх строки */
.lz-tpanel { gap: 0 }
.lz-tpanel__note { padding: 12px 0 14px }
.lz-tpanel .lz-tsec { padding: 14px 0; border: 0; border-top: 1px solid var(--rb-line); border-radius: 0; background: none }
.lz-tpanel .lz-tsec h4 { margin-bottom: 8px; color: var(--rb-ink); font: 600 14px/1.3 var(--rb-font-body); letter-spacing: 0; text-transform: none }
.lz-tpanel .lz-tsec h4 .ic { width: 16px; height: 16px; color: var(--rb-muted) }
.lz-tpanel .lz-tsec.is-memory { background: none; border-color: var(--rb-line) }
.lz-tpanel .lz-tsec.is-memory .lz-titems { padding-left: 12px; border-left: 2px solid color-mix(in srgb, #E3A57F 70%, transparent) }
.lz-tpanel .lz-tsec.is-connect { border-style: solid }
.lz-tsec__details { margin-top: 6px !important; color: var(--rb-muted); font-size: 13px !important }
.lz-tpanel .lz-titems { counter-reset: rule }
.lz-tpanel .lz-tsec:not(.is-memory) .lz-titems .lz-titem { counter-increment: rule }
.lz-tpanel .lz-tsec:not(.is-memory) .lz-titems .lz-titem::before { content: counter(rule) "."; width: auto; height: auto; margin: 0; border-radius: 0;
  background: none; color: var(--rb-faint); font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; min-width: 16px }
.lz-tpanel .lz-tsec.is-memory .lz-titem::before { display: none }
.lz-titem { padding-right: 6px }
.lz-titem__edit, .lz-titem__del { position: absolute; top: 4px; background: var(--rb-canvas); box-shadow: 0 0 0 1px var(--rb-line) }
.lz-titem__edit { right: 32px }
.lz-titem__del { right: 4px }
.lz-tpanel .lz-tsteps li { border: 0; padding: 3px 0 3px 26px }
.lz-tpanel .lz-tsteps li::before { left: 0; top: 4px }

/* Задачи, 01.11.2026 (четвёртая итерация): число — тёмной капсулой; список — короткая фраза задачи; страница — T1:
   поле ввода — зона приёма («перетащите сюда», «выбрать файлы», ниже текст и комментарий), «Как я делаю» читается,
   правится по «Изменить»; ссылки-образцы — со стилем, разобранным один раз */
.lz-nav-count { margin-left: 4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rb-ink); color: var(--rb-canvas);
  font: 600 11.5px/20px var(--rb-font-body) }
.lz-nav-tasks.is-active .lz-nav-count { background: var(--rb-ink) }
.lz-tcardlink { min-height: 170px }
.lz-tcardlink__head { display: flex; gap: 12px; align-items: flex-start; grid-template-columns: none }
.lz-tcardlink__icon, .lz-tcardlink__icon .ic { width: 26px; height: 26px; flex: none; color: var(--rb-ink) }
.lz-tcardlink__summary { flex: 1; margin: 0; color: var(--rb-muted); font-size: 14.5px; line-height: 1.5 }
.lz-tcardlink__foot span:first-child { white-space: nowrap }

/* страница задачи: поле ввода — зона приёма, уже */
.lz-drophead { display: none }
.rb-workspace__main.is-task .lz-drophead { display: flex; align-items: center; gap: 14px; margin: 6px 6px 0; padding: 18px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--rb-ink) 26%, var(--rb-line)); border-radius: 16px; background: var(--rb-surface-soft) }
.lz-drophead__icon, .lz-drophead__icon .ic { width: 28px; height: 28px; flex: none; color: var(--rb-muted) }
.lz-drophead__copy { display: grid; gap: 2px; flex: 1; min-width: 0 }
.lz-drophead__copy b { font: 600 15px/1.3 var(--rb-font-body) }
.lz-drophead__copy span { color: var(--rb-faint); font-size: 13px }
.lz-drophead .rb-btn { flex: none; height: 34px; padding: 0 14px; font-size: 13.5px }
.rb-workspace__main.is-task .rb-chat:not(.is-empty) .lz-drophead { display: none }
.rb-chat.is-empty .rb-chat__empty.lz-task-intro { justify-items: center }
.lz-task-intro__head { display: flex; align-items: center; gap: 14px; text-align: left }
.lz-task-intro__head > div { display: grid; gap: 2px }
.lz-task-intro__meta { color: var(--rb-faint); font-size: 13.5px }
.lz-task-intro__get { margin-top: 2px }

/* «Как я делаю»: читается, правится по «Изменить» */
.lz-tpanel { padding: 0 }
.lz-tpanel__head { margin: 0; gap: 4px; padding: 12px 10px 12px 20px }
.lz-tpanel__head b { flex: 1 }
.lz-tpanel__edit:hover, .lz-tpanel__close:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-tpanel.is-editing .lz-tpanel__edit { background: var(--rb-ink); color: var(--rb-canvas) }
.lz-tpanel__body { display: flex; flex-direction: column; padding: 4px 20px 24px }
.lz-tpanel .lz-tsec { padding: 16px 0 }
.lz-tpanel .lz-tsec:first-child { border-top: 0 }
.lz-tpanel .lz-tsec h4 { margin-bottom: 10px; color: var(--rb-muted); font: 500 13px/1.2 var(--rb-font-body) }
.lz-tpanel ol.lz-titems { padding-left: 0 }
.lz-tpanel .lz-titem { margin: 0; padding: 4px 0; font-size: 14.5px; line-height: 1.5 }
.lz-tpanel:not(.is-editing) .lz-titem:hover { background: none }
.lz-tpanel.is-editing .lz-titem { margin: 0 -6px; padding: 5px 64px 5px 6px }
.lz-tsec__empty { margin: 0; color: var(--rb-faint); font-size: 13px; line-height: 1.5 }
.lz-tstyle { margin-top: 4px; font-size: 12.5px; color: var(--rb-faint) }
.lz-tstyle summary { cursor: pointer; list-style: none }
.lz-tstyle summary::before { content: "✓ "; color: var(--rb-good) }
.lz-tstyle p { margin: 6px 0 0; white-space: pre-line; color: var(--rb-muted); line-height: 1.5 }
.lz-tpanel__foot { padding-top: 16px; border-top: 1px solid var(--rb-line) }
.lz-tpanel__delete { padding: 0; border: 0; background: none; color: var(--rb-faint); font: 400 13px/1.4 var(--rb-font-body);
  text-decoration: underline; text-decoration-color: var(--rb-line); text-underline-offset: 3px; cursor: pointer }
.lz-tpanel__delete:hover { color: #B4442F }
.lz-tpanel__delete[data-sure="1"] { color: #B4442F }

/* Новый чат, у кого есть задачи (app.js starters): сначала «Ваши задачи» карточками — это переход в задачу, ниже
   «Или попробуйте» и 4 подсказки; высота блока — как у прежних 9 подсказок, поле и приветствие стоят на месте */
.lz-ntasks__head, .lz-ntasks, .lz-ntasks__or { flex-basis: 100% }
.lz-ntasks__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; color: var(--rb-faint); font-size: 12.5px }
.lz-ntasks__all { color: var(--rb-muted); text-decoration: none }
.lz-ntasks__all:hover { color: var(--rb-ink) }
.lz-ntasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.lz-ntask { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--rb-line); border-radius: 14px;
  background: var(--rb-canvas); color: var(--rb-ink); text-align: left; text-decoration: none; transition: border-color .15s, box-shadow .15s }
.lz-ntask:hover { border-color: color-mix(in srgb, var(--rb-ink) 25%, var(--rb-line)); box-shadow: var(--rb-shadow-hover) }
.lz-ntask__icon, .lz-ntask__icon .ic { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--rb-ink) }
.lz-ntask__copy { display: grid; gap: 2px; min-width: 0 }
.lz-ntask__copy b { font: 600 13.5px/1.3 var(--rb-font-body); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.lz-ntask__copy small { color: var(--rb-faint); font-size: 12px }
.lz-ntasks__or { margin-top: 6px; color: var(--rb-faint); font-size: 12.5px; text-align: center }
@media (max-width: 720px) {
  .rb-chat.is-empty .lz-starters.has-tasks { flex-wrap: wrap; overflow: visible }
  .lz-ntasks { display: flex; overflow-x: auto; scrollbar-width: none }
  .lz-ntask { flex: 0 0 72% }
}
/* 05.11.2026, телефон: новый чат — как на компьютере: приветствие и под ним поле, выше середины экрана; «Ваши задачи»
   и подсказки не показываем — места мало. С клавиатурой поле у клавиатуры, приветствие над ним, если влезает под
   шапку (app.js fitGreeting). Беседа задачи — как была */
@media (max-width: 720px) {
  .rb-workspace__main:not(.is-task) .rb-chat.is-empty .lz-starters { display: none }
  .rb-workspace__main:not(.is-task) .rb-chat.is-empty .rb-chat__compose { bottom: 38% }
  .rb-workspace__main:not(.is-task) .rb-chat.is-empty .rb-chat__empty { top: auto; bottom: calc(38% + var(--rb-compose-height, 138px) + 24px); transform: none }
  html.lz-kbd .rb-workspace__main:not(.is-task) .rb-chat.is-empty .rb-chat__compose { bottom: 8px }
  html.lz-kbd .rb-workspace__main:not(.is-task) .rb-chat.is-empty .rb-chat__empty { bottom: calc(8px + var(--rb-compose-height, 138px) + 24px) }
  .rb-chat.is-empty.lz-greet-off .rb-chat__empty { visibility: hidden }
}
/* панель задачи: «редактировать» — значком */
.lz-tpanel__edit { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px }
.lz-tpanel__edit .ic { width: 18px; height: 18px }
.lz-tpanel.is-editing .lz-tpanel__edit { background: var(--rb-ink); color: var(--rb-canvas) }

/* 01.11.2026, правки по скриншотам владельца: новый чат с задачами — группа по центру экрана; «Поделиться» в пустом чате
   не нужен; шапки — одной высоты (52 px с линией, как у беседы); «Правила задачи ›» — справа в шапке; фото и видео в поле
   — квадратные плитки */
@media (min-width: 721px) {
  .rb-chat.is-empty.has-tasks .rb-chat__compose { bottom: max(24px, calc((100% - var(--rb-compose-height, 138px) - 120px) / 2)) }
  .rb-chat.is-empty.has-tasks .rb-chat__empty { bottom: calc(max(24px, calc((100% - var(--rb-compose-height, 138px) - 120px) / 2)) + var(--rb-compose-height, 138px) + 40px) }
}
.rb-chat.is-empty [data-share-open] { display: none !important }

/* шапки одной высоты: беседа (52 px на компьютере), «Правила задачи», «Мои задачи» */
.lz-tpanel__head { height: 52px; min-height: 52px; padding: 0 8px 0 20px; border-bottom: 1.5px solid var(--rb-line) }
.lz-tpage { padding: 0 0 48px }
.lz-tpage__bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; height: 52px; margin: 0 22px 26px;
  padding: 0 12px; border-bottom: 1.5px solid var(--rb-line); background: var(--lz-paper); font-size: 15px }
.lz-tpage__bar b { font-weight: 600 }
.lz-tpage__bar .lz-panel-show { display: none }
@media (min-width: 821px) { html.lz-panel-hidden .lz-tpage__bar .lz-panel-show { display: grid } }
.lz-tpage__head { padding: 0 34px; margin-bottom: 22px }
.lz-tpage__grid, .lz-tgrid { padding: 0 34px }
@media (max-width: 720px) { .lz-tpage__bar { margin: 0 10px 18px; padding-left: 52px } .lz-tpage__head, .lz-tgrid { padding: 0 14px } }

/* «Правила задачи ›» — справа в шапке беседы; в панели — стрелка «скрыть» */
/* «Правила задачи» — как «Поделиться» и другие кнопки шапки: плоская, значок --lz-icon, круглая подсветка; стоит после «Поделиться» */
.lz-tpanel-toggle { display: none; align-items: center; gap: 6px; height: 38px; margin-left: auto; padding: 0 12px; border: 0;
  border-radius: 999px; background: transparent; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer;
  pointer-events: auto; transition: background var(--rb-ease) }
.lz-tpanel-toggle:hover, .lz-tpanel-toggle:focus-visible { outline: none; background: var(--lz-hover) }
.lz-tpanel-toggle .ic { width: var(--lz-icon); height: var(--lz-icon) }
@media (min-width: 761px) { .rb-chat__toolbar .lz-share-open + .lz-tpanel-toggle { margin-left: 2px } }

/* задача: заголовок без иконки и счётчика */
.rb-chat.is-empty .rb-chat__empty.lz-task-intro { gap: 8px }

/* поле ввода: фото и видео — квадратные плитки 84 px, «без сжатия» снизу, крестик в углу */
.lz-file--tile { position: relative; flex-direction: column; width: 84px; height: 84px; padding: 0 !important; overflow: hidden; border-radius: 12px }
.lz-file--tile .lz-file__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 }
.lz-file--tile .rb-composer__file-name, .lz-file--tile .rb-composer__file-state { display: none }
.lz-file--tile .lz-file__raw { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 0; border-radius: 6px; text-align: center;
  background: rgba(17, 17, 17, .62); color: #fff; font-size: 10.5px; margin: 0 }
.lz-file--tile .lz-file__remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(17, 17, 17, .62); color: #fff }
.lz-file--tile .lz-file__remove .ic { width: 13px; height: 13px }
.lz-file--tile.is-loading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55) }

/* Гость с черновиком (со страницы модели): вход — сразу над полем, той же плашкой, что на главной (бегущий свет по рамке,
   «Войти через» Telegram · Яндекс ID), только светлой; «Войти по почте» — строкой ниже. «Отправить» — то же в окне */
.lz-glogin { display: grid; justify-items: center; gap: 10px; margin: 0 auto 16px; pointer-events: auto; text-align: center }
.lz-glogin[hidden] { display: none }
.lz-glogin__hi { margin: 0; color: var(--rb-ink); font: 600 17px/1.35 var(--rb-font-body) }
.lz-glogin__pill { position: relative; display: inline-flex; align-items: stretch; padding: 5px; border: 1px solid var(--rb-line); border-radius: 999px;
  background: var(--rb-canvas); box-shadow: 0 14px 36px -18px color-mix(in srgb, var(--rb-ink) 40%, transparent) }
.lz-glogin__label { display: inline-flex; align-items: center; padding: 0 14px 0 16px; color: var(--rb-muted); font: 500 14.5px/1 var(--rb-font-body); white-space: nowrap }
.lz-glogin__opt { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 0; border-radius: 999px; background: none;
  color: var(--rb-ink) !important; font: 600 15px/1 var(--rb-font-body); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background .18s }
.lz-glogin__opt::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--rb-line) }
.lz-glogin__opt:hover::before, .lz-glogin__opt:hover + .lz-glogin__opt::before { opacity: 0 }
.lz-glogin__opt svg { width: 19px; height: 19px; flex: none; fill: currentColor; transition: fill .18s }
.lz-glogin__opt.is-tg:hover { background: rgba(42, 171, 238, .12) }
.lz-glogin__opt.is-tg:hover svg { fill: #2AABEE }
.lz-glogin__opt.is-ya:hover { background: rgba(252, 63, 29, .1) }
.lz-glogin__opt.is-ya:hover svg { fill: #FC3F1D }
.lz-glogin__opt.is-google:hover { background: rgba(66, 133, 244, .12) }   /* как на главной (.lz-land__opt.is-google) */
html[data-no-telegram] .lz-glogin__opt.is-google::before { display: none }   /* Google — единственный: без черты слева */
.lz-glogin__opt:disabled { opacity: .6; cursor: progress }
.lz-glogin__email { padding: 2px 4px; border: 0; background: none; color: var(--rb-muted); font: 500 13.5px/1.4 var(--rb-font-body); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rb-line); text-underline-offset: 3px }
.lz-glogin__email:hover { color: var(--rb-ink) }
.lz-glogin__note { max-width: 380px; margin: 4px 0 0; color: var(--rb-faint); font-size: 12.5px; line-height: 1.5 }
.lz-guest-login { position: relative; width: min(520px, calc(100vw - 24px)); padding: 34px 24px 24px }
.lz-guest-login__close { position: absolute; top: 10px; right: 10px }
.lz-glogin--modal { margin: 0 }
.lz-glogin--modal .lz-glogin__hi { font-size: 19px }
@media (max-width: 720px) {
  .lz-glogin__label { padding: 0 8px 0 12px }
  .lz-glogin__opt { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50% }
  .lz-glogin__opt span { display: none }
  .lz-glogin__opt::before { display: none }
  .lz-glogin__hi { font-size: 16px }
}
.lz-glogin__hi { display: inline-flex; align-items: center; gap: 8px }
.lz-glogin__smile { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--rb-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.lz-glogin__smile path:nth-child(n+3) { stroke-width: 2.6 }
.lz-glogin__sub { margin: -4px 0 2px; color: var(--rb-muted); font-size: 14px; line-height: 1.45 }


/* Блоки ввода задачи (app.js drawTaskInputs): раскладка по числу блоков — 1 во всю ширину, 2 рядом, 3 — первый большой
   и два под ним, 4 — по два; под блоками — обычное поле чата. Только в пустой беседе задачи; дальше — поле со скрепкой */
.lz-tinputs { display: none }
.rb-workspace__main.is-task .rb-chat.is-empty .lz-tinputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px;
  pointer-events: auto }
.lz-tinputs[data-count="1"] > .lz-tblock, .lz-tinputs[data-count="3"] > .lz-tblock:first-child { grid-column: 1 / -1 }
.lz-tblock { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--rb-line); border-radius: 18px;
  background: var(--rb-canvas); box-shadow: 0 8px 26px -18px color-mix(in srgb, var(--rb-ink) 30%, transparent) }
/* Заголовок блока ввода — крупнее: сразу видно, что и куда класть */
.lz-tblock__head { display: flex; align-items: center; gap: 9px; font-size: 14px }
.lz-tblock__head .ic { width: 19px; height: 19px; color: var(--rb-ink) }
.lz-tblock__head b { font: 600 16.5px/1.25 var(--rb-font-heading) }
.lz-tblock__opt { color: var(--rb-faint); font-size: 12.5px }
.lz-tblock__count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--rb-ink); color: var(--rb-canvas);
  font: 600 11.5px/20px var(--rb-font-body); text-align: center }
.lz-tblock__drop { display: grid; justify-items: center; gap: 3px; flex: 1; min-height: 76px; padding: 14px; border: 1.5px dashed color-mix(in srgb, var(--rb-ink) 24%, var(--rb-line));
  border-radius: 14px; background: var(--rb-surface-soft); color: var(--rb-ink); text-align: center; cursor: pointer; align-content: center }
.lz-tblock__drop:hover { border-color: color-mix(in srgb, var(--rb-ink) 45%, var(--rb-line)) }
.lz-tblock__drop b { font: 600 14px/1.3 var(--rb-font-body) }
.lz-tblock__drop span { color: var(--rb-faint); font-size: 12.5px; line-height: 1.4 }
.lz-tinputs[data-count="1"] .lz-tblock__drop, .lz-tinputs[data-count="3"] > .lz-tblock:first-child .lz-tblock__drop { min-height: 110px }
.lz-tblock__field { width: 100%; min-height: 76px; padding: 10px 12px; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-surface-soft);
  color: var(--rb-ink); font: 400 14px/1.45 var(--rb-font-body); resize: vertical; box-sizing: border-box }
input.lz-tblock__field { min-height: 0; height: 42px }
/* Длинный текст в одном блоке не растягивает соседний пустой (кроме раскладки «главный слева на две строки») */
.lz-tinputs:not([data-layout="lead"]) > .lz-tblock { align-self: start }
.lz-tblock__field:focus { outline: none; border-color: color-mix(in srgb, var(--rb-ink) 40%, var(--rb-line)); background: var(--rb-canvas) }
.lz-tblock__tiles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin }
.lz-ttile2, .lz-tblock__add { position: relative; flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden }
.lz-ttile2 .lz-file__thumb, .lz-ttile2 img, .lz-ttile2 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.lz-ttile2.is-loading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55) }
.lz-ttile2.is-error { outline: 2px solid var(--rb-bad) }
.lz-ttile2__x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 17, 17, .62); color: #fff; cursor: pointer }
.lz-ttile2__x .ic { width: 13px; height: 13px }
.lz-ttile2__raw { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 0; border: 0; border-radius: 6px; background: rgba(17, 17, 17, .62);
  color: #fff; font: 500 10.5px/1.2 var(--rb-font-body); cursor: pointer }
.lz-tblock__add { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--rb-ink) 24%, var(--rb-line)); background: none; color: var(--rb-muted); cursor: pointer }
.lz-tblock__add .ic { width: 22px; height: 22px }
.lz-tblock__rows { display: grid; gap: 6px }
.lz-tblock__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--rb-line); border-radius: 10px; font-size: 13.5px }
.lz-tblock__row .ic { width: 16px; height: 16px; color: var(--rb-muted) }
.lz-tblock__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-tblock__row small { color: var(--rb-faint) }
.lz-tblock__row.is-loading { opacity: .6 }
.lz-tblock__x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--rb-faint); cursor: pointer }
.lz-tblock__x .ic { width: 14px; height: 14px }
@media (max-width: 720px) { .rb-workspace__main.is-task .rb-chat.is-empty .lz-tinputs { grid-template-columns: 1fr } .lz-tinputs > .lz-tblock { grid-column: auto !important } }
.rb-workspace__main.is-task .lz-drophead { display: none !important }

/* Результат задачи (render.js resultCard): поля со «скопировать», группы — по картинкам или вариантам */
.lz-result { max-width: 100%; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas); overflow: hidden }
.lz-result__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 16px; border-bottom: 1px solid var(--rb-line); font-size: 14px }
.lz-result__head b { font-weight: 600 }
.lz-result__head b::before { content: "✓"; margin-right: 8px; color: var(--rb-good) }
.lz-result__all { margin-left: auto }
.lz-result__group { padding: 10px 16px 12px }
.lz-result__group + .lz-result__group { border-top: 1px solid var(--rb-line) }
.lz-result__title { margin-bottom: 4px; color: var(--rb-muted); font-size: 13px; font-weight: 600 }
.lz-result__label { padding-top: 2px; color: var(--rb-faint); font-size: 13px }
.lz-result__value { white-space: pre-line; overflow-wrap: anywhere }
.lz-result__note { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--rb-line); color: var(--rb-muted); font-size: 14px }
.lz-result__note > :first-child { margin-top: 0 } .lz-result__note > :last-child { margin-bottom: 0 }
/* «Комментарий Ложки (N)» — свёрнутой строкой под результатом (render.js moreBox, app.js wsNotes) */
.lz-result__more { border-top: 1px solid var(--rb-line) }
.lz-result__moresum { display: flex; align-items: center; gap: 6px; padding: 10px 16px; color: var(--rb-faint); font-size: 13px;
  list-style: none; cursor: pointer; user-select: none }
.lz-result__moresum::-webkit-details-marker { display: none }
.lz-result__moresum::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .15s; margin-right: 4px }
.lz-result__more[open] > .lz-result__moresum::before { transform: rotate(45deg) translate(-1px, -1px) }
.lz-result__moresum:hover { color: var(--rb-ink) }
.lz-result__more > .lz-result__note { border-top: 0; padding-top: 0 }
.lz-result__note > .lz-result__extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rb-line); font: inherit !important; color: inherit }
.lz-result__note > .lz-result__extra:first-child { margin-top: 0; padding-top: 0; border-top: 0 }
.lz-result__foot { padding: 8px 16px 10px; border-top: 1px solid var(--rb-line); color: var(--rb-faint); font-size: 12.5px }
.lz-result__foot .lz-foot { margin: 0 }

/* Задача: поле ввода — то же, что в чате, со знаком Ложки слева и в пустой беседе (связь с ИИ заметнее); ширина — по колонке */
html.lz-field-mark .rb-workspace__main.is-task .rb-chat.is-empty .lz-cmp__mark { display: grid }
html.lz-field-mark .rb-workspace__main.is-task .rb-chat.is-empty .lz-multiline .lz-cmp__mark { display: none }
/* Шапка «Правил задачи» и «Моих задач» — ровно по высоте шапки беседы (--lz-toolbar-h, меряет app.js) */
.lz-tpanel__head { height: var(--lz-toolbar-h, 52px); min-height: var(--lz-toolbar-h, 52px); box-sizing: border-box }
.lz-tpage__bar { height: var(--lz-toolbar-h, 52px); box-sizing: border-box }

/* «Поделиться задачей»: кнопка в шапке задачи — и в пустой беседе задачи тоже; правее «Правила задачи ›» */
@media (min-width: 761px) {
  .rb-workspace__main.is-task .rb-chat.is-empty [data-share-open] { display: inline-flex !important }
}

/* Чужая задача по ссылке (app.js taskShareOpen): без плашек — иконка задачи линией, части результата в зелёной обводке */
.lz-tshare { position: relative; width: min(520px, 94vw); padding: 0; max-height: 90dvh; overflow-y: auto }
.lz-tshare__body { display: grid; gap: 16px; padding: 30px 28px 24px }
.lz-tshare__body > .rb-loading { justify-self: center }
.lz-tshare__intro { display: grid; gap: 6px; padding-right: 32px }
.lz-tshare__what { margin: 0; font-size: 14px; line-height: 1.5 }
.lz-tshare__card { display: grid; gap: 4px; padding: 16px 18px 10px; border: 1px solid var(--rb-line); border-radius: 16px }
.lz-tshare__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px }
.lz-tshare__icon { flex: none; color: var(--rb-ink); padding-top: 1px }
.lz-tshare__icon .ic { width: 22px; height: 22px }
.lz-tshare__htext { display: grid; gap: 2px }
.lz-tshare__name { font: 600 16.5px/1.3 var(--rb-font-body); color: var(--rb-ink) }
.lz-tshare__by { font-size: 13px }
.lz-tshare__lead { margin: 2px 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--rb-ink) }
.lz-tshare__sec { border-top: 1px solid var(--rb-line) }
.lz-tshare__sec > :not(summary) { margin-bottom: 12px }
.lz-tshare__label { display: flex; align-items: center; gap: 8px; padding: 11px 0; cursor: pointer; list-style: none;
  font: 600 12px/1 var(--rb-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--rb-muted) }
.lz-tshare__label::-webkit-details-marker { display: none }
.lz-tshare__label:hover { color: var(--rb-ink) }
.lz-tshare__count { font-weight: 500; letter-spacing: 0 }
.lz-tshare__chev { margin-left: auto }
.lz-tshare__chev .ic { width: 16px; height: 16px; transition: transform .15s }
.lz-tshare__sec[open] .lz-tshare__chev .ic { transform: rotate(180deg) }
.lz-tshare__chips { display: flex; flex-wrap: wrap; gap: 6px }
.lz-tshare__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--rb-line);
  border-radius: 999px; font-size: 13.5px; color: var(--rb-ink) }
.lz-tshare__chip .ic { width: 15px; height: 15px; color: var(--rb-muted) }
.lz-tshare__chip.is-out { border-color: var(--rb-good); color: var(--rb-good) }
.lz-tshare__rules { display: grid; gap: 6px }
.lz-tshare__rule { margin: 0; padding-left: 14px; position: relative; font-size: 14px; line-height: 1.45 }
.lz-tshare__rule::before { content: ''; position: absolute; left: 2px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--rb-muted) }
.lz-tshare .lz-share__main { justify-self: center; gap: 8px }
.lz-tshare__mark { width: 18px; height: 18px; fill: currentColor; flex: none }
.lz-tshare__note { margin: -6px 0 0; font-size: 12.5px; line-height: 1.45; text-align: center }

/* Результат задачи: «Поправить», версии (‹ Версия 2 из 2 ›), «Сравнить» — в шапке карточки (app.js drawVersion) */
.lz-result__head { flex-wrap: wrap }
.lz-result__ver { display: inline-flex; align-items: center; gap: 2px; color: var(--rb-muted); font-size: 13px }
.lz-result__ver[hidden] { display: none }
.lz-result__arrow { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--rb-ink); cursor: pointer }
.lz-result__arrow:hover:not(:disabled) { background: var(--lz-hover) }
.lz-result__arrow:disabled { color: var(--rb-faint); cursor: default }
.lz-result__arrow .ic { width: 15px; height: 15px }
.lz-result__arrow.is-prev .ic { transform: rotate(180deg) }
.lz-result__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px;
  background: none; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-result__btn:hover { background: var(--lz-hover) }
.lz-result__btn[hidden] { display: none }
.lz-result__btn svg { width: 15px; height: 15px }
.lz-result__cmp { margin-left: auto }
.lz-result__cmp[hidden] + .lz-result__fix { margin-left: auto }
.lz-result__fix + .lz-result__all { margin-left: 0 }

/* Пометка «Правка к результату · сегодня, 14:20» — над полем ввода и над отправленным сообщением */
/* Правка к результату — компактная фишка над текстом поля: «↩ к результату · сегодня, 10:07 ×» */
.lz-revise { display: inline-flex; align-items: center; gap: 2px; max-width: calc(100% - 16px); margin: 8px 0 0 12px; padding: 2px 2px 2px 4px;
  border: 1px solid var(--rb-line); border-radius: 999px; background: var(--rb-surface-soft); color: var(--rb-muted); font-size: 12.5px }
.lz-revise[hidden] { display: none }
.lz-revise__icon .ic { width: 15px; height: 15px; display: block }
.lz-revise__to { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px; border: 0; border-radius: 999px; background: none;
  color: var(--rb-muted); font: 400 12.5px/1.3 var(--rb-font-body); cursor: pointer; white-space: nowrap }
.lz-revise__to svg { width: 14px; height: 14px; flex: none; color: var(--rb-ink) }
.lz-revise__to b { overflow: hidden; text-overflow: ellipsis; color: var(--rb-ink); font-weight: 500 }
.lz-revise__to:hover { color: var(--rb-ink) }
.lz-revise__x { display: grid; place-items: center; width: 22px; height: 22px; margin-left: 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--rb-muted); cursor: pointer }
.lz-revise__x:hover { background: color-mix(in srgb, var(--rb-ink) 8%, transparent); color: var(--rb-ink) }
.lz-revise__x .ic { width: 14px; height: 14px }
.lz-revise-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-end; margin-bottom: 4px; padding: 0; border: 0;
  background: none; color: var(--rb-muted); font: 500 12.5px/1.3 var(--rb-font-body); cursor: pointer }
.lz-revise-tag:hover { color: var(--rb-ink) }
.lz-revise-tag svg { width: 13px; height: 13px }

/* Сравнение версий: изменённые части рядом, старое — зачёркнуто красным, новое — зелёным */
.lz-rcompare { margin-top: 10px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas); overflow: hidden }
.lz-rcompare__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--rb-line) }
.lz-rcompare__head b { margin-right: auto; font-size: 14px; font-weight: 600 }
.lz-rcompare__head .rb-btn { height: 34px; font-size: 13px }
.lz-rcompare__x { width: 32px !important; height: 32px !important }
.lz-rcompare__cols { display: grid; grid-template-columns: 1fr 1fr }
.lz-rcompare__col { display: grid; align-content: start; gap: 8px; padding: 12px 16px 14px }
.lz-rcompare__col + .lz-rcompare__col { border-left: 1px solid var(--rb-line) }
.lz-rcompare__ver { color: var(--rb-faint); font-size: 12.5px }
.lz-rcompare__row { display: grid; gap: 2px; font-size: 14px; line-height: 1.45 }
.lz-rcompare__label { color: var(--rb-faint); font-size: 13px }
.lz-rcompare__val { white-space: pre-line; overflow-wrap: anywhere }
.lz-rcompare__val mark { padding: 0 1px; border-radius: 3px; color: inherit }
.lz-rcompare__val mark.is-del { background: var(--rb-bad-soft); color: var(--rb-bad); text-decoration: line-through }
.lz-rcompare__val mark.is-ins { background: var(--rb-good-soft); color: var(--rb-good) }
.lz-rcompare__same { margin: 0; padding: 14px 16px; font-size: 14px }
@media (max-width: 720px) {
  .lz-rcompare__cols { grid-template-columns: 1fr }
  .lz-rcompare__col + .lz-rcompare__col { border-left: 0; border-top: 1px solid var(--rb-line) }
}

/* «Все результаты» — первой строкой панели задачи */
.lz-tpanel__history { display: flex; align-items: center; gap: 10px; margin: 8px -10px 6px; padding: 10px; border: 0; border-radius: 12px;
  background: none; color: var(--rb-ink); font: 500 14px/1.3 var(--rb-font-body); text-align: left; cursor: pointer }
.lz-tpanel__history:hover { background: var(--lz-hover) }
.lz-tpanel__history .ic { width: 18px; height: 18px }
.lz-tpanel__history-go { margin-left: auto; color: var(--rb-muted) }
.lz-tpanel__history-go .ic { width: 15px; height: 15px }

/* История результатов (app.js showHistory) */
.lz-thist__crumb { padding: 0; border: 0; background: none; color: var(--rb-muted); font: 400 15px/1.3 var(--rb-font-body); text-decoration: none;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40% }
.lz-thist__crumb:hover { color: var(--rb-ink) }
.lz-thist__sep { color: var(--rb-faint) }
.lz-thist__tools, .lz-thist__list { max-width: 860px; margin: 0 auto; padding: 0 34px }
.lz-thist__tools { display: flex; align-items: center; gap: 10px; margin-bottom: 18px }
.lz-thist__search { position: relative; flex: 1; min-width: 0 }
.lz-thist__search .ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--rb-faint); pointer-events: none }
.lz-thist__search .rb-input { width: 100%; height: 42px; padding-left: 42px; border-radius: 999px }
.lz-thist__filters { display: flex; gap: 6px; flex: none }
.lz-thist__chip { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border: 1px solid var(--rb-line);
  border-radius: 999px; background: var(--rb-canvas); color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-thist__chip.is-on { border-color: var(--rb-ink); background: var(--rb-ink); color: var(--rb-canvas) }
.lz-thist__chip .ic { width: 14px; height: 14px }
.lz-thist__day { margin: 18px 0 8px; color: var(--rb-muted); font-size: 13px }
.lz-thist__day:first-child { margin-top: 0 }
.lz-thist__item { position: relative; margin-bottom: 8px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-lg); background: var(--rb-canvas) }
.lz-thist__item.is-open { border-color: var(--rb-ink) }
.lz-thist__line { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 14px; width: 100%;
  padding: 12px 52px 12px 14px; border: 0; background: none; color: var(--rb-ink); font: inherit; text-align: left; cursor: pointer }
.lz-thist__line:not(:has(.lz-thist__thumb)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) }
.lz-thist__thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover }
.lz-thist__who { display: grid; gap: 3px; min-width: 0 }
.lz-thist__who b { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis }
.lz-thist__who span { color: var(--rb-muted); font-size: 12.5px }
.lz-thist__preview { overflow: hidden; color: var(--rb-ink); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis }
.lz-thist__acts { position: absolute; top: 12px; right: 10px }
.lz-thist__star { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--rb-faint); cursor: pointer }
.lz-thist__star:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-thist__star .ic { width: 17px; height: 17px }
.lz-thist__star.is-on { color: var(--rb-warn) }
.lz-thist__star.is-on .ic { fill: currentColor }
.lz-thist__full { display: grid; gap: 10px; padding: 0 14px 14px }
.lz-thist__goto { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-thist__goto:hover { background: var(--lz-hover) }
.lz-thist__goto .ic { width: 16px; height: 16px }
.lz-thist__empty { margin: 30px 0; color: var(--rb-muted); text-align: center; font-size: 14px }
@media (max-width: 720px) {
  .lz-thist__tools, .lz-thist__list { padding: 0 14px }
  .lz-thist__tools { flex-wrap: wrap }
  .lz-thist__line, .lz-thist__line:not(:has(.lz-thist__thumb)) { grid-template-columns: minmax(0, 1fr) }
  .lz-thist__thumb { display: none }
}

/* Части результата (render.js resultCard, макеты R1/R2): строка поля подсвечивается при наведении, «скопировать» и
   карандаш — справа; варианты списка — каждый своей строкой с номером, при наведении обводятся; текст — как текст */
.lz-result__all { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: 30px; padding: 0 11px !important;
  border-radius: 999px; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body) }
.lz-result__all:hover { background: var(--lz-hover) }
.lz-result__all svg { width: 15px; height: 15px }
.lz-result__group { display: grid; gap: 2px; padding: 10px 10px 12px }
.lz-result__title { padding: 0 6px }
.lz-result__part { position: relative; border-radius: 10px }
.lz-result__part.is-field, .lz-result__part.is-link, .lz-result__part.is-image, .lz-result__part.is-video, .lz-result__part.is-audio, .lz-result__part.is-file {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 7px 6px;
  font-size: 15px; line-height: 1.5 }
/* Название части всегда сверху, содержание — под ним во всю ширину (колонкой справа от названия было только у коротких
   значений — «иногда справа, иногда под», 02.11.2026); «скопировать» и карандаш — в строке названия */
.lz-result__part > .lz-result__label { grid-column: 1; grid-row: 1 }
.lz-result__part > .lz-result__acts { grid-column: 2; grid-row: 1 }
.lz-result__part > .lz-result__value, .lz-result__part > .lz-result__editor { grid-column: 1 / -1; grid-row: 2 }
.lz-result__part.is-field:hover, .lz-result__part.is-link:hover { background: var(--rb-surface-soft) }
.lz-result__part .lz-result__value { white-space: pre-line; overflow-wrap: anywhere }
.lz-result__part.is-field .lz-result__value { font-weight: 500 }
.lz-result__part .lz-result__label { color: var(--rb-faint); font-size: 13px }
.lz-result__acts { display: inline-flex; align-items: center; gap: 2px; opacity: .55; transition: opacity .15s }
.lz-result__part:hover > .lz-result__acts, .lz-result__opt:hover > .lz-result__acts, .lz-result__phead:hover .lz-result__acts,
.lz-result__part.is-list:hover > .lz-result__phead .lz-result__acts, .lz-result__part.is-text:hover > .lz-result__phead .lz-result__acts { opacity: 1 }
.lz-result__phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 4px }
.lz-result__part.is-list, .lz-result__part.is-text { padding: 4px 0 6px }
.lz-result__opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 4px 0;
  padding: 8px 8px 8px 12px; border: 1px solid var(--rb-line); border-radius: 12px; font-size: 15px; font-weight: 500; line-height: 1.45;
  transition: border-color .15s }
.lz-result__opt:hover { border-color: var(--rb-ink) }
.lz-result__num { color: var(--rb-faint); font-size: 13.5px; font-weight: 400 }
.lz-result__text { padding: 0 6px; font-size: 15px; line-height: 1.6 }
.lz-result__text > :first-child { margin-top: 0 } .lz-result__text > :last-child { margin-bottom: 0 }
.lz-result__part.is-editing > :not(.lz-result__editor):not(.lz-result__label):not(.lz-result__phead) { display: none }
.lz-result__part.is-editing .lz-result__acts { visibility: hidden }
.lz-result__editor { display: grid; gap: 8px; padding: 0 6px 4px }
.lz-result__area { width: 100%; min-height: 44px; resize: vertical; font: 15px/1.5 var(--rb-font-body) }
.lz-result__editbar { display: flex; justify-content: flex-end; gap: 6px }
.lz-result__editbar .rb-btn { height: 32px; font-size: 13px }
@media (max-width: 720px) {
  .lz-result__acts { opacity: 1 }
}

/* ── задача как рабочее окно (app.js ws*): поле — в окне под блоками, результат — под полем ── */
.lz-ws { display: none }
.rb-chat.is-ws .lz-ws { display: grid; gap: 14px; width: min(768px, 100%); margin: 0 auto; flex: none }
.rb-chat.is-ws .rb-chat__messages { padding-bottom: 0 }
.rb-chat.is-ws .rb-chat__messages::before { display: none }      /* лента «снизу» не нужна: окно начинается сверху */
.rb-chat.is-ws.is-ws-wait .lz-feed, .rb-chat.is-ws.is-ws-wait .lz-live { visibility: hidden }
.rb-chat.is-ws [data-task-crumb] { display: none !important }
.lz-ws__nav { display: flex; align-items: center; gap: 4px; flex: none; margin: 0 -6px;
  position: sticky; z-index: 6; top: 0; pointer-events: none }     /* top — от верхнего отступа ленты (64px под шапкой), не от края */
/* строка висит на месте без подложки; у каждой кнопки свой фон цвета страницы — лента под ней не просвечивает */
.lz-ws__nav .lz-ws__btn { pointer-events: auto; background: var(--lz-paper) }
.lz-ws__nav .lz-ws__btn:hover { background: var(--lz-hover) }
.lz-ws__nav .lz-ws__btn.is-line { background: var(--rb-canvas) }
.lz-ws__nav .lz-ws__btn.is-line:hover { background: var(--lz-hover) }
/* лента прокручена (app.js wsEnsure, is-float) — кнопки парят: стекло, тонкая обводка и тень, а не вырезы в тексте */
.lz-ws__nav .lz-ws__btn { transition: box-shadow .15s, background-color .15s }
.lz-ws__nav.is-float .lz-ws__btn { background: color-mix(in srgb, var(--rb-canvas) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 0 0 1px var(--rb-line), 0 6px 16px -8px color-mix(in srgb, var(--rb-ink) 35%, transparent) }
.lz-ws__nav.is-float .lz-ws__btn:hover { background: var(--lz-hover) }
.lz-ws__nav.is-float .lz-ws__btn.is-line { border-color: transparent }
/* Окно задачи: лента во всю ширину (отступ 16px), блоки — колонкой 768px по центру, а «Назад · История · Новое задание» —
   от левого края страницы, под значком задачи в шапке (кнопка 10px + свой отступ 12px = край шапки 22px) */
.rb-chat.is-ws .rb-chat__messages { padding-left: 16px; padding-right: 16px }
.rb-chat.is-ws .rb-chat__messages > :not(.lz-ws__nav) { width: min(768px, 100%); margin-left: auto; margin-right: auto }
.lz-ws__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none;
  color: var(--rb-ink); font: 500 13.5px/1 var(--rb-font-body); cursor: pointer; white-space: nowrap }
.lz-ws__btn:hover { background: var(--lz-hover) }
.lz-ws__btn .ic { width: 17px; height: 17px }
.lz-ws__btn.is-muted { color: var(--rb-muted) }
.lz-ws__btn.is-muted .ic { transform: rotate(180deg) }
.lz-ws__btn.is-line { border: 1px solid var(--rb-line); background: var(--rb-canvas) }
.lz-ws__btn.is-line:hover { background: var(--lz-hover) }
.lz-ws__head { text-align: center; padding: 2px 0 0 }
.lz-ws__head h2 { margin: 0 0 6px; font: 600 24px/1.2 var(--rb-font-heading) }
.lz-ws__head p { margin: 0; color: var(--rb-muted); font-size: 14.5px; line-height: 1.45 }
.lz-ws__head p:empty { display: none }
.lz-ws__ran { display: grid; gap: 6px; padding: 10px 10px 12px 16px; border: 1px solid var(--rb-line); border-radius: 14px;
  background: var(--rb-canvas); color: var(--rb-muted); font-size: 13.5px }
.lz-ws__ranhead { display: flex; align-items: center; gap: 8px; min-width: 0 }
/* Задание — первые 3 строки как прислали; «Показать всё» — целиком, длинное прокручивается внутри */
.lz-ws__task { color: var(--rb-ink); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.lz-ws__ran.is-open .lz-ws__task { display: block; -webkit-line-clamp: unset; max-height: min(50vh, 420px); overflow-y: auto; padding-right: 6px }
.lz-ws__ran[hidden] { display: none }
.lz-ws__ran b { color: var(--rb-ink); font-weight: 600 }
.lz-ws__chip { display: block; min-width: 0; flex: 0 1 auto; max-width: 100%; padding: 4px 10px; border: 1px solid var(--rb-line); border-radius: 999px; color: var(--rb-ink);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.lz-ws__go { margin-left: auto; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-ws__go:hover { background: var(--lz-hover) }
.lz-ws__get { display: grid; gap: 8px; padding: 12px 16px; border: 1px dashed var(--rb-line); border-radius: 16px; opacity: .55; margin-top: 4px }
.lz-ws__get[hidden] { display: none }
/* Ход работы (макет W2, app.js wsProgress): вместо потока черновика — заголовок со спиннером и шаги */
.rb-chat.is-ws [data-live] { display: none }
.lz-ws__get.is-prog { gap: 14px; padding: 20px 22px; border: 1px solid var(--rb-line); background: var(--rb-canvas); opacity: 1 }
.lz-wsprog__head { display: flex; align-items: center; gap: 10px; min-width: 0 }
.lz-wsprog__title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 600 15px/1.35 var(--rb-font-body); overflow-wrap: anywhere }
.lz-wsprog__spin { flex: none; width: 18px; height: 18px; border: 2px solid var(--rb-line); border-top-color: var(--rb-ink); border-radius: 50%;
  animation: lz-wsprog-spin .8s linear infinite }
@keyframes lz-wsprog-spin { to { transform: rotate(360deg) } }
.lz-wsprog__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45 }
.lz-wsprog__steps li { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; color: var(--rb-faint) }
.lz-wsprog__steps li::before { content: ""; justify-self: center; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; transform: translateY(-1px) }
.lz-wsprog__steps li > .lz-wsprog__t { grid-column: 2 / -1 }
.lz-wsprog__steps li > .lz-wsprog__oic { grid-column: 2; display: inline-grid; align-self: center }
.lz-wsprog__steps li > .lz-wsprog__oic .ic { width: 16px; height: 16px }
.lz-wsprog__steps li > .lz-wsprog__oic + .lz-wsprog__t { grid-column: 3 }
.lz-wsprog__steps li > small { grid-column: 2 / -1; color: var(--rb-faint); font-size: 12.5px }
.lz-wsprog__steps li.is-done { color: var(--rb-ink) }
.lz-wsprog__steps li.is-done::before { content: "✓"; width: auto; height: auto; border: 0; color: var(--rb-good); font-weight: 600; transform: none }
.lz-wsprog__steps li.is-now { color: var(--rb-ink); font-weight: 500 }
.lz-wsprog__steps li.is-now::before { border: 0; background: var(--rb-ink); animation: lz-wsprog-pulse 1.2s ease-in-out infinite }
.lz-wsprog__steps li.is-fail { color: var(--rb-bad) }
.lz-wsprog__steps li.is-fail::before { content: "×"; width: auto; height: auto; border: 0; font-weight: 600; transform: none }
@keyframes lz-wsprog-pulse { 50% { opacity: .3 } }
.lz-wsprog__t { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; white-space: normal; overflow-wrap: anywhere }
.lz-wsprog__icon { display: inline-grid; flex: none; width: 15px; height: 15px; align-self: center }
.lz-wsprog__icon svg { width: 15px; height: 15px }
.lz-wsprog__sk { display: grid; gap: 10px; margin-top: 2px }
.lz-wsprog__sk i { display: block; height: 9px; border-radius: 5px; background: var(--rb-line); opacity: .7; animation: lz-wsprog-pulse 1.6s ease-in-out infinite }
.lz-ws__geth { color: var(--rb-muted); font-size: 13.5px } .lz-ws__geth b { color: var(--rb-ink); font-weight: 600 }
.lz-ws__part { display: grid; grid-template-columns: 20px 170px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px }
.lz-ws__part .ic { width: 17px; height: 17px; color: var(--rb-muted) }
.lz-ws__part span { font-weight: 500 }
.lz-ws__sk { display: block; height: 9px; border-radius: 5px; background: var(--rb-line); opacity: .6 }
/* поле в окне: обычный поток, без «плавания» над лентой */
.rb-chat.is-ws .lz-ws .rb-chat__compose { position: static !important; width: 100% !important; margin: 0; pointer-events: auto; transition: none; transform: none }
.rb-chat.is-ws [data-starters], .rb-chat.is-ws .rb-chat__empty, .rb-chat.is-ws .lz-divider, .rb-chat.is-ws .lz-msg--history,
.rb-chat.is-ws [data-scroll-end] { display: none !important }
.rb-chat.is-ws.is-ws-fresh .lz-feed, .rb-chat.is-ws.is-ws-fresh .lz-live, .rb-chat.is-ws.is-ws-fresh [data-more] { display: none !important }
.rb-chat.is-ws [data-more] { display: none !important }
.lz-ws-hide { display: none !important }
.lz-ws-hide.lz-ws-peek { display: flex !important; opacity: .8 }
.rb-chat.is-ws .lz-feed .lz-msg.is-assistant { max-width: 100% }
/* блоки ввода в новом задании — всегда, раскладкой по data-layout */
.rb-chat.is-ws.is-ws-fresh .lz-tinputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; pointer-events: auto; align-items: stretch }
.lz-tinputs[data-layout="1"] > .lz-tblock { grid-column: 1 / -1 }
.lz-tinputs[data-layout="lead"] { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important }
.lz-tinputs[data-layout="lead"] > .lz-tblock:first-child { grid-column: auto !important; grid-row: span 2 }
.lz-tinputs[data-layout="pair-wide"] > .lz-tblock:first-child { grid-column: auto !important }
.lz-tinputs[data-layout="pair-wide"] > .lz-tblock.is-text, .lz-tinputs[data-layout="pair-wide"] > .lz-tblock.is-document { grid-column: 1 / -1 !important; order: 3 }
.lz-tinputs[data-layout="lead"] > .lz-tblock:first-child .lz-tblock__field { flex: 1; min-height: 150px }
/* «Сделать задачу» вместо самолётика: знак Ложки и текст */
.rb-chat__send.is-do { width: auto !important; height: 44px !important; padding: 0 20px 0 15px !important; gap: 8px; border-radius: 999px !important;
  display: inline-flex !important; align-items: center; font: 600 15px/1 var(--rb-font-body); white-space: nowrap }   /* вид — роль «платная» */
.rb-chat__send.is-do .lz-do-mark { width: 19px; height: 19px; flex: none }
.rb-chat__send.is-do:disabled { opacity: .6 }
@media (max-width: 720px) {
  .rb-chat.is-ws.is-ws-fresh .lz-tinputs, .lz-tinputs[data-layout="lead"] { grid-template-columns: 1fr !important }
  .lz-tinputs > .lz-tblock { grid-row: auto !important; grid-column: auto !important }
  .lz-ws__part { grid-template-columns: 20px minmax(0, 1fr) }
  .lz-ws__sk { display: none }
  .rb-chat__send.is-do { padding: 0 13px !important }
}
/* версии видны — «Скопировать всё» значком, чтобы шапка карточки не переносилась */
.lz-result__head:has(.lz-result__ver:not([hidden])) .lz-result__all span { display: none }
/* ответ Ложки после результата (вопрос, что не сделано) — строкой под карточкой, не крупным текстом */
.rb-chat.is-ws .lz-msg.lz-ws-note .rb-richtext, .rb-chat.is-ws .lz-msg.lz-ws-note .lz-rich { font: 400 14.5px/1.55 var(--rb-font-body) !important }
.rb-chat.is-ws .lz-msg.lz-ws-note .lz-rich p { margin: 0 0 6px }
.lz-ws__go, .lz-ws__ran b { flex: none }
.lz-ws__tail { display: none }
.rb-chat.is-ws:not(.is-ws-fresh) .lz-ws__tail { display: block; position: sticky; bottom: 0; z-index: 5; width: min(768px, 100%); margin: 6px auto 0;
  padding: 14px 0 calc(var(--rb-keyboard-height, 0px) + 18px); flex: none;
  background: linear-gradient(to bottom, transparent, var(--lz-paper) 22px) }
.rb-chat.is-ws.is-ws-fresh .lz-ws__tail { display: none !important }
/* Поле в готовом задании — в обычном потоке «хвоста» под результатом (без этого оставалось прибитым к низу экрана
   поверх карточки и не уезжало с прокруткой) */
.rb-chat.is-ws .lz-ws__tail .rb-chat__compose { position: static !important; width: 100% !important; margin: 0; pointer-events: auto; transition: none; transform: none }

/* Сообщение пользователя — скруглённый прямоугольник; время и «скопировать» — под ним, а не внутри */
.rb-chat__message.lz-msg.is-user:not(.lz-album) { display: flex; flex-direction: column; align-items: flex-end; padding: 0; border: 0;
  background: none; border-radius: 0 }
.lz-msg.is-user:not(.lz-album) > .lz-text, .lz-msg.is-user:not(.lz-album) > .lz-caption { padding: 10px 16px; border: 1px solid var(--rb-line);
  border-radius: 20px; background: var(--rb-sidebar); max-width: 100% }
.lz-msg.is-user:not(.lz-album) > .lz-caption { margin-top: 6px }
.lz-msg.is-user:not(.lz-album) > .lz-msg__meta { margin: 5px 6px 0 }

/* «Мои задачи»: большой заголовок и описание, без плашки-шапки (как было до правок шапок) */
.lz-tpage__head--big { display: flex; align-items: flex-start; gap: 12px; max-width: 1080px; margin: 0 auto 26px; padding: 44px 34px 0 }
.lz-tpage__title { margin: 0 0 10px; font: 600 30px/1.2 var(--rb-font-heading) }
@media (max-width: 720px) { .lz-tpage__head--big { padding: 64px 14px 0 } .lz-tpage__title { font-size: 24px } }

/* «Из ваших правок» в панели — без цветной подложки и в тёмной теме: только линия слева */
html.lz-dark .lz-tpanel .lz-tsec.is-memory { background: none; border-color: var(--rb-line) }

/* Новое задание: блок по центру экрана по высоте, поле — с заметным отступом от блоков, подсказка — между ними */
.rb-chat.is-ws.is-ws-fresh .lz-ws { padding: 24px 0 40px; margin-block: auto }     /* по центру между строкой «Назад» и низом */
.rb-chat.is-ws.is-ws-fresh .lz-ws__head { margin-bottom: 6px }
.rb-chat.is-ws.is-ws-fresh .lz-tinputs, .rb-workspace__main.is-task .rb-chat.is-ws.is-ws-fresh .lz-tinputs { margin-bottom: 28px !important }
.lz-ws__need { margin: -16px 6px 10px; color: var(--rb-muted); font-size: 13px }
.lz-ws__need[hidden] { display: none }

.lz-do-short { display: none }
@media (max-width: 720px) {
  .rb-chat__send.is-do span.lz-do-full { display: none }
  .rb-chat__send.is-do span.lz-do-short { display: inline }
  .rb-chat__send.is-do { padding: 0 14px 0 11px !important }
  .lz-result__all span { display: none }
}
/* окно задачи не шире экрана: длинная строка «Дали» обрезается многоточием, а не распирает окно (телефон) */
.rb-chat.is-ws .lz-ws { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100% }
.lz-ws__ran, .lz-ws__nav { min-width: 0 }
.lz-ws__nav { flex-wrap: wrap }

/* Блоки ввода задачи — без тени (рамка и так отделяет) */
.lz-tblock { box-shadow: none !important; transition: box-shadow .2s }
/* …а при наведении — та же тень, что у поля чата (.rb-composer:hover) */
.lz-tblock:hover { box-shadow: var(--rb-shadow-lift) !important }
/* Знак Ложки — либо на кнопке, либо в поле: в новом задании он на «Сделать задачу», в поле не нужен */
.rb-chat.is-ws.is-ws-fresh .lz-cmp__mark { display: none !important }
/* Телефон: «Правила задачи» в шапке — одним значком, чтобы название задачи помещалось */
@media (max-width: 760px) {
  .rb-workspace__main.is-task .lz-tpanel-toggle { font-size: 0; gap: 0; padding: 0 9px }
  .rb-workspace__main.is-task .lz-tpanel-toggle .ic { width: 22px; height: 22px }
}


/* «Вы получите» — заметно ниже поля, чтобы не спорил с ним */
.rb-chat.is-ws.is-ws-fresh .lz-ws__get { margin-top: 30px }
/* Одна строка в поле — по центру по высоте, рядом с кнопкой «Сделать задачу»; несколько строк — кнопка внизу */
.rb-chat.is-ws .lz-cmp__row { align-items: center }
.rb-chat.is-ws .lz-multiline .lz-cmp__row { align-items: flex-end }

/* «Ваши задачи» в новом чате: до трёх — по центру (карточка той же ширины, что в ряду из трёх), без «Все задачи» */
.lz-ntasks__head.is-center { justify-content: center }
.lz-ntasks.is-center { display: flex; justify-content: center }
.lz-ntasks.is-center > .lz-ntask { flex: 0 0 calc((100% - 16px) / 3); min-width: 0 }
@media (max-width: 720px) { .lz-ntasks.is-center { justify-content: flex-start } .lz-ntasks.is-center > .lz-ntask { flex: 0 0 72% }
  .lz-ntasks.is-center:has(> .lz-ntask:only-child) { justify-content: center } }   /* телефон: одна — по центру, несколько — лентой, как было */

/* Новое задание без плашки чата (макет A): под блоками по центру «Комментарий · модель · мышление», под ними —
   «Сделать задачу»; комментарий — по кнопке, то же поле ввода с микрофоном и скрепкой внутри (app.js wsDock) */
.rb-chat.is-ws-dock .rb-composer__foot { display: none !important }
.rb-chat.is-ws-dock:not(.is-ws-comment) .rb-composer { display: none !important }
.rb-chat.is-ws-dock .lz-cmp__mark { display: none !important }
.rb-chat.is-ws-dock.is-ws-comment .rb-composer { margin-bottom: 4px }
.lz-wsdock { display: grid; justify-items: center; gap: 12px; margin-top: 2px }
.lz-wsdock__opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px }
.rb-chat.is-ws-comment .lz-wsdock__comment { display: none }
.lz-wsdock__go .rb-chat__send.is-do { height: 50px !important; padding: 0 30px 0 24px !important; font-size: 16px }
.lz-wsdock__go .rb-chat__send.is-do .lz-do-mark { width: 21px; height: 21px }
.lz-wsdock__cbar { display: flex; align-items: center; gap: 2px; padding: 0 4px 2px }
.lz-wsdock__hint { margin-left: 6px; color: var(--rb-faint); font-size: 12.5px }
.lz-wsdock__close { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--rb-faint); cursor: pointer }
.lz-wsdock__close:hover { background: var(--lz-hover); color: var(--rb-ink) }
.lz-wsdock__close .ic { width: 17px; height: 17px }

/* «Как выглядит / Код» — тихий переключатель вида у текста с разметкой (render.js viewSwitch) */
.lz-viewsw { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: 999px; background: var(--rb-surface-soft) }
.lz-viewsw button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--rb-muted);
  font: 500 12.5px/1 var(--rb-font-body); cursor: pointer }
.lz-viewsw button:hover { color: var(--rb-ink) }
.lz-viewsw button.is-on { background: var(--rb-canvas); color: var(--rb-ink); box-shadow: 0 1px 3px color-mix(in srgb, var(--rb-ink) 12%, transparent) }
.lz-result__phead .lz-viewsw { margin-left: auto; margin-right: 4px }
.lz-result__src { margin: 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--rb-surface-soft); color: var(--rb-ink);
  font: 400 13px/1.55 var(--rb-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto }
.lz-code__head .lz-viewsw { margin-left: 4px; margin-right: 4px }
.lz-code__view { padding: 12px 16px; font-size: 15px; line-height: 1.6 }
.lz-code__view > :first-child { margin-top: 0 } .lz-code__view > :last-child { margin-bottom: 0 }

/* Медиа результата задачи (макеты C–F, app.js mediaSection / wsMediaCard) */
.lz-result--media { margin: 4px 0 8px }
.lz-result__sub { color: var(--rb-faint); font-size: 13px; margin-right: auto }
.lz-rmedia { display: grid; gap: 12px; padding: 14px 16px 6px }
.lz-rmedia:empty { display: none }
.lz-rmedia__one { position: relative; margin: 0 }
.lz-rmedia__one img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 14px; background: var(--rb-surface-soft); cursor: zoom-in }
.lz-rmedia__one figcaption { margin-top: 6px; color: var(--rb-faint); font-size: 12.5px }
.lz-rmedia__over { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px }
.lz-rmedia__round { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #191622; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer }
.lz-rmedia__round .ic { width: 17px; height: 17px }
.lz-rmedia__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.lz-rmedia__grid.is-pack { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.lz-rmedia__grid.is-pack:not(.is-open) .lz-rmedia__tile.is-more { display: none }
.lz-rmedia__tile { display: grid; min-width: 0; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; background: var(--rb-canvas) }
.lz-rmedia__tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in }
.lz-rmedia__grid.is-pack .lz-rmedia__tile { border: 0 }
.lz-rmedia__cap { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 6px 6px 12px; font-size: 13px }
.lz-rmedia__icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--rb-muted); cursor: pointer }
.lz-rmedia__icon:hover { background: var(--lz-hover); color: var(--rb-ink) } .lz-rmedia__icon .ic { width: 16px; height: 16px }
.lz-rmedia__more { place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--rb-line) !important; background: none; color: var(--rb-ink);
  font: 600 14px/1 var(--rb-font-body); cursor: pointer }
.lz-rmedia__vwrap { display: grid; gap: 6px; justify-items: start }
.lz-rmedia__video { display: block; width: 100%; max-height: 70vh; border-radius: 14px; background: #000 }
.lz-rmedia__video.is-tall { width: auto; max-width: min(320px, 100%); height: min(560px, 70vh) }
.lz-rmedia__meta { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--rb-faint); font-size: 12.5px }
.lz-rmedia__meta .lz-rmedia__btn { margin-left: auto }
.lz-rmedia__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none;
  color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer; white-space: nowrap }
.lz-rmedia__btn:hover { background: var(--lz-hover) } .lz-rmedia__btn .ic { width: 16px; height: 16px }
.lz-rmedia__audio { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rb-line); border-radius: 14px }
.lz-rmedia__ahead { display: flex; align-items: center; gap: 10px } .lz-rmedia__ahead b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.lz-rmedia__ahead > .ic { width: 20px; height: 20px; color: var(--rb-muted) }
.lz-rmedia__audio audio { width: 100% }
.lz-rmedia__file { display: flex; align-items: center; gap: 14px; padding: 12px 10px 12px 16px; border: 1px solid var(--rb-line); border-radius: 14px }
.lz-rmedia__file > .ic { width: 22px; height: 22px; flex: none; color: var(--rb-ink) }
.lz-rmedia__fcopy { display: grid; gap: 2px; flex: 1; min-width: 0 } .lz-rmedia__fcopy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.lz-rmedia__fcopy small { color: var(--rb-faint); font-size: 12.5px }
/* C4: картинка слева от своих полей */
.lz-result__group.has-media { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start }
.lz-result__group.has-media > :not(.lz-rmedia__thumb) { grid-column: 2 }
.lz-rmedia__thumb { position: relative; grid-column: 1; grid-row: 1 / span 20; align-self: start }
.lz-rmedia__thumb img { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 12px; cursor: zoom-in }
.lz-rmedia__thumb .lz-rmedia__round { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px }
.lz-rmedia__thumb .lz-rmedia__round .ic { width: 14px; height: 14px }
@media (max-width: 720px) {
  .lz-rmedia__grid.is-pack { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .lz-result__group.has-media { grid-template-columns: 76px minmax(0, 1fr) } .lz-rmedia__thumb img { width: 76px; height: 76px }
}

/* Карточка результата в окне задачи — всегда во всю ширину: правка части не сжимает её (ширина была по содержимому) */
.rb-chat.is-ws .lz-feed .lz-msg.is-assistant:has(.lz-result) { width: 100% }
.rb-chat.is-ws .lz-msg.is-assistant .lz-result { width: 100%; box-sizing: border-box }
/* Правка части — тем же шрифтом и на месте текста: меняется только редактируемая область и строка кнопок */
.lz-result__editor { gap: 6px; padding: 0 }
.lz-result__part.is-field > .lz-result__editor, .lz-result__part.is-link > .lz-result__editor { margin: 2px -9px 0 }
.lz-result__part.is-list > .lz-result__editor, .lz-result__part.is-text > .lz-result__editor { padding: 0 6px 4px }
.lz-result__area { box-sizing: border-box; min-height: 0; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--rb-ink) 30%, var(--rb-line)); border-radius: 8px;
  background: var(--rb-canvas); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rb-ink) 6%, transparent); resize: none; font: 500 15px/1.5 var(--rb-font-body) }
.lz-result__part.is-text .lz-result__area { font-weight: 400; line-height: 1.6 }
.lz-result__editbar .rb-btn { height: 28px; padding: 0 12px; font-size: 12.5px }

/* Блок кода внутри части результата не шире карточки — строки переносятся */
.lz-result__text pre, .lz-result__text .lz-code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere }

/* Картинки из переписки в Telegram (беседа до сайта) — из Telegram по /api/tg-file */
.lz-hist-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px }
.lz-msg.is-user .lz-hist-imgs { justify-content: flex-end }
.lz-hist-img { width: 160px; height: 160px; object-fit: cover; border-radius: 12px; background: var(--rb-surface-soft); cursor: zoom-in }
.lz-hist-gone { padding: 8px 12px; border: 1px dashed var(--rb-line); border-radius: 10px; color: var(--rb-faint); font-size: 12.5px }

/* Шапка результата — спокойная, зелёная галочка «Готово» (тёмно-зелёную плашку 02.11.2026 убрали: слишком яркая
   в раскладке «дал → получил») */

/* «Что присылать» и «Результат» в правилах — только названия от агента, значок — тип (app.js drawParts) */
.lz-tparts__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.lz-tparts__item { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4 }
.lz-tparts__item .ic { width: 17px; height: 17px; margin-top: 1px; color: var(--rb-muted); flex: none }
.lz-tparts__name { min-width: 0; overflow-wrap: anywhere }
.lz-tparts__note { color: var(--rb-muted) }

/* ── Окно задачи, макет А (mockups/task-screen2.html): на экране результат; «Задание» — кнопкой в его шапке, раскрывается
   под шапкой (app.js wsTaskToggle). Пока результата нет — карточка «Задание» над ходом работы. Поле правки скрыто до
   «Поправить» (знак Ложки — это разговор с ней) и встаёт по центру внизу (app.js wsFix) */
.rb-chat.is-ws:not(.is-ws-fresh) .lz-ws__head { display: none }
.lz-ws__rantop { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.lz-ws__ran .lz-ws__rantop b { color: var(--rb-faint); font: 600 12px/1.2 var(--rb-font-body); letter-spacing: .06em; text-transform: uppercase }
.lz-ws__rantop span { color: var(--rb-faint); font-size: 12.5px }
.lz-ws__ranhead:empty { display: none }
.lz-ws__ranhead { flex-wrap: wrap }
.lz-ws__ran > .lz-ws__go { justify-self: start; margin: -2px 0 0 -12px }
.rb-chat.is-ws.is-ws-fixoff .lz-ws__tail { display: none !important }
.rb-chat.is-ws.is-ws-fixoff .rb-chat__messages { padding-bottom: 40px }
.lz-wsprog__stop { flex: none; margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid var(--rb-line); border-radius: 999px; background: none;
  color: var(--rb-ink); font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-wsprog__stop:hover { border-color: var(--rb-ink) }
.lz-ws__thumbs { display: flex; flex-wrap: wrap; gap: 6px }
.lz-ws__thumbs img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; cursor: zoom-in; background: var(--rb-surface-soft) }
.lz-ws__more { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--rb-surface-soft); color: var(--rb-muted); font-size: 13px }

/* Результат не прижат к строке «Назад · История» */
.rb-chat.is-ws:not(.is-ws-fresh) .lz-feed { padding-top: 14px }
/* «Задание» внутри карточки результата — под шапкой, на мягком фоне */
.lz-result .lz-ws__ran { margin: 0; padding: 14px 18px 16px; border: 0; border-bottom: 1px solid var(--rb-line); border-radius: 0;
  background: var(--rb-surface-soft); gap: 10px }
.lz-result .lz-ws__task { -webkit-line-clamp: 8 }
.lz-result__task.is-on { background: var(--lz-hover) }
.lz-result__task .ic { width: 16px; height: 16px }
.lz-result__task .lz-result__chev { width: 13px; height: 13px; transition: transform .15s; transform: rotate(90deg) }
.lz-result__task.is-on .lz-result__chev { transform: rotate(-90deg) }
.lz-fix-mark { width: 16px; height: 16px; fill: currentColor; flex: none }
.lz-result__task + .lz-result__all, .lz-result__task + .lz-result__btn { margin-left: 0 }
@media (max-width: 720px) { .lz-result__task > span { display: none } }      /* на телефоне шапка в одну строку: «Задание» — значком */
/* Поле правки — внизу экрана по центру и при коротком результате */
.rb-chat.is-ws:not(.is-ws-fresh) .rb-chat__messages > .lz-ws__tail { margin-top: auto }

/* ── Закреплённые файлы задачи (app.js taskAssets, макет mockups/task-assets.html А) ── */
.lz-pin { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 18, 26, .55);
  color: #fff; cursor: pointer; transition: background .15s, transform .15s }
.lz-pin svg { width: 14px; height: 14px }
.lz-pin:hover { transform: scale(1.08) }
.lz-pin.is-on { background: #fff; color: #17151D; box-shadow: 0 1px 4px rgba(0, 0, 0, .3) }
.lz-ttile2 > .lz-pin { position: absolute; left: 6px; top: 6px; z-index: 2 }      /* внизу — «без сжатия» */
.lz-ttile2.is-pinned { outline: 2px solid var(--rb-ink); outline-offset: -2px }
.lz-ttile2.is-pinned img, .lz-ttile2.is-pinned video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in }
.lz-tblock__row > .lz-pin { flex: none; width: 24px; height: 24px; background: var(--rb-surface-soft); color: var(--rb-muted) }
.lz-tblock__row > .lz-pin.is-on { background: var(--rb-ink); color: var(--rb-canvas) }
.lz-tblock__pins { display: grid; gap: 8px }
.lz-tblock__pinned { display: flex; align-items: center; gap: 6px; color: var(--rb-muted); font-size: 12.5px; line-height: 1.4 }
.lz-tblock__pinned svg { width: 14px; height: 14px; flex: none }
.lz-tblock__swap { padding: 0; border: 0; background: none; color: var(--rb-ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
.lz-pintip { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--rb-ink);
  color: var(--rb-canvas); font-size: 13px; line-height: 1.45 }
.lz-pintip::before { content: ""; position: absolute; top: -6px; left: 24px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--rb-ink) }
.lz-pintip > svg { width: 16px; height: 16px; flex: none; margin-top: 1px }
.lz-pintip b { font-weight: 600 }
.lz-pintip__x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; opacity: .7; cursor: pointer } .lz-pintip__x .ic { width: 14px; height: 14px }
.lz-tassets { display: grid; gap: 10px }
.lz-tasset { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px }
.lz-tasset img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; cursor: zoom-in }
.lz-tasset__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--rb-surface-soft); color: var(--rb-muted) }
.lz-tasset__info { display: grid; min-width: 0 } .lz-tasset__info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lz-tasset__info small { color: var(--rb-faint); font-size: 12px }
.lz-tasset__x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--rb-muted); cursor: pointer }
.lz-tasset__x:hover { background: var(--lz-hover); color: var(--rb-ink) } .lz-tasset__x .ic { width: 15px; height: 15px }

html.lz-boot-task .rb-chat { visibility: hidden }      /* зашли сразу в задачу — до сборки окна (app.js) */
/* «Новое задание» — справа; вид — роль «платная», как «Сделать задачу» (brand/roles.css) */
.rb-chat.is-ws .lz-ws__nav [data-ws-new] { margin-left: auto; border: 0 !important }
.rb-chat.is-ws .lz-ws__nav [data-ws-new] .ic { color: currentColor }

/* ── Каталог готовых задач (task_catalog.py; app.js drawCatalogGrid, drawPriced, drawOrderBar, payTask) ── */
.lz-ttabs { display: inline-flex; gap: 2px; margin: 4px 0 14px; padding: 3px; border: 1px solid var(--rb-line); border-radius: 999px; background: var(--rb-canvas) }
.lz-ttabs button { height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--rb-muted); font: 500 15px/1 var(--rb-font-body); cursor: pointer }
.lz-ttabs button:hover { color: var(--rb-ink) }
.lz-ttabs button.is-active { background: var(--rb-ink); color: var(--rb-canvas) }
.lz-ccard { padding: 0 0 16px; overflow: hidden }
.lz-ccard > :not(.lz-ccard__cov) { margin-left: 18px; margin-right: 18px }
.lz-ccard__cov { height: 150px; margin-bottom: 4px; background: var(--rb-surface-soft) center/cover no-repeat }
.lz-ccard__cov.is-text { padding: 14px 16px; overflow: hidden; color: var(--rb-muted); font-size: 12.5px; line-height: 1.5 }
.lz-ccard__cov.is-icon { display: grid; place-items: center } .lz-ccard__cov.is-icon .ic { width: 34px; height: 34px; color: var(--rb-faint) }
.lz-ccard.is-busy { opacity: .6; pointer-events: none }
.lz-ccard__price { color: var(--rb-ink) !important; font: 600 16px/1 var(--rb-font-heading) }
.lz-ccard__price s { margin-left: 6px; color: var(--rb-faint); font: 400 13px/1 var(--rb-font-body) }
.lz-ccard__time { margin-left: auto; color: var(--rb-faint) }
.lz-cdisc { grid-column: 1 / -1; padding: 12px 16px; border: 1px solid var(--rb-line); border-left: 3px solid var(--rb-good); border-radius: 14px; background: var(--rb-canvas); font-size: 14px }
.lz-priced-hide { display: none !important }
.lz-pf { display: inline-flex; align-items: center; gap: 7px; color: var(--rb-muted); font-size: 13px; cursor: pointer; user-select: none }
.lz-pf input { width: 15px; height: 15px; accent-color: var(--rb-ink) }
.lz-pf[hidden] { display: none }
.lz-ordbar { display: grid; gap: 10px; margin: 0 auto 12px; width: 100%; max-width: 768px }
.lz-ordbar__note, .lz-review { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--rb-line); border-radius: 16px; background: var(--rb-canvas);
  box-shadow: var(--rb-shadow-card) }
.lz-ordbar__note { border-left: 3px solid var(--rb-warn) }
.lz-ordbar__note p, .lz-review p { margin: 0; color: var(--rb-muted); font-size: 14px; line-height: 1.5 }
.lz-ordbar__btn { justify-self: start }
.lz-review b { font: 600 16px/1.3 var(--rb-font-heading) }
.lz-review__stars { display: flex; gap: 2px }
.lz-review__star { width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--rb-line); font-size: 24px; line-height: 1; cursor: pointer }
.lz-review__star.is-on { color: var(--lz-star) }
.lz-review__text { min-height: 56px; resize: vertical }
.lz-review .rb-btn { justify-self: start }
.lz-pay { width: min(440px, 100%) }
.lz-pay__body { display: grid; gap: 12px; padding: 4px 24px 22px }
.lz-pay__body > p { margin: 0 }
.lz-pay__sum { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--rb-line); border-bottom: 1px solid var(--rb-line) }
.lz-pay__sum b { font: 600 24px/1 var(--rb-font-heading) }
.lz-pay__hint { color: var(--rb-faint); font-size: 13px }
.lz-pay__go { width: 100% !important; justify-content: center }
.lz-review__acts { display: flex; gap: 8px; flex-wrap: wrap }
.lz-ttabs[hidden] { display: none }
.lz-tblock__choice { display: flex; flex-wrap: wrap; gap: 8px }
.lz-tchoice { display: grid; gap: 2px; min-width: 84px; padding: 9px 14px; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-surface-soft);
  color: var(--rb-ink); text-align: left; cursor: pointer }
.lz-tchoice b { font: 600 15px/1.2 var(--rb-font-heading) } .lz-tchoice span { color: var(--rb-muted); font-size: 12.5px }
.lz-tchoice:hover { border-color: color-mix(in srgb, var(--rb-ink) 35%, var(--rb-line)) }
.lz-tchoice.is-on { border-color: var(--rb-ink); background: var(--rb-canvas); box-shadow: inset 0 0 0 1px var(--rb-ink) }
/* пять блоков (готовая задача: тема, длина, музыка, два фото): тема во всю ширину, дальше по два */
.lz-tinputs[data-count="5"] > .lz-tblock:first-child { grid-column: 1 / -1 }
/* Готовая задача (есть блок выбора): блоки — ровная сетка, в ряду одной высоты (решение владельца 04.11.2026) */
.lz-tinputs:has(> .is-choice) > .lz-tblock { align-self: stretch }
.lz-tblock__choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) }
.lz-tchoice { min-width: 0; padding: 9px 10px }
.lz-tblock__wish { margin-top: auto; font-size: 13.5px }
/* Выбор выпадающим списком (choice view: select — «до 5 … до 30 слайдов»): rb-dropdown брендбука, цена справа */
.lz-tselect .rb-dropdown__trigger { font: 600 15px/1.2 var(--rb-font-heading) }
/* окно задачи стоит в поле ввода чата, где меню открываются вверх (robowb .rb-chat__compose) — список блока открываем вниз */
.rb-chat__compose .lz-tselect .rb-dropdown__menu { top: calc(100% + 6px); bottom: auto }
.lz-tselect .rb-dropdown__option { display: flex; justify-content: space-between; gap: 12px }
.lz-tselect__price { color: var(--rb-muted); font-weight: 500 }
.lz-tblock__wish:disabled { opacity: .45; cursor: not-allowed }
.lz-tideas { display: flex; flex-wrap: wrap; gap: 6px }
.lz-tidea { height: 30px; padding: 0 12px; border: 1px solid var(--rb-line); border-radius: 999px; background: var(--rb-canvas); color: var(--rb-muted);
  font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-tidea:hover { border-color: color-mix(in srgb, var(--rb-ink) 35%, var(--rb-line)); color: var(--rb-ink) }

/* Медиа в результате — по центру на фоне-паттерне из знаков Ложки (маска brand/lz-mark-tile.svg, цвет — токен): вертикальное видео не жмётся
   влево, пустота по бокам — не серый лист. Решение владельца 04.11.2026 */
.lz-rmedia__vwrap { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: 16px;
  background: var(--rb-surface-soft) }
.lz-rmedia__vwrap .lz-rmedia__meta { justify-self: stretch }
.lz-rmedia__one { display: grid; justify-items: center; padding: 14px; border-radius: 16px;
  background: var(--rb-surface-soft) }
/* готовая задача: что внутри (фишки под заголовком окна) и источник фото */
.lz-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px }
.lz-spec { height: 30px; padding: 0 11px; border: 1px solid var(--rb-line); border-radius: 999px; background: var(--rb-canvas); color: var(--rb-muted);
  font: 400 13px/1 var(--rb-font-body); cursor: pointer }
.lz-spec b { color: var(--rb-ink); font-weight: 600 }
.lz-spec:hover, .lz-spec.is-on { border-color: color-mix(in srgb, var(--rb-ink) 40%, var(--rb-line)) }
.lz-specs__pop { display: grid; gap: 4px; max-width: 620px; margin: 10px auto 0; padding: 12px 14px; border: 1px solid var(--rb-line); border-radius: 14px;
  background: var(--rb-canvas); box-shadow: var(--rb-shadow-card); text-align: left; font-size: 14px; line-height: 1.5; color: var(--rb-muted) }
.lz-specs__pop b { color: var(--rb-ink); font: 600 14px/1.3 var(--rb-font-heading) }
.lz-specs__pop[hidden] { display: none }
.lz-tsrc { display: flex; flex-wrap: wrap; gap: 6px }
.lz-tsrc__o { height: 32px; padding: 0 13px; border: 1px solid var(--rb-line); border-radius: 999px; background: var(--rb-surface-soft); color: var(--rb-muted);
  font: 500 13px/1 var(--rb-font-body); cursor: pointer }
.lz-tsrc__o.is-on { background: var(--rb-ink); color: var(--rb-canvas); border-color: var(--rb-ink) }
.lz-tsrc__gen { padding: 12px; border: 1.5px dashed var(--rb-line); border-radius: 14px; color: var(--rb-faint); font-size: 13px; text-align: center }
.lz-tsrc__chars { display: flex; flex-wrap: wrap; gap: 8px }
.lz-tsrc__char { display: grid; gap: 4px; width: 84px; padding: 4px; border: 1px solid var(--rb-line); border-radius: 12px; background: var(--rb-canvas); cursor: pointer }
.lz-tsrc__char img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px }
.lz-tsrc__char span { overflow: hidden; color: var(--rb-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap }
.lz-tsrc__char.is-on { border-color: var(--rb-ink); box-shadow: inset 0 0 0 1px var(--rb-ink) }
.lz-tideas__lbl { align-self: center; margin-right: 2px; color: var(--rb-faint); font-size: 12.5px }

/* Карточки задач — одна для «Моих задач» и каталога (04.11.2026): картинка сверху, название и описание, цена
   и «Открыть» — всегда по низу, значка у названия нет */
.lz-tcardlink.lz-vcard { padding: 0 0 16px; gap: 0; min-height: 0; overflow: hidden }
.lz-vcard > .lz-vcard__body, .lz-vcard > .lz-tcardlink__foot { margin-left: 18px; margin-right: 18px }
.lz-vcard__body { flex: 1; display: grid; align-content: start; gap: 6px; padding: 14px 0 12px }
.lz-vcard .lz-tcardlink__summary { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.lz-vcard .lz-tcardlink__foot { margin-top: auto }
.lz-vcard .lz-tcardlink__foot > span:first-child { color: var(--rb-faint); font-size: 12.5px }
.lz-vcard .lz-ccard__price { font: 600 16px/1 var(--rb-font-heading) !important; color: var(--rb-ink) !important }
/* обложка: на паттерне из знаков Ложки; картинка примера — целиком (кадр 9:16 не режем) */
/* Обложка карточки — медиа во всю обложку, без полей и подложки (решение владельца 05.11.2026: «с бордюрами
   некрасиво»). 27:16 — ровно три кадра 9:16 раскадровки. Без маски-узора, isolation и сдвигов transform: в Safari
   с ними картинки обложек «залипали» при прокрутке */
.lz-vcov { position: relative; display: block; flex: none; aspect-ratio: 27 / 16; overflow: hidden; border-bottom: 1px solid var(--rb-line);
  background: var(--rb-surface-soft) }
.lz-vcov > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28% }
/* своя задача — готовая картинка-шаблон во всю обложку */
.lz-vcov--tpl { background: var(--rb-page) }
.lz-vcov--tpl > img { object-position: 50% 50% }
/* «В мои задачи» на карточке каталога — в углу обложки */
.lz-vcard__keep { position: absolute; right: 10px; top: 10px; height: 30px; padding: 0 12px; border: 1px solid var(--rb-line); border-radius: 999px;
  background: var(--rb-canvas); color: var(--rb-ink); font: 600 12.5px/1 var(--rb-font-body); cursor: pointer; box-shadow: var(--rb-shadow-card) }
.lz-vcard__keep:hover { border-color: var(--rb-ink) } .lz-vcard__keep.is-on { color: var(--rb-good); cursor: default }
/* Новое задание: чего не хватает — всплывает над кнопкой на 5 секунд по нажатию; галочка портфолио — под кнопкой */
.lz-wsdock__go { position: relative }
.lz-ws__need.is-pop { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; width: max-content; max-width: min(340px, 86vw); margin: 0; padding: 9px 14px;
  border-radius: 12px; background: var(--rb-ink); color: var(--rb-canvas); font-size: 13px; line-height: 1.4; text-align: center; transform: translateX(-50%);
  box-shadow: var(--rb-shadow-lift); animation: lz-pop-in .18s ease }
.lz-ws__need.is-pop::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--rb-ink) }
@keyframes lz-pop-in { from { opacity: 0; transform: translate(-50%, 4px) } to { opacity: 1; transform: translate(-50%, 0) } }
.lz-wsdock > .lz-pf { margin-top: -2px }
.lz-ccard > .lz-vcov { margin-left: 0; margin-right: 0 }
/* ролик примера на обложке карточки — при наведении поверх кадра */
.lz-vcov > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0; transition: opacity .2s }
.lz-vcov.is-playing > video { opacity: 1 }
/* скидка на карточке каталога — в углу обложки */
.lz-vcard__off { position: absolute; left: 10px; top: 10px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--lz-sale); color: var(--lz-white);
  font: 700 13px/26px var(--rb-font-body) }
/* карточка готовой задачи: пример целиком по высоте обложки, по бокам — паттерн (не режем: обрезанные во всю ширину
   кадры и карточка товара смотрелись косо, 05.11.2026); название крупнее */
.lz-vcard .lz-tcardlink__title { font-size: 19px; line-height: 1.25 }
/* скидка на карточке каталога — косой лентой в углу (вариант 2) */
.lz-vcard__off { left: -40px; top: 16px; width: 140px; height: auto; padding: 4px 0; border-radius: 0; transform: rotate(-40deg); text-align: center;
  line-height: 1.3; box-shadow: 0 6px 14px color-mix(in srgb,var(--lz-black) 25%,transparent) }
/* Паттерн из знаков Ложки — маской, цвет и шаг — токены (brand/tokens.css): результат в чате, фон «Мои задачи»
   (там бледнее — --lz-pattern-ink-soft); у обложек карточек паттерна нет — медиа во всю обложку */
.lz-rmedia__vwrap, .lz-rmedia__one { position: relative; isolation: isolate }
.lz-rmedia__vwrap::after, .lz-rmedia__one::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--lz-pattern-ink); -webkit-mask: var(--lz-pattern-tile) 0 0/var(--lz-pattern-size) repeat; mask: var(--lz-pattern-tile) 0 0/var(--lz-pattern-size) repeat }
/* фон «Мои задачи» едет вместе с карточками (был на подложке вне прокрутки — знаки стояли на месте, 05.11.2026):
   слой — у обёртки содержимого (.lz-tpage__in), она во всю высоту страницы */
.lz-tpage__in { position: relative; isolation: isolate; min-height: 100%; padding-bottom: 48px; box-sizing: border-box }
.lz-tpage[data-tpage] { padding-bottom: 0 }
.lz-tpage__in::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--lz-pattern-ink-soft); -webkit-mask: var(--lz-pattern-tile) 0 0/112px repeat; mask: var(--lz-pattern-tile) 0 0/112px repeat }
html.lz-dark .lz-rmedia__vwrap::after, html.lz-dark .lz-rmedia__one::after { background: var(--lz-pattern-ink-night) }
html.lz-dark .lz-tpage__in::before { background: var(--lz-pattern-ink-night-soft) }
/* поля пожеланий — в одну строку и растут с текстом (growField), без ручки растягивания */
textarea.lz-tblock__wish { min-height: 42px; resize: none; overflow: hidden; line-height: 1.45 }
/* работа в задаче — тот же бледный паттерн из знаков Ложки, что на «Мои задачи» */
.rb-workspace__main:has(> [data-chat].is-ws:not([hidden])) { position: relative; isolation: isolate }
.rb-workspace__main:has(> [data-chat].is-ws:not([hidden]))::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--lz-pattern-ink-soft); -webkit-mask: var(--lz-pattern-tile) 0 0/112px repeat; mask: var(--lz-pattern-tile) 0 0/112px repeat }
html.lz-dark .rb-workspace__main:has(> [data-chat].is-ws:not([hidden]))::before { background: var(--lz-pattern-ink-night-soft) }
/* «Мои задачи»: пиллы разделов и размер карточек; заголовки разделов — во всю ширину сетки */
.lz-tbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px }
.lz-tfilter { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-pill); background: var(--rb-canvas) }
.lz-tfilter[hidden] { display: none }
.lz-tfilter button { height: 32px; padding: 0 16px; border: 0; border-radius: var(--rb-radius-pill); background: none; color: var(--rb-muted); font: 500 14.5px/1 var(--rb-font-body); cursor: pointer }
.lz-tfilter button:hover { color: var(--rb-ink) }
.lz-tfilter button.is-active { background: var(--rb-ink); color: var(--rb-canvas) }
.lz-tsize { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-pill); background: var(--rb-canvas) }
.lz-tsize button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: var(--rb-radius-pill); background: none; color: var(--rb-faint); cursor: pointer }
.lz-tsize svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.lz-tsize button:hover { color: var(--rb-ink) } .lz-tsize button.is-active { background: var(--lz-hover); color: var(--rb-ink) }
.lz-tgrid__h { grid-column: 1 / -1; margin: 14px 0 -2px; font: 600 19px/1.3 var(--rb-font-heading); color: var(--rb-ink) }
.lz-tgrid__h:first-child { margin-top: 0 }
.lz-vcard__kind { color: var(--rb-muted) !important; font-size: 13px !important }
/* сердечко у задачи из каталога — в углу обложки */
.lz-vcard__fav { position: absolute; right: 10px; top: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--rb-line); border-radius: 50%; background: var(--rb-canvas); color: var(--lz-sale); cursor: pointer; box-shadow: var(--rb-shadow-card) }
.lz-vcard__fav svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round }
.lz-vcard__fav:hover { transform: scale(1.06) }
.lz-vcard__fav:not(.is-on) { color: var(--rb-muted) } .lz-vcard__fav:not(.is-on) svg { fill: none }   /* не в «Своих» — контур */
.lz-vcard__fav:disabled { opacity: .6; cursor: default }
/* мелкие карточки — для тех, у кого задач много: меньше обложка, без описания */
.lz-tgrid.is-small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px }
.lz-tgrid.is-small .lz-tcardlink__summary { display: none }
.lz-tgrid.is-small .lz-vcard__body { padding: 10px 0 8px }
.lz-tgrid.is-small .lz-tcardlink__title { font-size: 15px }
.lz-tgrid.is-small .lz-vcard > .lz-vcard__body, .lz-tgrid.is-small .lz-vcard > .lz-tcardlink__foot { margin-left: 12px; margin-right: 12px }
.lz-tgrid.is-small .lz-tcardlink.lz-vcard { padding-bottom: 12px }
.lz-tgrid.is-small .lz-vcard__fav { width: 28px; height: 28px; right: 8px; top: 8px } .lz-tgrid.is-small .lz-vcard__fav svg { width: 15px; height: 15px }
.lz-tgrid.is-small .lz-tgrid__h { font-size: 16px }
@media (max-width: 720px) { .lz-tbar { flex-wrap: wrap } .lz-tgrid.is-small { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* панель разделов — над сеткой, той же ширины (размер карточек — у правого края сетки) */
.lz-tbar.lz-tgrid-w { max-width: 1080px; margin: 0 auto 16px; padding: 0 34px; box-sizing: border-box }
@media (max-width: 720px) { .lz-tbar.lz-tgrid-w { padding: 0 14px } }
/* Телефон: четыре фильтра («Все · Свои · Из каталога · Недавние») — одной строкой рядом с размером карточек, не переносом
   в два ряда (05.11.2026); не влезают — фильтры листаются вбок */
@media (max-width: 720px) {
  .lz-tbar { flex-wrap: nowrap; gap: 8px }
  .lz-tfilter { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none }
  .lz-tfilter::-webkit-scrollbar { display: none }
  .lz-tfilter button { flex: none; padding: 0 10px; font-size: 14px }
  .lz-tsize { flex: none }
  .lz-tsize button.is-active { display: none }      /* размер — одной кнопкой: видна та, на которую переключить */
}
@media (max-width: 380px) { .lz-tfilter button { padding: 0 8px } }
.lz-tgrid.is-small .lz-tcardlink__go { display: none }
.lz-tgrid.is-small .lz-tcardlink__foot > span:first-child { white-space: nowrap; overflow: visible }
/* обложка-раскадровка готовой услуги: три кадра ролика рядом, видно титры («Нужен ролик?») — выбрал владелец 04.11.2026 */
/* раскадровка — три кадра целиком, плёнкой по центру обложки */
.lz-vcov--sb { display: flex; gap: 3px; background: var(--lz-night) }
.lz-vcov--sb > img { position: static; flex: 1 1 0; min-width: 0; width: auto; height: 100%; object-fit: cover; object-position: 50% 30% }
/* ролик при наведении — на месте среднего кадра: плёнка оживает, полей нет */
.lz-vcov--sb > video { left: calc((100% - 6px) / 3 + 3px); width: calc((100% - 6px) / 3) }
/* картинки: присланное фото «Было» — слева во всю высоту, результат 3:4 — справа целиком */
.lz-vcov--ba { display: flex; gap: 3px; background: var(--lz-night) }
.lz-vcov--ba > img { position: static; height: 100%; object-fit: cover }
.lz-vcov--ba > img:first-child { flex: 1 1 0; min-width: 0; width: auto; object-position: 50% 60% }
.lz-vcov--ba > img + img { flex: none; width: auto; aspect-ratio: 3 / 4; object-position: 50% 0 }
.lz-vcov__was { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--rb-radius-pill); background: var(--rb-canvas);
  color: var(--rb-ink); font: 600 12px/1.2 var(--rb-font-body) }
.lz-vcov__dur { position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--rb-radius-pill);
  background: color-mix(in srgb, var(--lz-night) 70%, transparent); color: var(--lz-white); font: 600 12px/1.3 var(--rb-font-body) }
.lz-vcov__dur .ic { width: 13px; height: 13px }
/* цена на карточках — шрифтом сайта, жирнее (решение владельца: прежняя плохо читалась) */
.lz-vcard .lz-ccard__price { font: 700 18px/1 var(--rb-font-body) !important; font-variant-numeric: tabular-nums }
.lz-vcard .lz-ccard__price s { font-size: 14px }
/* «Ещё услуги в каталоге» — последней плиткой сетки «Мои задачи» (как на странице услуги, catalog.css .more3c):
   пунктирная рамка, стопка обложек, ссылка на /catalog */
.lz-tmore { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 290px; padding: 20px; border: 1.5px dashed var(--rb-line);
  border-radius: var(--rb-radius-lg); background: transparent; color: var(--rb-ink); text-align: center; text-decoration: none;
  transition: border-color var(--rb-ease), transform var(--rb-ease) }
.lz-tmore:hover { border-color: color-mix(in srgb, var(--lz-violet-bright) 55%, var(--rb-line)); color: var(--rb-ink); transform: translateY(-1px) }
.lz-tmore b { font: 600 17px/1.3 var(--rb-font-heading) }
.lz-tmore > span:not(.lz-tmore__st) { color: var(--rb-muted); font-size: 13px; line-height: 1.4 }
.lz-tmore em { margin-top: 6px; font-style: normal; font-weight: 600; color: var(--lz-violet-bright) }
html.lz-dark .lz-tmore em { color: var(--lz-lavender) }
.lz-tmore__st { position: relative; width: 118px; height: 104px; margin-bottom: 6px }
.lz-tmore__st img { position: absolute; top: 4px; width: 58px; height: 92px; object-fit: cover; object-position: 50% 20%; border-radius: 10px; border: 2px solid var(--rb-canvas);
  left: calc(var(--k) * 28px); transform: rotate(calc((var(--k) - 1) * 8deg)); box-shadow: 0 8px 18px color-mix(in srgb, var(--lz-abyss) 30%, transparent) }
.lz-tgrid.is-small .lz-tmore { min-height: 200px; padding: 14px; gap: 4px }
.lz-tgrid.is-small .lz-tmore__st { transform: scale(.78); margin: -10px 0 -6px }
.lz-tgrid.is-small .lz-tmore b { font-size: 15px } .lz-tgrid.is-small .lz-tmore > span:not(.lz-tmore__st) { display: none }
/* «Ещё услуги» высоту ряда не задаёт (05.11.2026: на телефоне в «Недавних» вытягивала соседнюю карточку — та казалась
   выше «Своих»): своя высота — только min-height, в ряду тянется по карточкам; «Открыть каталог →» — одной строкой */
.lz-tmore { contain: size; overflow: hidden }
.lz-tgrid.is-small .lz-tmore em { margin-top: 2px; font-size: 13.5px; white-space: nowrap }
/* Задача открывается: пока лента не пришла, поле ввода и блоки прошлого состояния не показываем (мигало «чат-поле»),
   вместо них — знак Ложки по центру */
.rb-chat.is-ws-wait .rb-chat__compose, .rb-chat.is-ws-wait .lz-ws, .rb-chat.is-ws-wait .lz-ws__nav, .rb-chat.is-ws-wait .lz-tinputs,
.rb-chat.is-ws-wait .lz-feed, .rb-chat.is-ws-wait .lz-live { visibility: hidden }
.rb-chat.is-ws-wait::after { content: ""; position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px 0 0 -17px; background: var(--rb-faint);
  -webkit-mask: url("/static/brand/mark-paper.svg") center/contain no-repeat; mask: url("/static/brand/mark-paper.svg") center/contain no-repeat;
  animation: lz-wait-spin 1.2s linear infinite; opacity: .7 }
@keyframes lz-wait-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .rb-chat.is-ws-wait::after { animation: none } }
/* на раскадровке скидка — меткой внизу справа (лента закрывала титр первого кадра) */
.lz-vcov--sb .lz-vcard__off { left: auto; right: 10px; top: auto; bottom: 10px; width: auto; padding: 4px 10px; border-radius: var(--rb-radius-pill); transform: none; box-shadow: none }

/* ── Сессии с сервером (server.js; только владельцу): Claude Code на хосте в экране беседы ── */
.lz-srv-on [data-media-open], .lz-srv-on .lz-share-open, .lz-srv-on [data-chat-act="media"], .lz-srv-on [data-chat-act="share"],
.lz-srv-on .lz-share-by, .lz-srv-on [data-starters] { display: none !important }
.rb-sidebar__recents .lz-nav-label { margin: 10px 12px 4px; padding: 0 }
.rb-sidebar__recents .lz-nav-label:first-child { margin-top: 0 }
.lz-srv-nav .lz-nav-chat__icon .ic { color: var(--lz-teal) }
.lz-srv-wait { flex: none; margin-left: auto; padding: 2px 8px; border-radius: var(--rb-radius-pill); background: var(--rb-warn-soft); color: var(--rb-warn); font-size: 11.5px; font-weight: 600; white-space: nowrap }
/* шапка: проект и заполненность контекста */
.lz-srv-chips { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 4px }
.lz-srv-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 10px; border: 1px solid var(--lz-line-soft); border-radius: var(--rb-radius-pill); background: var(--rb-surface-soft); color: var(--rb-muted); font-size: 13px; white-space: nowrap }
.lz-srv-chip span { overflow: hidden; text-overflow: ellipsis }
.lz-srv-chip .ic { width: 15px; height: 15px; flex: none; color: var(--lz-teal) }
.lz-srv-ctx { display: inline-flex; align-items: center; gap: 6px; color: var(--rb-muted); font-size: 13px; font-variant-numeric: tabular-nums }
.lz-srv-ctx i { width: 15px; height: 15px; border-radius: 50%; background: conic-gradient(var(--lz-teal) calc(var(--p) * 1%), var(--lz-line-soft) 0) }
@media (max-width: 720px) { .lz-srv-chips { display: none } }
.lz-srv-note { align-self: center; margin: 4px auto; color: var(--rb-faint); font-size: 13px; text-align: center }
.lz-srv-note.is-error { color: var(--rb-bad) }

/* новая сессия: проекты */
.lz-srv-pick { display: grid; gap: 12px; width: 100%; max-width: 640px; margin: 8px auto }
.lz-srv-pick__head { display: grid; gap: 2px }
.lz-srv-pick__head b { font: 600 20px/1.3 var(--rb-font-heading) }
.lz-srv-pick__head span { color: var(--rb-muted); font-size: 14px }
.lz-srv-pick__q { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-faint) }
.lz-srv-pick__q .ic { width: 17px; height: 17px }
.lz-srv-pick__q input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: none; color: var(--rb-ink); font: inherit }
.lz-srv-pick__list { display: grid; gap: 4px }
.lz-srv-pj { display: grid; gap: 3px; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--rb-radius-md); background: none; color: var(--rb-ink); font: inherit; text-align: left; cursor: pointer }
.lz-srv-pj:hover { background: var(--lz-hover) }
.lz-srv-pj.is-on { border-color: var(--lz-teal); background: color-mix(in srgb, var(--lz-teal) 6%, transparent) }
.lz-srv-pj__n { display: flex; align-items: baseline; gap: 10px; min-width: 0 }
.lz-srv-pj__n b { font-size: 15.5px }
.lz-srv-pj__n code { overflow: hidden; color: var(--rb-faint); font: 12.5px var(--rb-font-mono); white-space: nowrap; text-overflow: ellipsis }
.lz-srv-pj__s { overflow: hidden; color: var(--rb-muted); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis }
.lz-srv-pj__m { display: flex; flex-wrap: wrap; gap: 10px; color: var(--rb-faint); font-size: 12.5px }
.lz-srv-pj__br { color: var(--lz-teal) }
.lz-srv-pj__d { color: var(--rb-warn) }
.lz-srv-pj__u { color: var(--rb-faint) }
.lz-srv-pj__go { margin-top: 4px; color: var(--lz-teal); font-size: 13px; font-weight: 600 }

/* «Работал 1 мин 12 с · 5 шагов» — шаги между сообщениями */
.lz-srv-work { align-self: stretch; max-width: 780px }
.lz-srv-work__sum { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border: 0; border-radius: var(--rb-radius-pill); background: none; color: var(--rb-muted); font: inherit; font-size: 14px; cursor: pointer }
.lz-srv-work__sum:hover { background: var(--lz-hover) }
.lz-srv-work__sum .ic { width: 16px; height: 16px; flex: none }
.lz-srv-work__n { color: var(--rb-faint) }
.lz-srv-work__now { display: none; overflow: hidden; min-width: 0; color: var(--rb-faint); white-space: nowrap; text-overflow: ellipsis }
.lz-srv-work.is-live .lz-srv-work__now { display: block }
.lz-srv-work.is-live .lz-srv-work__sum > .ic:first-child { color: var(--lz-teal); animation: lz-srv-pulse 1.6s ease-in-out infinite }
@keyframes lz-srv-pulse { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .lz-srv-work.is-live .lz-srv-work__sum > .ic:first-child { animation: none } }
.lz-srv-work__chev { transition: transform var(--rb-ease) }
.lz-srv-work.is-open .lz-srv-work__chev { transform: rotate(180deg) }
.lz-srv-steps { display: none; margin: 2px 0 6px 17px; padding: 4px 0 4px 10px; border-left: 2px solid var(--lz-line-soft); list-style: none }
.lz-srv-work.is-open .lz-srv-steps { display: grid; gap: 1px }
.lz-srv-st { display: flex; gap: 10px; padding: 6px 8px; border-radius: var(--rb-radius-sm) }
.lz-srv-st__i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--rb-faint) }
.lz-srv-st__i .ic { width: 16px; height: 16px }
.lz-srv-st__b { flex: 1; min-width: 0; font-size: 14px }
.lz-srv-st__l { overflow-wrap: anywhere }
.lz-srv-st.can-open .lz-srv-st__l { cursor: pointer }
.lz-srv-st__v { color: var(--rb-muted) }
.lz-srv-st__l code { margin-left: 6px; color: var(--rb-ink); font: 12.5px/1.5 var(--rb-font-mono) }
.lz-srv-st__r { color: var(--rb-faint); font-size: 13px; overflow-wrap: anywhere }
.lz-srv-st__r:empty { display: none }
.lz-srv-st.is-error .lz-srv-st__r, .lz-srv-st.is-error .lz-srv-st__i { color: var(--rb-bad) }
.lz-srv-st.is-quiet .lz-srv-st__v { color: var(--rb-faint) }
.lz-srv-st__more { display: none; margin-top: 6px }
.lz-srv-st.is-open .lz-srv-st__more { display: grid; gap: 6px }
.lz-srv-st__more pre { max-height: 360px; margin: 0; padding: 10px 12px; overflow: auto; border: 1px solid var(--lz-line-soft); border-radius: var(--rb-radius-sm); background: var(--rb-surface-soft); color: var(--rb-ink); font: 12.5px/1.55 var(--rb-font-mono); white-space: pre-wrap; overflow-wrap: anywhere }
.lz-srv-st__more pre:empty { display: none }
pre.lz-srv-diff { padding: 8px 0; white-space: pre }
.lz-srv-dl { display: block; padding: 0 12px }
.lz-srv-dl.is-add { background: color-mix(in srgb, var(--rb-good) 10%, transparent); color: var(--rb-good) }
.lz-srv-dl.is-del { background: color-mix(in srgb, var(--rb-bad) 9%, transparent); color: var(--rb-bad) }
.lz-srv-dl.is-gap { color: var(--rb-faint) }

/* вопрос с вариантами */
.lz-srv-q { display: grid; gap: 14px; width: 100%; max-width: 560px; padding: 16px; border: 1px solid var(--lz-line-strong); border-radius: var(--rb-radius-lg); background: var(--rb-canvas) }
.lz-srv-q.is-open { box-shadow: var(--rb-shadow-hover) }
.lz-srv-q__one { display: grid; gap: 8px }
.lz-srv-q__h { display: grid; gap: 3px; margin-bottom: 2px }
.lz-srv-q__h b { font-size: 16px }
.lz-srv-q__tag { color: var(--lz-teal); font-size: 13px; font-weight: 600 }
.lz-srv-q__o { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--rb-line); border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-ink); font: inherit; text-align: left; cursor: pointer }
.lz-srv-q__o span { color: var(--rb-muted); font-size: 13px }
.lz-srv-q.is-open .lz-srv-q__o:hover { background: var(--lz-hover) }
.lz-srv-q__o.is-pick { border-color: var(--lz-teal); box-shadow: inset 0 0 0 1px var(--lz-teal) }
.lz-srv-q__own { display: flex; padding: 0 14px; border: 1px dashed var(--lz-line-strong); border-radius: var(--rb-radius-md) }
.lz-srv-q__own input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: none; color: var(--rb-ink); font: inherit }
.lz-srv-q__go { justify-self: start }
.lz-srv-q__said { padding: 8px 14px; border-left: 2px solid var(--lz-teal); color: var(--rb-ink) }
.lz-srv-q:not(.is-open) .lz-srv-q__own, .lz-srv-q:not(.is-open) .lz-srv-q__go { display: none }
.lz-srv-q:not(.is-open) .lz-srv-q__o { cursor: default }
.lz-srv-q.is-done { padding: 12px 16px; border-color: var(--lz-line-soft); background: var(--rb-surface-soft) }
.lz-srv-q.is-stale { opacity: .6 }
.lz-srv-q.is-sending { opacity: .6; pointer-events: none }

/* ключ: закрытое поле на тёмной карточке */
.lz-srv-key { display: grid; gap: 12px; width: 100%; max-width: 560px; padding: 16px; border-radius: var(--rb-radius-lg); background: var(--lz-night); color: var(--lz-white) }
.lz-srv-key__h { display: flex; gap: 12px }
.lz-srv-key__h > div { display: grid; gap: 2px; min-width: 0 }
.lz-srv-key__h b { font-size: 16px; overflow-wrap: anywhere }
.lz-srv-key__h span { color: color-mix(in srgb, var(--lz-white) 68%, transparent); font-size: 13.5px }
.lz-srv-key__ic .ic { width: 24px; height: 24px; color: var(--lz-mint) }
.lz-srv-key__form { display: none; gap: 12px }
.lz-srv-key.is-open .lz-srv-key__form { display: grid }
.lz-srv-key__f { display: flex; align-items: center; padding: 0 6px 0 14px; border: 1px solid color-mix(in srgb, var(--lz-white) 22%, transparent); border-radius: var(--rb-radius-md); background: var(--lz-night-deep) }
.lz-srv-key__f input { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: 0; background: none; color: var(--lz-white); font: 500 15px var(--rb-font-mono) }
.lz-srv-key__eye { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: color-mix(in srgb, var(--lz-white) 60%, transparent); cursor: pointer }
.lz-srv-key__eye .ic { width: 18px; height: 18px }
.lz-srv-key__to { margin: 0; color: color-mix(in srgb, var(--lz-white) 62%, transparent); font-size: 13px }
.lz-srv-key__to code { color: var(--lz-mint); font: 12.5px var(--rb-font-mono); overflow-wrap: anywhere }
.lz-srv-key__a { display: flex; flex-wrap: wrap; gap: 8px }
.lz-srv-key__a button { padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--lz-white) 25%, transparent); border-radius: var(--rb-radius-pill); background: none; color: var(--lz-white); font: inherit; font-weight: 600; cursor: pointer }
.lz-srv-key__a .lz-srv-key__save { border-color: var(--lz-mint); background: var(--lz-mint); color: var(--lz-night-deep) }
.lz-srv-key__done { color: var(--lz-mint); font-size: 13.5px; overflow-wrap: anywhere }
.lz-srv-key__done:empty, .lz-srv-key.is-open .lz-srv-key__done { display: none }
.lz-srv-key.is-fail .lz-srv-key__done, .lz-srv-key.is-stale .lz-srv-key__done { color: color-mix(in srgb, var(--lz-white) 62%, transparent) }
.lz-srv-key.is-done, .lz-srv-key.is-stale { padding: 12px 16px }
.lz-srv-key.is-sending { opacity: .6; pointer-events: none }

/* Отправка уходит: на кнопке — кружок, пока сайт не подтвердил (обычная беседа и сессия с сервером) */
.rb-chat__compose .rb-chat__send.is-sending { position: relative; opacity: 1; filter: none; pointer-events: none }
.rb-chat__send.is-sending .ic { visibility: hidden }
.rb-chat__send.is-sending::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lz-send-spin .7s linear infinite }
@keyframes lz-send-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .rb-chat__send.is-sending::after { animation-duration: 1.6s } }
.lz-srv-pending { opacity: .55 }
/* сессия: строка «Работает 0:09 · 3 шага · сейчас …» — в одну строку, текущий шаг обрезается */
.lz-srv-work__sum { display: flex; width: max-content; min-width: 0 }
.lz-srv-work__label, .lz-srv-work__n { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums }
.lz-srv-work__now { flex: 1 1 auto }
.lz-srv-work__now::before { content: "·"; margin-right: 6px }
.lz-srv-work.is-live .lz-srv-work__now:empty { display: none }      /* шагов ещё нет — без пустого места и точки */
.lz-srv-st.is-say .lz-srv-st__v { color: var(--rb-ink) }
.lz-srv-st.is-say .lz-srv-st__i { color: var(--rb-faint) }
.lz-srv-st.is-say .lz-srv-st__more .rb-richtext { font-size: 14px }
.rb-nav-chat .rb-nav-item--chat .lz-srv-busy { display: inline-flex; align-items: center; flex: none; margin-left: auto }

/* ── Вопрос с вариантами в поле ввода (app.js askOpen): агент — ask_choice, сессии — AskUserQuestion. Поле ввода
   становится ответом: шапка «Вопрос 2 из 5» и «Назад», вопрос, варианты строками с номером (цифра — выбор),
   ниже — само поле как «свой вариант». В ленте у вопроса кнопок нет, после ответа — строка .lz-ask-said */
.lz-askp { display: grid; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--lz-line-soft) }
.lz-askp[hidden] { display: none }
.lz-askp__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px }
.lz-askp__step { color: var(--rb-muted); font-size: 13px; font-weight: 500 }
.lz-askp__nav { display: inline-flex; gap: 2px }
.lz-askp__arrow { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--rb-ink); cursor: pointer }
.lz-askp__arrow:hover:not(:disabled) { background: var(--lz-hover) }
.lz-askp__arrow:disabled { color: var(--lz-line-strong); cursor: default }
.lz-askp__arrow .ic { display: block; width: 18px; height: 18px }
.lz-askp__arrow.is-prev .ic { transform: scaleX(-1) }
.lz-askp__q { color: var(--rb-ink); font-size: 16px; font-weight: 600; line-height: 1.35 }
.lz-askp__opts { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto }
.lz-askp__o { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-md); background: var(--rb-canvas); color: var(--rb-ink); font: inherit; text-align: left; cursor: pointer;
  transition: background .12s ease, border-color .12s ease }
.lz-askp__o:hover { background: var(--lz-hover); border-color: var(--lz-line-strong) }
.lz-askp__o.is-pick { border-color: var(--lz-teal); box-shadow: inset 0 0 0 1px var(--lz-teal) }
.lz-askp__n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--lz-line-strong);
  border-radius: 6px; color: var(--rb-muted); font-size: 12px; font-weight: 600; line-height: 1 }
.lz-askp__o:hover .lz-askp__n, .lz-askp__o.is-pick .lz-askp__n { border-color: var(--lz-teal); color: var(--lz-teal) }
.lz-askp__t { display: grid; gap: 2px; min-width: 0 }
.lz-askp__t b { font-weight: 500; overflow-wrap: anywhere }
.lz-askp__t span { color: var(--rb-muted); font-size: 13px }
.lz-askp__go { justify-self: start }
.lz-askp__own { padding: 8px 12px; border-left: 2px solid var(--lz-teal); color: var(--rb-ink); font-size: 14px; overflow-wrap: anywhere }
.lz-askp.is-sending { opacity: .55; pointer-events: none }
.lz-ask-said { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px 4px 6px; border-radius: 999px;
  background: var(--rb-surface-soft); color: var(--rb-ink); font-size: 13.5px }
.lz-ask-said .ic { width: 16px; height: 16px; color: var(--lz-teal) }


/* ── Профиль и настройки — страница /settings/<раздел> (app.js openProfile; 11.11.2026, было окном) ─────────────────
   Слева — столбик разделов, внизу его — кто вошёл и выход (видны всегда), справа — раздел. Узкий экран: разделы и выход —
   строками прокрутки сверху */
/* страница во всю область справа от боковой панели: без полей и ширины основной области (robowb .rb-workspace__main) —
   иначе между панелями оставалась полоса, в тёмной теме видная (владелец, 11.11.2026) */
.rb-workspace__main.is-settings { width: 100%; max-width: none; padding: 0 }
.lz-spage { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100vh; height: 100dvh }
.lz-spage[hidden] { display: none }
.lz-snav { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 26px 12px 16px; border-right: 1px solid var(--rb-line);
  background: var(--rb-canvas); overflow-y: auto }
.lz-snav__head { display: flex; align-items: center; gap: 8px; padding: 0 10px 16px }
.lz-snav__head .lz-panel-show { display: none }
@media (min-width: 821px) { html.lz-panel-hidden .lz-snav__head .lz-panel-show { display: grid } }
.lz-snav__title { margin: 0; font: 600 24px/1.2 var(--rb-font-heading); letter-spacing: -.01em }
.lz-snav__list { display: flex; flex-direction: column; gap: 2px }
.lz-snav__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0;
  border-radius: var(--rb-radius-md); background: none; color: var(--rb-ink); font: 500 14.5px/1.25 var(--rb-font-body);
  text-align: left; cursor: pointer; transition: background var(--rb-ease) }
.lz-snav__item .ic { width: 18px; height: 18px; flex: none; color: var(--rb-muted) }
.lz-snav__item:hover { background: var(--lz-hover) }
.lz-snav__item.is-active { background: var(--lz-selected); font-weight: 600 }
.lz-snav__item.is-active .ic { color: var(--rb-ink) }
.lz-snav__item[hidden] { display: none }
.lz-snav__foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rb-line) }
.lz-snav__who { padding: 0 12px 8px; color: var(--rb-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere }
.lz-snav__out { color: var(--rb-muted) }
.lz-snav__out[data-logout] .ic { transform: scaleX(-1) }
.lz-spage__body { min-height: 0; overflow-y: auto; display: grid; align-content: start; justify-items: start; gap: 14px;
  padding: 30px 36px 48px; background: var(--lz-paper) }
.lz-spage__body > * { width: 100%; max-width: 720px }
@media (max-width: 720px) {
  .lz-spage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) }
  .lz-snav { padding: 60px 10px 8px; border-right: 0; border-bottom: 1px solid var(--rb-line); overflow: visible }
  .lz-snav__head { padding: 0 8px 10px }
  .lz-snav__list, .lz-snav__foot { flex-direction: row; overflow-x: auto; scrollbar-width: none }
  .lz-snav__list::-webkit-scrollbar, .lz-snav__foot::-webkit-scrollbar { display: none }
  .lz-snav__item { flex: none; width: auto; min-height: 36px; padding: 0 12px; border-radius: 999px }
  .lz-snav__foot { margin-top: 6px; padding-top: 6px }
  .lz-snav__who { display: none }
  .lz-spage__body { padding: 18px 14px 40px }
}

/* ── Пункты при наборе (static/shaper.js, 11.11.2026; макет mockups/shaper.html, вид А «пелена») ──────────────────
   Матовая пелена на всю ленту, сверху тает; пункты — шрифтом поля ввода, на 35% прозрачнее (главное — текст человека,
   это подсказка), важность — жирностью */
.lz-shape { position: absolute; z-index: 9; inset: 0; padding-bottom: calc(var(--rb-compose-height, 138px) + var(--rb-keyboard-height, 0px) + 22px); pointer-events: none }
.lz-shape[hidden] { display: none }
.lz-shape__veil { position: absolute; inset: 0; opacity: 0; background: color-mix(in srgb, var(--rb-canvas) 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--lz-black) 28px); mask-image: linear-gradient(to bottom, transparent, var(--lz-black) 28px);
  transition: opacity .7s ease, backdrop-filter .7s ease, -webkit-backdrop-filter .7s ease }
.lz-shape.is-on .lz-shape__veil { opacity: 1; -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1) }
/* размер пунктов — от --shape-k (static/shaper.js: чем больше пунктов, тем мельче), кнопки и подписи — свои px */
.lz-shape__sheet { position: relative; width: min(768px, 100%); max-height: 100%; margin: 0 auto; padding: 20px 24px 18px; overflow: auto; scrollbar-width: none; font-size: calc(16px * var(--shape-k, 1));
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease .15s, transform .5s ease .15s }
.lz-shape.is-on .lz-shape__sheet { opacity: 1; transform: none }
.lz-shape__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px }
.lz-shape__kicker { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.3 var(--rb-font-body); color: var(--rb-faint) }
.lz-shape__kicker .ic { width: 14px; height: 14px }
/* знак витрины слева от «Пока пишете, делаю заметку» и в «Вернуть заметку»; у Yune пока пишет — кисть «думает» (theme.css) */
.lz-shape__logo { display: inline-grid; place-items: center; width: 15px; height: 15px; flex: none; color: var(--rb-ink) }
.lz-shape__logo svg { width: 100%; height: 100%; fill: currentColor }
.lz-shape-back .lz-shape__logo { width: 14px; height: 14px }
.lz-shape__hide, .lz-shape__act { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: var(--rb-radius-pill);
  background: transparent; font: 500 13px/1.2 var(--rb-font-body); color: var(--rb-muted); cursor: pointer }
.lz-shape__hide:hover, .lz-shape__act:hover { background: color-mix(in srgb, var(--rb-ink) 6%, transparent); color: var(--rb-ink) }
.lz-shape__hide .ic, .lz-shape__act .ic { width: 15px; height: 15px }
.lz-shape__hide:focus-visible, .lz-shape__act:focus-visible { outline: 2px solid var(--rb-ink); outline-offset: 2px }
.lz-shape__title { margin: 0 0 10px; min-height: 1.25em; font: 600 1.125em/1.25 var(--rb-font-body); letter-spacing: -.01em; color: var(--rb-ink) }
.lz-shape__tree { list-style: none; margin: 0; padding: 0; counter-reset: lz-step; font-family: var(--rb-font-body); color: var(--rb-ink) }
.lz-shape__sheet > .lz-shape__title, .lz-shape__sheet > .lz-shape__tree, .lz-shape__sheet > .lz-shape__next { opacity: .65 }
.lz-shape__item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; padding: 2px 0; transition: opacity .4s ease }
.lz-shape__item.is-new { opacity: 0 }
.lz-shape__mark { font: 600 .78em/1 var(--rb-font-body); color: var(--rb-faint); font-variant-numeric: tabular-nums }
.lz-shape__body { min-width: 0 }
.lz-shape__ic { display: inline-block; margin-right: .4em; color: var(--rb-faint); opacity: .75 }
.lz-shape__ic .ic { width: .95em; height: .95em; vertical-align: -.12em }
.lz-shape__mark .ic { width: .875em; height: .875em; transform: translateY(2px) }
.lz-shape__item[data-kind="step"] { counter-increment: lz-step; margin-top: 4px }
.lz-shape__item[data-kind="step"] .lz-shape__mark::before { content: counter(lz-step) }
.lz-shape__item[data-weight="3"] { font-size: .97em; font-weight: 650 }
.lz-shape__item[data-weight="2"] { font-size: .94em; font-weight: 520 }
.lz-shape__item[data-weight="1"] { font-size: .875em; font-weight: 400; color: var(--rb-muted) }
.lz-shape__item[data-kind="warn"] { margin-top: 10px }
.lz-shape__item[data-kind="warn"] .lz-shape__mark { color: var(--rb-ink) }
.lz-shape__item[data-kind="note"] { margin-top: 6px }
.lz-shape__item[data-kind="note"] .lz-shape__mark::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translate(5px, -3px) }
/* ветка: уголок от шага к подпункту */
.lz-shape__item[data-level="1"] { grid-template-columns: minmax(0, 1fr); padding-left: 22px }
.lz-shape__item[data-level="1"]::before { content: ""; position: absolute; left: 5px; top: -3px; width: 11px; height: calc(.5em + 11px);
  border-left: 1.5px solid var(--rb-line); border-bottom: 1.5px solid var(--rb-line); border-bottom-left-radius: 7px }
.lz-shape__item[data-level="1"] .lz-shape__mark { display: none }
.lz-shape__item[data-level="1"] { font-weight: 400 }        /* подпункт — тоньше шага, какой бы вес ни дала модель */
.lz-shape__next { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--rb-line); font: 400 .84em/1.5 var(--rb-font-body); color: var(--rb-muted) }
.lz-shape__next[hidden] { display: none }
.lz-shape .is-typing::after { content: ""; display: inline-block; width: 1.5px; height: .95em; margin-left: 1px; background: currentColor; vertical-align: -.1em; animation: rb-cursor-blink .9s steps(1, end) infinite }
.lz-shape__acts, .lz-shape__off { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px -10px 0 }
.lz-shape__acts[hidden], .lz-shape__off[hidden] { display: none }
.lz-shape__off { margin-left: 0; padding-top: 10px; border-top: 1px solid var(--rb-line); color: var(--rb-ink); font-size: 14px }
.lz-shape__off > span { margin-right: 6px }
.lz-shape__off .lz-shape__act:not(.is-quiet) { color: var(--rb-ink); font-weight: 600 }
/* под отправленным сообщением: «По пунктам» раскрывает пункты в пузыре; отправленное по пунктам — пунктами */
.lz-shape-btn { opacity: 1 }          /* значок — знак, что пункты есть: виден всегда, не только при наведении */
.lz-shape-btn.is-on { color: var(--rb-ink) }
.lz-shape__inmsg { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rb-line); white-space: normal }
.lz-shape__inmsg[hidden] { display: none }
.lz-shape__inmsg .lz-shape__acts { margin-bottom: -4px }
.lz-shape__static { white-space: normal }
.lz-shape__static .lz-shape__title { margin-bottom: 6px; font-size: 16px }
.lz-shape__static .lz-shape__item[data-weight="3"] { font-size: 15px }
.lz-shape__static .lz-shape__item[data-weight="2"] { font-size: 14.5px }
.lz-shape__static .lz-shape__item[data-weight="1"] { font-size: 13.5px }
.lz-msg.is-shaped > .lz-text { min-width: min(420px, 100%) }
@media (max-width: 720px) {
  .lz-shape__sheet { padding: 0 16px 14px }
  .lz-shape__title { margin-bottom: 8px; font-size: 1.0625em }
  .lz-shape__item[data-weight="3"] { font-size: .94em }
  .lz-shape__item[data-weight="2"] { font-size: .906em }
  .lz-shape__item[data-weight="1"] { font-size: .844em }
  /* много пунктов: лист листается пальцем (на компьютере колесо над лентой прячет пелену), поле — до 5 строк */
  .lz-shape__sheet { pointer-events: auto; touch-action: pan-y; overscroll-behavior: contain }
  .rb-chat.lz-shape-on .rb-chat__compose .lz-cmp__row .rb-composer__input { max-height: 112px }
  /* лист прокручивается за печатью — «Скрыть» остаётся на виду */
  .lz-shape__head { position: sticky; z-index: 1; top: 0; margin: 0 -16px 6px; padding: 12px 16px 6px; background: linear-gradient(to bottom, var(--rb-canvas) 75%, transparent) }
}
/* под полем — подложка цвета чата (.rb-chat__compose::before): пока видна пелена, гаснет — пелена до низа экрана */
.rb-chat__compose::before { transition: opacity .7s ease }
.rb-chat.lz-shape-on .rb-chat__compose::before { opacity: 0 }
/* пока видна пелена, поле ниже: пунктам нужно место (на компьютере — до 8 строк, на телефоне — до 5, ниже) */
@media (min-width: 721px) { .rb-chat.lz-shape-on .rb-chat__compose .lz-cmp__row .rb-composer__input { max-height: 178px } }
/* «Вернуть свой текст» — над текстом в поле после «Перенести в поле» */
.lz-shape-undo { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 12px; padding: 4px 10px 4px 8px; border: 1px solid var(--rb-line);
  border-radius: var(--rb-radius-pill); background: transparent; font: 500 12.5px/1.2 var(--rb-font-body); color: var(--rb-muted); cursor: pointer; pointer-events: auto }
.lz-shape-undo:hover { border-color: var(--rb-ink); color: var(--rb-ink) }
.lz-shape-undo:focus-visible { outline: 2px solid var(--rb-ink); outline-offset: 2px }
.lz-shape-undo .ic { width: 14px; height: 14px }
/* пустая беседа («Новый чат»): пока видна пелена, поле — внизу, как в беседе; приветствие и подсказки задач — прочь */
.rb-chat.is-empty .rb-chat__compose { transition: bottom .45s ease }
.rb-chat.is-empty.lz-shaping .rb-chat__compose { bottom: calc(var(--rb-keyboard-height, 0px) + 14px) !important }
.rb-chat.is-empty.lz-shaping .lz-starters, .rb-chat.is-empty.lz-shaping .rb-chat__empty { display: none !important }
@media (prefers-reduced-motion: reduce) { .lz-shape__veil, .lz-shape__sheet, .lz-shape__item, .rb-chat.is-empty .rb-chat__compose { transition: none } }

/* Волна записи голосового — холст (app.js liveWave); цвета — от тёмного синего к петролю, как у логотипа; витрина меняет токены */
:root { --voice-wave-from: var(--lz-navy); --voice-wave-to: var(--lz-teal) }
html.lz-dark { --voice-wave-from: var(--lz-lavender); --voice-wave-to: var(--lz-mint) }
.rb-voice-recorder__wave { position: relative; display: block; height: 30px }
.rb-voice-recorder__wave canvas { position: absolute; inset: 0; width: 100%; height: 100% }

/* В кнопке «отправить» микрофон (поле пустое) — под полем второй микрофон не нужен (владелец 11.11.2026) */
.rb-chat__compose:has(.rb-chat__send.is-mic) .lz-under [data-mic] { display: none }

/* Подписи кнопок шапки беседы и значок у «Пополнить» — только у витрины, которая их включает (brands/*/theme.css); у Ложки
   кнопки шапки — значками, «Пополнить» — словом */
.lz-tb-t { display: none }
.lz-balance__topup > .ic { display: none }