@layer base {
/* ===== основа: сброс, шрифт, фокус, прокрутка ===== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--canvas); color: var(--ink); font: var(--fs-body)/var(--lh-body) Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: transparent; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
h1, h2, h3, h4, p { margin: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
::selection { background: var(--action); color: var(--action-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.muted { color: var(--muted); }
.data-ok { color: var(--ok); }
.data-bad { color: var(--bad); }

/* заголовки: четыре уровня (h1 экран, h2 блок, h3 название, h4 метка) */
h1 { font: var(--fw-h1) var(--fs-h1)/var(--lh-tight) Inter, system-ui, sans-serif; letter-spacing: -.045em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-title); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-title); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-body); }
}

/* Zidos · компоненты (R32a).
   Каждый компонент описан один раз: канонический класс и модификаторы, значения только из tokens.css.
   Прежние имена (zc-btn, section-button, discuss-chip, ...) создают cards/*.js и gen/app.js, переименовать их нельзя:
   они перечислены списком-синонимом рядом с каноническим классом. Раскладка экранов (сетки, колонки, позиционирование) живёт в app.css.
   Порядок слоёв задан в tokens.css: cards < layout < components < state. */
@layer components {
/* ===== заголовки: четыре уровня (h1 экран, h2 блок, h3 название, h4 метка) ===== */
/* название экрана */
.section-heading h1, .screen-heading h1, h2.screen-title { font: var(--fw-h1) var(--fs-h1)/var(--lh-tight) Inter, system-ui, sans-serif; letter-spacing: -.045em; }
.chat-heading h1, .chat-header h1, .section-header h1, .zc-v2-1-preview-headline, .zc-event-title { font: var(--fw-h3) var(--fs-h3)/var(--lh-title) Inter, system-ui, sans-serif; letter-spacing: -.01em; }
.section-content h2, .section-content h4, .section-group > h2, .inbox-group > h2, .search-group > h2, .section-block > h2, .project-block > h2, .zc-title {
  font: var(--fw-h4) var(--fs-h4)/var(--lh-body) Inter, system-ui, sans-serif; letter-spacing: 0;
}


/* ===== капсула .btn: главная, тональная, текстовая ===== */
/* r29: геометрия главной капсулы общая; заливку (акцент либо тональная для «Попросить Zidos» и т. п.) решает раскладка */
.r29-host button.primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); height: var(--h-pill); min-height: var(--h-pill); padding: 0 var(--pad-pill); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 550; line-height: 1.2; white-space: nowrap; }
.btn, .zc-btn, .r29-host .review-actions button, .section-button.primary, .section-button.clio-secondary[data-section-decision], .discuss-chip, .chrome-action, .d-capsule, .cap,
.decision-actions .clio-secondary:not(.icon-btn), .inline-decision .clio-secondary:not(.icon-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: var(--h-pill); min-height: var(--h-pill); padding: 0 var(--pad-pill); border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 550; line-height: 1.2; letter-spacing: 0; white-space: nowrap;
  background: var(--tonal, var(--panel)); color: var(--ink);
}
/* R32c: капсула-действие .cap — тональная капсула 44 одной строкой, без круга-иконки и подписи снизу */
.cap { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; background: var(--panel); color: var(--ink); }
.cap > svg { display: none; }
.cap :is(.clio-action-label, .zc-btn-label) { display: inline; max-width: none; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; white-space: nowrap; text-align: inherit; }
.cap--quiet { background: transparent; color: var(--muted); }
.cap--quiet:hover { color: var(--ink); }
.d-panel .d-capsule, .d-composer .d-capsule { background: var(--raised); }
.d-composer .d-capsule { font-size: var(--fs-body); }
/* R32c: действия под сообщением — один компонент: тональный чип 44 (капсула, как остальные второстепенные), одна строка с переносом по чипам, от левого края сообщения */
.message-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin: var(--sp-8) 0 0; align-self: flex-start; }
.message-chips > :is(.discuss-chip, .r29-context-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-4); flex: 0 0 auto; width: auto; margin: 0;
  height: var(--h-pill); min-height: var(--h-pill); padding: 0 var(--pad-pill); border-radius: var(--radius-pill);
  background: var(--panel); color: var(--ink); font-size: var(--fs-small); font-weight: 550; line-height: 1.2; white-space: nowrap; text-decoration: none; order: 0;
}
.message-chips > :is(.discuss-chip, .r29-context-link):hover { background: var(--frame); text-decoration: none; }
.message-chips > .r29-context-link .link-arrow { color: var(--muted); }
/* R32c: «+1» и «−1» в карточке «Правка» — один кегль шкалы данных (h2 = 20), цвета data-ok / data-bad */
.zc-badge-add, .zc-badge-rm { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-title); }
.zc-badge-add { color: var(--data-ok); }
.zc-badge-rm { color: var(--data-bad); }
/* R30: «Решить» во входящих — тихий текст без заливки */
.inbox-row .section-button.clio-secondary[data-section-decision] { background: transparent; }
.btn--primary, .zc-btn-primary, .section-button.primary { background: var(--action); color: var(--action-ink); }
.btn--text, .related-result.feed-ref, .chrome-action:not(.open-result), .participants-button, .section-button[data-read-all], button.clio-secondary[data-settings-reset] {
  height: var(--h-pill); min-height: var(--h-pill); padding: 0 var(--sp-12); border-radius: var(--radius-pill); background: transparent; color: var(--ink);
  font-size: var(--fs-small); font-weight: 550;
}
.section-button[data-read-all], button.clio-secondary[data-settings-reset] { color: var(--muted); }
button.clio-secondary:is([data-settings-reset], [data-read-all]) > svg { display: none; }
button.clio-secondary:is([data-settings-reset], [data-read-all]) { display: inline-flex; align-items: center; justify-content: center; flex-direction: row; min-width: 0; width: auto; }
.related-result.feed-ref { margin-left: calc(-1 * var(--sp-12)); }
.inline-decision { --tonal: var(--raised); }
.inline-decision:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:root[data-theme=dark] .inline-decision:focus-visible { outline-color: var(--action); }

