/* =========================================================
   Видео-модуль «агент выполняет рутину» — блок «Кто что делает»
   Тёмный интерфейс в рамке, как фрагмент рабочей сессии.
   ========================================================= */

.agent {
  margin: 3.5rem 0 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 2.5rem;
  align-items: center;
}

/* --- экран --- */
.agent__screen {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0d1020;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 30px 70px rgba(8, 13, 23, .38),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 90px rgba(124, 58, 237, .18);
}

/* верхняя панель «окна» */
.agent__chrome {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.agent__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  flex: 0 0 9px;
}
.agent__dot:first-child { background: rgba(255, 106, 31, .55); }
.agent__chrome-title {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
  margin-left: .5rem;
}
.agent__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .38);
  text-transform: lowercase;
  transition: color .3s ease;
}
/* подсвечиваем и пульсируем только когда видео играет */
.agent__screen.is-playing .agent__live { color: #7ee2a8; }

.agent__live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background .3s ease;
}
.agent__screen.is-playing .agent__live i {
  background: #34d17f;
  animation: agent-pulse 2.2s ease-out infinite;
}
@keyframes agent-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 209, 127, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 209, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 209, 127, 0); }
}

.agent__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0d1020;
}

/* --- подпись --- */
.agent__caption p { margin: 0 0 .9rem; }
.agent__caption p:last-child { margin-bottom: 0; }
.agent__caption .muted { font-size: .85rem; }

/* --- светлая тема --- */
[data-theme="light"] .agent__screen {
  border-color: rgba(124, 58, 237, .18);
  box-shadow:
    0 26px 60px rgba(76, 29, 149, .16),
    0 0 80px rgba(168, 85, 247, .12);
}

/* --- адаптив --- */
@media (max-width: 980px) {
  .agent {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin: 2.5rem 0 2rem;
  }
}

/* --- уважаем «меньше движения»: остаётся постер, анимация точки выключена --- */
@media (prefers-reduced-motion: reduce) {
  .agent__live i { animation: none; }
}

@media print {
  .agent__screen { box-shadow: none; }
}