/* Yune (японская витрина, BRAND=nanako) поверх стилей Ложки: server.py подключает этот файл после app.css, если он есть
   в static/brands/<бренд>/. Раскладка и компоненты — Ложкины; здесь только то, чем Yune отличается: нейтральный серый,
   монохромные кнопки «графит с бликом», знак и надпись yune, японские шрифты (решения владельца 11.11.2026).
   Макеты: /home/dobi/lozhka/yune-brand/draft/ (ui-style, buttons-mono). Цвета — только токенами, как у Ложки. */

/* Надпись «yune» — Outfit 600, только буквы yune/YUNE (1 КБ, OFL — OFL-outfit.txt рядом) */
@font-face { font-family: 'Yune Wordmark'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/brands/nanako/outfit-wordmark.woff2) format('woff2') }

:root {
  /* Японские шрифты — системные: веб-шрифт с иероглифами весит мегабайты. Латиница — системная (SF, Segoe), к ней
     японский подбирает сама система (Hiragino на Apple, Yu Gothic на Windows, Noto на Android) */
  --rb-font-heading: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
  --rb-font-body: var(--rb-font-heading);
  --rb-font-brand: 'Yune Wordmark', var(--rb-font-heading);
  --yn-font-mincho: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif;

  /* нейтральный серый: чат 255, пузырь пользователя 244, меню 249 */
  --rb-page: #F9F9F9; --rb-sidebar: #F9F9F9; --rb-canvas: #FFFFFF; --rb-surface-soft: #F4F4F4;
  --rb-ink: #171717; --rb-muted: #5D5D5D; --rb-faint: #8F8F8F; --rb-line: #E6E6E6;
  --rb-accent: #171717; --rb-accent-strong: #000000; --rb-accent-soft: #EFEFEF; --rb-brand-2: #5D5D5D;
  --rb-chart-grid: #EFEFEF;
  --lz-paper: #FFFFFF; --lz-paper-warm: #F9F9F9; --lz-paper-deep: #F4F4F4; --lz-hover: #EFEFEF; --lz-selected: #EAEAEA;
  --lz-line-soft: #EDEDED; --lz-line-strong: #D4D4D4; --lz-lavender-mist: #F1F1F1;

  /* акценты Ложки (петроль, мята, лаванда, фиолет) — в монохром */
  --lz-navy: #171717; --lz-indigo: #2A2A2A; --lz-violet: #3A3A3A; --lz-violet-bright: #3A3A3A;
  --lz-teal: #2A2A2A; --lz-teal-bright: #2A2A2A; --lz-mint: #D4D4D4; --lz-lavender: #CFCFCF; --lz-pink: #BDBDBD;
  --lz-night: #111111; --lz-night-deep: #0B0B0B; --lz-abyss: #050505;
  --lz-grad-pastel: linear-gradient(100deg, #E9E9E9, #F7F7F7 50%, #E2E2E2);
  --lz-logo-color: #171717; --lz-logo-gradient: linear-gradient(100deg, #171717, #171717);
  --lz-mark-ink: #111111; --lz-mark: #171717; --lz-mark-soft: #EFEFEF;

  /* кнопки — «графит с бликом»: объём сверху вниз и тонкий блик по верхнему краю */
  --yn-btn: linear-gradient(180deg, #4A4A4A 0%, #1C1C1C 55%, #0A0A0A 100%);
  --yn-btn-ink: #FFFFFF;
  --yn-btn-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 28%, transparent), 0 6px 16px -8px color-mix(in srgb, #000000 60%, transparent);
  --lz-brand-flow: var(--yn-btn); --lz-grad-flow: var(--yn-btn); --lz-grad-cta: var(--yn-btn); --lz-on-cta: var(--yn-btn-ink);
  --lz-shadow-cta: var(--yn-btn-shadow);

  /* узор из знаков Ложки — выключен: монохрому идёт чистый фон */
  --lz-pattern-ink: transparent; --lz-pattern-ink-night: transparent; --lz-pattern-ink-soft: transparent; --lz-pattern-ink-night-soft: transparent;
}

html.lz-dark {
  /* петроль Ложки в монохроме — графит; на тёмном он пропадал (значки кошелька в пополнении), здесь — светлый серый */
  --lz-teal: #A3A3A3; --lz-teal-bright: #A3A3A3;
  --rb-page: #171717; --rb-sidebar: #171717; --rb-canvas: #212121; --rb-surface-soft: #2F2F2F;
  --rb-ink: #ECECEC; --rb-muted: #A3A3A3; --rb-faint: #737373; --rb-line: #333333;
  --rb-accent: #ECECEC; --rb-accent-strong: #FFFFFF; --rb-accent-soft: #2A2A2A; --rb-chart-grid: #2A2A2A;
  --lz-paper: #1B1B1B; --lz-paper-deep: #2F2F2F; --lz-hover: #2A2A2A; --lz-selected: #333333;
  --lz-logo-color: #ECECEC; --lz-logo-gradient: linear-gradient(100deg, #ECECEC, #ECECEC);
  --lz-mark-ink: #F2F2F2; --lz-mark: #ECECEC; --lz-mark-soft: #2F2F2F;
  --yn-btn: linear-gradient(180deg, #FFFFFF 0%, #E2E2E2 60%, #C9C9C9 100%);
  --yn-btn-ink: #111111;
  --yn-btn-shadow: inset 0 1px 0 #FFFFFF, 0 6px 16px -8px color-mix(in srgb, #000000 80%, transparent);
  --lz-brand-flow: var(--yn-btn); --lz-grad-flow: var(--yn-btn); --lz-grad-cta: var(--yn-btn); --lz-on-cta: var(--yn-btn-ink);
  --lz-shadow-cta: var(--yn-btn-shadow);
}


/* Логотип: знак Yune + «Yune» (Outfit 600, с заглавной — выбор владельца 11.11.2026) (Ложка: «Ложка» Unbounded + «бот» рукописным) */
.lz-logo, .lz-logo:hover, .lz-logo--split, .lz-logo--split:hover {
  display: inline-flex; align-items: center; gap: .32em; background: none; color: var(--rb-ink);
  font: 600 22px/1 var(--rb-font-brand); letter-spacing: -.01em }
.lz-logo--split > .lz-logo__bot { display: none }
.lz-logo:not(.lz-land__logo)::before { content: ""; width: 1.05em; height: 1.05em; flex: none; background: currentColor;
  -webkit-mask: url(/static/brands/nanako/mark.svg) center/contain no-repeat; mask: url(/static/brands/nanako/mark.svg) center/contain no-repeat }
.rb-sidebar__brand .lz-logo, .rb-mobilebar .lz-logo { font-size: 20px; letter-spacing: -.02em }

/* Приветствие «こんばんは、…» — минтё, как засечки у Claude; Literata Ложки японского не знает */
.rb-chat__empty strong { font-family: var(--yn-font-mincho); font-weight: 500; letter-spacing: .02em }

/* Главная для гостя — ночная «космическая» (стили Ложки): знак и надпись — светлые, иначе тёмное на тёмном */
.lz-land__logo, .lz-land__logo:hover { color: var(--land-paper) }
.lz-land__mark { filter: invert(1) }

/* Юридические страницы и прочие страницы шаблона seo/pages.py (шапка и подвал .brand): знак Yune и «yune» вместо
   ложки и «Ложка|бот» */
.hnav .brand svg, .foot .brand svg, .hnav .brand i, .foot .brand i { display: none }
.hnav .brand::before, .foot .brand::before { content: ""; width: 24px; height: 24px; margin-right: 8px; flex: none; background: currentColor;
  -webkit-mask: url(/static/brands/nanako/mark.svg) center/contain no-repeat; mask: url(/static/brands/nanako/mark.svg) center/contain no-repeat }
.hnav .brand b, .foot .brand b { font: 600 21px/1 'Yune Wordmark', var(--rb-font-heading); letter-spacing: -.01em }

/* Надпись логотипа — «Yune» латиницей, Outfit 600 (решение владельца 11.11.2026 вечером: одно имя везде, как в текстах,
   адресе, Stripe и Google; катакана «ユネ» — только имя персонажа). Шрифт Zen Old Mincho с «ユネ» остаётся для персонажа и печати */
@font-face { font-family: 'Yune Kana'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/brands/nanako/zen-old-mincho-yune.woff2) format('woff2') }

/* ── Страницы шаблона seo/pages.py у Yune: проверка текста /tools/kousei, блог, юридические (11.11.2026) ──────────────
   У seo.css свои переменные Ложки — тёплая бумага, тёмно-синяя ночь, петроль, перелив, жёлтый маркер; у Yune — монохром:
   бумага — серый 244, ночь (подвал) — графит, главные кнопки — «графит с бликом» без перелива. Шапку и подвал (знак, «Yune»)
   задаёт раздел выше */
:root {
  --paper: #F4F4F4; --line: #E6E6E6; --ink: #171717; --muted: #5D5D5D; --faint: #8F8F8F;
  --night: #171717; --navy: #171717; --teal: #171717; --mint: #D4D4D4; --honey: #E4E4E4; --lz-honey: #E4E4E4;
  --flow: var(--yn-btn);
}
.rb-composer__tool:hover, .lz-model:hover, .lz-model[aria-expanded="true"] { background: var(--lz-hover) }

/* ── Приложение: места, где у Ложки цвет вписан прямо, а не токеном (11.11.2026, по скриншотам владельца) ────────────── */
/* пополнение: иконка кошелька и наведение — графит, не петроль */
/* «@модель» в поле и в сообщении */
.lz-mention { background: var(--rb-surface-soft); color: var(--rb-ink) }
.lz-mention__x:hover { background: var(--lz-hover) }
html.lz-dark .lz-mention { background: var(--rb-surface-soft); color: var(--rb-ink) }
/* пустые «Мои задачи»: знак Yune (favicon витрины) в светлом круге */
.lz-tempty__mark { background-color: var(--rb-surface-soft); background-size: 56% }
/* Свои адреса файлов Yune (а не общий /static/favicon.svg): общий адрес браузер держит в кэше до 4 часов (Cloudflare),
   и после выкатки у пользователей ещё висела ложка (11.11.2026) */
.lz-tempty__mark, .lz-mark-sm { background-image: url(/static/brands/nanako/favicon.svg?v=1) }
.rb-chat.is-ws-wait::after { -webkit-mask-image: url(/static/brands/nanako/brand/mark-paper.svg?v=1); mask-image: url(/static/brands/nanako/brand/mark-paper.svg?v=1) }
/* Мышление и логотип модели под полем — монохром, цветом текста (владелец 11.11.2026 вечером; раньше были цвета Ложки):
   степень мышления видна заливкой «мозга» от бледного к чёрному, без зелёного, фиолетового и свечения */
/* уровни в монохроме различимы: Low — бледный, Medium — серый, High — почти чёрный; XHigh — градиент от чёрного к серебру,
   Max — по диагонали чёрный → серебро → чёрный, переливается (вращение градиента) и светится цветом текста */
:root, html.lz-dark { --lz-think-fill: var(--rb-ink); --lz-think-grey: var(--rb-faint);
  --lz-think-violet: color-mix(in srgb, var(--rb-ink) 30%, var(--lz-paper)); --lz-think-magenta: var(--rb-ink) }
.lz-under .lz-model__logo img, .lz-under .lz-model__logo > * { filter: grayscale(1) brightness(0); opacity: .88 }
html.lz-dark .lz-under .lz-model__logo img, html.lz-dark .lz-under .lz-model__logo > * { filter: grayscale(1) brightness(0) invert(1) }
/* телефон: как на компьютере — слева файл и микрофон, справа модель и мышление (у Ложки — поровну по ширине) */
@media (max-width: 720px) {
  .rb-chat__compose .lz-under { justify-content: flex-start; gap: 2px; padding: 6px 4px 0 }
  .rb-chat__compose .lz-under [data-attach] { order: 0 }
  .rb-chat__compose .lz-under [data-mic] { order: 1; margin-left: 0 !important }
  .rb-chat__compose .lz-under .lz-model { order: 2; margin-left: auto !important }
  .rb-chat__compose .lz-under .lz-think-chip { order: 3 }
}
/* тёмная тема: метки и полоса привязки — нейтральные, не мятные */
html.lz-dark .lz-models__tag { background: var(--rb-surface-soft); color: var(--rb-muted) }
html.lz-dark .lz-linkbar__icon--mark svg { fill: var(--rb-ink) }
html.lz-dark .lz-linkbar__go { background: var(--rb-surface-soft); color: var(--rb-ink) }
/* боковая панель: только надпись, без знака — как у Ложки (там «Ложка бот» без ложки) */
.rb-sidebar__brand .lz-logo::before, .rb-mobilebar .lz-logo::before { display: none }
/* надпись в боковой панели — «Yune» без знака, 24 px */
.rb-sidebar__brand .lz-logo { font-size: 24px; letter-spacing: -.015em }

/* Текст ответов и поле проверки текста — без засечек: Literata Ложки японского не знает, браузер подставлял минтё, на
   экране японский с засечками читается плохо (владелец, 11.11.2026). Приветствие «こんばんは、…» — минтё, как решено выше */
.lz-msg.is-assistant .lz-rich, .lz-msg.is-assistant .lz-text, .lz-msg.is-assistant .lz-rich blockquote.lz-quote__text {
  font-family: var(--rb-font-body); font-size: 16px; line-height: 1.85 }
.lz-msg.is-assistant .rb-richtext h5 { font-family: var(--rb-font-body) }
.fld__h-in, .fld__head h2, .fld__in, .fld__out, .fld__out p, .fld__fix p, .tch__t { font-family: var(--rb-font-body) }
.fld__in, .fld__out, .fld__out p, .fld__fix p { font-size: 16px }
/* Японские заголовки страниц seo/pages.py (12.11.2026, владелец: «すべてのAI / 1つのチャットで» сливается): у Ложки строки
   впритык (76px/1.02) и ужатый трекинг — кириллице это идёт, иероглифы в две строки слипаются. Заголовок «Yuneとは…» —
   мельче, чтобы «試してみる ›» не уходил отдельной строкой */
.hero h1 { line-height: 1.24; letter-spacing: 0 }
.brandblk h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.4; letter-spacing: 0 }

/* ── Плашка меню — стеклянный «остров» сверху (гайд yune-style.html, владелец 11.11.2026: «везде, в том числе на главной») ──
   Страницы seo/pages.py: меню закреплено (.hnav-slot), здесь оно отступает от краёв и всегда стекло — страница уезжает под него */
:root { --yn-glass: color-mix(in srgb, var(--rb-canvas) 58%, transparent);
  --yn-glass-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--rb-ink) 7%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--rb-ink) 30%, transparent);
  --yn-glass-night: color-mix(in srgb, var(--lz-night) 45%, transparent);
  --yn-glass-night-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) }