/* ===== круглая иконка .icon-btn: 44; модификатор --label даёт подпись под кругом ===== */
.icon-btn, .icon-button, .send, .circle, .attach, .microphone {
  display: inline-grid; place-items: center; flex: none; width: var(--h-icon); height: var(--h-icon); min-height: var(--h-icon);
  padding: 0; border-radius: 50%; background: var(--panel); color: var(--muted);
}
.icon-btn--label, button.secondary-action, button.clio-secondary:not(.btn):not(.cap):not([data-section-decision]):not([data-settings-reset]):not([data-read-all]):not(:is(.inline-decision, .decision-actions:has(> .zc-btn-primary), .zc-wb-actions:has(> .zc-btn-primary)) *) {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-8);
  width: auto; height: auto; min-height: 0; min-width: 60px; padding: 0; border-radius: 0; background: transparent; color: var(--ink);
  font-size: var(--fs-micro); font-weight: 400; line-height: 1.4;
}
.icon-btn--label > svg, button.secondary-action > svg, button.clio-secondary:not(.btn):not(.cap):not([data-section-decision]):not([data-settings-reset]):not([data-read-all]):not(:is(.inline-decision, .decision-actions:has(> .zc-btn-primary), .zc-wb-actions:has(> .zc-btn-primary)) *) > svg {
  display: block; flex: none; width: var(--h-icon); height: var(--h-icon); padding: var(--sp-12); border-radius: 50%; background: var(--panel); color: var(--ink);
}

