.bx-v2 {
  --bxv2-paper: var(--paper, #efefef);
  --bxv2-surface: var(--surface, #fdfdfd);
  --bxv2-surface-2: var(--surface-2, #e8e8e8);
  --bxv2-ink: var(--ink, #191919);
  --bxv2-ink-2: var(--ink-2, #323232);
  --bxv2-muted: var(--muted, #767676);
  --bxv2-muted-2: var(--muted-2, #999999);
  --bxv2-line: var(--line, rgba(25, 25, 25, .11));
  --bxv2-line-strong: var(--line-strong, rgba(25, 25, 25, .22));
  --bxv2-accent: var(--accent, #e84f35);
  --bxv2-accent-dark: var(--accent-dark, #c53d28);
  --bxv2-accent-soft: var(--accent-soft, #fbe2db);
  --bxv2-success: var(--success, #367a54);
  --bxv2-success-soft: var(--success-soft, #e1efe6);
  --bxv2-warning: var(--warning, #b26a25);
  --bxv2-danger: var(--danger-ink, #a52f1e);
  --bxv2-context-w: var(--context-w, 292px);
  color: var(--bxv2-ink);
  background: var(--bxv2-paper);
  font-family: var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

.bx-v2 *,
.bx-v2 *::before,
.bx-v2 *::after {
  box-sizing: border-box;
}

.bx-v2 button,
.bx-v2 input,
.bx-v2 select,
.bx-v2 textarea {
  color: inherit;
  font: inherit;
}

.bx-v2 button {
  cursor: pointer;
  border: 0;
}

.bx-v2 button:disabled {
  cursor: default;
  opacity: .48;
}

.bx-v2 .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.bx-v2.workbench {
  display: grid;
  min-height: 100svh;
  grid-template-columns: var(--bxv2-context-w) minmax(0, 1fr);
}

.bx-v2-tasks.route-view {
  container-name: task-route;
  container-type: inline-size;
}

.bx-v2 .context-panel {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-width: 0;
  height: 100svh;
  flex-direction: column;
  padding: 22px 16px 16px;
  overflow: hidden;
  background: rgba(253, 253, 253, .54);
  border-right: 1px solid var(--bxv2-line);
}

.bx-v2 .context-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 16px;
}

.bx-v2 .context-head strong {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bx-v2 .context-head .count {
  margin-right: auto;
  margin-left: 0;
  color: var(--bxv2-muted);
  font-variant-numeric: tabular-nums;
}

.bx-v2 .context-scroll {
  width: 100%;
  min-height: 0;
  min-width: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.bx-v2 .search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.bx-v2 .search-field > .icon {
  position: absolute;
  left: 13px;
  color: var(--bxv2-muted);
  pointer-events: none;
}

.bx-v2 .search-field input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  outline: none;
}

.bx-v2 .search-field input:focus {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .context-search {
  margin-bottom: 16px;
}

.bx-v2 .context-section-label {
  margin: 20px 7px 8px;
  color: var(--bxv2-muted-2);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bx-v2 .context-section:first-child .context-section-label {
  margin-top: 4px;
}

.bx-v2 .context-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 9px;
  color: var(--bxv2-ink-2);
  background: transparent;
  border-radius: var(--radius-12);
  text-align: left;
  transition: background 150ms ease, transform 150ms ease;
}

.bx-v2 .context-row:hover {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transform: translateX(2px);
}

.bx-v2 .context-row.active {
  background: var(--bxv2-surface);
  box-shadow: inset 0 0 0 1px var(--bxv2-line);
}

.bx-v2 .context-row.active::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 22px;
  background: var(--bxv2-accent);
  border-radius: 0 var(--radius-4) var(--radius-4) 0;
  content: "";
}

.bx-v2 .context-row .row-copy {
  min-width: 0;
}

.bx-v2 .context-row .row-title {
  display: block;
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .context-row .row-meta {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--bxv2-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .context-row .row-date {
  align-self: start;
  color: var(--bxv2-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.bx-v2 .context-row .row-date b {
  display: grid;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  padding: 0 5px;
  color: white;
  background: var(--bxv2-accent);
  border-radius: var(--radius-pill);
}

.bx-v2 .context-chat-row {
  margin-left: 17px;
  width: calc(100% - 50px);
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--bxv2-muted);
}

.bx-v2 .context-chat-entry {
  position: relative;
}

.bx-v2 .context-chat-actions {
  position: absolute;
  top: 50%;
  right: 4px;
  display: flex;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 150ms ease;
}

.bx-v2 .context-chat-entry:hover .context-chat-actions,
.bx-v2 .context-chat-entry:focus-within .context-chat-actions {
  opacity: 1;
}

.bx-v2 .context-chat-actions button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  color: var(--bxv2-muted);
  background: transparent;
  border-radius: var(--radius-8);
}

.bx-v2 .context-chat-actions button:hover {
  color: var(--bxv2-ink);
  background: var(--bxv2-surface);
}

.bx-v2 .context-chat-actions .icon {
  width: 12px;
  height: 12px;
}

.bx-v2 .context-chat-row .icon {
  width: 14px;
  height: 14px;
}

.bx-v2 .context-chat-row .row-title {
  font-size: 11px;
  font-weight: 580;
}

.bx-v2-tasks .project-chats .context-chat-entry {
  min-width: 0;
}

.bx-v2-tasks .project-chats .context-chat-row {
  width: 100%;
  min-height: 42px;
  margin-left: 0;
  padding: 6px 42px 6px 8px;
  border-radius: var(--radius-8);
}

.bx-v2-tasks .project-chats .context-chat-row:hover {
  background: color-mix(in srgb, var(--bxv2-surface) 54%, transparent);
  transform: none;
}

.bx-v2-tasks .project-chat-state {
  display: block;
  width: 100%;
  padding: 10px 8px;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
}

.bx-v2-tasks button.project-chat-state.error {
  color: var(--bxv2-accent-dark);
  border-radius: var(--radius-8);
}

.bx-v2-tasks button.project-chat-state.error:hover {
  background: var(--bxv2-accent-soft);
}

.bx-v2 .context-empty,
.bx-v2 .context-loading {
  margin: 28px 8px;
  color: var(--bxv2-muted);
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2 .context-empty strong,
.bx-v2 .context-empty small {
  display: block;
}

.bx-v2 .context-empty strong {
  color: var(--bxv2-ink);
  font-size: 13px;
}

.bx-v2 .context-empty small {
  margin-top: 5px;
}

.bx-v2 .status-dot {
  width: 7px;
  height: 7px;
  background: var(--bxv2-muted-2);
  border-radius: 50%;
}

.bx-v2 .status-dot.accent {
  background: var(--bxv2-accent);
}

.bx-v2 .status-dot.success {
  background: var(--bxv2-success);
}

.bx-v2 .status-dot.warning {
  background: var(--bxv2-warning);
}

.bx-v2 .screen,
.bx-v2.screen {
  min-width: 0;
  padding: 28px clamp(22px, 3vw, 48px) 56px;
}

.bx-v2-route-context {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.bx-v2 .eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--bxv2-muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bx-v2 .eyebrow.accent {
  color: var(--bxv2-accent);
}

.bx-v2 .btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  color: var(--bxv2-ink);
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.bx-v2 .btn:hover {
  border-color: var(--bxv2-line-strong);
  transform: translateY(-1px);
}

.bx-v2 .btn.primary {
  /* Инвертированная кнопка: подложка — «чернила», значит текст — «бумага».
     Белым он был захардкожен, и в тёмной теме чернила светлеют — выходило
     белое по белому. */
  color: var(--bxv2-paper);
  background: var(--bxv2-ink);
  border-color: var(--bxv2-ink);
}

.bx-v2 .btn.accent {
  color: white;
  background: var(--bxv2-accent);
  border-color: var(--bxv2-accent);
}

.bx-v2 .btn.ghost {
  background: transparent;
  box-shadow: none;
}

.bx-v2 .btn.small {
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
}

.bx-v2 .icon-btn {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--bxv2-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.bx-v2 .icon-btn:hover {
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-color: var(--bxv2-line);
}

.bx-v2 .chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.bx-v2 .chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--bxv2-muted);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-pill);
  font-size: 11px;
  white-space: nowrap;
}

/* Факты паспорта — тем же языком, что срок и статус: подпись тихим, значение
   пунктиром, стрелка; поверх — нативный список (приём статуса). Плашек-чипов
   нет (Эдвард, 07.09): один язык на все эти бесконечные опции. */
.bx-v2 .task-fact {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 24px;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: var(--bxv2-muted);
  background: transparent;
  border: 0;
  font-size: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.bx-v2 .task-fact > span:first-child,
.bx-v2 .task-medium-picker > summary > span:first-child {
  color: var(--bxv2-muted-2);
}

.bx-v2 .task-fact strong,
.bx-v2 .task-medium-picker > summary strong {
  max-width: 220px;
  overflow: hidden;
  color: var(--bxv2-ink);
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-overflow: ellipsis;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.bx-v2 .task-fact .icon {
  width: 11px;
  height: 11px;
}

/* Список лежит поверх подписи невидимым: клик по любому слову открывает его. */
.bx-v2 .task-fact select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.bx-v2 .task-medium-picker {
  position: relative;
  padding: 0;
}

.bx-v2 .task-medium-picker > summary {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 4px;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.bx-v2 .task-medium-picker > summary::-webkit-details-marker {
  display: none;
}

.bx-v2 .task-medium-picker > summary .icon {
  transition: transform 140ms ease;
}

.bx-v2 .task-medium-picker[open] > summary .icon {
  transform: rotate(180deg);
}

.bx-v2 .task-medium-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: min(280px, 72vw);
  max-height: 250px;
  gap: 1px;
  padding: 6px;
  overflow-y: auto;
  color: var(--bxv2-ink);
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
}

.bx-v2 .task-medium-options label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-8);
  font-size: 11px;
  cursor: pointer;
}

.bx-v2 .task-medium-options label:hover {
  background: var(--bxv2-surface-2);
}

.bx-v2 .task-medium-options input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--bxv2-accent);
}

.bx-v2 .task-link {
  text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-link:hover,
.bx-v2 .task-link:focus-visible {
  color: var(--bxv2-ink);
}

.bx-v2 .task-empty,
.bx-v2 .task-error {
  display: flex;
  max-width: 850px;
  min-height: calc(100svh - 100px);
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 0 auto;
}

.bx-v2 .task-empty .task-title {
  margin-bottom: 22px;
}

.bx-v2 .task-empty p,
.bx-v2 .task-error p {
  max-width: 520px;
  margin: 0 0 24px;
  color: var(--bxv2-muted);
  line-height: 1.6;
}

.bx-v2.task-subview-screen {
  min-height: 100svh;
}

.bx-v2 .task-subview {
  width: min(100%, 840px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 52px) 0;
}

.bx-v2 .task-subview-head {
  max-width: 680px;
}

.bx-v2 .task-subview-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 38px;
  padding: 7px 0;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 12px;
}

.bx-v2 .task-subview-back:hover {
  color: var(--bxv2-ink);
}

.bx-v2 .task-subview-back .icon {
  width: 15px;
  height: 15px;
}

.bx-v2 .task-subview h1 {
  max-width: 720px;
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}

.bx-v2 .task-subview-head > p {
  max-width: 620px;
  margin: 20px 0 0;
  color: var(--bxv2-muted);
  font-size: 14px;
  line-height: 1.6;
}

.bx-v2 .task-subview-form {
  display: grid;
  gap: 12px;
  margin-top: 44px;
}

.bx-v2 .task-subview-form > label {
  color: var(--bxv2-ink-2);
  font-size: 12px;
  font-weight: 700;
}

.bx-v2 .task-subview-form textarea {
  width: 100%;
  min-height: min(38vh, 340px);
  resize: vertical;
  padding: 18px 20px;
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--bxv2-surface) 88%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-16);
  outline: none;
  font-size: 15px;
  line-height: 1.55;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.bx-v2 .task-subview-form textarea:focus {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bxv2-accent) 10%, transparent);
}

.bx-v2 .task-subview-review {
  padding: 14px 16px;
  background: var(--bxv2-success-soft);
  border-left: 3px solid var(--bxv2-success);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.bx-v2 .task-subview-review strong,
.bx-v2 .task-subview-review p {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2 .task-subview-review p {
  margin-top: 3px;
  color: var(--bxv2-muted);
}

.bx-v2 .task-subview-error {
  color: var(--bxv2-accent-dark);
  font-size: 12px;
}

.bx-v2 .task-subview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
}

.bx-v2 .task-subview-actions small {
  max-width: 420px;
  color: var(--bxv2-muted);
  font-size: 10px;
  line-height: 1.45;
}

.bx-v2 .task-subview-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bx-v2 .task-subview-actions .btn {
  min-width: 170px;
}

/* Возврат рядом с действием — тихий: он не спорит с «обновить» за внимание. */
.bx-v2 .task-subview-buttons .btn.ghost {
  min-width: 0;
  padding-right: 16px;
  padding-left: 14px;
  color: var(--bxv2-muted);
}

.bx-v2 .task-subview-buttons .btn.ghost:hover,
.bx-v2 .task-subview-buttons .btn.ghost:focus-visible {
  color: var(--bxv2-ink);
}

.bx-v2 .task-detail {
  display: grid;
  max-width: 1320px;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(30px, 5vw, 76px);
  margin: 0 auto;
}

.bx-v2 .task-main {
  min-width: 0;
}

/* Заголовок — рабочего кегля (решение Эдварда 07.09): прежний clamp до 76px
   на трёх строках съедал первый экран целиком, а читать его дольше секунды
   никому не нужно — дизайнер знает свою задачу по имени. */
.bx-v2 .task-title {
  max-width: 900px;
  margin: 4px 0 0;
  font-family: var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
}

/* Одна строка фактов: люди, срок, статус, бренд, носитель, локация, ссылка.
   Переносится по ширине, но не растёт ярусами. */
.bx-v2 .task-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 10px 0 8px;
  color: var(--bxv2-muted);
  font-size: 12px;
}

.bx-v2 .task-meta-line .task-facts {
  display: contents;
}

.bx-v2 .task-meta-primary {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.bx-v2 .task-meta-line strong {
  color: var(--bxv2-ink);
}

.bx-v2 .task-deadline,
.bx-v2 .task-deadline-editor {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}

.bx-v2 .task-deadline > button,
.bx-v2 .task-deadline-editor > button {
  min-height: 24px;
  padding: 0;
  color: var(--bxv2-muted);
  background: transparent;
  /* Кегль строки паспорта один на всё: раньше «Изменить» была на 10px, и в
     одной строке соседствовали два размера. */
  font-size: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Правка срока НЕ меняет строку паспорта: подпись остаётся той же подписью,
   тем же кеглем и цветом, без плиты поля. Раньше на её месте вырастал
   `datetime-local` в 30px высотой — строка подпрыгивала, а за ней и всё, что
   ниже. Пунктир проступает только под курсором: в покое отличить правку от
   просмотра по виду поля нельзя и не нужно, рядом уже стоит «Сохранить». */
.bx-v2 .task-deadline-editor {
  position: relative;
}

.bx-v2 .task-deadline-editor > .task-deadline-value {
  border: 0;
  text-decoration-color: transparent;
}

.bx-v2 .task-deadline-editor > .task-deadline-value:hover,
.bx-v2 .task-deadline-editor > .task-deadline-value[aria-expanded="true"],
.bx-v2 .task-deadline-editor > .task-deadline-value:focus-visible {
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Кнопки не переносятся: иконка «галочка» уезжала на строку выше подписи,
   и вся строка рассыпалась. */
.bx-v2 .task-deadline-editor > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.bx-v2 .task-deadline-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bx-v2 .task-deadline-editor > button:last-of-type {
  display: grid;
  width: 20px;
  padding: 0;
  place-items: center;
  border: 0;
}

.bx-v2 .task-deadline-editor .icon {
  width: 13px;
  height: 13px;
}

/* Календарь — свой, в цветах сервиса и компактный: нативный попап
   `datetime-local` не настраивается ни цветом, ни шрифтом. */
.bx-v2 .task-deadline-picker {
  position: absolute;
  z-index: 24;
  top: calc(100% + 8px);
  left: 0;
  width: 244px;
  padding: 12px;
  color: var(--bxv2-ink);
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  cursor: default;
  white-space: normal;
}

.bx-v2 .task-deadline-picker-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  margin-bottom: 8px;
}

.bx-v2 .task-deadline-picker-head strong {
  color: var(--bxv2-ink);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

.bx-v2 .task-deadline-picker-head button {
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  color: var(--bxv2-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-8);
}

.bx-v2 .task-deadline-picker-head button:hover {
  color: var(--bxv2-ink);
  background: var(--bxv2-surface-2);
}

.bx-v2 .task-deadline-picker .icon {
  width: 12px;
  height: 12px;
}

.bx-v2 .task-deadline-week,
.bx-v2 .task-deadline-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.bx-v2 .task-deadline-week span {
  padding: 2px 0;
  color: var(--bxv2-muted-2);
  font-size: 9px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bx-v2 .task-deadline-days button {
  min-height: 0;
  height: 26px;
  padding: 0;
  color: var(--bxv2-ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-8);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.bx-v2 .task-deadline-days button:hover {
  background: var(--bxv2-surface-2);
}

.bx-v2 .task-deadline-days .is-outside {
  color: var(--bxv2-muted-2);
}

.bx-v2 .task-deadline-days .is-weekend {
  color: var(--bxv2-muted);
}

.bx-v2 .task-deadline-days .is-today {
  box-shadow: inset 0 0 0 1px var(--bxv2-line-strong);
}

.bx-v2 .task-deadline-days .is-selected,
.bx-v2 .task-deadline-days .is-selected:hover {
  color: #fff;
  background: var(--bxv2-accent);
  box-shadow: none;
  font-weight: 600;
}

.bx-v2 .task-deadline-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bxv2-line);
  color: var(--bxv2-muted);
  font-size: 11px;
}

.bx-v2 .task-deadline-time input {
  width: 76px;
  padding: 3px 6px;
  color: var(--bxv2-ink);
  background: var(--bxv2-paper);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.bx-v2 .task-deadline-time input:focus-visible {
  border-color: var(--bxv2-accent);
}

.bx-v2 .task-deadline-time input::-webkit-calendar-picker-indicator {
  display: none;
}

/* Статус задачи в паспорте — пунктирная подпись со стрелкой и нативным списком
   поверх (тот же приём, что у модели автодизайна и срока). */
.bx-v2 .task-status-picker {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  color: var(--bxv2-muted);
  cursor: pointer;
}

.bx-v2 .task-status-label {
  text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-status-picker .icon {
  width: 11px;
  height: 11px;
}

.bx-v2 .task-status-picker select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bx-v2 .task-gone {
  color: var(--bxv2-accent-dark);
}

/* Удаление живёт в строке паспорта, а не среди действий сдачи: там оно
   ломало равные зазоры и весило столько же, сколько рабочие кнопки. */
.bx-v2 .task-delete-action {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  padding: 0;
  color: var(--bxv2-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-8);
  cursor: pointer;
  place-items: center;
  transition: color .15s ease, background .15s ease;
}

.bx-v2 .task-delete-action .icon {
  width: 13px;
  height: 13px;
}

.bx-v2 .task-delete-action:hover:not(:disabled) {
  color: var(--danger-ink);
  background: color-mix(in srgb, var(--danger-ink) 12%, transparent);
}

.bx-v2 .task-delete-action:disabled {
  opacity: .45;
  cursor: default;
}

.bx-v2 .task-source-status {
  padding: 2px 7px;
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-pill);
  color: var(--bxv2-muted);
}

.bx-v2 .task-source-status.local {
  border-color: color-mix(in srgb, var(--bxv2-accent) 34%, var(--bxv2-line));
  color: var(--bxv2-accent-dark);
}

.bx-v2 .task-source-status.warning {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--bxv2-line));
  color: var(--warning-ink);
}

.bx-v2 .task-source-note {
  margin: -8px 0 24px;
  padding: 10px 12px;
  border-left: 2px solid var(--bxv2-accent);
  background: color-mix(in srgb, var(--bxv2-accent) 7%, transparent);
  color: var(--bxv2-muted);
  font-size: 12px;
  line-height: 1.45;
}

.bx-v2 .task-source-note.warning {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, transparent);
}

.bx-v2 .task-source-unavailable {
  max-width: 150px;
  color: var(--bxv2-muted);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
}

.bx-v2 .task-time-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--bxv2-line);
  border-bottom: 1px solid var(--bxv2-line);
}

.bx-v2 .task-time-value {
  display: grid;
  min-width: 0;
  grid-template-columns: 22px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.bx-v2 .task-time-value .icon {
  width: 18px;
  height: 18px;
  color: var(--bxv2-muted);
}

.bx-v2 .task-time-panel.running .task-time-value .icon {
  color: var(--bxv2-accent);
}

.bx-v2 .task-time-value strong {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.bx-v2 .task-time-value small,
.bx-v2 .task-time-note {
  color: var(--bxv2-muted);
  font-size: 10px;
}

.bx-v2 .task-time-actions {
  display: flex;
  gap: 7px;
}

.bx-v2 .task-time-note {
  grid-column: 1 / -1;
}

.bx-v2 .project-timer {
  color: var(--bxv2-accent-dark);
  font-variant-numeric: tabular-nums;
}

.bx-v2 .task-block {
  margin-top: 26px;
}

.bx-v2 .task-block > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--bxv2-muted);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bx-v2 .task-block > h2::after {
  height: 1px;
  flex: 1;
  background: var(--bxv2-line);
  content: "";
}

.bx-v2 .task-parent {
  margin-bottom: 10px;
  color: var(--bxv2-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bx-v2 .task-description {
  max-width: 780px;
  font-family: var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Картинка, встроенная постановщиком прямо в текст, стоит на своём месте в
   тексте — целиком, без кадрирования: это «визуал, который согласовали», и
   обрезанный край меняет смысл. Высота ограничена, чтобы один скриншот не
   растягивал постановку на три экрана; полный кадр — по клику. */
.bx-v2 .task-inline-image {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
  background: var(--bxv2-surface-2);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  cursor: zoom-in;
}

.bx-v2 .task-inline-image img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.bx-v2 .task-inline-image.is-loading {
  display: grid;
  width: min(360px, 100%);
  height: 180px;
  place-items: center;
  cursor: default;
}

.bx-v2 .task-inline-file {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  padding: 4px 9px;
  color: var(--bxv2-ink);
  background: var(--bxv2-surface-2);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  font-size: 12px;
}

.bx-v2 .task-inline-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-empty-copy {
  margin: 0;
  color: var(--bxv2-muted);
  font-family: var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.bx-v2 .task-muted {
  color: var(--bxv2-muted);
  font-size: 12px;
  line-height: 1.5;
}

.bx-v2 .insight-panel {
  padding: 20px;
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-16);
}

.bx-v2 .insight-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.bx-v2 .insight-head > span:first-child {
  min-width: 0;
  flex: 1;
}

.bx-v2 .insight-head strong,
.bx-v2 .insight-head small {
  display: block;
}

.bx-v2 .insight-head strong {
  font-size: 13px;
}

.bx-v2 .insight-head small {
  margin-top: 3px;
  color: var(--bxv2-muted);
  font-size: 10px;
}

.bx-v2 .task-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0;
  border-top: 1px solid var(--bxv2-line);
}

.bx-v2 .task-fact-grid > div {
  display: grid;
  grid-template-columns: minmax(80px, .75fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bxv2-line);
}

.bx-v2 .task-fact-grid dt {
  color: var(--bxv2-muted);
  font-size: 10px;
  text-transform: capitalize;
}

.bx-v2 .task-fact-grid dd {
  min-width: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.bx-v2 .task-cover-image {
  display: block;
  width: 100%;
  margin-top: 0;
  height: min(68vh, 560px);
  object-fit: contain;
  background:
    linear-gradient(135deg, rgba(25, 25, 25, .035), transparent),
    var(--bxv2-surface-2);
  border-radius: var(--radius-12);
}

.bx-v2 .task-cover-broken {
  display: flex;
  min-height: 156px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--bxv2-muted);
  background: var(--bxv2-surface-2);
  border: 1px dashed var(--bxv2-line-strong);
  border-radius: var(--radius-12);
}

.bx-v2 .task-cover-broken .icon {
  width: 20px;
  height: 20px;
}

.bx-v2 .task-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.bx-v2 .task-submit-hint {
  align-self: center;
  color: var(--bxv2-muted);
  font-size: 12px;
  line-height: 1.35;
}

.bx-v2 .task-start-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bx-v2 .task-start-actions > button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.bx-v2 .task-start-actions > button:hover {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .task-start-actions > button:disabled {
  cursor: progress;
  opacity: .68;
}

.bx-v2 .task-start-actions .icon {
  width: 20px;
  height: 20px;
  color: var(--bxv2-accent);
}

.bx-v2 .task-start-actions span,
.bx-v2 .task-start-actions strong,
.bx-v2 .task-start-actions small {
  display: block;
  min-width: 0;
}

.bx-v2 .task-start-actions small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--bxv2-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-file-list {
  border-top: 1px solid var(--bxv2-line);
}

/* Три колонки, а не две: вложения — это референсы, их смотрят, а не читают,
   и шесть кадров в две колонки съедали два экрана. Строковая карточка (ссылка,
   документ) шире: ей нужно место под имя и кнопку. */
.bx-v2 .task-file-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.bx-v2 .task-file-grid .task-file-card:not(.image) {
  grid-column: span 2;
  /* Рядом с кадрами строка не растягивается в пустую коробку их высоты. */
  align-self: start;
}

.bx-v2 .task-file-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
}

.bx-v2 .task-file-preview {
  display: grid;
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  place-items: center;
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-8);
}

.bx-v2 .task-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Картинку показываем картинкой: карточка становится вертикальной, кадр —
   во всю её ширину. Строкой остаётся только то, что показать нечем. */
.bx-v2 .task-file-card.image {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

.bx-v2 .task-file-card.image .task-file-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.bx-v2 .task-file-card.image .task-file-actions {
  flex-direction: row;
  flex-wrap: wrap;
}

.bx-v2 .task-file-copy {
  min-width: 0;
}

.bx-v2 .task-file-copy strong,
.bx-v2 .task-file-copy small {
  display: block;
}

.bx-v2 .task-file-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-file-copy small {
  margin-top: 3px;
  color: var(--bxv2-muted);
  font-size: 9px;
}

.bx-v2 .task-file-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

.bx-v2 .task-file-actions .btn {
  justify-content: center;
  white-space: nowrap;
}

.bx-v2 .task-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bxv2-line);
}

.bx-v2 .task-file-row strong,
.bx-v2 .task-file-row small {
  display: block;
}

.bx-v2 .task-file-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-file-row small {
  margin-top: 2px;
  color: var(--bxv2-muted);
  font-size: 10px;
}

/* Галерея всех материалов задачи (самый низ карточки): плитки без подписей,
   как в галерее — что за файл, говорит бейдж и клик в просмотрщик. */
.bx-v2 .task-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 9px;
}

.bx-v2 .task-media-tile {
  position: relative;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bxv2-surface-2);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  cursor: pointer;
}

.bx-v2 .task-media-tile img,
.bx-v2 .task-media-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bx-v2 .task-media-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.5;
  /* Плашка почти глухая: бейдж лежит на непредсказуемой картинке,
     полупрозрачность делала бы его нечитаемым. Тени запрещены. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-pill);
}

.bx-v2 .task-file-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--bxv2-muted);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border-radius: var(--radius-8);
}

/* ─── Главное изображение: промт, блюда и запуск одним целым ───────────────
   Промт — главный текст экрана и самая тяжёлая работа дня, поэтому он живёт
   в настоящем поле, а не цитатой. Блюда под ним — картинками: дизайнер думает
   кадром, а не списком названий. Запуск замыкает карточку одной кнопкой. */
.bx-v2 .task-launch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.bx-v2 .task-launch-head h2 {
  margin: 0;
}

.bx-v2 .task-launch-head small {
  color: var(--bxv2-muted);
  font-size: 12px;
  text-align: right;
}

.bx-v2 .task-launch-prompt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.bx-v2 .task-launch-prompt textarea {
  width: 100%;
  min-height: 132px;
  max-height: 46svh;
  padding: 14px 16px;
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--bxv2-surface) 62%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  outline: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
}

.bx-v2 .task-launch-prompt textarea:focus {
  border-color: var(--bxv2-line-strong);
  background: var(--bxv2-surface);
}

.bx-v2 .task-launch-prompt textarea::placeholder {
  color: var(--bxv2-muted);
}

.bx-v2 .task-launch-dishes {
  margin-top: 14px;
}

/* Сетка, а не флексовый перенос карточек фиксированной ширины: колонки сами
   делят ширину блока, поэтому карточки стоят рядами без рваного правого края,
   а карточки одного ряда получают общую высоту. Раньше это был flex-wrap, и
   ряд равнялся по самой высокой карточке, а внутри карточки картинка была
   сжимаемым flex-элементом: длинное название отбирало у неё высоту, и кадр
   уезжал вниз относительно соседей. */
.bx-v2 .task-dish-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.bx-v2 .task-dish-tile {
  position: relative;
  display: grid;
  /* Кадр — своей высотой, подпись — весь остаток: ряд тянется по самой
     длинной подписи, но верхняя граница кадра у всех карточек одна. */
  grid-template-rows: auto 1fr;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--bxv2-surface) 70%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
}

/* Кадр не режем: правило карточек сервиса — картинка помещается целиком.
   Квадрат вместо жёстких 78px: карточка тянется по ширине колонки, и кадр
   обязан тянуться вместе с ней, иначе широкая карточка получает марку. */
.bx-v2 .task-dish-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bxv2-surface-2);
}

/* Название видно целиком до трёх строк; всё сверх того обрывается многоточием,
   а полное имя остаётся в title. Место под две строки держим всегда — иначе
   короткие названия давали карточки-обрубки рядом с длинными. */
.bx-v2 .task-dish-tile figcaption {
  display: -webkit-box;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
  padding: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bx-v2 .task-dish-tile-blind {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  align-content: center;
  justify-items: center;
  gap: 4px;
  color: var(--bxv2-muted);
  background: var(--bxv2-surface-2);
  font-size: 12px;
  text-align: center;
}

.bx-v2 .task-dish-tile.is-blind {
  border-style: dashed;
}

.bx-v2 .task-dish-drop {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: var(--on-dark);
  background: rgba(25, 25, 25, .52);
  border: 0;
  border-radius: 50%;
  opacity: .85;
  cursor: pointer;
}

/* Крестик центрируется по кружку только блочной иконкой: инлайновая svg
   стоит на базовой линии текста, и место под нижние выносные сдвигает её
   вверх — на глаз крестик сидел выше центра. */
.bx-v2 .task-dish-drop .icon {
  display: block;
  width: 14px;
  height: 14px;
}

.bx-v2 .task-dish-drop:hover,
.bx-v2 .task-dish-drop:focus-visible {
  background: rgba(25, 25, 25, .78);
  opacity: 1;
}

.bx-v2 .task-dish-tile.is-add {
  display: grid;
  /* Две строки auto, а не унаследованные auto 1fr: с 1fr подпись забирала
     весь остаток, и «плюс» прилипал к верху плитки. */
  grid-template-rows: auto auto;
  min-height: 118px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  color: var(--bxv2-muted);
  background: transparent;
  border-style: dashed;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.bx-v2 .task-dish-tile.is-add:hover,
.bx-v2 .task-dish-tile.is-add:focus-visible {
  color: var(--bxv2-ink);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .task-launch-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.bx-v2 .task-launch-go {
  min-height: 40px;
  padding: 0 18px;
}

.bx-v2 .task-dish-search {
  margin-top: 14px;
}

.bx-v2 .task-dish-search-results {
  display: grid;
  gap: 2px;
  max-width: 560px;
  margin-top: 6px;
  padding: 5px;
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
}

.bx-v2 .task-dish-search-results > button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 7px;
  background: transparent;
  border-radius: var(--radius-8);
  text-align: left;
}

.bx-v2 .task-dish-search-results > button:hover {
  background: var(--bxv2-surface-2);
}

.bx-v2 .task-dish-search-results img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-8);
}

.bx-v2 .task-dish-search-results .icon {
  width: 14px;
  height: 14px;
  color: var(--bxv2-accent);
}

.bx-v2 .task-dish-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 18px;
}

.bx-v2 .task-dish-suggestions .section-line-head {
  grid-column: 1 / -1;
  margin-bottom: 2px;
}

.bx-v2 .task-dish-suggestions > button {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  text-align: left;
}

.bx-v2 .task-dish-suggestions > button:hover {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .task-dish-suggestions img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-8);
}

.bx-v2 .task-dish-suggestions strong,
.bx-v2 .task-dish-suggestions small {
  display: block;
}

.bx-v2 .task-dish-suggestions strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-dish-suggestions small {
  margin-top: 3px;
  color: var(--bxv2-muted);
  font-size: 9px;
}

.bx-v2 .task-dish-suggestions > button > .icon {
  width: 15px;
  height: 15px;
  color: var(--bxv2-accent);
}

.bx-v2 .task-dish-suggestions {
  display: block;
}

.bx-v2 .task-dish-suggestion-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bx-v2 .task-dish-suggestion {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 18px 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 34%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.bx-v2 .task-dish-suggestion:hover,
.bx-v2 .task-dish-suggestion:focus-within {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .task-dish-suggestion.selected {
  background: color-mix(in srgb, var(--bxv2-accent-soft) 38%, var(--bxv2-surface));
  border-color: color-mix(in srgb, var(--bxv2-accent) 36%, var(--bxv2-line));
}

.bx-v2 .task-dish-suggestion > input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--bxv2-accent);
}

.bx-v2 .task-dish-suggestion > img,
.bx-v2 .task-dish-suggestion-placeholder {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0;
  place-items: center;
  color: var(--bxv2-muted);
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-8);
  object-fit: cover;
}

.bx-v2 .task-dish-suggestion-copy {
  min-width: 0;
}

.bx-v2 .task-dish-suggestion-copy strong,
.bx-v2 .task-dish-suggestion-copy small {
  display: block;
}

.bx-v2 .task-dish-suggestion-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-dish-suggestion-copy small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--bxv2-muted);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-dish-suggestion-copy .task-dish-provenance {
  color: var(--bxv2-ink-2);
  font-weight: 650;
}

.bx-v2 .task-dish-suggestion-copy .task-dish-judge-reason {
  display: -webkit-box;
  color: var(--bxv2-ink-2);
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.bx-v2 .task-dish-check {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--bxv2-accent);
  opacity: 0;
  transform: scale(.72);
  transition: opacity 140ms ease, transform 140ms ease;
}

.bx-v2 .task-dish-suggestion.selected .task-dish-check {
  opacity: 1;
  transform: scale(1);
}

.bx-v2 .task-dish-check .icon {
  width: 13px;
  height: 13px;
}

.bx-v2 .task-dish-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.bx-v2 .task-dish-none {
  min-height: 30px;
  padding: 0 1px;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 10px;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-dish-none:hover,
.bx-v2 .task-dish-none:focus-visible {
  color: var(--bxv2-ink);
}

.bx-v2 .section-line-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.bx-v2 .section-line-head h3 {
  margin: 0;
  font-size: 14px;
}

.bx-v2 .section-line-head .line {
  height: 1px;
  flex: 1;
  background: var(--bxv2-line);
}

.bx-v2 .task-input input,
.bx-v2 .task-input textarea {
  width: 100%;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  outline: none;
}

/* Ссылка сдачи и её корзина — одной строкой: удаление адресовано именно этой
   ссылке, а не «последней». Корзина не сжимается и не уезжает под длинный
   адрес: input отдаёт ей место сам. */
/* Выбор способа сдачи — две равные половины, а не главная и запасная: ссылку
   на Я.Диск дизайнер делает не всегда. */
.bx-v2 .task-submit-modes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
}

.bx-v2 .task-submit-modes button {
  padding: 6px 14px;
  color: var(--bxv2-muted);
  font: inherit;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: var(--radius-4);
  cursor: pointer;
}

.bx-v2 .task-submit-modes button.active {
  color: var(--bxv2-ink);
  background: var(--bxv2-surface);
}

.bx-v2 .task-submit-files {
  display: grid;
  gap: 8px;
}

.bx-v2 .task-submit-file {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
}

.bx-v2 .task-submit-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-submit-file-size {
  flex: none;
  color: var(--bxv2-muted);
  font-size: 12px;
}

.bx-v2 .task-submit-links {
  display: grid;
  gap: 10px;
}

/* Обёртка строки — div, а не span, НАМЕРЕННО: у `.task-input > span` в этом
   же файле стоит `display: block` и типографика подписи, и по специфичности
   она бьёт любой селектор из одних классов. Со span корзина уезжала под поле
   и набирала стиль заголовка. */
.bx-v2 .task-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bx-v2 .task-input-row input {
  flex: 1;
  width: auto;
  min-width: 0;
}

.bx-v2 .task-input-row .icon-btn {
  flex: none;
  color: var(--muted);
}

.bx-v2 .task-input-row .icon-btn:hover {
  color: var(--danger, #e5484d);
}

.bx-v2 .task-input input:focus,
.bx-v2 .task-input textarea:focus {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .task-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bx-v2 .task-related {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 28%, transparent);
  border: 1px solid transparent;
  border-radius: var(--radius-12);
  text-align: left;
}

.bx-v2 .task-related.is-entering {
  animation: task-related-enter 280ms cubic-bezier(.2, .76, .35, 1) both;
  animation-delay: calc(min(var(--related-enter-index, 0), 5) * 34ms);
}

@keyframes task-related-enter {
  from {
    opacity: 0;
    transform: translateY(5px) scale(.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bx-v2 .task-related.selected {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-accent);
}

.bx-v2 .task-related-frame-controls {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  aspect-ratio: 1 / .72;
  align-items: center;
  justify-content: space-between;
  padding: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.bx-v2 .task-related:hover .task-related-frame-controls,
.bx-v2 .task-related:focus-within .task-related-frame-controls {
  opacity: 1;
}

.bx-v2 .task-related-frame-controls button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: white;
  background: rgba(25, 25, 25, .66);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-pill);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.bx-v2 .task-related-frame-controls .icon {
  width: 14px;
  height: 14px;
}

.bx-v2 .task-related-open {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.bx-v2 .task-related-open img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / .72;
  object-fit: contain;
  border-radius: var(--radius-12);
}

.bx-v2 .task-related-open > span {
  display: block;
  padding: 8px 8px 5px;
}

.bx-v2 .task-related strong,
.bx-v2 .task-related small {
  display: block;
}

.bx-v2 .task-related strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-related small {
  margin-top: 3px;
  color: var(--bxv2-muted);
  font-size: 9px;
}

.bx-v2 .task-related-reason {
  min-height: 42px;
  padding: 1px 8px 7px;
}

.bx-v2 .task-related-reason span {
  display: inline;
  color: var(--bxv2-ink-2);
  font-size: 9px;
  font-weight: 680;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-related-reason p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--bxv2-muted);
  font-size: 9px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bx-v2 .related-variants {
  margin: 0 8px 6px;
  color: var(--bxv2-muted);
  font-size: 9px;
}

.bx-v2 .related-variants summary {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0;
  color: var(--bxv2-muted);
  cursor: pointer;
  list-style: none;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  user-select: none;
}

.bx-v2 .related-variants summary::-webkit-details-marker {
  display: none;
}

.bx-v2 .related-variants summary:hover,
.bx-v2 .related-variants summary:focus-visible {
  color: var(--bxv2-ink);
}

.bx-v2 .related-variants-list {
  display: grid;
  gap: 3px;
  padding-top: 5px;
  animation: related-variants-reveal 150ms ease both;
}

.bx-v2 .related-variants-list button {
  display: grid;
  min-width: 0;
  min-height: 34px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 3px;
  color: var(--bxv2-ink-2);
  background: transparent;
  border-radius: var(--radius-4);
  text-align: left;
}

.bx-v2 .related-variants-list button:hover,
.bx-v2 .related-variants-list button:focus-visible {
  color: var(--bxv2-ink);
  background: var(--bxv2-surface);
}

.bx-v2 .related-variants-list img {
  width: 34px;
  height: 28px;
  object-fit: contain;
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-4);
}

.bx-v2 .related-variants-list span {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes related-variants-reveal {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bx-v2 .task-related-pagination {
  position: relative;
  display: flex;
  min-height: 22px;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.bx-v2 .task-related-unavailable {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--bxv2-muted);
  font-size: 11px;
}

.bx-v2 .task-related-more {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 10px;
  font-weight: 680;
  letter-spacing: .01em;
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-related-more:hover:not([aria-disabled="true"]),
.bx-v2 .task-related-more:focus-visible {
  color: var(--bxv2-ink);
  text-decoration-color: currentColor;
}

.bx-v2 .task-related-more:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bxv2-accent) 35%, transparent);
  outline-offset: 3px;
}

.bx-v2 .task-related-more[aria-disabled="true"] {
  cursor: wait;
  opacity: .7;
}

.bx-v2 .task-related-more small,
.bx-v2 .task-related-page-error {
  color: var(--bxv2-muted);
  font-size: 9px;
  font-weight: 500;
}

.bx-v2 .task-related-page-error {
  order: 2;
}

.bx-v2 .task-related-sentinel {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.bx-v2 .task-related-loading,
.bx-v2 .task-related-judging {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  color: var(--bxv2-muted);
  font-size: 10px;
}

.bx-v2 .task-related-loading i,
.bx-v2 .task-related-judging i {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  animation: task-related-pulse 900ms ease-in-out infinite alternate;
}

.bx-v2 .task-related-loading i:nth-child(2),
.bx-v2 .task-related-judging i:nth-child(2) {
  animation-delay: 120ms;
}

.bx-v2 .task-related-loading i:nth-child(3),
.bx-v2 .task-related-judging i:nth-child(3) {
  margin-right: 3px;
  animation-delay: 240ms;
}

@keyframes task-related-pulse {
  from {
    opacity: .24;
    transform: translateY(1px);
  }

  to {
    opacity: .8;
    transform: translateY(-1px);
  }
}

/* Реплика, которую человек уже видит, но портал ещё не подтвердил. Приглушена
   ровно настолько, чтобы отличаться от доставленной, и не настолько, чтобы
   казаться сломанной. */
.bx-v2 .event-line.is-pending {
  opacity: .62;
}

.bx-v2 .event-line.is-failed {
  border-left: 2px solid var(--danger, #e5484d);
  padding-left: 10px;
}

.bx-v2 .event-line-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.bx-v2 .event-line-edit {
  display: grid;
  gap: 8px;
  margin: 6px 0;
}

.bx-v2 .event-line-edit textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line-strong);
  border-radius: var(--radius-8);
  outline: none;
  resize: vertical;
}

.bx-v2 .event-line-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--bxv2-muted);
  font-size: 12px;
}

.bx-v2 .event-line-state.failed {
  color: var(--danger, #e5484d);
}

.bx-v2 .task-submit-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.bx-v2 .task-input > span {
  display: block;
  margin-bottom: 6px;
  color: var(--bxv2-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bx-v2 .task-input textarea {
  resize: vertical;
}

.bx-v2 .task-side {
  position: sticky;
  top: 26px;
  align-self: start;
}

.bx-v2 .conversation-panel {
  display: flex;
  height: min(760px, calc(100svh - 52px));
  flex-direction: column;
  overflow: hidden;
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-16);
}

.bx-v2 .conversation-panel-head {
  position: relative;
  padding: 18px 58px 18px 18px;
  border-bottom: 1px solid var(--bxv2-line);
}

.bx-v2 .conversation-panel-head strong,
.bx-v2 .conversation-panel-head small {
  display: block;
}

.bx-v2 .conversation-panel-head small {
  margin-top: 3px;
  color: var(--bxv2-muted);
}

.bx-v2 .conversation-panel-head .icon-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

.bx-v2 .conversation-panel-body {
  min-height: 0;
  flex: 1;
  padding: 18px;
  overflow: auto;
}

.bx-v2 .event-line {
  position: relative;
  padding: 0 0 24px 19px;
  color: var(--bxv2-muted);
  font-size: 11px;
}

.bx-v2 .event-line.result {
  padding: 12px 12px 12px 36px;
  margin-bottom: 14px;
  color: var(--bxv2-ink-2);
  background: color-mix(in srgb, var(--bxv2-success) 9%, var(--bxv2-surface));
  border: 1px solid color-mix(in srgb, var(--bxv2-success) 32%, var(--bxv2-line));
  border-radius: var(--radius-12);
}

.bx-v2 .event-line.result::before {
  top: 17px;
  left: 15px;
  background: var(--bxv2-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bxv2-success) 14%, transparent);
}

.bx-v2 .event-line.result::after {
  top: 26px;
  bottom: -16px;
  left: 18px;
}

.bx-v2 .event-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 2px 7px;
  color: color-mix(in srgb, var(--bxv2-success) 72%, var(--bxv2-ink));
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--bxv2-success) 13%, transparent);
  border-radius: var(--radius-pill);
}

