/* M1: движение «Беседы», один слой. Все токены движения живут только здесь; подключается последним.
   Законы (designkit-owner, «Ощущение и моушн»): одна кривая выдоха, лист без перелёта, переключатели вкладок мгновенны,
   hover и отклик 120-250 мс, без нажатия-масштаба, без ступенчатости, покой без бесконечных анимаций.
   Варианты: html[data-motion=spring] (по умолчанию, пружины linear() у state/travel/morph) и html[data-motion=plain] (та же длительность, кривая выдоха). */
:root {
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-calm: var(--ease); --fade-ease: var(--ease); --backdrop-out-ease: var(--ease);
  --dur-fast: 220ms; --dur-base: 260ms; --dur-slow: 300ms;
  --dur-state: 320ms; --dur-dialog: 420ms;
  --dur-dialog-out: 300ms; --dur-expand: 300ms; --dur-expand-out: 300ms; --dur-toast: 240ms; --dur-toast-out: 200ms; --dur-pop: 180ms; --dur-pop-out: 140ms;
  --fade-fast: 120ms; --fade-default: 200ms; --fade-slow: 300ms;
  --spring-state: linear(0, 0.071, 0.236, 0.435, 0.629, 0.793, 0.919, 1.006, 1.056, 1.08, 1.083, 1.074, 1.059, 1.042, 1.027, 1.014, 1.004, 0.998, 0.995, 0.993, 0.993, 0.994, 0.995, 0.997, 1);
  --spring-morph: linear(0, 0.042, 0.143, 0.275, 0.415, 0.55, 0.672, 0.775, 0.858, 0.922, 0.969, 1.001, 1.022, 1.033, 1.038, 1.038, 1.035, 1.03, 1.025, 1.02, 1.015, 1.01, 1.007, 1.004, 1);
}
html[data-motion=plain] { --spring-sheet: var(--ease); --spring-press: var(--ease); --spring-snap: var(--ease); --spring-state: var(--ease); --spring-morph: var(--ease); --spring-travel: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-press: 0ms; --dur-snap: 0ms; --dur-sheet: 0ms; --dur-travel: 0ms; --dur-morph: 0ms; --dur-state: 0ms;
    --dur-dialog: 0ms; --dur-dialog-out: 0ms; --dur-expand: 0ms; --dur-expand-out: 0ms; --dur-toast: 0ms; --dur-toast-out: 0ms; --dur-pop: 0ms; --dur-pop-out: 0ms;
    --fade-fast: 0ms; --fade-default: 0ms; --fade-slow: 0ms; --backdrop-in: 0ms; --backdrop-out: 0ms; }
}

/* ---- 1. лист: подложка 150 мс, подъём по кривой выдоха без перелёта, закрытие короче ---- */
:root { --sheet-shift: 24px; }
dialog { transition: transform var(--dur-dialog) var(--spring-sheet), opacity var(--dur-dialog) var(--spring-sheet); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(var(--sheet-shift)); } }
dialog { --m1-out: var(--dur-dialog-out); }