html.lz-dark { --yn-glass: color-mix(in srgb, var(--rb-canvas) 55%, transparent);
  --yn-glass-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) 7%, transparent),
    0 18px 40px -18px color-mix(in srgb, var(--lz-black) 80%, transparent) }
/* меню сайта — общая плашка (seo.css), здесь только её цвет */
:root, html.lz-dark { --nav-bg: var(--yn-glass);
  /* тень меню на сайте — лёгкая (12.11.2026, единая шапка-окно): прежняя 0 18px 40px давила на заголовок */
  --nav-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--rb-ink) 7%, transparent),
    0 6px 20px -14px color-mix(in srgb, var(--rb-ink) 26%, transparent); --nav-bg-night: var(--yn-glass-night); --nav-shadow-night: var(--yn-glass-night-shadow) }
.hnav .enter, .daylight .hnav .enter { padding: 9px 16px 9px 13px; border: 0; background: color-mix(in srgb, var(--rb-canvas) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--rb-ink) 9%, transparent), 0 4px 12px -6px color-mix(in srgb, var(--rb-ink) 25%, transparent) }
.night .hnav .enter, .hero .hnav .enter { background: color-mix(in srgb, var(--lz-white) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--lz-white) 12%, transparent) }
/* главная для гостя: та же плашка (app.css), цвет — свой */
:root { --land-nav-bg: var(--yn-glass-night); --land-nav-menu-bg: color-mix(in srgb, var(--lz-night) 92%, transparent); --land-nav-shadow: var(--yn-glass-night-shadow) }
.lz-land__enter { border: 0; background: color-mix(in srgb, var(--lz-white) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--lz-white) 12%, transparent) }

