/* Дополнения для посадочных страниц /avito/ и /voice/ (01.10.2026).
   Основа — styles.css главной: здесь только то, чего на главной нет. */

/* ---------- чат Авито: карточка объявления над перепиской ---------- */
.listing {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 12px 0; padding: 8px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
}
.listing-thumb {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(137deg, #efe7ff 0%, #c9b8fb 100%); color: var(--violet-strong);
}
.listing-thumb svg { width: 24px; height: 24px; }
.listing-text { display: grid; line-height: 1.25; min-width: 0; }
.listing-text b { font-size: 13px; }
.listing-text small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }

/* ---------- звонок: шапка, волна вместо «печатает», кнопки ---------- */
.phone-call .call-head {
  display: grid; justify-items: center; gap: 6px; padding: 46px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); text-align: center;
}
.call-avatar {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--grad-btn); font-weight: 700; font-size: 20px;
  box-shadow: 0 0 0 6px rgba(115, 103, 240, .18), 0 0 0 12px rgba(115, 103, 240, .08);
}
.call-title { display: grid; line-height: 1.3; }
.call-title b { font-size: 15px; }
.call-title small { font-size: 12px; color: rgba(255, 255, 255, .55); }
.call-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #9ff0bf; }
.call-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px 2px rgba(61, 220, 132, .6); animation: pulse 1.6s infinite ease-in-out; }
@keyframes pulse { 50% { opacity: .35; } }
.phone-call .msg { padding-bottom: 9px; }
.phone-call .typing-wave { gap: 3px; align-items: center; height: 40px; padding: 0 16px; }
.phone-call .typing-wave span { width: 4px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .92); animation: wave 1s infinite ease-in-out; }
.phone-call .typing-wave span:nth-child(2) { animation-delay: .1s; }
.phone-call .typing-wave span:nth-child(3) { animation-delay: .2s; }
.phone-call .typing-wave span:nth-child(4) { animation-delay: .3s; }
.phone-call .typing-wave span:nth-child(5) { animation-delay: .4s; }
.phone-call .typing-wave span:nth-child(6) { animation-delay: .5s; }
.phone-call .typing-wave em { margin-left: 8px; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .85); }
@keyframes wave { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.call-actions { display: flex; justify-content: center; gap: 22px; padding: 10px 0 18px; }
.call-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
.call-btn svg { width: 20px; height: 20px; }
.call-btn.call-end { background: #e5484d; color: var(--white); }

/* ---------- карточка заявки в Telegram ---------- */
.lead-card {
  position: relative; width: 100%; max-width: 420px; margin-inline: auto;
  padding: 20px 22px 22px; border-radius: 20px;
  background: var(--white); color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(115, 103, 240, .8), 0 0 0 1px rgba(255, 255, 255, .08);
}
.lead-card-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lead-card-head .toast-ico { width: 38px; height: 38px; }
.lead-card-head b { display: block; font-size: 15px; line-height: 1.2; }
.lead-card-head small { display: block; font-size: 12.5px; color: var(--mist); }
.lead-card-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-weight: 700; font-size: 16.5px; }
.lead-card-title svg { width: 20px; height: 20px; color: #f26b3a; }
.lead-card dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; font-size: 14.5px; line-height: 1.4; }
.lead-card dt { color: var(--mist); }
.lead-card dd { margin: 0; font-weight: 600; }
.lead-card time { position: absolute; right: 20px; bottom: 14px; font-size: 12px; color: var(--mist); }
.lead-card .lc-note { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--lavender-2); color: var(--violet-deep); font-size: 13.5px; font-weight: 600; }

/* ---------- блок со звонками на тёмном фоне ---------- */
.calls-split { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.calls-split .section-head { margin-bottom: 0; }
.hotcold { display: grid; gap: 12px; margin-top: 26px; }
.hotcold li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.hotcold p { font-size: 16px; color: rgba(255, 255, 255, .78); }
.hotcold b { color: var(--white); }
.hc-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.hc-ico svg { width: 18px; height: 18px; }
.hc-hot { background: rgba(242, 107, 58, .16); color: #ff9b72; }
.hc-cold { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
.calls-split .center-cta { margin-top: 32px; text-align: left; }

/* ---------- отрасли: значки в кружках ---------- */
.ind-ico {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 20px;
  background: var(--grad-btn); color: var(--white); box-shadow: 0 14px 30px -14px rgba(91, 77, 224, .9);
}
.ind-ico svg { width: 32px; height: 32px; }
.role .ind-ico + h3 { margin-top: 0; }

/* ---------- что получает менеджер ---------- */
.gets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.gets .checks li { color: rgba(255, 255, 255, .86); }

@media (max-width: 960px) {
  .calls-split, .gets { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .calls-split .center-cta { text-align: center; }
}
@media (max-width: 640px) {
  .lead-card { padding: 18px 16px 20px; }
  .lead-card dl { grid-template-columns: 96px minmax(0, 1fr); font-size: 14px; }
  .call-actions { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .call-dot, .phone-call .typing-wave span { animation: none; }
}

/* две карточки вместо трёх (гарантии на /avito/) */
.grid-3.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
@media (max-width: 640px) { .grid-3.grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- пример звонка: плеер на тёмном фоне ---------- */
.voice-sample {
  display: flex; align-items: center; gap: 16px; max-width: 460px; margin-top: 22px;
  padding: 14px 18px 14px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(206, 159, 252, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--white);
}
.vs-play {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 50%; background: var(--grad-btn); color: var(--white); cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(115, 103, 240, .9); transition: transform .15s ease;
}
.vs-play:hover { transform: scale(1.05); }
.vs-play svg { width: 22px; height: 22px; }
.vs-play .vs-ico-pause, .voice-sample.is-playing .vs-ico-play { display: none; }
.voice-sample.is-playing .vs-ico-pause { display: block; }
.vs-body { flex: 1; min-width: 0; }
.vs-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.vs-bar { position: relative; height: 6px; margin: 10px 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); cursor: pointer; }
.vs-bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; background: var(--grad); }
.vs-meta { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.vs-caption { max-width: 460px; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .5); }
@media (max-width: 640px) { .voice-sample { max-width: none; } }

/* ---------- главная: «Текстом или голосом» ---------- */
.formats { margin-top: 8px; }
.format img { width: 72px; height: 72px; margin: -6px 0 12px -6px; }
.format p { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.format-link { display: inline-block; margin-top: 16px; color: var(--lilac); font-weight: 600; text-decoration: none; }
.format-link:hover { text-decoration: underline; }
.voice-sample.is-center { margin: 40px auto 0; }
.vs-caption.is-center { margin-inline: auto; text-align: center; }
@media (max-width: 640px) { .formats { grid-template-columns: minmax(0, 1fr); } }