/* w2b.css — стили потока B по приёмке 2 владельца */

/* 1. dev: плашка решений исчезает через 6 с, плавно (opacity + сдвиг 8px, 220 мс, без размытия) */
.decision-toast.w2b-toast-leaving {
  animation: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms cubic-bezier(.32, .72, 0, 1), transform 220ms cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
}

/* 2. dev: «Результат тестов» — моушн приятнее: при появлении цифры перекатываются (count-up 400 мс), карточка плавно проявляется; спокойная кривая cubic-bezier(.32,.72,0,1), без пружин */
.zc-card[data-card-type="tests"] {
  animation: w2b-tests-appear 400ms cubic-bezier(.32, .72, 0, 1) backwards;
}

@keyframes w2b-tests-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.zc-card[data-card-type="tests"] .number-digit > span,
.zc-wb-test-num .number-digit > span {
  animation-name: r20-digit-in;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}

.zc-card[data-card-type="tests"] .number-digit::before,
.zc-wb-test-num .number-digit::before {
  animation-name: r20-digit-out;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}

/* 3. team: «моушн чуть плавнее» (шаги выпуска, прогресс 2→3 из 4 — плавная анимация ширины/прогресса 300–400 мс) */
.zc-wb-fill {
  transition: transform 360ms cubic-bezier(.32, .72, 0, 1);
}

.zc-card[data-card-type="plan"] .number-digit > span,
.zc-wb-prog-wrap .number-digit > span {
  animation-name: r20-digit-in;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}

.zc-card[data-card-type="plan"] .number-digit::before,
.zc-wb-prog-wrap .number-digit::before {
  animation-name: r20-digit-out;
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}

.zc-step, .zc-step-dot, .zc-step-sub {
  transition: color 360ms cubic-bezier(.32, .72, 0, 1), background-color 360ms cubic-bezier(.32, .72, 0, 1), opacity 360ms cubic-bezier(.32, .72, 0, 1);
}

/* многострочные поля: основной кегль и обычная высота строки (не 44 px однострочного поля) */
.section-screen textarea:not(.r29-host *):not(.composer *) { font-family: inherit; font-size: var(--fs-body); line-height: 1.55; }

/* 4. mkt и везде: все select/выпадающие меню одним компонентом (поле 44, радиус var(--radius-field), стрелка-иконка, тон raised, раскрытое меню — тональная карточка с пунктами-строками), на всех экранах */
select,
body select,
.section-screen select,
.section-screen :is(input:not([type=checkbox], [type=range]), select):not(.r29-host *),
.section-card select,
.settings-fields select,
.new-settings select,
.new-project select,
.person-actions select,
.r29-host select,
.branch-controls select {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: var(--radius-field);
  background-color: var(--raised);
  color: var(--ink);
  border: 0;
  outline: none;
  padding: 0 40px 0 var(--sp-16);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  box-shadow: none;
}

.section-screen :is(input:not([type=checkbox], select), textarea):not(.r29-host *) {
  height: auto;
  max-height: none;
  background-image: none;
}

select:focus-visible,
body select:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

select option,
select optgroup {
  background-color: var(--raised);
  color: var(--ink);
  font-size: var(--fs-body);
  padding: 10px 14px;
  min-height: 40px;
}

/* Выпадающие меню — тональная карточка с пунктами-строками */
[popover].result-tab-menu,
.mention-options,
.person-actions,
[role="menu"] {
  background-color: var(--raised);
  color: var(--ink);
  border-radius: var(--radius-inner);
  border: 0;
  box-shadow: var(--shadow);
  padding: 8px;
}

[popover].result-tab-menu [role="menuitem"],
.mention-options [role="option"],
.person-actions button,
[role="menu"] button {
  min-height: 40px;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  color: var(--ink);
  background: transparent;
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
}

[popover].result-tab-menu [role="menuitem"]:hover,
[popover].result-tab-menu [role="menuitem"]:focus-visible,
.mention-options [role="option"]:hover,
.mention-options [role="option"][aria-selected="true"],
.person-actions button:hover,
[role="menu"] button:hover {
  background-color: var(--panel);
}