/* ── Поле ввода — стекло (как вариант 3 гайда): у Ложки оно непрозрачное с подложкой цвета чата, чтобы лента не просвечивала
   за строкой значков; у Yune подложка — только под строкой значков, само поле — стекло с подсветкой кромки ── */
/* подложка — у самой строки значков (а не от низа поля): закрывает значки при любой высоте поля, на телефоне и компьютере */
.rb-chat__compose::before { display: none }
.rb-chat__compose > .lz-under { position: relative; z-index: 0 }
.rb-chat__compose > .lz-starters { position: relative; z-index: 1 }   /* подсказки — над подложкой значков, иначе верх срезается */
.rb-chat__compose > .lz-under::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: -16px; bottom: -48px;
  background: linear-gradient(180deg, transparent, var(--lz-paper) 14px); pointer-events: none }
@media (max-width: 720px) { .rb-chat__compose > .lz-under::before { left: -12px; right: -12px } }
:root { --yn-field-bg: color-mix(in srgb, var(--rb-canvas) 84%, transparent);
  --yn-field-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--rb-ink) 13%, transparent),
    0 1px 3px color-mix(in srgb, var(--rb-ink) 5%, transparent), 0 8px 20px -12px color-mix(in srgb, var(--rb-ink) 26%, transparent);
  --yn-field-ring-on: color-mix(in srgb, var(--rb-ink) 24%, transparent) }
