/* Страница «Разработка ИИ-агентов»: первый экран с живым окном агента.
   Оболочка окна (.avat-demo, сообщения, подпись) берётся из брендбука:
   /about/brand/product-demos.css. Здесь только раскладка экрана и то, чего в библиотеке нет. */

/* Первый экран: текст слева, окно агента справа */
.agents-hero { position: relative; }
.agents-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 6vh, 84px) clamp(48px, 7vh, 96px);
}
.agents-hero .hero-copy { width: auto; max-width: 640px; padding-top: 0; }
.agents-hero .hero-title { font-size: clamp(46px, 3.9vw, 78px); }
.agents-hero .hero-secondary { font-size: clamp(24px, 1.75vw, 34px); }
.agents-hero-demo { min-width: 0; }


/* Настоящий ассистент AVAT слева, карточка CRM справа */
.agents-demo .ad-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.agents-real .ad-chat-real { position: relative; height: 580px; min-width: 0; background: #fff; }
.agents-real .ad-chat-wait { margin: 0; padding: 28px 24px; font: 400 14px/1.5 Inter, Arial, sans-serif; color: var(--demo-muted); }
.agents-real .ad-chat-real:has(.aa-panel) .ad-chat-wait { display: none; }

/* Карточка сделки: заполняется по ходу разговора */
.agents-demo .ad-deal {
  border-left: 1px solid var(--demo-line);
  background: #fff;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.agents-demo .ad-deal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.agents-demo .ad-deal-title { margin: 0; font: 600 13px/1.4 Inter, Arial, sans-serif; color: var(--demo-ink); }
.agents-demo .ad-deal-time { font: 400 12px/1.4 Inter, Arial, sans-serif; color: var(--demo-muted); font-variant-numeric: tabular-nums; }
.agents-demo .ad-deal-hint { margin: -6px 0 0; font: 400 12px/1.4 Inter, Arial, sans-serif; color: var(--demo-muted); }
.agents-demo .ad-fields { margin: 0; display: grid; gap: 9px; }
.agents-demo .ad-fields div { display: grid; gap: 2px; padding-bottom: 9px; border-bottom: 1px solid #edf1f2; }
.agents-demo .ad-fields dt { font: 400 12px/1.4 Inter, Arial, sans-serif; color: var(--demo-muted); }
.agents-demo .ad-fields dd { margin: 0; font: 500 13px/1.45 Inter, Arial, sans-serif; color: var(--demo-ink); overflow-wrap: anywhere; transition: color .3s; }
.agents-demo .ad-fields dd.is-empty { color: #b3bec3; }
.agents-demo .ad-status {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1.4 Inter, Arial, sans-serif;
  color: var(--demo-muted);
  background: #e8ecee;
  border-radius: 10px;
  padding: 10px 12px;
}
/* Зелёная лампочка: живое состояние «работает, сделка создана» (правило брендбука 14.10) */
.agents-demo .ad-status.is-ok { color: var(--demo-depth); }
.agents-demo .ad-status.is-ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, .7); flex: none; }
.agents-demo .ad-status.is-human { color: var(--demo-depth); }
.agents-demo .ad-status.is-human::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--demo-oxide); flex: none; }

/* Узкое окно: карточка сделки под перепиской */
@container (max-width: 620px) {
  .agents-demo .ad-body { grid-template-columns: minmax(0, 1fr); }
  .agents-demo .ad-deal { border-left: 0; border-top: 1px solid var(--demo-line); }
  .agents-real .ad-chat-real { height: 540px; }
  .agents-demo .ad-fields { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}

@media (max-width: 1100px) {
  .agents-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .agents-hero .hero-copy { max-width: 720px; }
}
@media (max-width: 560px) {
  .agents-hero .hero-title { font-size: clamp(36px, 10vw, 46px); }
  .agents-hero .hero-secondary { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .agents-demo .ad-fields dd { transition: none; }
}

/* Время в первой истории длиннее, чем числа на главной: «22:40» вместо «03» */
.agents-problem .problem-time-point span { font-size: clamp(58px, 5vw, 100px); }
@media (max-width: 700px) { .agents-problem .problem-time-point span { font-size: clamp(32px, 10vw, 44px); } }

/* Полоса цифр: все числа одного размера (на главной первое крупнее, здесь подписи разной длины
   и числа вставали на разную высоту) */
.agents-hero .hero-proof-band .proof-item:first-child .proof-num { font-size: clamp(56px, 4.2vw, 82px); }
@media (max-width: 1100px) {
  .agents-hero .hero-proof-band .proof-item:first-child .proof-num { font-size: clamp(41px, 4.9vw, 62px); }
}
@media (max-width: 760px) {
  .agents-hero .hero-proof-band .proof-item:first-child .proof-num { font-size: clamp(42px, 10vw, 60px); }
}

/* «Проверьте агента на нас»: на главной блок продолжает серую главу, здесь стоит после белых кейсов,
   поэтому нужен отступ сверху, равный нижнему */
main > .mid-cta.agents-live { padding: 85px 0; }
@media (max-width: 760px) { main > .mid-cta.agents-live { padding: 56px 0; } }