/* 5. inbox: тихая капсула для кнопок действий */
.inbox-row .section-button.clio-secondary[data-section-decision] {
  border-radius: var(--radius-pill);
  min-height: 44px;
  height: 44px;
  padding: 0 var(--sp-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: transparent;
  color: var(--ink);
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

.inbox-row .section-button.clio-secondary[data-section-decision]:hover {
  background-color: var(--panel);
}

/* 6. multi: «Сравнить / Взять должны быть в разных цветах и одной формы» — обе капсулы одной высоты/радиуса; «Взять» — тёмная капсула (--ink-button), «Сравнить» — тональная; салатовый остаётся у одного главного действия экрана «Объединить» (R30) */
body .r29-host .native-d .d-answer-actions button {
  height: 44px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: inherit;
  font-size: 14px;
  font-weight: 550;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  padding: 0 16px;
}

body .r29-host .native-d .d-answer-actions button[data-action="native-compare"] {
  background-color: var(--panel);
  color: var(--ink);
}

body .r29-host .native-d .d-answer-actions button[data-action="native-compare"]:hover {
  background-color: var(--raised);
}

body .r29-host .native-d .d-answer-actions button[data-action="native-answer"],
html[data-theme="dark"] body .r29-host .native-d .d-answer-actions button[data-action="native-answer"] {
  background-color: var(--ink-button);
  color: var(--ink-button-text);
}

body .r29-host .native-d .d-answer-actions button[data-action="native-answer"]:hover,
html[data-theme="dark"] body .r29-host .native-d .d-answer-actions button[data-action="native-answer"]:hover {
  background-color: var(--ink-button);
  color: var(--ink-button-text);
  opacity: 0.9;
}



/* W3 (B5): выпуск 2.4: прогресс шагов без рывков. Строка шага не меняет высоту (статус «Работает» встаёт справа, а не новой строкой),
   одна анимация на элемент 260-280 мс, только opacity/transform/цвет; панель результата помещается без прокрутки. */
.zc-steps .zc-step { position: relative; }
.zc-steps .zc-step-sub { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--muted); animation: w2b-tests-appear 300ms cubic-bezier(.32, .72, 0, 1) backwards; }
.zc-step.is-running .zc-step-sub { color: var(--muted); }
.zc-step, .zc-step-dot, .zc-step-sub { transition-duration: 300ms; transition-timing-function: var(--ease); }
.zc-wb-fill { transition-duration: 300ms; transition-timing-function: var(--ease); }
.zc-card[data-card-type="plan"] .number-digit > span,
.zc-wb-prog-wrap .number-digit > span,
.zc-card[data-card-type="plan"] .number-digit::before,
.zc-wb-prog-wrap .number-digit::before { animation-duration: 300ms; animation-timing-function: var(--spring-snap); }
.inspector .zc-tiles:has([data-zc-string='field.cost']) { gap: 12px; }
.inspector .zc-tile:has([data-zc-string='field.cost']) .zc-wb-usage-num { font-size: 28px; }
body .number-digit { line-height: inherit; }
.inspector .zc-tiles:has([data-zc-string='field.cost']) { gap: 8px 16px; }

/* W3 (B2): поле ввода. Одна тональная капсула одинаково во всех разговорах: фон --panel (в светлой теме белое на белом сливалось),
   микрофон и чипы адресатов тоном --raised; на 390 капсула закреплена внизу с отступом 12 по бокам, стекло как в R20 (панель 78 % + размытие фона, без теней)
   (слой components возвращал position: relative, и капсула уезжала за правый край на 12 px). Адресатов несколько: чипы переносятся строкой. */
body form.composer.composer:not(.new-composer) { background: var(--panel); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body form.composer.composer:not(.new-composer) .composer-action .microphone { background: var(--raised); }
body form.composer.composer:not(.new-composer) .composer-mention { background: var(--raised); }
body form.composer.composer .composer-mention { margin: 8px 0 8px var(--mention-ml, 4px); }
body form.composer.composer .composer-input { flex-wrap: wrap; align-items: center; gap: 0 var(--input-gap, 6px); }
body form.composer.composer .composer-input textarea { flex: 1 1 96px; min-width: 96px; }
body form.composer.composer:has(.composer-mention + .composer-mention) { border-radius: var(--radius-card); }
@media (max-width: 760px) {
  body .conversation > form.composer.composer { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: none; }
  body .conversation > .composer-stack > form.composer.composer { background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: none; }
}

/* W3 (B6): карточка вариантов А/Б/В. Крупное превью сверху, под ним три равные по высоте карточки сеткой
   (картинка с ровным кропом 16:10, ярлык и подпись под ней на одной оси), выбранная отмечена тоном, не рамкой.
   «Открыть крупно» стоит в строке под превью справа и не лежит на картинке. Узкая карточка: строки (картинка слева). */
.zc-media-v2-1 .zc-v2-1-body { flex-direction: column; gap: 12px; }
.zc-media-v2-1 .zc-v2-1-thumbs-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.zc-media-v2-1 .zc-v2-1-thumb.zc-media-option { box-shadow: none; flex-direction: row; align-items: center; }
.zc-media-v2-1 .zc-v2-1-thumb.zc-media-option.is-selected { background: var(--own); box-shadow: none; }
.zc-media-v2-1 .zc-v2-1-thumb-headline { display: block; white-space: normal; font-size: var(--fs-small); line-height: 1.3; }
.zc-media-v2-1 .zc-v2-1-thumb-tag-row { flex-direction: row; align-items: center; }
.zc-media-v2-1 .zc-v2-1-thumb .zc-v2-check-badge { position: static; width: 20px; height: 20px; margin-left: auto; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row { flex-wrap: wrap; min-height: var(--h-pill); margin-top: 8px; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row [data-media-open] { position: static; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: auto; height: var(--h-pill); min-height: var(--h-pill); padding: 0 var(--sp-12); border-radius: var(--radius-pill); background: var(--raised); color: var(--ink); font-size: var(--fs-small); font-weight: 550; white-space: nowrap; flex-direction: row; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row [data-media-open] > svg { display: none; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row [data-media-open] .clio-action-label { position: static; display: inline; width: auto; height: auto; max-width: none; opacity: 1; font-size: var(--fs-small); white-space: nowrap; color: var(--ink); }
.zc-media-v2-1 .zc-v2-1-thumb.zc-media-option { padding: 4px 10px; }
.zc-media-v2-1 .zc-v2-1-thumbs-col { gap: 4px; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row { gap: 4px; }
.zc-media-v2-1 .zc-v2-1-thumb-img-wrap { width: 56px; height: 36px; aspect-ratio: auto; flex: none; }
.zc-media-v2-1 .zc-v2-1-preview-wrap { aspect-ratio: 3.6; }
.zc-media-v2-1 .zc-v2-1-body { gap: 8px; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row { margin-top: 4px; }
@container (min-width: 481px) {
  .zc-media-v2-1 .zc-v2-1-thumbs-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .zc-media-v2-1 .zc-v2-1-thumb.zc-media-option { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
  .zc-media-v2-1 .zc-v2-1-thumb-img-wrap { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .zc-media-v2-1 .zc-v2-1-thumb-info { flex: 1 1 auto; gap: 2px; }
  .zc-media-v2-1 .zc-v2-1-thumb .zc-v2-check-badge { position: absolute; top: 14px; right: 14px; margin: 0; }
  .zc-media-v2-1 .zc-v2-1-preview-wrap { aspect-ratio: 3.6; }
.zc-media-v2-1 .zc-v2-1-body { gap: 8px; }
.zc-media-v2-1 .zc-v2-1-preview-badge-row { margin-top: 4px; }
}
@container (min-width: 481px) {
  .zc-media-v2-1 .zc-v2-1-thumb .zc-badge-rec { display: none; }
}

/* W3 (B1): «На весь экран»: результат не растягивается на всю ширину окна (карточка в 1400 px вырастала до 1200 px высотой и давала
   внутреннюю прокрутку), колонка 760 по центру, прокрутка только у области результата и только если высоты правда не хватает. */
body.result-full .inspector .compact-result { max-width: 760px; margin-inline: auto; }
@container (min-width: 481px) {
  body.result-full .zc-media-v2-1 .zc-v2-1-preview-wrap { aspect-ratio: 3.4; }
  .zc-media-v2-1 .zc-v2-1-thumb-img-wrap { aspect-ratio: 2; }
}
.conversation-tabs-scroll { scrollbar-width: none; }
.conversation-tabs-scroll::-webkit-scrollbar { display: none; }

.zc-media-v2-1 .zc-v2-1-preview-wrap .zc-media-img { object-position: 50% 62%; }
/* W3 (B1): панель результата открыта листом (окно уже): «На весь экран» не нужна, при нажатии весь лист уходил в размытие */
body.result-away .inspector .result-tabs-bar > .result-full-toggle { display: none; }

/* W3: итог решения на телефоне компактный: блок не выше своего содержимого; у «Отклонено» остаётся тихая строка вместо пустоты */
body .layout-d2 .inline-decision.is-decided { padding: var(--sp-8) var(--sp-12); }
body .inline-decision.is-decided.is-rejected > p { height: auto; margin: 0 0 var(--sp-4); opacity: 1; visibility: visible; color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
/* W3: тост решения не лежит на шапке и первом сообщении: внизу над полем ввода; ленте добавляется место под него */
.layout-d2 section.conversation > .decision-toast, .layout-d2 .workspace > .decision-toast { top: auto; bottom: calc(var(--composer-glass-height, 64px) + 24px); left: var(--sp-12); right: var(--sp-12); margin: 0; }
.layout-d2 .conversation:has(.decision-toast:not([hidden])) .feed, .layout-d2 .workspace:has(> .decision-toast:not([hidden])) .feed { padding-bottom: calc(var(--composer-glass-height, 64px) + 24px + 76px); }
/* W3: подложка листа результата на окне 761+ без размытия (на телефоне размытие по контракту R20): слева виден разговор, затемнённый тоном --scrim, а не размытая пустота */
@media (min-width: 761px) {
  .result-sheet-backdrop { background: var(--scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
body.result-sheet-open .inspector .decision-toast { position: absolute; top: auto; bottom: var(--sp-12); left: var(--sp-12); right: var(--sp-12); margin: 0; }