html.lz-dark { --yn-field-bg: color-mix(in srgb, color-mix(in srgb, var(--lz-white) 7%, var(--rb-canvas)) 86%, transparent);
  --yn-field-shadow: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--lz-white) 14%, transparent),
    0 8px 22px -12px color-mix(in srgb, var(--lz-black) 75%, transparent);
  --yn-field-ring-on: color-mix(in srgb, var(--lz-white) 26%, transparent) }
/* поле — заметное стекло: светлее и выше фона, кромка и тень (владелец 11.11.2026: «поле почти не видно»; 12.11 — тень вдвое меньше) */
.rb-chat__compose .rb-composer { position: relative; z-index: 1;   /* над подложкой строки значков — иначе она срезает низ поля и тень */
  background: var(--yn-field-bg); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border-color: transparent; box-shadow: var(--yn-field-shadow) }
/* наведение и набор — как у Ложки: в светлой теме тень растёт, в тёмной кромка светлеет */
:root { --yn-field-shadow-on: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--rb-ink) 15%, transparent),
    0 2px 5px color-mix(in srgb, var(--rb-ink) 6%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--rb-ink) 34%, transparent) }
html.lz-dark { --yn-field-shadow-on: inset 0 1px 0 color-mix(in srgb, var(--lz-white) 14%, transparent), 0 0 0 1px var(--yn-field-ring-on),
    0 8px 22px -12px color-mix(in srgb, var(--lz-black) 75%, transparent) }