.bx-v2 .event-result-badge svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

.bx-v2 .event-result-remove {
  padding: 0;
  margin-top: 9px;
  color: var(--bxv2-muted);
  font: inherit;
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.bx-v2 .event-result-remove:hover {
  color: var(--bxv2-danger);
}

.bx-v2 .event-result-remove:disabled,
.bx-v2 .event-result-mark:disabled {
  opacity: .55;
  cursor: wait;
}

/* «Отметить результатом» живёт рядом со «снять» и выглядит так же тихо: это
   не главное действие карточки, а возможность, о которой вспоминают. Видна
   она только на комментарии, который результатом ещё не является. */
.bx-v2 .event-result-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin-top: 9px;
  color: var(--bxv2-muted);
  font: inherit;
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms linear, color 120ms linear;
}

/* Не мозолит глаза в спокойном состоянии, но доступна с клавиатуры и на
   тач-экране, где наведения нет вовсе. */
.bx-v2 .event-line:hover .event-result-mark,
.bx-v2 .event-result-mark:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .bx-v2 .event-result-mark {
    opacity: 1;
  }
}

.bx-v2 .event-result-mark:hover {
  color: var(--bxv2-accent, var(--accent));
}

.bx-v2 .event-line::before {
  position: absolute;
  top: 5px;
  left: 1px;
  width: 7px;
  height: 7px;
  background: var(--bxv2-accent);
  border-radius: 50%;
  content: "";
}

