/* Zidos · управление ходом агента (страница run-d2-p3-*). Только токены из tokens.css; один слой components, показ по состоянию в слое state. */
@layer components {
/* ===== сегмент «Рассказ | Шаги» и пульт ===== */
.run-seg { display: inline-flex; align-items: center; flex: none; min-height: var(--h-seg-box); padding: 0; border-radius: var(--radius-pill); background: var(--panel); }
.run-seg > button { height: var(--h-seg); min-width: var(--h-seg); padding: 0 var(--sp-16); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--fs-small); font-weight: 550; line-height: 1; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.run-seg > button[aria-pressed=true] { background: var(--ink-button); color: var(--ink-button-text); }

/* ===== строка «Zidos работал 41,2 с ▸» ===== */
.run-block { order: 2; margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--fs-small); }
.run-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-12); }
/* узкая колонка беседы рядом с панелью (1180–1280): сегмент ужимается, чтобы остаться в строке с «Zidos работает…»;
   на телефоне блок по ширине содержимого (flex-start), там containment схлопнул бы его в 0 */
@media (min-width: 761px) { .run-block { container-type: inline-size; } }
@container (max-width: 360px) { .run-line { column-gap: var(--sp-8); } .run-seg > button { padding: 0 var(--sp-8); } }
.run-toggle { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: var(--h-pill); padding: 0; color: var(--muted); font-size: var(--fs-small); font-weight: 400; text-align: left; }
.run-toggle:hover { color: var(--ink); }
.run-block .run-chevron { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.run-block.is-open .run-chevron { transform: rotate(90deg); }
.run-log { display: grid; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.run-block .run-body { margin: var(--sp-4) 0 0; padding: var(--sp-12) var(--sp-16); border-radius: var(--radius-inner); background: var(--panel); }
.run-log:empty { display: none; }
.log-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-12); color: var(--ink); font-size: var(--fs-small); line-height: var(--lh-body); overflow-wrap: anywhere; }
.log-line small { flex: none; color: var(--muted); font-size: var(--fs-micro); }

/* ===== карточка плана с правкой на месте ===== */
.plan-card { --plan-tone: var(--frame); display: grid; gap: var(--sp-8); padding: var(--pad-card); border-radius: var(--radius-card); background: var(--panel); color: var(--ink); }
.plan-card:empty { display: none; }
.turn-panel .plan-card, .run-menu .plan-card { background: var(--raised); --plan-tone: var(--panel); }
.run-menu .plan-card { padding: var(--sp-8); background: transparent; }
.plan-inline { padding: var(--sp-8) var(--sp-8) 0; background: transparent; }
.plan-head { display: grid; gap: 2px; }
.plan-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-title); }
.plan-note { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-body); }
.plan-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.plan-card .plan-step { align-items: flex-start; gap: var(--sp-8); min-height: var(--h-pill); padding: 0; }
/* шаг в несколько строк: кружок и ✕ стоят на уровне первой строки, а не по центру блока */
.plan-card .plan-step > :not(.plan-input) { align-self: flex-start; position: relative; top: calc(var(--h-pill) / 2); transform: translateY(-50%); }
.plan-card .zc-step-dot { margin-top: 0; background: var(--plan-tone); }
.plan-card .zc-step.is-completed .zc-step-dot { background: var(--plan-tone); }
.plan-input { flex: 1 1 auto; min-width: 0; height: var(--h-pill); padding: 0 var(--sp-8); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: var(--fs-body); line-height: 1.3; }
textarea.plan-input { height: auto; min-height: var(--h-pill); padding: 11px var(--sp-8); resize: none; overflow: hidden; field-sizing: content; font-family: inherit; }
.plan-input::placeholder { color: var(--muted); }
.plan-input[readonly] { pointer-events: none; }
.plan-step.is-pending .plan-input { color: var(--ink); }
.plan-step.is-running .plan-input, .plan-step.is-completed .plan-input { color: var(--ink); }
.plan-step.is-completed .plan-input { color: var(--muted); }
.plan-card[data-editing] .plan-input:not([readonly]) { background: var(--plan-tone); }
.plan-input:focus-visible { outline: none; background: var(--plan-tone); }
.plan-card .zc-step-time { margin-left: 0; color: var(--muted); opacity: 1; font-size: var(--fs-small); }
.plan-del, .queue-del { display: inline-grid; place-items: center; flex: none; width: var(--h-icon); height: var(--h-icon); border-radius: 50%; color: var(--muted); }
.plan-del:hover, .queue-del:hover, .queue-handle:hover { color: var(--ink); background: var(--plan-tone, var(--frame)); }
.plan-del svg, .queue-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.plan-add { justify-self: start; height: var(--h-pill); padding: 0 var(--pad-pill); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-size: var(--fs-small); font-weight: 550; }
.plan-add:hover { color: var(--ink); background: var(--plan-tone); }
.plan-where { justify-self: start; margin-top: var(--sp-8); background: var(--plan-tone); }
.plan-where + .plan-actions { margin-top: var(--sp-8); }
.plan-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-8); margin-top: var(--sp-8); }
.plan-run, .plan-edit, .plan-doc { display: inline-flex; align-items: center; justify-content: center; 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; }
.plan-run { background: var(--action); color: var(--action-ink); }
.plan-edit, .plan-doc { background: var(--plan-tone); color: var(--ink); }
.plan-doc { flex: none; }
.plan-head:has(> .plan-doc) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-12); }
.plan-edit[aria-pressed=true] { background: var(--ink-button); color: var(--ink-button-text); }