.rb-chat__compose .rb-composer { transition: box-shadow .2s ease }
.rb-chat__compose .rb-composer:hover, .rb-chat__compose .rb-composer:focus-within { box-shadow: var(--yn-field-shadow-on) }
/* волна записи голосового — цветом текста */
:root, html.lz-dark { --voice-wave-from: var(--rb-ink); --voice-wave-to: var(--rb-ink) }

/* ── Кнопки Yune по ролям: только значения токенов ролей (привязка «роль → классы» — общая, brand/roles.css) ───────────
   Решение владельца 11.11.2026 (макет mockups/yune-glass.html): в обеих темах — прозрачное «жидкое стекло» (Б); в светлой —
   «Б1, преломление по краю»: тонкая тёмная кромка в толще стекла и блик сверху, чтобы стекло было видно на белом; мягкий
   круглый блик идёт за курсором. Нельзя нажать / пусто — пустой контур. Выбор — вдавлен. Подсветки внутри нет */
:root {
  --yn-glass-blur: blur(4px) saturate(1.6);
  --yn-press: inset 0 1px 2px color-mix(in srgb, var(--rb-ink) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--rb-ink) 8%, transparent);
  --yn-press-bg: var(--lz-hover);
  --yn-glass-body: color-mix(in srgb, var(--lz-white) 30%, transparent);
  --yn-glass-rim: inset 0 1.5px 0 var(--lz-white), inset 0 -1px 1px color-mix(in srgb, var(--lz-white) 90%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rb-ink) 22%, transparent), inset 0 0 6px 1px color-mix(in srgb, var(--rb-ink) 10%, transparent),
    0 1px 1px color-mix(in srgb, var(--lz-black) 8%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--lz-black) 30%, transparent);
  --yn-glass-rim-on: inset 0 1.5px 0 var(--lz-white), inset 0 0 0 1px color-mix(in srgb, var(--rb-ink) 32%, transparent),
    inset 0 0 8px 1px color-mix(in srgb, var(--rb-ink) 14%, transparent), 0 12px 24px -10px color-mix(in srgb, var(--lz-black) 38%, transparent);
  --yn-glass-hover: color-mix(in srgb, var(--lz-white) 45%, transparent);
  --yn-glass-off: transparent;
  --yn-glass-off-rim: inset 0 0 0 1px color-mix(in srgb, var(--rb-ink) 12%, transparent);
  --yn-shine: color-mix(in srgb, var(--lz-white) 70%, transparent); --yn-shine-r: 28px;   /* блик слабее и рассеяннее (владелец) */
  --yn-lift: none; --yn-press-down: scale(.98);
}
html.lz-dark {
  --yn-press: inset 0 1px 3px color-mix(in srgb, var(--lz-black) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 6%, transparent);
  --yn-press-bg: color-mix(in srgb, var(--lz-black) 28%, var(--rb-sidebar));
  --yn-glass-body: color-mix(in srgb, var(--lz-white) 18%, transparent);
  --yn-glass-hover: color-mix(in srgb, var(--lz-white) 28%, transparent);
  --yn-glass-blur: blur(6px) saturate(1.9) brightness(1.1);
  --yn-glass-rim: inset 0 2px 1px -1px color-mix(in srgb, var(--lz-white) 95%, transparent), inset 0 -3px 6px -2px color-mix(in srgb, var(--lz-white) 55%, transparent),
    inset 2px 0 4px -2px color-mix(in srgb, var(--lz-white) 70%, transparent), inset -2px 0 4px -2px color-mix(in srgb, var(--lz-white) 70%, transparent),
    0 0 0 1px color-mix(in srgb, var(--lz-white) 45%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--lz-black) 45%, transparent);
  --yn-glass-rim-on: var(--yn-glass-rim);
  --yn-glass-off: color-mix(in srgb, var(--lz-white) 6%, transparent);
  --yn-glass-off-rim: inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 16%, transparent);
  --yn-shine: transparent; --yn-lift: none; --yn-press-down: scale(.98);
}
/* роли — и в :root, и в html.lz-dark: у приложения Ложки тёмная тема задаёт свой цвет надписи главной кнопки */
:root, html.lz-dark {
  --btn-shine: var(--yn-shine); --btn-shine-r: var(--yn-shine-r); --btn-lift: var(--yn-lift); --btn-press: var(--yn-press-down);
  --btn-main-bg: var(--yn-glass-body); --btn-main-size: auto; --btn-main-ink: var(--rb-ink); --btn-main-anim: none; --btn-main-shadow: var(--yn-glass-rim);
  --btn-main-blur: var(--yn-glass-blur); --btn-main-hover-filter: none; --btn-main-hover-shadow: var(--yn-glass-rim-on); --btn-main-hover-bg: var(--yn-glass-hover);
  --btn-main-off-bg: var(--yn-glass-off); --btn-main-off-size: auto; --btn-main-off-ink: var(--rb-faint); --btn-main-off-filter: none; --btn-main-off-opacity: 1;
  --btn-main-off-shadow: var(--yn-glass-off-rim); --btn-main-off-anim: none;
  --btn-main-idle-bg: var(--yn-glass-off); --btn-main-idle-ink: var(--rb-faint); --btn-main-idle-opacity: 1; --btn-main-idle-filter: none; --btn-main-idle-shadow: var(--yn-glass-off-rim);
  --btn-paid-bg: var(--yn-glass-body); --btn-paid-ink: var(--rb-ink); --btn-paid-shadow: var(--yn-glass-rim); --btn-paid-blur: var(--yn-glass-blur); --btn-paid-anim: none;
  --btn-paid-hover-filter: none; --btn-paid-hover-bg: var(--yn-glass-hover); --btn-paid-hover-shadow: var(--yn-glass-rim-on);
  --btn-paid-off-bg: var(--yn-glass-off); --btn-paid-off-ink: var(--rb-faint); --btn-paid-off-shadow: var(--yn-glass-off-rim);
  --btn-second-bg: var(--yn-glass-body); --btn-second-ink: var(--rb-ink); --btn-second-border: transparent; --btn-second-border-w: 0px;   /* без рамки: кромка стекла — одна, как в макете */ --btn-second-shadow: var(--yn-glass-rim);
  --btn-second-blur: var(--yn-glass-blur); --btn-second-hover-bg: var(--yn-glass-hover); --btn-second-hover-ink: var(--rb-ink); --btn-second-hover-border: transparent;
  --btn-second-hover-shadow: var(--yn-glass-rim-on);
  /* выбор — вдавлен, как нажатый пункт вверху панели: фон той поверхности, где стоит пункт, и тиснение внутрь (владелец, 12.11.2026) */
  --choice-on-bg: transparent; --choice-on-ink: var(--rb-ink); --choice-on-shadow: var(--yn-emb-press);
}