.bx-v2 .event-line::after {
  position: absolute;
  top: 14px;
  bottom: 2px;
  left: 4px;
  width: 1px;
  background: var(--bxv2-line);
  content: "";
}

.bx-v2 .event-line:last-child::after {
  display: none;
}

.bx-v2 .event-line-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.bx-v2 .event-line-meta strong {
  color: var(--bxv2-ink);
  font-size: 11px;
}

.bx-v2 .event-line-meta time {
  margin-left: auto;
  color: var(--bxv2-muted-2);
  font-size: 9px;
}

.bx-v2 .event-line-copy {
  margin-top: 5px;
  color: var(--bxv2-ink-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bx-v2 .event-line-copy a,
.bx-v2 .task-description a {
  color: var(--bxv2-accent-dark);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

.bx-v2 .event-line-copy blockquote,
.bx-v2 .task-description blockquote {
  margin: 8px 0;
  padding: 7px 10px;
  color: var(--bxv2-muted);
  border-left: 2px solid var(--bxv2-line-strong);
}

.bx-v2 .event-line-copy code,
.bx-v2 .task-description code {
  padding: 1px 4px;
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-4);
}

.bx-v2 .task-event-diff {
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--bxv2-surface-2) 72%, transparent);
  border-radius: var(--radius-8);
}

