/* Кнопки по ролям — один слой для Ложки и Yune (11.11.2026, гайд webchat/static/mockups/yune-style*.html).
   Здесь только привязка «роль → классы»: вид берётся из токенов роли. Значения токенов задаёт контекст —
   приложение (app.css), сайт (seo/seo.css), витрина (static/brands/<бренд>/theme.css меняет только токены).
   Новая кнопка — класс в список своей роли, а не свои цвета. Роли и правила — CLAUDE.md, «Кнопки по ролям».

   действие (главная)  --btn-main-*    полезная функция, одна на экран: отправить, «Проверить», «Создать» (Yune — жидкое стекло)
   уровень А           --btn-paid-*    крупный шаг интерфейса, переход к большому: «Новое задание», «Сделать задачу»
   финансовая          --btn-second-*  про деньги, но не тратит: «Пополнить», суммы пополнения (Yune — тиснение, цветные текст и значок);
                                       у Ложки та же роль — второстепенная: «Пополнить», «Ещё»
   UX                  --btn-ux-*      ходы по приложению: «Новая задача», «Повторяющиеся задачи» (Yune — тиснение, цвет текста системный)
   инструмент          --btn-tool-*    функциональная кнопка на белом: шапка беседы — название, медиа, поделиться, «Сохранить» названия
                                       (Yune — волосяная обводка, подпись --btn-tool-label и значок --btn-tool-ink — цветом текста)
   системная иконка    --btn-icon-*    голый значок без плашки: свернуть и развернуть панель
   подложка тиснения   --emb-surface-* плашка под кнопками с тиснением: баланс в панели, плашка пополнения (Yune)
   выбор               --choice-on-*   выбранный пункт: активная беседа, раздел профиля, переключатель, вкладка, сегмент
   UX, инструмент и суммы пополнения в финансовой включает витрина флагами ux-role, tool-role, fin-role, choice-role (<meta name="lz-flags">): у Ложки эти кнопки — свои.
   (тихая, текстовая, иконка, опасная — классы robowb: .rb-btn--quiet, .lnk, .rb-btn--icon, .rb-btn--danger) */

/* ── главная ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.rb-btn--primary, .rb-chat__send.rb-btn--round, .btn--flow, .rb-composer .rb-chat__send {
  background: var(--btn-main-bg); background-size: var(--btn-main-size, auto); color: var(--btn-main-ink);
  box-shadow: var(--btn-main-shadow, none); animation: var(--btn-main-anim, none);
  -webkit-backdrop-filter: var(--btn-main-blur, none); backdrop-filter: var(--btn-main-blur, none) }
.rb-btn--primary:hover, .rb-chat__send.rb-btn--round:hover, .btn--flow:hover, .rb-composer .rb-chat__send:hover {
  background: var(--btn-main-hover-bg, var(--btn-main-bg)); background-size: var(--btn-main-size, auto); color: var(--btn-main-ink);
  filter: var(--btn-main-hover-filter, none); box-shadow: var(--btn-main-hover-shadow, var(--btn-main-shadow, none)) }
/* нельзя нажать (disabled) */
.rb-btn--primary:disabled, .btn--flow:disabled {
  background: var(--btn-main-off-bg, var(--btn-main-bg)); background-size: var(--btn-main-off-size, auto); color: var(--btn-main-off-ink, var(--btn-main-ink));
  filter: var(--btn-main-off-filter, none); opacity: var(--btn-main-off-opacity, 1); box-shadow: var(--btn-main-off-shadow, none); animation: var(--btn-main-off-anim, none) }
/* отправлять нечего (поле пустое — .lz-idle); с микрофоном в кнопке (.is-mic) — обычная главная, её можно нажать */
.rb-chat__compose.lz-idle .lz-cmp__row .rb-chat__send:not(.is-mic) {
  background: var(--btn-main-idle-bg, var(--btn-main-bg)); background-size: var(--btn-main-size, auto); color: var(--btn-main-idle-ink, var(--btn-main-ink));
  opacity: var(--btn-main-idle-opacity, 1); filter: var(--btn-main-idle-filter, none); box-shadow: var(--btn-main-idle-shadow, var(--btn-main-shadow, none)) }

/* ── уровень А (токены --btn-paid-*) ─────────────────────────────────────────────────────────────────────────── */
.rb-chat__send.is-do, .rb-chat__send.is-do:hover, .rb-chat.is-ws .lz-ws__nav [data-ws-new], .rb-chat.is-ws .lz-ws__nav [data-ws-new]:hover {
  background: var(--btn-paid-bg); background-size: var(--btn-paid-size, auto); color: var(--btn-paid-ink); box-shadow: var(--btn-paid-shadow, none);
  animation: var(--btn-paid-anim, none); -webkit-backdrop-filter: var(--btn-paid-blur, none); backdrop-filter: var(--btn-paid-blur, none) }