/* «думает» — кисть тушью бесконечно ведёт по знаку (brand/think-brush.svg, средний хвост и скорость — выбор владельца) */
.lz-thinking .rb-agent-work__dots, .lz-busy .rb-agent-work__dots { display: inline-block; width: 22px; height: 22px; background: var(--rb-ink);
  -webkit-mask: url(/static/brands/nanako/brand/think-brush.svg?v=2) center/contain no-repeat; mask: url(/static/brands/nanako/brand/think-brush.svg?v=2) center/contain no-repeat }
.lz-thinking .rb-agent-work__dots > span, .lz-busy .rb-agent-work__dots > span { display: none }
.rb-chat.is-ws-wait::after { width: 42px; height: 42px; margin: -21px 0 0 -21px; background: var(--rb-ink); opacity: .8; animation: none;
  -webkit-mask: url(/static/brands/nanako/brand/think-brush.svg?v=2) center/contain no-repeat; mask: url(/static/brands/nanako/brand/think-brush.svg?v=2) center/contain no-repeat }

/* ── ユネ — персонаж (brand.js): жидкий знак Yune с глазами. Пустая беседа — над приветствием, моргает; есть текст в поле —
   наклоняется к нему; пустые «Задачи» — спит. Имя персонажа — катаканой (сервис — Yune), решение владельца 11.11.2026 ── */