/* ===== очередь ===== */
.run-queue { display: grid; gap: var(--sp-8); padding: var(--sp-12); border-radius: var(--radius-card); background: var(--panel); }
.run-queue.is-empty { display: none; }
.turn-panel .run-queue { background: var(--raised); padding: var(--pad-card); margin-top: var(--sp-16); }
.run-menu .run-queue { background: transparent; padding: var(--sp-8); }
.queue-title { padding: var(--sp-4) var(--sp-4) 0; color: var(--muted); font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-body); }
.queue-list { display: grid; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.queue-row { position: relative; display: flex; align-items: center; gap: var(--sp-4); min-height: var(--h-row); padding: var(--sp-4); border-radius: var(--radius-inner); }
.queue-row.is-dragging { z-index: 2; background: var(--raised); transition: none; }
.queue-handle { display: inline-grid; place-items: center; flex: none; width: var(--h-icon); height: var(--h-icon); border-radius: 50%; color: var(--muted); cursor: grab; touch-action: none; }
.queue-handle svg { width: 18px; height: 18px; fill: currentColor; }
.queue-body { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; padding: var(--sp-4) 0; }
.queue-text { color: var(--ink); font-size: var(--fs-body); line-height: 1.35; overflow-wrap: anywhere; }
.queue-status { color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.queue-retry { flex: none; height: var(--h-pill); padding: 0 var(--pad-pill); border-radius: var(--radius-pill); background: var(--raised); color: var(--ink); font-size: var(--fs-small); font-weight: 550; }
.turn-panel .queue-retry { background: var(--panel); }

/* ===== панель «Ход» (Б) ===== */
.turn-panel { display: grid; gap: var(--sp-16); align-content: start; }
.turn-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; }
.turn-head h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); }
.turn-panel > .run-body { padding: var(--pad-card); border-radius: var(--radius-card); background: var(--raised); }
.turn-panel .run-queue { margin-top: 0; }
.run-empty { padding: var(--pad-card); border-radius: var(--radius-card); background: var(--raised); color: var(--muted); font-size: var(--fs-body); }
.run-turn-ref { width: fit-content; }
.run-turn-button { display: none; align-items: center; justify-content: center; flex: none; 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; white-space: nowrap; }
.chat-header > .run-seg { margin-left: var(--sp-12); }