.bx-v2 .task-event-diff summary {
  color: var(--bxv2-muted);
  font-size: 10px;
  cursor: pointer;
}

.bx-v2 .task-event-diff-copy {
  margin-top: 7px;
  color: var(--bxv2-ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bx-v2 .task-event-diff-copy .added {
  background: color-mix(in srgb, var(--bxv2-success) 18%, transparent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--bxv2-success) 60%, transparent);
}

.bx-v2 .task-event-diff-copy .removed {
  color: var(--bxv2-muted);
  background: color-mix(in srgb, var(--bxv2-accent) 12%, transparent);
  text-decoration: line-through;
}

.bx-v2 .bb-list {
  display: block;
  padding: 0 0 0 1.35em;
  margin: .55em 0;
  list-style-position: outside;
}

.bx-v2 .bb-list li {
  display: list-item;
  padding-left: .18em;
  margin: .32em 0;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.bx-v2 .bb-list li::marker {
  color: var(--bxv2-accent);
  font-size: 1em;
}

.bx-v2 .event-line-copy a,
.bx-v2 .task-description a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Картинка из обсуждения — снимок, а не чип. Ширину задаёт лента: две в ряд,
   на узкой панели одна, — так вложение читается без открытия просмотра. */
.bx-v2 .task-attachment-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.bx-v2 .task-attachment-shot {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  gap: 4px;
  margin: 0;
}

.bx-v2 .task-attachment-shot > button {
  display: grid;
  width: 100%;
  padding: 0;
  overflow: hidden;
  /* Кадр квадратный и одинаковый у всех: в обсуждение кладут и вертикальные
     сторис, и горизонтальные афиши, а ряд обязан стоять ровно. */
  aspect-ratio: 1 / 1;
  place-items: center;
  background: var(--bxv2-surface-2);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
}

.bx-v2 .task-attachment-shot img {
  width: 100%;
  height: 100%;
  /* Целиком, а не обрезком: по срезанному макету не понять, тот ли это файл. */
  object-fit: contain;
}

.bx-v2 .task-attachment-shot figcaption {
  overflow: hidden;
  color: var(--bxv2-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-attachment-wait {
  display: grid;
  place-items: center;
}

.bx-v2 .event-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.bx-v2 .event-file-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 5px;
  overflow: hidden;
  color: var(--bxv2-ink-2);
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  text-align: left;
}

.bx-v2 .event-file-card img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: var(--radius-4);
}

.bx-v2 .event-file-card > .icon {
  width: 17px;
  height: 17px;
  margin: auto;
}

.bx-v2 .event-file-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .event-like {
  position: absolute;
  right: 0;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  color: var(--bxv2-muted);
  background: transparent;
  border-radius: var(--radius-8);
  font-size: 9px;
}

.bx-v2 .event-like .icon {
  width: 13px;
  height: 13px;
}

.bx-v2 .event-like.active {
  color: var(--bxv2-accent);
  background: var(--bxv2-accent-soft);
}

/* minmax(0, 1fr), а не автоколонка: приложенный файл с длинным именем задавал
   ширину колонки своим max-content, форма распухала шире панели, а кнопку
   «Ответить» уносило за её край — панель обрезает всё, что вылезло, и человек
   видел, что кнопка «спряталась». */
.bx-v2 .conversation-panel-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 12px;
  border-top: 1px solid var(--bxv2-line);
}

.bx-v2 .conversation-panel-readonly {
  padding: 14px 16px;
  border-top: 1px solid var(--bxv2-line);
  color: var(--bxv2-muted);
  font-size: 11px;
  line-height: 1.4;
}

.bx-v2 .conversation-panel-compose textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px;
  resize: none;
  background: var(--bxv2-paper);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  outline: none;
}