.lz-empty__logo.yn-has-yu svg.yn-yu { width: 1.9em; height: 1.9em; fill: none }
.lz-tempty__mark.yn-has-yu { width: 64px; height: 64px; background: none; border-radius: 0; display: grid; place-items: center }
.lz-tempty__mark.yn-has-yu .yn-yu { width: 64px; height: 64px }
.yn-yu { overflow: visible; color: var(--rb-ink) }
.yn-yu__goo { filter: url(#yn-goo) }
.yn-yu .el { fill: currentColor; transform-box: fill-box; transform-origin: center }
.yn-yu__body { transform-origin: 32px 34px; transition: transform .45s cubic-bezier(.3,1.4,.5,1) }
.yn-yu__eyes { transition: transform .3s ease }
.yn-yu .eye { fill: var(--rb-canvas); transform-box: fill-box; transform-origin: center }
.yn-yu__shut, .yn-yu__zz { opacity: 0 }
.yn-yu__shut path { fill: none; stroke: var(--rb-canvas); stroke-width: 1.3; stroke-linecap: round }
.yn-yu__zz text { fill: var(--rb-faint); font: 600 7px var(--rb-font-body) }
.yn-yu__eyes { opacity: 0 }
/* ждёт: обычный чёрный знак; раз в 9 секунд в нём проступают глаза, дважды моргают и через 2 секунды пропадают
   (владелец, 11.11.2026) */
.yn-yu[data-s="idle"] .yn-yu__eyes { animation: yn-peek 9s ease-in-out infinite 1.5s }
.yn-yu[data-s="idle"] .eye { animation: yn-peek-blink 9s infinite 1.5s }
@keyframes yn-peek { 0%, 70% { opacity: 0 } 72%, 92% { opacity: 1 } 94%, 100% { opacity: 0 } }
@keyframes yn-peek-blink { 0%, 77%, 79%, 83%, 85%, 100% { transform: scaleY(1) } 78%, 84% { transform: scaleY(.1) } }
.yn-yu[data-s="listen"] .yn-yu__eyes { opacity: 1 }
.yn-yu[data-s="listen"] .yn-yu__body { transform: rotate(7deg) }
.yn-yu[data-s="listen"] .yn-yu__eyes { transform: translate(1.4px, 1.2px) }
.yn-yu[data-s="listen"] .eye { animation: yn-blink 3s infinite }
.yn-yu[data-s="sleep"] .eye { opacity: 0 }
.yn-yu[data-s="sleep"] .yn-yu__shut, .yn-yu[data-s="sleep"] .yn-yu__zz { opacity: 1 }
.yn-yu[data-s="sleep"] .yn-yu__body { animation: yn-breath 3.2s ease-in-out infinite }
.yn-yu[data-s="sleep"] .yn-yu__zz text { animation: yn-z 3.2s ease-in-out infinite }
.yn-yu[data-s="sleep"] .yn-yu__zz text:nth-child(2) { animation-delay: 1.1s }
@keyframes yn-blink { 0%, 44%, 48%, 100% { transform: scaleY(1) } 46% { transform: scaleY(.1) } }
@keyframes yn-breath { 50% { transform: scale(1.03, .97) } }
@keyframes yn-z { 0% { opacity: 0; transform: translate(0, 0) } 30% { opacity: 1 } 100% { opacity: 0; transform: translate(4px, -8px) } }
@media (prefers-reduced-motion: reduce) { .yn-yu .eye, .yn-yu__body, .yn-yu__zz text { animation: none !important } }

/* ── ожидание картинки и видео (brand.js): картинка «проявляется» из цветных букв под строкой статуса ── */
/* сообщение со строкой статуса раскладывает содержимое в ряд — с ожиданием ставим его столбиком: строка, под ней картинка */
.lz-msg:has(> .yn-forming) { display: flex !important; flex-direction: column; align-items: flex-start }
.yn-forming { position: relative; flex: none; width: 300px; max-width: calc(100vw - 48px); aspect-ratio: 1; margin: 10px 0 4px; border-radius: 16px; overflow: hidden;
  background: var(--lz-abyss); box-shadow: var(--yn-glass-rim) }
.yn-forming--video { width: 360px; aspect-ratio: 16 / 9 }
.yn-forming canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.yn-forming__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; font: 500 11px var(--rb-font-mono); color: var(--lz-white);
  background: color-mix(in srgb, var(--lz-black) 40%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }

/* ── проверка текста, вид «変更点»: правка дописывается, как ручкой (мини-правка из гайда) ── */
.fld__out ins, .fld__h-out ins { position: relative; background: none; font-weight: 600; color: var(--rb-ink) }
.fld__out ins::after, .fld__h-out ins::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--rb-good); transform-origin: left; animation: yn-ink 1s cubic-bezier(.3,.7,.2,1) both }
.fld__out del, .fld__h-out del { background: none; color: var(--rb-faint); text-decoration-color: var(--rb-bad); text-decoration-thickness: 1.5px }
@keyframes yn-ink { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .fld__out ins::after, .fld__h-out ins::after { animation: none } }

/* «Пока пишете, делаю заметку» (shaper.js): пока пункты пишутся — вместо знака кисть «думает», как в ожидании ответа */
.lz-shape__kicker.is-busy .lz-shape__logo { background: currentColor;
  -webkit-mask: url(/static/brands/nanako/brand/think-brush.svg?v=2) center/contain no-repeat; mask: url(/static/brands/nanako/brand/think-brush.svg?v=2) center/contain no-repeat }
.lz-shape__kicker.is-busy .lz-shape__logo svg { visibility: hidden }

/* «チャージ» (роль «второстепенная») — тиснение из образца (mockups/yune-style2.html#btn, «Тиснение»): цвета той поверхности,
   на которой стоит, выдавлено светом сверху-слева и тенью снизу-справа; нажатие вдавливает (владелец, 12.11.2026) */
:root { --yn-emb-bg: color-mix(in srgb, var(--rb-ink) 4%, var(--rb-sidebar));
  --yn-emb: -3px -3px 7px color-mix(in srgb, var(--lz-white) 90%, transparent), 4px 5px 10px color-mix(in srgb, var(--rb-ink) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 60%, transparent);
  --yn-emb-on: -4px -4px 9px var(--lz-white), 5px 6px 13px color-mix(in srgb, var(--rb-ink) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lz-white) 70%, transparent);
  --yn-emb-press: inset 3px 3px 6px color-mix(in srgb, var(--rb-ink) 16%, transparent), inset -3px -3px 6px color-mix(in srgb, var(--lz-white) 90%, transparent) }