/* ===== композер: стопка, пилюли внутри капсулы, строка хода ===== */
.composer-stack { container-type: inline-size; container-name: runstack; display: flex; flex-direction: column; flex: none; gap: var(--sp-8); margin: var(--sp-8) var(--sp-20) var(--sp-16); }
.composer-stack > form.composer { margin: 0; }
.run-pills { display: flex; align-items: center; flex: none; align-self: flex-end; gap: var(--sp-4); height: var(--h-icon); }
.run-pill { display: inline-flex; align-items: center; gap: var(--sp-4); height: var(--h-pill); padding: 0 var(--pad-pill); border-radius: var(--radius-pill); background: var(--raised); color: var(--muted); font-size: var(--fs-small); font-weight: 550; line-height: 1; white-space: nowrap; }
.run-pill:hover, .run-pill[aria-expanded=true] { color: var(--ink); }
/* управление ходом в шапке беседы: тональные пилюли, как сегмент; шапка тесная, поэтому ряд своего размера */
.chat-header { container: chathdr / inline-size; flex-wrap: wrap; }
.run-ctl { display: flex; align-items: center; flex: none; gap: var(--sp-4); }
.run-ctl .run-pill { background: var(--panel); color: var(--ink); }
.run-ctl .run-pill:hover, .run-ctl .run-pill[aria-expanded=true] { background: color-mix(in srgb, var(--panel) 85%, var(--ink)); }
.run-dot { display: none; }
@container chathdr (max-width: 720px) {
  .run-ctl { order: 9; flex: 1 0 100%; }
  .chat-header .conversation-menu { order: 1; }
  .chat-header .chat-heading { flex: 1 1 0; }
}
@container chathdr (max-width: 440px) {
  .run-ctl { flex: none; gap: 0; border-radius: var(--radius-pill); background: var(--panel); }
  .run-ctl .run-pill, .run-ctl .run-pill:hover, .run-ctl .run-pill[aria-expanded=true] { background: transparent; padding: 0 var(--sp-8) 0 var(--sp-12); }
  .run-ctl .run-pill[data-pill=perm] { padding-right: var(--sp-4); border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
  .run-ctl .run-pill[data-pill=perm] .run-caret { display: none; }
  .run-ctl .run-pill[data-pill=model] { padding-left: var(--sp-4); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
  .run-ctl .run-pill-effort { display: none; }
  .run-dot { display: inline; color: var(--muted); font-size: var(--fs-small); }
  /* склеенная капсула темнеет целиком, как раздельные пилюли на широкой шапке: при наведении и при открытом меню любой половины */
  .run-ctl:has(.run-pill:hover, .run-pill[aria-expanded=true]) { background: color-mix(in srgb, var(--panel) 85%, var(--ink)); }
}
.run-caret { font-size: var(--fs-micro); }
.turn-strip { display: grid; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius-card); background: var(--panel); min-width: 0; }
.strip-chips { display: flex; flex-wrap: nowrap; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.strip-chips::-webkit-scrollbar { display: none; }
.strip-chip { flex: none; display: inline-flex; align-items: center; 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; }
.strip-chip[aria-expanded=true] { background: var(--ink-button); color: var(--ink-button-text); }

}
/* Меню: общий компонент w2b.css без слоя, поэтому и здесь без слоя (иначе его display:flex побеждает). */
/* ===== меню и листы: существующий поповер макета, шире, с описаниями ===== */
.run-menu { width: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--sp-8); border-radius: var(--radius-inner); }
.run-menu .mi { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 2px var(--sp-8); width: 100%; min-height: var(--h-pill); padding: var(--sp-8) var(--sp-12); border-radius: var(--radius-sm); color: var(--ink); text-align: left; }
.run-menu .mi:hover, .run-menu .mi[aria-checked=true] { background: var(--panel); }
.run-menu .mi-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-8); min-width: 0; }
.run-menu .mi-label { font-size: var(--fs-body); font-weight: 550; line-height: 1.3; }
.run-menu .mi-tag { color: var(--muted); font-size: var(--fs-small); font-weight: 400; }
.run-menu .mi-desc { grid-column: 1; color: var(--muted); font-size: var(--fs-small); line-height: 1.35; }
.run-menu .mi-check { grid-column: 2; grid-row: 1; width: 20px; height: 20px; color: var(--ink); }
.run-menu .mi-check svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.run-menu .mi.is-off .mi-label { color: var(--muted); }
.run-menu .mi.is-off { cursor: default; }
.run-menu .mi.is-off:hover { background: transparent; }
.run-menu .mi-head { padding: var(--sp-12) var(--sp-12) var(--sp-4); color: var(--muted); font-size: var(--fs-h4); font-weight: var(--fw-h4); }
.run-menu .mi-sub { padding-top: var(--sp-8); font-weight: 400; }
.run-menu .mi-note { padding: var(--sp-8) var(--sp-12) var(--sp-4); color: var(--muted); font-size: var(--fs-small); }
.run-menu:popover-open { transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease); }
@starting-style { .run-menu:popover-open { opacity: 0; } }
/* телефон: лист снизу; без слоя, иначе его перебивает ширина 300 px выше */
@media (max-width: 760px) {
  .run-menu { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: 80dvh; margin: 0; padding: var(--sp-16) var(--sp-16) max(var(--sp-24), env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .run-menu::backdrop { background: var(--scrim); }
  .run-menu:popover-open { transition: transform var(--dur-base) var(--ease), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
  @starting-style { .run-menu:popover-open { opacity: 1; transform: translateY(100%); } }
}

@layer components {
/* ===== плавающий пульт: вариант и состояние ===== */
.run-pult[hidden] { display: none; }
.run-pult { position: fixed; right: var(--sp-16); bottom: var(--sp-16); z-index: 30; display: grid; justify-items: end; gap: var(--sp-8); }
.run-spacer { flex: none; }
.feed, .inspector { overflow-anchor: none; }
.run-pult-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--h-pill); height: var(--h-pill); padding: 0; border-radius: var(--radius-pill); background: var(--raised); color: var(--ink); font-size: var(--fs-small); font-weight: 550; white-space: nowrap; }
.run-pult-panel { display: grid; gap: var(--sp-12); padding: var(--sp-16); border-radius: var(--radius-inner); background: var(--raised); box-shadow: var(--shadow); }
.run-pult-group { display: grid; gap: var(--sp-8); }
.run-pult-cap { color: var(--muted); font-size: var(--fs-small); }
.run-pult .run-seg { background: var(--panel); }
}

@layer state {
  html[data-state="1"] [data-s]:not([data-s~="1"]), html[data-state="2"] [data-s]:not([data-s~="2"]), html[data-state="3"] [data-s]:not([data-s~="3"]),
  html[data-dir="none"] [data-d], html[data-dir="a"] [data-d]:not([data-d~="a"]), html[data-dir="b"] [data-d]:not([data-d~="b"]), html[data-dir="c"] [data-d]:not([data-d~="c"]) { display: none; }
  .run-pult-panel[hidden], .run-block .run-body[hidden] { display: none; }
  .run-block[data-view=story] [data-v=steps], .run-block[data-view=steps] [data-v=story], .turn-panel[data-view=story] [data-v=steps], .turn-panel[data-view=steps] [data-v=story], .turn-panel > .run-body:has(> .run-log:empty) { display: none; }
}

/* на телефоне и когда панель результата уходит листом (B1) */
@layer components {
@media (max-width: 760px) {
  .composer-stack { position: fixed; left: var(--sp-12); right: var(--sp-12); bottom: max(var(--sp-12), env(safe-area-inset-bottom)); z-index: 5; margin: 0; }
  .composer-stack > form.composer { position: relative; left: auto; right: auto; bottom: auto; background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); }
  .section-new > .composer-stack { position: sticky; left: auto; right: auto; bottom: 0; margin: var(--sp-12) 0 0; }
  html[data-dir=b] .run-turn-button { display: inline-flex; }
  .chat-header { height: auto; min-height: 76px; row-gap: var(--sp-4); }
  .chat-header > .run-seg, .chat-header > .run-turn-button { order: 9; margin: 0; }
  .run-pult { right: var(--sp-8); bottom: auto; top: 84px; }
}
body.result-away .run-turn-button { display: inline-flex; }
}
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .run-menu, .run-seg > button, .run-block .run-chevron { transition: none; }
  }
}
@layer components {
.plan-card .zc-step-dot svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.run-page-tabs-hint {}
}