/* ===== текстовое действие и ссылка ===== */
.link-btn, .text-button, .show-more.text-action { min-height: var(--h-pill); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 550; }
.section-text-link, a.project-name, .related-result.feed-ref, .new-waiting-row.waiting-link, .agent-chat-row { color: var(--ink); text-decoration: none; }
.section-text-link :is(.muted, .link-arrow, span[aria-hidden=true]:not(.clio-row-icon)), a.project-name :is(.muted, .link-arrow), .related-result.feed-ref :is(.muted, .link-arrow),
.new-waiting-row.waiting-link :is(.muted, .link-arrow), .agent-chat-row :is(.muted, .link-arrow) { color: var(--muted); }
.section-text-link:hover, a.project-name:hover, .related-result.feed-ref:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; background: transparent; }
.agent-chat-row:hover, .new-waiting-row.waiting-link:hover { text-decoration: none; }
.agent-chat-row:hover :is(strong, .row-text), .new-waiting-row.waiting-link:hover :is(strong, .row-text) { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.section-text-link:not(.section-row):hover .link-arrow { text-decoration: none; }

/* ===== тональная карточка .card и вложенная .card--inner ===== */
.card, .zc-card, .section-card, .inbox-summary, .new-composer, .new-studio-context, .agent-read, .project-run, .result-card, .inline-decision, .d-panel, .agent-card, .branch-panel {
  border-radius: var(--radius-card); padding: var(--pad-card);
}
.new-studio-context { padding: 0; }
.card--inner, .zc-hunk, .zc-v2-1-thumb, .zc-v2-1-preview-col, .zc-media-option, .decision-media-preview, .zc-card ol, .zc-v2-1-preview-wrap { border-radius: var(--radius-inner); }
.zc-card :is(ol, .zc-steps, .zc-hunk, pre), .agent-run :is(ol, .zc-steps, .zc-hunk, pre) { padding: var(--sp-12); border-radius: var(--radius-inner); }
.zc-v2-1-thumb { padding: var(--sp-8) var(--sp-12); }
:is(.message.own, .message.other, .message.agent) .message-text { padding: var(--pad-bubble); border-radius: var(--radius-inner); }
.conversation, section.conversation { border-radius: var(--radius-card); }

/* ===== строка Clio .row ===== */
.row, .section-row, .chat-row, .agent-chat-row, .project-row, .inbox-row {
  min-height: var(--h-row); padding: var(--pad-row); gap: var(--sp-12); border-radius: var(--radius-card);
}
.row__icon, :is(.section-row, .chat-row) :is(.clio-row-icon, .agent-mark, .row-icon, .avatar) { flex: none; width: var(--icon-row); height: var(--icon-row); }
.new-waiting { padding: var(--pad-card); }
.new-waiting-row, .new-running-row { gap: var(--sp-12); }
/* W2A: строки «Ждут вас» — прозрачные строки внутри карточки (облик R29), а не вложенные плитки .section-row */
.new-waiting-row.section-row, .new-running-row.section-row { background: transparent; }

/* ===== сегмент-капсула .segment: контейнер 48, кнопка 40 ===== */
.segment, .section-filters, .agent-tabs, .settings-tabs, .project-view-controls, .result-tabs-scroll, .segments, .section-nav-capsule {
  align-items: center; gap: 2px; min-height: var(--h-seg-box); padding: 0; border-radius: var(--radius-pill);
}
.segment__btn, .section-filters > button, .agent-tabs > button, .settings-tabs > button, .project-view-controls > button, .result-tabs-scroll [role=tab], .segments > button {
  flex: 1 0 auto; height: var(--h-seg); min-height: var(--h-seg); padding: 0 var(--pad-seg); border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: 550; line-height: 1; white-space: nowrap;
}
.motion-indicator { border-radius: var(--radius-pill); }
/* W2A: сегмент внутри редактора — тональная капсула с внутренним отступом 4, активная кнопка целиком внутри (облик R29) */
.r29-host .segments { padding: var(--sp-4); }

/* ===== композер: одна капсула, слева вложение, справа круглая кнопка: микрофон -> отправить ===== */
form.composer {
  display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 2px; min-height: calc(var(--h-icon) + 2 * var(--sp-4)); padding: var(--sp-4);
  border-radius: var(--radius-pill); box-shadow: none; position: relative;
}
form.composer:focus-within { outline: 1px solid color-mix(in srgb, var(--muted) 40%, transparent); outline-offset: 2px; }
form.composer .composer-input { position: static; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-8); padding: 0; align-self: flex-end; }
form.composer .composer-input textarea {
  flex: 1 1 0; width: auto; min-width: 0; height: auto; min-height: var(--h-icon); max-height: 106px; field-sizing: content; padding: 11px 0; margin: 0;
  font-size: 16px; line-height: 22px; background: transparent; border: 0; border-radius: 0; resize: none; overflow-y: auto; color: var(--ink);
}
form.composer .attach { background: transparent; color: var(--muted); }
form.composer .attach svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
form.composer .attach:hover { background: transparent; color: var(--ink); }
form.composer .composer-mention { flex: none; align-self: flex-start; margin: var(--sp-8) 0 0 var(--sp-4); height: 28px; padding: 0 var(--sp-4) 0 10px; border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
form.composer .composer-mention.is-default { color: var(--muted); font-weight: 500; }
form.composer .composer-mention[hidden] { display: none; }
form.composer .composer-mention button { width: 24px; height: 24px; min-height: 24px; margin: -1px; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; }
form.composer .composer-mention { position: relative; }
form.composer .composer-mention button::after { content: ""; position: absolute; top: -8px; bottom: -8px; right: -7px; width: 44px; }
form.composer .composer-mention button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
form.composer .composer-action { position: relative; flex: none; width: var(--h-icon); height: var(--h-icon); }
form.composer .composer-action button { position: absolute; inset: 0; width: var(--h-icon); height: var(--h-icon); min-height: var(--h-icon); margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; }
form.composer .composer-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
form.composer .composer-action .microphone { background: var(--panel); color: var(--ink); opacity: 1; visibility: visible; }
form.composer .composer-action .send:is(:enabled, :disabled) { background: var(--action); color: var(--action-ink); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); }
form.composer:has(textarea:not(:placeholder-shown)) .composer-action .send:is(:enabled, :disabled) { opacity: 1; visibility: visible; transition: opacity var(--dur-fast) var(--ease), visibility 0s; }
form.composer:has(textarea:not(:placeholder-shown)) .composer-action .microphone { visibility: hidden; transition: visibility 0s linear var(--dur-fast); }
form.composer .composer-action .send:disabled { opacity: .55; }
form.composer:has(textarea:placeholder-shown) .send, form.composer .send:disabled { background: var(--panel); color: var(--muted); opacity: 1; }
form.composer:has(textarea:not(:placeholder-shown)) .send:not(:disabled) { background: var(--action); color: var(--action-ink); }
form.composer .mention-options { background: var(--raised); }
form.composer .mention-options [role=option] { border-radius: var(--radius-inner); }
form.composer .mention-options [aria-selected=true] { background: var(--panel); }
}