.bx-v2 .conversation-panel-compose textarea:focus {
  border-color: var(--bxv2-line-strong);
}

/* Поле ответа принимает файлы: перетаскиванием, вставкой из буфера и через
   окно по скрепке. Подсветка — рамкой, не тенью. */
.bx-v2 .conversation-panel-compose.is-drop {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: 2px dashed var(--bxv2-line-strong);
  outline-offset: -4px;
}

.bx-v2 .conversation-panel-send {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bx-v2 .conversation-panel-send .btn {
  margin-left: auto;
}

.bx-v2 .conversation-compose-files {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bx-v2 .conversation-compose-files[hidden] {
  display: none;
}

.bx-v2 .conversation-compose-file {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  padding: 3px 5px 3px 8px;
  background: var(--bxv2-surface-2);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  font-size: 10px;
}

.bx-v2 .conversation-compose-file > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .conversation-compose-file button {
  display: grid;
  width: 16px;
  height: 16px;
  flex: none;
  place-items: center;
  color: var(--bxv2-muted);
  border-radius: var(--radius-4);
}

.bx-v2 .conversation-compose-file button:hover {
  color: var(--bxv2-ink);
}

.bx-v2 .conversation-compose-file .icon {
  width: 11px;
  height: 11px;
}

.bx-v2 .task-title-skeleton,
.bx-v2 .task-block-skeleton,
.bx-v2.task-loading .conversation-panel {
  background: linear-gradient(100deg, color-mix(in srgb, var(--surface) 25%, transparent), color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--surface) 25%, transparent));
  background-size: 240% 100%;
  animation: bxv2-shimmer 1.3s infinite linear;
}