/* ---- 3. всплывающие меню: 140-180 мс, закрытие короче ---- */
/* меню студий на широком окне: тот же диалог, но ролью popover */
@media (min-width: 761px) {
  dialog.studio-dialog { --sheet-shift: -8px; --m1-out: var(--dur-pop-out); transition: transform var(--dur-pop) var(--ease), opacity var(--dur-pop) var(--ease); }
}
/* popover API: run-menu, меню новой вкладки результата */
:is(.run-menu, .result-tab-menu) { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-pop-out) var(--ease), transform var(--dur-pop-out) var(--ease), overlay var(--dur-pop-out) var(--ease) allow-discrete, display var(--dur-pop-out) var(--ease) allow-discrete; }
:is(.run-menu, .result-tab-menu):popover-open { opacity: 1; transform: none; transition: opacity var(--dur-pop) var(--ease), transform var(--dur-pop) var(--ease), overlay var(--dur-pop) var(--ease) allow-discrete, display var(--dur-pop) var(--ease) allow-discrete; }
@starting-style { :is(.run-menu, .result-tab-menu):popover-open { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 760px) {
  .run-menu { transform: translateY(100%); }
  .run-menu:popover-open { transform: none; }
  @starting-style { .run-menu:popover-open { opacity: 1; transform: translateY(100%); } }
}
/* M2A.4: подложка меню прав на телефоне говорит на языке остальных листов: размытие, проявление 120 мс, уход не позже поверхности */
@media (max-width: 760px) {
  .run-menu::backdrop { background: color-mix(in srgb, var(--frame) 50%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transition: opacity var(--fade-fast) var(--ease), overlay var(--fade-fast) allow-discrete, display var(--fade-fast) allow-discrete; }
  .run-menu:popover-open::backdrop { opacity: 1; transition: opacity var(--fade-fast) var(--ease); }
  @starting-style { .run-menu:popover-open::backdrop { opacity: 0; } }
}
/* меню действий агента (hidden + is-open) и подсказка @ (hidden) */
.w2d-menu { transition: opacity var(--dur-pop-out) var(--ease), transform var(--dur-pop-out) var(--ease), display var(--dur-pop-out) var(--ease) allow-discrete; }
.w2d-menu.is-open { transition: opacity var(--dur-pop) var(--ease), transform var(--dur-pop) var(--ease), display var(--dur-pop) var(--ease) allow-discrete; }
.mention-options { opacity: 1; transform: none; transition: opacity var(--dur-pop) var(--ease), transform var(--dur-pop) var(--ease), display var(--dur-pop) var(--ease) allow-discrete; }
.mention-options[hidden] { visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-pop-out) var(--ease), transform var(--dur-pop-out) var(--ease), display var(--dur-pop-out) var(--ease) allow-discrete; }
@starting-style { .mention-options { opacity: 0; transform: translateY(6px); } }

/* ---- 4. тост: проявляется и уходит 200-240 мс, сдвиг через translate (transform занят центровкой) ---- */
.toast { opacity: 1; translate: 0 0; transition: opacity var(--dur-toast) var(--ease), translate var(--dur-toast) var(--ease), display var(--dur-toast) var(--ease) allow-discrete; }
.toast[hidden] { opacity: 0; translate: 0 8px; transition: opacity var(--dur-toast-out) var(--ease), translate var(--dur-toast-out) var(--ease), display var(--dur-toast-out) var(--ease) allow-discrete; }
@starting-style { .toast { opacity: 0; translate: 0 8px; } }
/* галочка выбранного пункта проявляется переходом (меню модели остаётся открытым после выбора) */
.run-menu .mi-check { opacity: 0; transition: opacity var(--dur-pop) var(--ease); }
.run-menu .mi[aria-checked=true] .mi-check { opacity: 1; }

/* ---- 2. раскрытие на месте: одна поверхность растёт по высоте, тело проявляется по opacity, закрытие быстрее ---- */
:root { interpolate-size: allow-keywords; }
:is(.run-block .run-body, .project-chats, #archived-projects) {
  overflow: clip; overflow-clip-margin: 6px; height: auto; opacity: 1;
  transition: height var(--dur-expand) var(--ease), opacity var(--dur-expand) var(--ease), padding-block var(--dur-expand) var(--ease), margin-top var(--dur-expand) var(--ease), display var(--dur-expand) var(--ease) allow-discrete;
}
:is(.run-block .run-body, .project-chats, #archived-projects)[hidden] {
  height: 0; opacity: 0; padding-block: 0; margin-top: 0;
  transition: height var(--dur-expand-out) var(--ease), opacity var(--dur-expand-out) var(--ease), padding-block var(--dur-expand-out) var(--ease), margin-top var(--dur-expand-out) var(--ease), display var(--dur-expand-out) var(--ease) allow-discrete;
}
@starting-style { html[data-m1-ready] :is(.run-block .run-body, .project-chats, #archived-projects) { height: 0; opacity: 0; padding-block: 0; margin-top: 0; } }

/* ---- 6. перемещение рабочей области: сайдбар и «на весь экран» едут одной ролью travel ---- */
.app { transition: grid-template-columns var(--dur-travel) var(--spring-travel); }
/* Direct dragging follows the pointer; a spring here can undershoot the 240px sidebar minimum. */
body.resizing .app { transition: none; }
.sidebar { opacity: 1; transition: opacity var(--dur-travel) var(--ease), display var(--dur-travel) var(--ease) allow-discrete; }
body.sidebar-hidden .sidebar { opacity: 0; }
/* «На весь экран»: прячущиеся панели уходят по opacity, дальше пропадают; окно результата переезжает FLIP-ом (motion.js) */
:is(.navigation, .chat-header, .conversation, .result-resize) { opacity: 1; transition: opacity var(--dur-travel) var(--ease), display var(--dur-travel) var(--ease) allow-discrete; }
body.result-full :is(.navigation, .chat-header, .conversation, .result-resize) { opacity: 0; }
@starting-style { html[data-m1-ready] :is(.navigation, .chat-header, .conversation, .result-resize) { opacity: 0; } }

/* ---- 7. hover и отклик: фон и цвет 120-220 мс одной кривой, без transition: all ---- */
:is(a.chat-link, button.chat-link, .sidebar-command, .studio-switch, .run-pill, .cap, .btn, .zc-btn, .chrome-action, .project-toggle, .menu-entry, .studio-option, .archived-project, .icon-button, .conversation-tab, .conversation-tab-add, .result-tab-add, .result-tab-menu button, .section-row, .section-button) {
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--fade-fast) var(--ease);
}
/* переключатели содержимого мгновенны, в том числе их фон */
[data-motion-role="instant"] button { transition: none; }
/* смена темы мгновенна: переходы гасятся на время переключения (класс ставит motion.js) */
html.m1-switching:not(#m1) *, html.m1-switching:not(#m1) *::before, html.m1-switching:not(#m1) *::after { transition: none; animation-duration: 0s; animation-delay: 0s; transition-delay: 0s; }
/* у выбранного пункта сайдбара hover тоже виден */
body :is(.sidebar-command[aria-current], .project-name[aria-current], .chat-link.current):hover { background: color-mix(in srgb, var(--panel) 90%, var(--ink)); }
/* копия закрывающегося диалога: содержимое замирает */
.m1-ghost:not(#m1), .m1-ghost:not(#m1) *, .m1-ghost:not(#m1) *::before, .m1-ghost:not(#m1) *::after { transition: none; animation: none; }
/* M2A.3: копия показывает последнее состояние счётчика: «старая цифра» (::before перекатки) в копии не рисуется, иначе вместо «3 из 3» мелькает «0 из 3» */
.m1-ghost:not(#m1) .number-digit::before { content: none; }
/* пока сайдбар едет, его содержимое не вылезает на рабочую область (обрезка только на время движения: в покое она меняла растр текста) */
body.m1-travel .sidebar { overflow: clip; overflow-clip-margin: 12px; }
/* M2A.1: колонка только клипает: сайдбар держит развёрнутую ширину, подписи не переносятся, пока едет ширина колонки */
body.m1-travel .navigation { overflow: clip; }
body.m1-travel .sidebar { width: var(--side); min-width: var(--side); }
/* кольцо «идёт» внутри листа навигации крутится псевдоэлементом: рамка самого значка не гуляет (в сайдбаре окна оставлено как было) */
dialog .sidebar .status-working i { position: relative; width: 10px; height: 10px; border: 0; animation: none; }
dialog .sidebar .status-working i::before { content: ''; position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: sidebar-working 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { dialog .sidebar .status-working i::before { animation: none; } }

/* M2A.7: у капсулы «Отклонить» виден hover (фон темнеет к чернилам, в тёмной теме светлеет), отклик по кривой выдоха */
body .zc-btn.clio-secondary.zc-btn-danger:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 9%, var(--canvas)); }
.zc-btn { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--fade-fast) var(--ease), filter var(--dur-fast) var(--ease); }

/* ---- 8. плашка решения уходит: нижний отступ ленты (+76 px под плашку) убывает плавно, лента не прыгает ---- */
.layout-d2 .feed { transition: padding-bottom var(--dur-expand-out) var(--ease); }