.rb-chat__send.is-do:hover, .rb-chat.is-ws .lz-ws__nav [data-ws-new]:hover { filter: var(--btn-paid-hover-filter, var(--btn-main-hover-filter, none));
  background: var(--btn-paid-hover-bg, var(--btn-paid-bg)); background-size: var(--btn-paid-size, auto); box-shadow: var(--btn-paid-hover-shadow, var(--btn-paid-shadow, none)) }
.rb-chat__send.is-do:disabled { background: var(--btn-paid-bg); background-size: var(--btn-paid-size, auto); color: var(--btn-paid-ink);
  box-shadow: var(--btn-paid-shadow, none); filter: none; opacity: var(--btn-paid-dis-opacity, .6) }
.rb-chat__send.is-do .lz-do-mark { fill: var(--btn-paid-ink) }
.rb-chat__send.is-do.is-off { background: var(--btn-paid-off-bg); color: var(--btn-paid-off-ink); box-shadow: var(--btn-paid-off-shadow, none); filter: none }
.rb-chat__send.is-do.is-off .lz-do-mark { fill: var(--btn-paid-off-ink) }

/* ── финансовая (у Ложки — второстепенная) ──────────────────────────────────────────────────────────────────────────────────────────── */
.lz-balance__topup.rb-btn--outline, .btn--ghost {
  border-width: var(--btn-second-border-w); border-color: var(--btn-second-border, transparent); background: var(--btn-second-bg); color: var(--btn-second-ink); box-shadow: var(--btn-second-shadow, none);
  -webkit-backdrop-filter: var(--btn-second-blur, none); backdrop-filter: var(--btn-second-blur, none) }
.lz-balance__topup.rb-btn--outline:hover, .btn--ghost:hover {
  border-color: var(--btn-second-hover-border, var(--btn-second-border, transparent)); background: var(--btn-second-hover-bg, var(--btn-second-bg));
  color: var(--btn-second-hover-ink, var(--btn-second-ink)); box-shadow: var(--btn-second-hover-shadow, var(--btn-second-shadow, none)) }
.lz-balance__topup.rb-btn--outline:active, .btn--ghost:active {
  box-shadow: var(--btn-second-press-shadow, var(--btn-second-hover-shadow, var(--btn-second-shadow, none))) }

/* суммы пополнения в окне «Пополнить» — тоже финансовая, флаг витрины fin-role (у Ложки — свой вид: рамка, под курсором
   заливка «уровня А», app.css .lz-amount). Подпись «пополнить» под суммой остаётся бледной */
html:has(meta[name="lz-flags"][content~="fin-role"]) .lz-amount {
  border-width: var(--btn-second-border-w); border-color: var(--btn-second-border, transparent); background: var(--btn-second-bg); color: var(--btn-second-ink);
  box-shadow: var(--btn-second-shadow, none); transition: box-shadow .2s ease }
html:has(meta[name="lz-flags"][content~="fin-role"]) .lz-amount .ic { color: var(--btn-second-ink) }
html:has(meta[name="lz-flags"][content~="fin-role"]) .lz-amount:hover:not(:disabled) {
  border-color: var(--btn-second-hover-border, var(--btn-second-border, transparent)); background: var(--btn-second-hover-bg, var(--btn-second-bg));
  color: var(--btn-second-hover-ink, var(--btn-second-ink)); box-shadow: var(--btn-second-hover-shadow, var(--btn-second-shadow, none));
  -webkit-backdrop-filter: none; backdrop-filter: none }
html:has(meta[name="lz-flags"][content~="fin-role"]) .lz-amount:hover:not(:disabled) .ic { color: var(--btn-second-hover-ink, var(--btn-second-ink)) }
html:has(meta[name="lz-flags"][content~="fin-role"]) .lz-amount:hover:not(:disabled) .lz-amount__hint { color: var(--rb-faint) }
html:has(meta[name="lz-flags"][content~="fin-role"]) .lz-amount:active:not(:disabled) { box-shadow: var(--btn-second-press-shadow, var(--btn-second-hover-shadow, var(--btn-second-shadow, none))) }