.bx-v2 .task-title-skeleton {
  width: min(680px, 100%);
  height: 150px;
  margin-top: 20px;
  border-radius: var(--radius-16);
}

.bx-v2 .task-block-skeleton {
  width: 100%;
  height: 320px;
  margin-top: 36px;
  border-radius: var(--radius-16);
}

@keyframes bxv2-shimmer {
  to { background-position: -240% 0; }
}

.bx-v2 .visual-hint-versions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--bxv2-muted);
  font-size: 12px;
}

.bx-v2 .visual-hint-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 10px;
}

.bx-v2 .task-quiet-action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 0 1px;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 10px;
  text-decoration-color: color-mix(in srgb, currentColor 46%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-quiet-action:hover,
.bx-v2 .task-quiet-action:focus-visible {
  color: var(--bxv2-ink);
}

.bx-v2 .task-quiet-action .icon {
  width: 14px;
  height: 14px;
}

.bx-v2 .visual-hint-model {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bxv2-muted);
  font-size: 10px;
}

.bx-v2 .visual-hint-model select {
  min-height: 30px;
  max-width: 230px;
  padding: 0 30px 0 8px;
  background-color: transparent;
  background-position: right 7px center;
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
}

.bx-v2 .task-progress {
  margin-top: 13px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bxv2-accent) 5%, transparent);
  border-left: 2px solid var(--bxv2-accent);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.bx-v2 .task-progress.failed {
  border-left-color: var(--bxv2-warning);
}

.bx-v2 .task-progress-head {
  display: grid;
  width: 100%;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  color: var(--bxv2-ink-2);
  background: transparent;
  font-size: 11px;
  text-align: left;
}

.bx-v2 .task-progress-mark {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--bxv2-accent-dark);
}

.bx-v2 .task-progress-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bxv2-muted);
  font-size: 9px;
}

.bx-v2 .task-progress-count .icon {
  width: 12px;
  height: 12px;
  transition: transform 150ms ease;
}

.bx-v2 .task-progress.open .task-progress-count .icon {
  transform: rotate(180deg);
}

.bx-v2 .task-progress-log {
  display: grid;
  gap: 5px;
  padding: 0 39px 11px;
  color: var(--bxv2-muted);
  font-size: 10px;
  line-height: 1.4;
}

.bx-v2 .task-progress-log .warning {
  color: var(--bxv2-warning);
}

.bx-v2 .task-progress-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 1.5px solid color-mix(in srgb, var(--bxv2-accent) 24%, transparent);
  border-top-color: var(--bxv2-accent);
  border-radius: 50%;
  animation: bxv2-spin .75s linear infinite;
}

@keyframes bxv2-spin {
  to { transform: rotate(360deg); }
}

.bx-v2 .task-material-progress {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bxv2-muted);
  font-size: 10px;
}

.bx-v2 .task-external-materials,
.bx-v2 .task-material-progress {
  margin-top: 9px;
}

.bx-v2 .section-line-head > small {
  color: var(--bxv2-muted);
  font-size: 9px;
}

/* ---------- вспомогательный блок: ТЗ и вопросы (§6.3) ----------
   Он помогает читать постановку, а не спорит с ней: голова тихая, тело
   свёрнуто, кнопки — пунктирные подписи, а не кнопки. */

/* Помощь по задаче — две очень тихие вкладки в одну строку. Активная вкладка
   показывает своё содержимое сразу: ТЗ — тизером в несколько строк, вопросы —
   развёрнутым списком. Отдельного «всё свёрнуто» состояния нет: под вкладками
   всегда что-то есть, и это что-то маленькое. */
.bx-v2 .task-assist {
  margin-top: 34px;
}

.bx-v2 .assist-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
}

.bx-v2 .assist-tab {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--bxv2-muted);
  background: transparent;
  text-align: left;
}

.bx-v2 .assist-tab[aria-selected="true"] .assist-title {
  color: var(--bxv2-ink);
}

.bx-v2 .assist-tab[aria-selected="true"] .assist-mark .icon {
  color: var(--bxv2-accent);
}

.bx-v2 .assist-tab[aria-selected="false"] .assist-mark .icon {
  color: var(--bxv2-muted-2);
}

.bx-v2 .assist-tab:hover .assist-title,
.bx-v2 .assist-tab:focus-visible .assist-title {
  color: var(--bxv2-ink);
}

/* Подчёркивание активной вкладки — тонкая линия, а не плашка. */
.bx-v2 .assist-tab[aria-selected="true"] {
  box-shadow: inset 0 -1px 0 0 var(--bxv2-accent);
}

.bx-v2 .assist-mark .icon {
  width: 13px;
  height: 13px;
}

.bx-v2 .assist-title {
  color: var(--bxv2-ink-2);
  font-size: 12px;
  font-weight: 600;
}