/* верхняя строка окна на 761-900 px: «Участники и агенты», аватары и огоньки повторяют шапку беседы и не нужны: без них «Открыть результат» и вкладка остаются в одной строке */
/* до 1000 px и «Пригласить» уходит: полосе вкладок нужна ширина подписи активной вкладки */
@media (min-width: 761px) and (max-width: 1000px) {
  .window-header > .invite-button { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .window-header > .chrome-action[data-open="participants-dialog"], .window-header > .presence, .window-header > .window-lights { display: none; }
  .window-header > .conversation-tabs { min-width: 120px; }
}

/* Верхняя полоса окна: активная вкладка по ширине подписи (до 280 px), неактивные сжимаются первыми; run.js прокручивает полосу к ней: остальные уходят за край первыми; заголовок беседы в одну строку */
.conversation-tab.active { min-width: 120px; max-width: min(280px, 100%); flex: 0 0 auto; }
.layout-d2 .chat-heading h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* R31: пункт меню студий — название и подпись двумя строками (общее правило [role=menu] button делало из них одну строку) */
.studio-dialog .studio-option { display: grid; }

.run-doc-line { text-decoration: none; }
.run-doc-line b { color: var(--ink); font-weight: 550; }

/* узкая лента при открытой правой панели (до 1440 px): «Повторить» под текстом, а не в ряд с ним, чтобы текст не сжимался в столбик и слово не рвалось */
@layer components {
@media (max-width: 1439px) {
  .queue-row.is-failed { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .queue-row.is-failed .queue-handle { grid-column: 1; grid-row: 1; }
  .queue-row.is-failed .queue-body { grid-column: 2; grid-row: 1; }
  .queue-row.is-failed .queue-del { grid-column: 3; grid-row: 1; }
  .queue-row.is-failed .queue-retry { grid-column: 2; grid-row: 2; justify-self: start; }
}
}