@layer state {
  [hidden] { display: none; }
  body.module-collab-off :is([data-open='invite-dialog'], [data-discuss-person], [data-module-collab], .member-stack:not([data-new-members]), .read-receipt) { display: none; }
  body.module-agents-off :is([data-section='Агенты'], [data-rail='agents'], [data-module-agents], [data-search-filter='agents'], .agent-entry) { display: none; }
  body.module-media-off [data-media-editor] { display: none; }
}

/* W2A-fix: кнопки решения в «Проверке»: главная — цвет действия, вторая — тональная капсула, отличимая от подложки панели */
@layer components {
  .r29-host .review-actions button.primary { background: var(--action); color: var(--action-ink); }
  .r29-host .review-actions button:not(.primary) { background: var(--raised); color: var(--ink); }
}
@layer components {
  .d-discuss-controls .d-capsule[data-action="native-stop"] { background: var(--raised); color: var(--ink); }
}

/* W2F: ползунки громкости и прочие range — цвет токеном, без синего браузерного */
@layer components {
  input[type="range"] { accent-color: var(--ink); }
}

/* Версии: миниатюра выбранного узла и «Открыть вариант» крупно — кадр целиком, место вокруг закрывает */
body .r29-host .versions-editor .branch-preview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-inner); background: var(--panel); margin-bottom: var(--sp-8); }
body .r29-host .variant-overlay { position: absolute; inset: var(--sp-24) var(--sp-24) auto; height: min(calc(100% - 48px), calc(100dvh - 120px)); z-index: 12; display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-24); border-radius: var(--radius-card); background: var(--raised); box-shadow: 0 0 0 100vmax rgb(0 0 0 / .32), 0 24px 64px rgb(0 0 0 / .22); }
body .r29-host .variant-overlay-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); }
body .r29-host .variant-overlay-head h3 { margin: 0; font-size: var(--fs-h4); }
body .r29-host .variant-overlay img { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: var(--radius-inner); }
body .r29-host.phone-screen .variant-overlay { position: fixed; inset: auto var(--sp-16); top: 50%; transform: translateY(-50%); height: auto; max-height: calc(100dvh - 32px); padding: var(--sp-16); }
body .r29-host.phone-screen .variant-overlay img { flex: none; height: auto; }