.bx-v2 .assist-note {
  min-width: 0;
  overflow: hidden;
  color: var(--bxv2-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Счётчик вопросов — тихий кружок с числом, без слов: «2 вопроса · не
   отправлены» удваивало длину вкладки, а состояние читают внутри. */
.bx-v2 .assist-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  color: var(--bxv2-muted);
  background: var(--bxv2-surface-2);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.bx-v2 .assist-tab[aria-selected="true"] .assist-badge {
  color: var(--bxv2-ink);
}

.bx-v2 .assist-body {
  margin-top: 12px;
}

.bx-v2 .assist-body[hidden] {
  display: none;
}

.bx-v2 .assist-copy {
  max-width: 780px;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  transition: opacity .25s ease;
}

/* Тизер: четыре строки и растворение вниз — видно, что текст продолжается,
   и он не спорит с постановкой за внимание. */
.bx-v2 .assist-copy.is-teaser {
  max-height: 6.6em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Прежний текст не исчезает рывком: пока идёт пересборка, он гаснет и ждёт
   замены — иначе блок на пять секунд превращается в пустое место. */
.bx-v2 .assist-copy.is-refreshing {
  opacity: .42;
}

/* Правка ТЗ на месте: подписи разделов тихие, поля — как у вопросов, рамка
   появляется под курсором. Читается как текст, а не как форма. */
.bx-v2 .assist-edit {
  display: grid;
  max-width: 780px;
  gap: 12px;
}

.bx-v2 .assist-edit-row {
  display: grid;
  gap: 3px;
}

.bx-v2 .assist-edit-row > span {
  color: var(--bxv2-muted);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bx-v2 .assist-edit-row input,
.bx-v2 .assist-edit-row textarea {
  width: 100%;
  padding: 6px 9px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
  resize: none;
  field-sizing: content;
}

.bx-v2 .assist-edit-row input {
  font-size: 14px;
  font-weight: 600;
}

.bx-v2 .assist-edit-row input:hover,
.bx-v2 .assist-edit-row textarea:hover {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-color: var(--bxv2-line);
}

.bx-v2 .assist-edit-row input:focus,
.bx-v2 .assist-edit-row textarea:focus {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .assist-edit-row input:disabled,
.bx-v2 .assist-edit-row textarea:disabled {
  opacity: .55;
}

.bx-v2 .assist-empty,
.bx-v2 .assist-progress,
.bx-v2 .assist-error,
.bx-v2 .assist-outcome {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 11px;
}

.bx-v2 .assist-empty,
.bx-v2 .assist-progress {
  color: var(--bxv2-muted);
}

.bx-v2 .assist-error {
  color: var(--bxv2-danger);
}

.bx-v2 .assist-outcome {
  color: var(--bxv2-success);
  font-size: 10px;
}

.bx-v2 .assist-outcome .icon {
  width: 13px;
  height: 13px;
}

.bx-v2 .assist-spinner {
  width: 26px;
  height: 2px;
  overflow: hidden;
  background: var(--bxv2-line);
  border-radius: var(--radius-4);
}

.bx-v2 .assist-spinner::after {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--bxv2-accent);
  border-radius: var(--radius-4);
  animation: bxv2-assist-slide 1.4s ease-in-out infinite;
  content: "";
}

@keyframes bxv2-assist-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .bx-v2 .assist-spinner::after {
    animation: none;
  }
}

/* Полоска на кнопке сдачи — та же, что у сборки ТЗ, но на тёмном фоне
   кнопки: белая, иначе акцент на акценте не читается. Она едет ВСЁ время
   операции, а надпись рядом называет текущий шаг. */
.bx-v2 .task-submit-spinner {
  display: inline-block;
  width: 22px;
  height: 2px;
  overflow: hidden;
  vertical-align: middle;
  background: rgba(255, 255, 255, .32);
  border-radius: var(--radius-4);
}

.bx-v2 .task-submit-spinner::after {
  display: block;
  width: 40%;
  height: 100%;
  background: #fff;
  border-radius: var(--radius-4);
  animation: bxv2-assist-slide 1.4s ease-in-out infinite;
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  .bx-v2 .task-submit-spinner::after {
    animation: none;
  }
}

.bx-v2 .assist-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.bx-v2 .task-quiet-action.strong {
  color: var(--bxv2-ink);
}

.bx-v2 .task-quiet-action:disabled {
  color: var(--bxv2-muted);
  cursor: default;
  opacity: .55;
  text-decoration-line: none;
}

.bx-v2 .assist-question {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 3px 0;
}

.bx-v2 .assist-question-number {
  padding-top: 7px;
  color: var(--bxv2-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Вопрос и ответ читаются как текст, а не как форма: рамка и подложка
   появляются, когда в поле собираются писать. */
.bx-v2 .assist-question-text,
.bx-v2 .assist-answer {
  width: 100%;
  padding: 6px 9px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  outline: none;
  resize: none;
  field-sizing: content;
}

.bx-v2 .assist-question-text:hover,
.bx-v2 .assist-answer:hover {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-color: var(--bxv2-line);
}

.bx-v2 .assist-question-text:focus,
.bx-v2 .assist-answer:focus {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .assist-answer {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-color: var(--bxv2-line);
  font-size: 11px;
}

/* Ответы — одно поле на все вопросы: постановщик отвечает одним сообщением. */
.bx-v2 .assist-answers {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bxv2-line);
}

/* Заготовка из обсуждения — серая и пунктирная: пока её не подставили в поле
   ответов, это не ответ. */
.bx-v2 .assist-suggest {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px dashed var(--bxv2-line-strong);
  border-radius: var(--radius-8);
}

.bx-v2 .assist-suggest-copy {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  color: var(--bxv2-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  /* Реплики идут строками, как в обсуждении: слипшийся абзац читать нельзя. */
  white-space: pre-wrap;
}

.bx-v2 .assist-suggest-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.bx-v2 .assist-suggest-src {
  color: var(--bxv2-muted);
  font-size: 9px;
}

/* Правка, удаление и сортировка не шумят: проявляются на наведении и по
   фокусу с клавиатуры. */
.bx-v2 .assist-question-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s ease;
}

.bx-v2 .assist-question:hover .assist-question-tools,
.bx-v2 .assist-question:focus-within .assist-question-tools {
  opacity: 1;
}

.bx-v2 .assist-question-tools button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: var(--bxv2-muted);
  background: transparent;
  border-radius: var(--radius-4);
}

.bx-v2 .assist-question-tools button:hover {
  color: var(--bxv2-ink);
  background: var(--bxv2-surface-2);
}

.bx-v2 .assist-question-tools button:disabled {
  cursor: default;
  opacity: .4;
}

.bx-v2 .assist-question-tools .icon {
  width: 13px;
  height: 13px;
}

.bx-v2 .assist-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0 26px;
}

.bx-v2 .assist-add input {
  width: 100%;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-8);
  font-size: 11px;
  outline: none;
}

.bx-v2 .assist-add input:focus {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

/* ---------- размер текста постановки ---------- */

.bx-v2 .task-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

@keyframes bxv2-pulse {
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.bx-v2 .task-related-media {
  position: relative;
  display: grid !important;
  width: 100%;
  aspect-ratio: 1 / .72;
  padding: 0 !important;
  overflow: hidden;
  place-items: center;
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-12);
}

/* Картинка вписывается в рамку целиком: высота рамки задана aspect-ratio, и
   процентная высота картинки к ней не резолвится — без абсолютного
   позиционирования портретный макет вставал в натуральный рост и срезался
   overflow'ом по низу. */
.bx-v2 .task-related-open .task-related-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.bx-v2 .task-related-frame-count {
  position: absolute;
  right: 7px;
  bottom: 7px;
  margin: 0 !important;
  padding: 3px 6px !important;
  color: #fff !important;
  background: rgba(15, 15, 15, .7);
  border-radius: var(--radius-pill);
  font-size: 8px !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bx-v2 .task-analysis-technical > details {
  border-top: 1px solid var(--bxv2-line);
}

.bx-v2 .task-analysis-technical summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  color: var(--bxv2-muted);
  cursor: pointer;
  font-size: 11px;
  list-style: none;
}

.bx-v2 .task-analysis-technical summary::-webkit-details-marker {
  display: none;
}

.bx-v2 .task-analysis-technical summary::after {
  margin-left: auto;
  content: "↓";
}

.bx-v2 .task-analysis-technical details[open] summary::after {
  content: "↑";
}

.bx-v2 .task-analysis-technical summary small {
  color: var(--bxv2-muted-2);
  font-size: 9px;
}

.bx-v2 .task-submission-current {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bxv2-line);
}

.bx-v2 .task-submission-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.bx-v2 .task-submission-preview {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: minmax(110px, 1fr) auto;
  overflow: hidden;
  background: var(--bxv2-surface);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  cursor: pointer;
}

.bx-v2 .task-submission-preview:has(input:checked) {
  border-color: var(--bxv2-accent);
  box-shadow: inset 0 0 0 1px var(--bxv2-accent);
}

.bx-v2 .task-submission-preview input {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  accent-color: var(--bxv2-accent);
}

.bx-v2 .task-submission-preview img {
  width: 100%;
  height: 100%;
  min-height: 110px;
  max-height: 190px;
  object-fit: contain;
  background: var(--bxv2-surface-2);
}

.bx-v2 .task-submission-preview > span {
  overflow: hidden;
  padding: 8px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-mockup-action {
  margin-top: 10px;
}

/* Мокап рисуется на месте: результат остаётся в карточке, а не уводит в чат. */
.bx-v2 .task-mockup-result {
  margin: 12px 0 0;
}

.bx-v2 .task-mockup-result img {
  display: block;
  width: 100%;
  height: min(52vh, 420px);
  object-fit: contain;
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-12);
  cursor: zoom-in;
}

.bx-v2 .task-mockup-result figcaption {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.bx-v2 .task-generation-source {
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--bxv2-line);
  border-bottom: 1px solid var(--bxv2-line);
}

.bx-v2 .task-generation-source-head,
.bx-v2 .task-generation-source-summary,
.bx-v2 .task-generation-source-loading,
.bx-v2 .task-generation-source-error {
  display: flex;
  align-items: center;
  gap: 11px;
}

.bx-v2 .task-generation-source-head {
  justify-content: space-between;
}

.bx-v2 .task-generation-source-head > span,
.bx-v2 .task-generation-source-summary > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.bx-v2 .task-generation-source-head strong,
.bx-v2 .task-generation-source-summary strong {
  font-size: 11px;
}

.bx-v2 .task-generation-source-head small,
.bx-v2 .task-generation-source-summary small {
  color: var(--bxv2-muted);
  font-size: 9px;
  line-height: 1.4;
}

.bx-v2 .task-generation-source-head > button,
.bx-v2 .task-generation-source-summary > button,
.bx-v2 .task-generation-source-error > button {
  flex: 0 0 auto;
  padding: 2px 0;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 9px;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-generation-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.bx-v2 .task-generation-source-item {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--surface) 34%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-12);
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.bx-v2 .task-generation-source-item:hover,
.bx-v2 .task-generation-source-item:focus-visible,
.bx-v2 .task-generation-source-item.selected {
  background: var(--bxv2-surface);
  border-color: var(--bxv2-line-strong);
}

.bx-v2 .task-generation-source-item.selected {
  border-color: color-mix(in srgb, var(--bxv2-accent) 45%, var(--bxv2-line));
}

.bx-v2 .task-generation-source-item > img {
  width: 100%;
  height: 112px;
  object-fit: contain;
  background: var(--bxv2-surface-2);
}

.bx-v2 .task-generation-source-item > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px;
}

.bx-v2 .task-generation-source-item strong,
.bx-v2 .task-generation-source-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-v2 .task-generation-source-item strong {
  font-size: 10px;
}

.bx-v2 .task-generation-source-item small {
  color: var(--bxv2-muted);
  font-size: 8px;
}

.bx-v2 .task-generation-source-item .task-generation-source-prompt {
  display: -webkit-box;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bx-v2 .task-generation-source-item > i {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  width: 22px;
  height: 22px;
  place-items: center;
  color: white;
  background: var(--bxv2-accent);
  border-radius: var(--radius-pill);
}

.bx-v2 .task-generation-source-item.selected > i {
  display: grid;
}

.bx-v2 .task-generation-source-item > i .icon {
  width: 12px;
  height: 12px;
}

/* Тихо — это про вес, а не про размер: 9px не читались, и отказ превращался в
   ловушку «не заметил — значит не выбирал». Держим 12px, а незаметность даём
   цветом и пунктирным подчёркиванием. */
.bx-v2 .task-generation-source-none {
  margin-top: 10px;
  padding: 2px 0;
  color: var(--bxv2-muted);
  background: transparent;
  font-size: 12px;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bx-v2 .task-generation-source-summary {
  padding: 10px 0;
}

.bx-v2 .task-generation-source-summary > img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--bxv2-surface-2);
  border-radius: var(--radius-8);
}

.bx-v2 .task-generation-source-summary > button {
  margin-left: auto;
}

.bx-v2 .task-generation-source-loading,
.bx-v2 .task-generation-source-error {
  color: var(--bxv2-muted);
  font-size: 10px;
}

.bx-v2 .assignment-lost-banner {
  display: grid;
  gap: 3px;
  margin: 14px 0 22px;
  padding: 10px 0 10px 12px;
  color: var(--bxv2-ink);
  border-left: 2px solid var(--bxv2-accent);
  font-size: 11px;
  line-height: 1.45;
}

.bx-v2 .assignment-lost-banner span {
  color: var(--bxv2-muted);
}

.bx-v2 .assignment-lost .task-main > :not(.task-back):not(.assignment-lost-banner),
.bx-v2 .assignment-lost .task-side {
  opacity: .42;
  filter: grayscale(.82);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1180px) {
  .bx-v2 {
    --bxv2-context-w: 260px;
  }

  .bx-v2 .task-detail {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 34px;
  }
}

@container task-route (max-width: 960px) {
  .bx-v2 .task-detail {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-side {
    position: static;
    margin-top: 28px;
  }
}

@media (max-width: 920px) {
  .bx-v2 {
    --bxv2-context-w: 238px;
  }

  .bx-v2 .task-detail {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-side {
    position: static;
    margin-top: 28px;
  }

  .bx-v2 .task-title {
    font-size: clamp(19px, 3.2vw, 24px);
  }
}

/* ---- Карточка задачи после переборки 07.09 ---- */

/* ИИ-разбор разделами: подпись раздела мелкая, сам текст — рабочим кеглем.
   Носители внутри «Носителей и надписей» — карточками с левой полоской:
   так каждый макет читается отдельно, а не сливается в полотно. */
.bx-v2 .tz-section + .tz-section {
  margin-top: 14px;
}

.bx-v2 .tz-section h4 {
  margin: 0 0 4px;
  color: var(--bxv2-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bx-v2 .tz-section p {
  margin: 0;
}

.bx-v2 .tz-carrier {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bxv2-surface) 70%, transparent);
  border-left: 2px solid var(--bxv2-accent);
  border-radius: 0 var(--radius-8) var(--radius-8) 0;
}

.bx-v2 .tz-carrier h5 {
  margin: 0 0 4px;
  color: var(--bxv2-ink);
  font-size: 13px;
  font-weight: 700;
}

.bx-v2 .tz-carrier p {
  color: var(--bxv2-ink-2);
  font-size: 13px;
  line-height: 1.55;
}

/* Плитка носителей: форма повторяет формат (портрет для листа), подпись —
   формат крупно, вид — мелко, счётчик «×N» сидит на нижней границе плитки.
   Задача плитки — дать считать объём одним взглядом. */
.bx-v2 .task-carrier-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 12px 10px;
  margin: 2px 0 14px;
  padding-bottom: 10px;
}

.bx-v2 .task-carrier-tile {
  position: relative;
  display: grid;
  aspect-ratio: var(--carrier-aspect, 1 / 1.2);
  align-content: center;
  justify-items: center;
  gap: 2px;
  margin: 0;
  padding: 8px 6px;
  color: var(--bxv2-ink);
  background: color-mix(in srgb, var(--bxv2-surface) 80%, transparent);
  border: 1px solid var(--bxv2-line-strong);
  border-radius: var(--radius-8);
  text-align: center;
}

.bx-v2 .task-carrier-tile.is-main {
  border-color: var(--bxv2-accent);
  box-shadow: inset 0 0 0 1px var(--bxv2-accent);
}

.bx-v2 .task-carrier-tile strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.bx-v2 .task-carrier-tile span {
  color: var(--bxv2-muted);
  font-size: 10px;
  line-height: 1.25;
}

.bx-v2 .task-carrier-count {
  position: absolute;
  bottom: -9px;
  left: 50%;
  min-width: 28px;
  padding: 1px 6px;
  color: var(--bxv2-on-accent, #fff);
  background: var(--bxv2-accent);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  transform: translateX(-50%);
}

/* Промт и блюда — один каркас. */
.bx-v2 .task-launch-card {
  padding: 12px;
  background: color-mix(in srgb, var(--bxv2-surface) 55%, transparent);
  border: 1px solid var(--bxv2-line);
  border-radius: var(--radius-16);
}

.bx-v2 .task-launch-card .task-launch-prompt textarea {
  background: var(--bxv2-surface);
}

.bx-v2 .task-launch-card .task-launch-actions {
  margin-top: 12px;
}

/* Вкладки материалов: неактивные панели скрыты, но остаются в разметке —
   их латают по своим якорям и наблюдают за видимостью. */
.bx-v2 .sources-body > [hidden] {
  display: none;
}

/* Вложения — свой блок над похожими работами и наработками. */
.bx-v2 .task-files .task-block-head {
  margin-bottom: 10px;
}

.bx-v2 .task-files .task-block-head h2 {
  margin-bottom: 0;
}

/* Сдача: переключатель способа живёт в строке заголовка. */
.bx-v2 .task-submit-block .task-block-head {
  align-items: center;
}

.bx-v2 .task-submit-block .task-block-head h2 {
  flex: 1;
  margin-bottom: 0;
}

.bx-v2 .task-submit-block .task-submit-form {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .bx-v2 .task-subview {
    padding-top: 10px;
  }

  .bx-v2 .task-subview-back {
    margin-bottom: 26px;
  }

  .bx-v2 .task-subview-form {
    margin-top: 32px;
  }

  .bx-v2 .task-subview-form textarea {
    min-height: 300px;
  }

  .bx-v2 .task-subview-actions {
    align-items: stretch;
    flex-direction: column;
  }

  /* На телефоне кнопки в столбик, и главная — сверху: возврат уводит с экрана,
     ему первым быть незачем. */
  .bx-v2 .task-subview-buttons {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .bx-v2 .task-subview-actions .btn {
    width: 100%;
  }

  .bx-v2 .task-start-actions,
  .bx-v2 .task-file-grid,
  .bx-v2 .event-files {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-file-grid .task-file-card:not(.image) {
    grid-column: auto;
  }

  .bx-v2.workbench {
    display: block;
  }

  .bx-v2 .context-panel {
    position: fixed;
    z-index: 75;
    top: 0;
    left: 0;
    width: min(330px, 88vw);
    height: calc(100svh - 70px);
    background: var(--bxv2-surface);
    transform: translateX(-105%);
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
  }

  body.context-open .bx-v2 .context-panel,
  .bx-v2.context-open .context-panel {
    transform: translateX(0);
  }

  .bx-v2 .screen,
  .bx-v2.screen {
    padding: 22px 16px 42px;
  }

  .bx-v2 .task-detail {
    display: block;
  }

  .bx-v2 .task-title {
    font-size: 19px;
  }

  .bx-v2 .task-fact-grid {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-time-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx-v2 .task-time-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-v2 .task-time-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .bx-v2 .task-dish-suggestions {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-dish-suggestion-list {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-v2 .visual-hint-actions {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .bx-v2 .visual-hint-actions .task-quiet-action,
  .bx-v2 .task-mockup-action {
    width: 100%;
  }

  /* На телефоне наведения нет — инструменты вопроса видны всегда. Остаются в
     строке: перенос под текст добавлял каждому вопросу лишние 40px пустоты. */
  .bx-v2 .assist-question-tools {
    opacity: 1;
  }

  .bx-v2 .assist-add {
    grid-template-columns: 1fr;
    margin-left: 26px;
  }

  /* Список носителей раскрывается от левого края чипа, а чип на телефоне
     стоит вторым в ряду — панель уезжала за экран. Прижимаем её к правому
     краю чипа: оттуда она разворачивается внутрь экрана. */
  .bx-v2 .task-medium-options {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 40px));
  }

  /* Две вкладки в строку на телефоне не влезают — ставим их друг под друга,
     подпись переносится целиком. */
  .bx-v2 .assist-tabs {
    display: grid;
    gap: 10px;
  }

  .bx-v2 .assist-tab {
    flex-wrap: wrap;
  }

  .bx-v2 .assist-note {
    white-space: normal;
  }

  .bx-v2 .task-submission-previews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx-v2 .conversation-panel {
    height: 560px;
  }

}

@media (max-width: 420px) {
  .bx-v2 .task-generation-source-grid {
    grid-template-columns: 1fr;
  }

  .bx-v2 .task-generation-source-head,
  .bx-v2 .task-generation-source-summary {
    align-items: flex-start;
  }

  .bx-v2 .task-related-grid {
    grid-template-columns: 1fr;
  }
}

@media (hover: none), (pointer: coarse) {
  .bx-v2 .context-chat-actions,
  .bx-v2 .task-related-frame-controls {
    opacity: 1;
  }

  .bx-v2 .task-related-more {
    min-height: 40px;
  }

  .bx-v2 .context-chat-actions button {
    width: 36px;
    height: 36px;
  }

  .bx-v2-tasks .project-chats .context-chat-row {
    padding-right: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-v2 *,
  .bx-v2 *::before,
  .bx-v2 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Раскладка на носители (ТЗ 04.08,
§10): чек-лист того,
что от задачи
   ждут. Тот же смысловой язык,
что у карточки работы{
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Отказ выбран: решение должно быть видно так же ясно, как отмеченный кадр —
   иначе человек жмёт «Сдать» и не понимает, почему кнопка ожила. */
.bx-v2 .task-generation-source-none.is-chosen {
  color: var(--bxv2-ink);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}