html.lz-dark { --yn-emb-bg: color-mix(in srgb, var(--rb-ink) 4%, var(--rb-sidebar));
  --yn-emb: -3px -3px 7px color-mix(in srgb, var(--lz-white) 5%, transparent), 4px 5px 12px color-mix(in srgb, var(--lz-black) 70%, transparent);
  --yn-emb-on: -3px -3px 8px color-mix(in srgb, var(--lz-white) 8%, transparent), 5px 6px 14px color-mix(in srgb, var(--lz-black) 80%, transparent);
  --yn-emb-press: inset 3px 3px 6px color-mix(in srgb, var(--lz-black) 60%, transparent), inset -2px -2px 5px color-mix(in srgb, var(--lz-white) 6%, transparent) }
:root, html.lz-dark {
  --btn-second-bg: var(--yn-emb-bg); --btn-second-hover-bg: var(--yn-emb-bg); --btn-second-blur: none;
  --btn-second-shadow: var(--yn-emb); --btn-second-hover-shadow: var(--yn-emb-on); --btn-second-press-shadow: var(--yn-emb-press) }

/* фиолетовый спокойнее: наполовину с приглушённым цветом текста (владелец: «менее навязчивым») */
:root { --yn-emb-ink: color-mix(in srgb, #6E4FD8 55%, var(--rb-muted)) }
html.lz-dark { --yn-emb-ink: color-mix(in srgb, #B9A2F5 60%, var(--rb-muted)) }
:root, html.lz-dark { --btn-second-ink: var(--yn-emb-ink); --btn-second-hover-ink: var(--yn-emb-ink); --btn-second-shine: transparent }
.lz-balance__topup > .ic { display: inline-block; width: 15px; height: 15px; flex: none }
.lz-balance__topup.rb-btn--outline { display: inline-flex; align-items: center; gap: 6px }

/* Шапка беседы — чуть выше, кнопкам с тиснением есть где отбросить тень; «удалить» из шапки убрано (удаляют в списке бесед) */
@media (min-width: 721px) {
  .rb-chat__toolbar { padding-top: 11px; padding-bottom: 12px }
  .rb-chat__messages { padding-top: 72px }
  .rb-chat__toolbar [data-delete-group] { display: none !important }
}

/* Роль «инструмент» (brand/roles.css, --btn-tool-*): кнопки шапки беседы — волосяная обводка, подпись и значок — цветом текста, под курсором подлетают (появляется тень). Включает роль флаг витрины tool-role (brands/nanako/index/flags.html) */
:root { --btn-tool-ink: var(--rb-ink); --btn-tool-label: var(--rb-ink); --btn-tool-bg: var(--rb-canvas); --btn-tool-border: color-mix(in srgb, var(--rb-ink) 14%, transparent);
  --btn-tool-hover-shadow: 0 6px 14px -6px color-mix(in srgb, var(--rb-ink) 28%, transparent), 0 1px 2px color-mix(in srgb, var(--rb-ink) 8%, transparent) }
html.lz-dark { --btn-tool-ink: var(--rb-ink); --btn-tool-label: var(--rb-ink); --btn-tool-bg: var(--rb-canvas); --btn-tool-border: color-mix(in srgb, var(--lz-white) 16%, transparent);
  --btn-tool-hover-shadow: 0 6px 16px -6px color-mix(in srgb, var(--lz-black) 80%, transparent) }
@media (min-width: 721px) {
  .rb-chat__toolbar .lz-tb-t { display: inline }
  .rb-chat__title-button { flex-direction: row-reverse }
  .rb-chat__toolbar [data-media-open]:not([hidden]), .rb-chat__toolbar [data-delete]:not([hidden]) { display: inline-flex }
}

/* Роль «UX» (brand/roles.css, --btn-ux-*, флаг ux-role): пункты вверху боковой панели («新しいタスク», «繰り返しタスク») —
   то же тиснение, что у «チャージ», но цвет текста и значка системный, как у остальных пунктов (владелец, 12.11.2026) */
:root, html.lz-dark { --btn-ux-bg: var(--rb-sidebar); --btn-ux-shadow: var(--yn-emb); --btn-ux-hover-shadow: var(--yn-emb-on); --btn-ux-press-shadow: var(--yn-emb-press) }
.rb-sidebar { --btn-ux-ink: var(--lz-nav-ink) }
.rb-sidebar .rb-nav__list > .lz-nav-new { margin: 0 4px 8px; padding: 9px 12px; border-radius: 14px }

/* Подложка тиснения (brand/roles.css, --emb-surface-bg): баланс в панели и плашка пополнения — один цвет, кнопки с тиснением
   на ней того же цвета. Суммы пополнения — пилюли как «チャージ»: ниже, круглые, с зазором, подпись «チャージ» под суммой не нужна —
   плашка так и называется (владелец, 12.11.2026) */
:root, html.lz-dark { --emb-surface-bg: var(--yn-emb-bg) }
.lz-amounts { gap: 14px }
.lz-amount { display: inline-flex; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px }
.lz-amount .ic { width: 16px; height: 16px }
.lz-amount__sum { font: 600 14px/1 var(--rb-font-body) }
.lz-amount__hint { display: none }