/* Шапка редактора: привязка к проекту и чату — тихая капсула вместо подписи студии; панель под шапкой */
body .r29-host .app-head small .head-binding { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 32px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
body .r29-host .app-head small .head-binding::after { content: ''; width: 6px; height: 6px; margin-left: var(--sp-4); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
body .r29-host .app-head small .head-binding:hover, body .r29-host .app-head small .head-binding[aria-expanded=true] { color: var(--ink); }
body .r29-host .binding-panel { position: absolute; top: calc(88px + var(--sp-8)); left: var(--sp-16); z-index: 13; display: grid; gap: var(--sp-12); width: min(360px, calc(100% - 32px)); padding: var(--sp-16); border-radius: var(--radius-card); background: var(--raised); box-shadow: 0 16px 48px rgb(0 0 0 / .18); }
body .r29-host .binding-panel h3 { margin: 0; font-size: var(--fs-h4); }
body .r29-host .binding-panel p { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-body); }
body .r29-host .binding-panel label { display: grid; gap: var(--sp-8); font-size: var(--fs-small); color: var(--muted); }
body .r29-host .binding-panel select { height: 44px; border: 0; border-radius: var(--radius-field); background-color: var(--panel); color: var(--ink); padding: 0 40px 0 var(--sp-16); font-size: 16px; }
body .r29-host .binding-actions { display: flex; justify-content: flex-end; gap: var(--sp-8); }
body .r29-host.phone-screen .binding-panel { position: fixed; top: auto; bottom: var(--sp-16); left: var(--sp-16); right: var(--sp-16); width: auto; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .32); }

/* лист навигации телефона: крестик не в зоне чёлки (верх ≥ 20 px) */
.phone-nav-float .phone-nav-dialog { padding-top: 20px; }
.phone-nav-float .phone-nav-dialog .nav-heading:first-of-type { margin-top: -6px; }
.phone-nav-float .phone-nav-dialog .phone-nav-close.icon-button { top: 20px; }

/* R23: ссылка автора в «Беседе»: зона нажатия ≥24 px без смены пикселей (padding и равный отрицательный margin) */
@layer components {
  .message-meta .agent-author { padding-block: 5px; margin-block: -5px; }
}

/* R23: меню «проекты и чаты» на телефоне: в шапке остаётся только крестик (слои layout-top выигрывали у скрытия из layout-base) */
@layer components {
  @media (max-width: 600px) { body.nav-open .window-header > :not(.nav-close) { display: none; } }
}