/* nw-skeleton-20260918
   Вместо крутящегося жёлтого круга (.loader) на время дозагрузки показываем
   скелетон: серые полосы там, где появится текст, с пробегающим бликом.
   Отдельный файл, чтобы не трогать Angular-чанки. Стили компонентов Angular
   подключает позже нашего <link>, поэтому ключевые свойства идут с !important. */

@-webkit-keyframes nw-skel-shine { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); } }
@keyframes nw-skel-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---- общая заготовка: круг превращается в набор полос ---- */
.loading.object-loading > .loader,
.tasks-item_loader .loader,
.object-life__loading > .loader {
  border: 0 !important;
  border-radius: 8px !important;
  -webkit-animation: none !important;
          animation: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-image:
    linear-gradient(#e7ecf1, #e7ecf1),
    linear-gradient(#e7ecf1, #e7ecf1),
    linear-gradient(#e7ecf1, #e7ecf1),
    linear-gradient(#e7ecf1, #e7ecf1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  float: none !important;
}

/* пробегающий блик поверх полос */
.loading.object-loading > .loader::after,
.tasks-item_loader .loader::after,
.object-life__loading > .loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  -webkit-animation: nw-skel-shine 1.25s ease-in-out infinite;
          animation: nw-skel-shine 1.25s ease-in-out infinite;
  pointer-events: none;
}

/* ---- 1. контакты объекта («Показать контакты») ---- */
/* исходно .object-loading висит absolute в 40% ширины — возвращаем в поток,
   иначе скелетон окажется поверх соседнего блока */
.loading.object-loading {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}
.loading.object-loading > .loader {
  width: 100% !important;
  max-width: 520px !important;
  height: 104px !important;
  margin: 10px 0 !important;
  background-size: 34% 15px, 88% 12px, 72% 12px, 52% 12px !important;
  background-position: 0 4px, 0 32px, 0 56px, 0 80px !important;
}

/* ---- 2. карточка задачи по объекту ---- */
.tasks-item_loader {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
}
.tasks-item_loader .main { width: 100% !important; }
.tasks-item_loader .loader {
  width: 100% !important;
  max-width: 460px !important;
  height: 86px !important;
  margin: 6px 0 14px !important;
  background-size: 62% 17px, 40% 12px, 84% 11px, 56% 11px !important;
  background-position: 0 0, 0 28px, 0 52px, 0 72px !important;
}
/* внутренний .loading — пустой div из шаблона, он тут не нужен */
.tasks-item_loader .loader > .loading { display: none !important; }
/* пока карточка не загрузилась, не показываем полусырые «Адрес не указан»
   и «Без названия» — их место занимает скелетон */
.object-header:has(> .tasks-item_loader) > *:not(.tasks-item_loader) { display: none !important; }

/* ---- 3. лента «Жизнь объекта» ---- */
.object-life__loading { text-align: left !important; }
.object-life__loading > .loader {
  width: 100% !important;
  height: 62px !important;
  margin: 0 0 10px !important;
  background-size: 46% 13px, 90% 11px, 74% 11px, 30% 11px !important;
  background-position: 0 0, 0 22px, 0 40px, 0 58px !important;
}