/* CRM motion polish — one final interaction layer, intentionally loaded last. */
:root {
  --crm-motion-ease: cubic-bezier(.2,.8,.2,1);
  --crm-motion-spring: cubic-bezier(.22,1,.36,1);
}

.task-card,
.kcard {
  cursor: grab;
  transform-origin: 50% 50%;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 180ms ease,
    transform 180ms var(--crm-motion-ease) !important;
}

/* crm-v4 использует html body + !important, а просроченная карточка ещё
   специфичнее. Повторяем этот уровень намеренно: иначе margin-анимация есть
   в файле, но никогда не попадает в computed style. */
html body .board-col:not(.task-drag-layer) .task-card {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 180ms ease,
    transform 180ms var(--crm-motion-ease) !important;
}

html body .board-col:not(.task-drag-layer) .task-card.task-overdue {
  transition:
    background-color 1.2s ease,
    border-color .7s ease,
    box-shadow .7s ease,
    transform .18s var(--crm-motion-ease) !important;
}

.task-card:active { cursor: grabbing; }

.task-card.drag-ready {
  box-shadow: 0 10px 26px rgba(0,0,0,.24), 0 0 0 3px rgba(92,219,134,.08) !important;
  transform: translate3d(0,-2px,0) scale(1.01) !important;
}

.task-card.drag-source {
  display: none !important;
}

.task-drop-placeholder {
  position: relative;
  flex: 0 0 auto;
  min-height: 54px;
  overflow: hidden;
  border: 1px solid rgba(103,229,145,.24);
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(74,194,114,.07),rgba(39,126,69,.018));
  box-shadow: inset 0 0 0 1px rgba(122,235,157,.035),0 8px 24px rgba(0,0,0,.055);
  animation: crmPlaceholderIn 180ms var(--crm-motion-spring) both;
}

.task-drop-placeholder::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,transparent,rgba(132,239,166,.48),transparent);
}

.task-drop-placeholder::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(132,239,166,.9);
  box-shadow: 0 0 0 5px rgba(102,222,141,.075),0 0 20px rgba(92,219,134,.18);
  animation: crmPlaceholderPulse 1.25s ease-in-out infinite;
}

html body .task-drag-layer > .task-card.drag-clone {
  /* Во всех старых слоях .task-card имеет position:relative!important.
     Без такого же приоритета координаты полёта включали локальный сдвиг
     контейнера, который исчезал ровно при вставке в колонку. */
  position: fixed !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  cursor: grabbing !important;
  /* Подъём не должен перекрашивать карточку: все четыре границы совпадают
     с её состоянием в колонке, меняется только тень. */
  border-top: 1px solid rgba(202,230,210,.14) !important;
  border-bottom: 1px solid rgba(202,230,210,.14) !important;
  border-left: 2px solid color-mix(in srgb,var(--priority-edge,#b9924f) 78%,rgba(255,255,255,.2)) !important;
  border-right: 2px solid color-mix(in srgb,var(--status-edge,transparent) 72%,rgba(225,244,231,.26)) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.42),0 0 26px rgba(71,205,113,.045) !important;
  filter: none !important;
  transform-origin: 50% 48%;
  /* style.css задавал transform 90ms, но этот более поздний shorthand его
     обнулял. Поэтому карточка прыгала между pointermove без интерполяции. */
  transition:
    transform 0ms linear,
    filter 160ms ease,
    opacity 160ms ease,
    width 190ms var(--crm-motion-ease) !important;
}

html body .task-drag-layer > .task-card.task-overdue.drag-clone {
  border-top-color: rgba(220,69,80,.32) !important;
  border-bottom-color: rgba(220,69,80,.32) !important;
  border-left-color: rgba(238,93,104,.84) !important;
}

html body .task-drag-layer > .task-card.drag-live {
  touch-action: none !important;
  contain: layout paint style;
}

html body .task-drag-layer > .task-card.drag-clone.drag-settling {
  filter: none !important;
  transition:
    transform 0ms linear,
    width 0ms linear,
    opacity 150ms ease,
    filter 150ms ease,
    box-shadow 150ms ease !important;
}

/* Статус теперь обозначается внешним контуром, а не двумя рейками внутри.
   Контур не занимает место в карточке и не меняет её ширину при drag. */
html body .board-col .task-card::after,
html body .board-col .task-card .tc-status-edge {
  display: none !important;
  content: none !important;
}

html body .board-col .task-card:not(.drag-clone) {
  border-top: 1px solid rgba(202,230,210,.14) !important;
  border-bottom: 1px solid rgba(202,230,210,.14) !important;
  border-left: 2px solid color-mix(in srgb,var(--priority-edge,#b9924f) 78%,rgba(255,255,255,.2)) !important;
  border-right: 2px solid color-mix(in srgb,var(--status-edge,transparent) 72%,rgba(225,244,231,.26)) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.022) !important;
}

html body .board-col .task-card:not(.drag-clone):hover {
  /* Hover больше не перекрашивает карточку. Это исключает цветовой скачок
     между обычным состоянием, захватом и возвратом. */
  background: linear-gradient(180deg,#19261e 0%,#151f19 100%) !important;
  border-top-color: rgba(202,230,210,.14) !important;
  border-bottom-color: rgba(202,230,210,.14) !important;
  border-left-color: color-mix(in srgb,var(--priority-edge,#b9924f) 78%,rgba(255,255,255,.2)) !important;
  border-right-color: color-mix(in srgb,var(--status-edge,transparent) 72%,rgba(225,244,231,.26)) !important;
  box-shadow: 0 11px 28px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.03) !important;
}

html body .board-col .task-card.task-overdue:not(.drag-clone) {
  border-top-color: rgba(220,69,80,.32) !important;
  border-bottom-color: rgba(220,69,80,.32) !important;
  border-left-color: rgba(238,93,104,.84) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.02) !important;
}

html body .board-col .task-card.task-overdue:not(.drag-clone):hover {
  background:
    linear-gradient(135deg,rgba(112,18,27,var(--overdue-alpha)),rgba(42,12,17,var(--overdue-alpha))),
    #151817 !important;
  border-top-color: rgba(220,69,80,.32) !important;
  border-bottom-color: rgba(220,69,80,.32) !important;
  border-left-color: rgba(238,93,104,.84) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.025) !important;
}

body.task-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing !important;
}

body.task-dragging .board-col,
body.task-dragging .col-body { scroll-behavior: auto !important; }

/* Под летящей карточкой не должны последовательно включаться hover, тени и
   подъём каждой соседней карточки. Во время drag они только раздвигаются. */
body.task-dragging .board-col:not(.task-drag-layer) .task-card {
  pointer-events: none !important;
  transition: none !important;
}

.col-body.drag-over {
  background: linear-gradient(180deg,rgba(92,219,134,.06),rgba(92,219,134,.018)) !important;
  box-shadow: inset 0 0 0 1px rgba(92,219,134,.2),inset 0 12px 36px rgba(92,219,134,.032) !important;
  transition:background 160ms ease,box-shadow 160ms ease !important;
}

/* При переносе в конец колонки место посадки тоже видно заранее. Раньше
   массив раздвигался только перед существующей карточкой, а конец выглядел
   как резкое исчезновение. */
.col-body.drag-over.drag-at-end::after {
  content: '';
  display: block;
  flex: 0 0 var(--drag-slot-height, 120px);
  min-height: var(--drag-slot-height, 120px);
  border: 1px solid rgba(103,229,145,.2);
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(74,194,114,.052),rgba(39,126,69,.014));
  box-shadow: inset 0 0 0 1px rgba(122,235,157,.025);
  animation: crmPlaceholderIn 200ms var(--crm-motion-spring) both;
  pointer-events: none;
}