/* ── подложка тиснения ───────────────────────────────────────────────────────────────────────────────────────── */
/* Плашка, на которой стоят кнопки с тиснением: тиснение читается, только когда кнопка того же цвета, что и плашка под ней.
   Баланс в панели (с «Пополнить»), плашка пополнения в профиле и в окне оплаты; флаг витрины fin-role. Вид — --emb-surface-bg */
html:has(meta[name="lz-flags"][content~="fin-role"]) :is(.lz-balance, .lz-card:has(.lz-amounts), .lz-pay:has(.lz-amounts)) {
  background: var(--emb-surface-bg); --btn-second-bg: var(--emb-surface-bg); --btn-second-hover-bg: var(--emb-surface-bg) }

/* ── выбор ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.rb-sidebar .rb-nav-item.is-active, .rb-segmented__item.is-active {
  background: var(--choice-on-bg); color: var(--choice-on-ink); box-shadow: var(--choice-on-shadow, none) }
/* разделы профиля, переключатели настроек (.lz-choice), вкладки, фильтры и вид задач — тоже выбор; флаг витрины choice-role
   (у Ложки у них свой вид: серая или чёрная заливка, app.css) */
html:has(meta[name="lz-flags"][content~="choice-role"]) :is(.lz-snav__item, .lz-choice__item, .lz-tabs__item, .lz-ttabs button, .lz-tfilter button, .lz-tsize button).is-active {
  border-color: transparent; background: var(--choice-on-bg); color: var(--choice-on-ink); box-shadow: var(--choice-on-shadow, none) }
html:has(meta[name="lz-flags"][content~="choice-role"]) .lz-snav__item.is-active .ic { color: var(--choice-on-ink) }

/* ── блик под курсором (у витрины с --btn-shine): круглый, какой бы формы ни была кнопка; место — --mx/--my,
   их ставит скрипт витрины (brands/<бренд>/brand.js). У Ложки блика нет — слой прозрачный ── */
.rb-btn--primary, .rb-chat__send.rb-btn--round, .btn--flow, .rb-composer .rb-chat__send, .rb-chat__send.is-do,
.rb-chat.is-ws .lz-ws__nav [data-ws-new], .lz-balance__topup.rb-btn--outline, .btn--ghost { position: relative; isolation: isolate; overflow: hidden }
.rb-btn--primary::before, .rb-chat__send.rb-btn--round::before, .btn--flow::before, .rb-composer .rb-chat__send::before, .rb-chat__send.is-do::before,
.rb-chat.is-ws .lz-ws__nav [data-ws-new]::before, .lz-balance__topup.rb-btn--outline::before, .btn--ghost::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle var(--btn-shine-r, 0px) at var(--mx, 32%) var(--my, 18%), var(--btn-shine, transparent), transparent);
  transition: opacity .3s ease }
/* у второстепенной (тиснение у Yune) блика за курсором может не быть — --btn-second-shine */
.lz-balance__topup.rb-btn--outline::before, .btn--ghost::before {
  background: radial-gradient(circle var(--btn-shine-r, 0px) at var(--mx, 32%) var(--my, 18%), var(--btn-second-shine, var(--btn-shine, transparent)), transparent) }
.rb-btn--primary:disabled::before, .btn--flow:disabled::before, .rb-chat__compose.lz-idle .lz-cmp__row .rb-chat__send:not(.is-mic)::before,
.rb-chat__send.is-do.is-off::before { opacity: 0 }
/* приподнять под курсором — если витрина задала --btn-lift */
.rb-btn--primary:hover:not(:disabled), .rb-chat__send:hover:not(:disabled), .btn--flow:hover:not(:disabled), .lz-balance__topup.rb-btn--outline:hover,
.btn--ghost:hover { transform: var(--btn-lift, none) }
.rb-btn--primary:active:not(:disabled), .rb-chat__send:active:not(:disabled), .btn--flow:active:not(:disabled) { transform: var(--btn-press, none) }

/* ── инструмент ─────────────────────────────────────────────────────────────────────────────────────────── */
/* Кнопки-инструменты на белом: шапка беседы (название, медиа, поделиться); флаг витрины tool-role. Показ кнопок
   (какие видны) роль не трогает — только вид */
