/* Роботы (.rb-): на телефоне — список стадий с липкими шапками, на компьютере — доска колонками,
   как «Роботы» Битрикса. Карточка: когда, название, тип, кому, быстрые «вкл/выкл», «×», «изменить». */

.rb-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 12px 10px; }
.rb-pipe { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 16px; }
.rb-pipe .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-pipe svg.ic { flex: none; color: var(--text-3); }
.rb-pipe:active, .rb-test:active, .rb-add:active { transform: scale(0.97); }
.rb-test { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--warning-soft); color: var(--warning-text); font-size: 14px; font-weight: 500; white-space: nowrap; }

/* Стадия: стрелка цвета стадии (цвета — из данных) */
.rb-plate { flex: 1; min-width: 0; height: 40px; padding: 0 26px 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 8px 0 0 8px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); font-size: 15px; font-weight: 600; }
.rb-plate .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-plate .cnt { flex: none; min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, currentColor 20%, transparent); font-size: 12px; }
.rb-plate.sm { flex: 0 1 auto; height: 30px; padding-right: 22px; font-size: 14px; font-weight: 500; }
.rb-add { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--primary); transition: transform 100ms var(--ease-out); }

/* Телефон: стадии списком, шапка стадии прилипает */
.rb-list { padding: 0 12px calc(var(--tabbar-h) + var(--safe-bottom) + 32px); }
.rb-sec { margin-bottom: 4px; }
.rb-sec-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 0; background: var(--bg); }
.rb-end { padding: 14px 8px 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--text-3); }

/* Карточка робота */
.rb-card { position: relative; margin: 0 0 8px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.rb-card-top { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 0 0 14px; }
/* Ручка ≡ для порядка на стадии — слева в верхней строке карточки, касание 44×44. */
.rb-card.sortable .rb-card-top { gap: 0; padding-left: 0; }
.rb-card-top .mn-handle { margin: -6px 0 -8px; }
.rb-card.dragging { z-index: 3; box-shadow: var(--shadow-pop); }
.rb-when { flex: 1; min-width: 0; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-x { width: 44px; height: 44px; margin: -6px 0 -8px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--text-4); }
.rb-x:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
.rb-main { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0 14px 10px; color: var(--text); text-align: left; }
.rb-main:active { background: color-mix(in srgb, var(--text) 4%, transparent); }
.rb-name { font-size: 16px; font-weight: 600; line-height: 1.3; word-break: break-word; }
.rb-kind { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; color: var(--text-2); }
.rb-kind svg.ic { flex: none; color: var(--primary); }
.rb-kind span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-to { font-size: 13px; color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-cond { font-size: 13px; line-height: 1.3; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: var(--danger-soft); color: var(--danger-text); font-size: 13px; line-height: 1.3; }
.rb-warn svg.ic { flex: none; margin-top: 1px; }
.rb-card.off .rb-main, .rb-card.off .rb-when { opacity: 0.5; }
.rb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; border-top: 0.5px solid var(--line); }
.rb-on { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.rb-on .toggle input { inset: -7px -4px; }
.rb-edit { min-height: 44px; padding: 0 10px; color: var(--link); font-size: 14px; }

/* Редактор */
.rb-ed-stage { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 2px 14px; font-size: 14px; color: var(--text-3); }
.rb-pad { position: relative; padding: 8px 12px; }
.rb-pad::after { content: ''; position: absolute; left: 16px; right: 0; bottom: 0; height: 0.5px; background: var(--line-2); }
.mn-list > .rb-pad:last-child::after { display: none; }
.rb-units { padding: 0 12px 10px; }
.rb-delay { position: relative; }
.rb-delay::after { content: ''; position: absolute; left: 16px; right: 0; bottom: 0; height: 0.5px; background: var(--line-2); }
.rb-delay .mn-field::after { display: none; }
.rb-target { margin: 0 0 14px; }
.rb-del { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -12px -4px -12px 0; padding: 0 6px; color: var(--danger-text); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rb-chips { position: relative; display: flex; gap: 6px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.rb-chips::-webkit-scrollbar { display: none; }
.rb-chips::after { content: ''; position: absolute; left: 16px; right: 0; bottom: 0; height: 0.5px; background: var(--line-2); }
.mn-list > .rb-chips:last-child::after { display: none; }
.rb-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--primary-soft); color: var(--link); font-size: 15px; white-space: nowrap; transition: transform 100ms var(--ease-out); }
.rb-chip:active { transform: scale(0.96); }
.rb-samples { display: flex; flex-direction: column; gap: 8px; margin: -8px 0 18px; padding: 12px; border-radius: 12px; background: var(--chat-bg); }
.rb-samples-t { font-size: 12px; color: var(--text-3); }
.rb-bubble { align-self: flex-end; max-width: 92%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--bubble-robot); color: var(--text); font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.rb-p { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: var(--text-2); }

@media (hover: hover) and (pointer: fine) {
  .rb-main:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
  .rb-x:hover { color: var(--danger-text); background: var(--danger-soft); }
  .rb-edit:hover { text-decoration: underline; }
  .rb-add:hover, .rb-pipe:hover { box-shadow: 0 0 0 1px var(--primary) inset; }
  .rb-chip:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
  .rb-card:hover { box-shadow: var(--shadow-pop); }
}

/* ======================= десктоп: доска колонками ======================= */
@media (min-width: 1024px) {
  .rb-bar { padding: 2px 24px 12px; }
  .rb-board { flex: 1; min-height: 0; overflow: auto; padding: 0 24px 24px; }
  .rb-cols { display: flex; align-items: flex-start; gap: 10px; min-width: min-content; }
  .rb-col { width: 264px; flex: none; }
  .rb-col-h { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; background: var(--bg); }
  .rb-col-h .rb-plate { flex: none; width: 100%; }
  .rb-col-h .rb-add { width: 100%; height: 44px; border-radius: 10px; }
  /* В окне на компьютере плашки полей переносятся на строки: горизонтальную прокрутку мышью не найти. */
  .rb-chips { flex-wrap: wrap; overflow: visible; }
}