.task-card.drag-gap-before {
  border-top-color: rgba(122,235,157,.46) !important;
  will-change: transform;
}

/* Реальная карточка и раскрытый слот обмениваются местами в одном кадре.
   Закрывать margin плавно здесь нельзя: карточка уже заняла ту же высоту. */
html body .board-col .task-card.drag-gap-commit {
  transition: none !important;
}

/* На единственный commit-кадр fixed transform исчезает уже внутри колонки.
   Любая transition здесь интерполировала бы экранные координаты как локальные
   и визуально бросала карточку в сторону. */
html body .board-col .task-card.drag-card-commit {
  transition: none !important;
  animation: none !important;
  content-visibility: visible !important;
}

.board-col:has(> .col-body.drag-over) > .col-head {
  color: rgba(216,248,226,.96) !important;
  background: rgba(72,188,108,.055) !important;
  box-shadow: inset 0 -1px rgba(103,229,145,.11);
  transition: color 150ms ease,background-color 150ms ease,box-shadow 150ms ease !important;
}

/* Новая карточка уже стоит в DOM под летящим клоном, но не вспыхивает до
   завершения посадки. Так один непрерывный объект проходит весь путь. */
/* Посадка использует тот же живой DOM-узел, поэтому скрытый дубль больше не
   нужен: opacity:0 создавал вспышку ровно в момент отпускания. */

@keyframes crmPlaceholderIn {
  from { opacity: 0; transform: scale(.975); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes crmPlaceholderPulse {
  0%,100% { opacity:.55; transform:scale(.82); }
  50% { opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Перетаскивание — не декоративная анимация, а прямая обратная связь на
     действие пользователя. Сохраняем короткий полёт, placeholder и посадку;
     отключаем лишь фоновые эффекты неактивных карточек. */
  /* Перестроение канбана — функциональная обратная связь, а не фоновая
     декорация. Даже при Reduce Motion оставляем короткое раздвижение массива;
     иначе карточки снова мгновенно телепортируются. */
  html body .board-col:not(.task-drag-layer) .task-card:not(.drag-live):not(.drop-target-ready) {
    transition: none !important;
    animation: none !important;
  }
  .kcard { transition: none !important; animation: none !important; }
  .task-drop-placeholder::after { display: none; }
}