/* шапка беседы — на широком экране (на телефоне её кнопки остаются значками, app.css) */
@media (min-width: 721px) {
  html:has(meta[name="lz-flags"][content~="tool-role"]) :is(.rb-chat__toolbar .rb-chat__header-action:not(.lz-panel-show, .lz-chat-more), .rb-chat__toolbar .lz-share-open, .rb-chat__title-button) {
    align-items: center; gap: 6px; width: auto !important; height: 34px; padding: 0 13px !important;
    border: 1px solid var(--btn-tool-border) !important; border-radius: 999px !important; background: var(--btn-tool-bg); color: var(--btn-tool-label);
    font: 600 13px/1 var(--rb-font-body); box-shadow: none; transition: box-shadow .2s ease, transform .2s ease }
  html:has(meta[name="lz-flags"][content~="tool-role"]) :is(.rb-chat__toolbar .rb-chat__header-action:not(.lz-panel-show, .lz-chat-more), .rb-chat__toolbar .lz-share-open, .rb-chat__title-button):hover { background: var(--btn-tool-bg); box-shadow: var(--btn-tool-hover-shadow); transform: translateY(-1px) }
  html:has(meta[name="lz-flags"][content~="tool-role"]) :is(.rb-chat__toolbar .rb-chat__header-action:not(.lz-panel-show, .lz-chat-more), .rb-chat__toolbar .lz-share-open, .rb-chat__title-button) :is(.ic, svg) { width: 16px; height: 16px; color: var(--btn-tool-ink) }
}

/* «Сохранить» у названия беседы — тоже инструмент: мелкая правка, а не главное действие (у Ложки — главная) */
html:has(meta[name="lz-flags"][content~="tool-role"]) [data-title-save].rb-btn--primary {
  height: 34px; padding: 0 14px; border: 1px solid var(--btn-tool-border); border-radius: 999px; background: var(--btn-tool-bg); color: var(--btn-tool-label);
  font: 600 13px/1 var(--rb-font-body); box-shadow: none; animation: none; filter: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: box-shadow .2s ease, transform .2s ease }
html:has(meta[name="lz-flags"][content~="tool-role"]) [data-title-save].rb-btn--primary::before { display: none }
html:has(meta[name="lz-flags"][content~="tool-role"]) [data-title-save].rb-btn--primary:hover {
  background: var(--btn-tool-bg); color: var(--btn-tool-label); filter: none; box-shadow: var(--btn-tool-hover-shadow); transform: translateY(-1px) }
html:has(meta[name="lz-flags"][content~="tool-role"]) [data-title-save].rb-btn--primary:active { transform: none }

/* ── UX ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Пункты вверху боковой панели; флаг витрины ux-role. Размеры и отступы — у витрины */
html:has(meta[name="lz-flags"][content~="ux-role"]) .rb-sidebar .rb-nav__list > .lz-nav-new { background: var(--btn-ux-bg); color: var(--btn-ux-ink); box-shadow: var(--btn-ux-shadow, none); transition: box-shadow .2s ease }
html:has(meta[name="lz-flags"][content~="ux-role"]) .rb-sidebar .rb-nav__list > .lz-nav-new:hover { background: var(--btn-ux-bg); color: var(--btn-ux-ink); box-shadow: var(--btn-ux-hover-shadow, var(--btn-ux-shadow, none)) }
html:has(meta[name="lz-flags"][content~="ux-role"]) .rb-sidebar .rb-nav__list > .lz-nav-new:active, html:has(meta[name="lz-flags"][content~="ux-role"]) .rb-sidebar .rb-nav__list > .lz-nav-new.is-active { background: var(--btn-ux-bg); color: var(--btn-ux-ink); box-shadow: var(--btn-ux-press-shadow, var(--btn-ux-shadow, none)) }
html:has(meta[name="lz-flags"][content~="ux-role"]) .rb-sidebar .rb-nav__list > .lz-nav-new .ic { color: var(--btn-ux-ink) }

/* ── системная иконка ────────────────────────────────────────────────────────────────────────────────────────── */
/* Свернуть панель (в панели) и развернуть (в шапке у названия беседы) — одна кнопка-значок без плашки */
.lz-panel-toggle, html:has(meta[name="lz-flags"][content~="tool-role"]) .lz-panel-show { background: transparent; color: var(--btn-icon-ink) }
.lz-panel-toggle:hover, html:has(meta[name="lz-flags"][content~="tool-role"]) .lz-panel-show:hover { background: var(--btn-icon-hover-bg); color: var(--btn-icon-hover-ink) }
html:has(meta[name="lz-flags"][content~="tool-role"]) .lz-panel-show { place-items: center; width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important;
  border-radius: var(--rb-radius-sm) !important; box-shadow: none }
html:has(meta[name="lz-flags"][content~="tool-role"]) .lz-panel-show .ic { width: 18px; height: 18px }

@media (prefers-reduced-motion: reduce) {
  .rb-btn--primary, .rb-chat__send.rb-btn--round, .btn--flow, .rb-composer .rb-chat__send, .rb-chat__send.is-do { animation: none } }