/* FINAL mobile override for "Примеры диалогов" */

@media (max-width: 760px) {
  /* Скрываем старые мобильные треки из прошлых итераций */
  .support-dialogs__phone-track,
  .support-dialogs__mobile-track,
  [data-dialog-phone-track],
  [data-dialog-mobile-track] {
    display: none !important;
  }

  .support-dialogs {
    --dialogs-final-left-gap: 18px;
    --dialogs-final-right-gap: 14px;
    --dialogs-final-gap: 18px;

    /* телефон больше, но справа всё ещё виден следующий */
    --dialogs-final-slide: calc(100vw - 92px);

    overflow: hidden !important;
  }

  .support-dialogs__container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 46px 0 34px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .support-dialogs__left {
    display: contents !important;
  }

  .support-dialogs__left h2 {
    order: 1 !important;
    width: calc(100% - 30px) !important;
    margin: 0 auto !important;
  }

  .support-dialogs__demo,
  .support-dialogs__tabs,
  .support-dialogs__right {
    display: none !important;
  }

  .support-dialogs__phone-wrap {
    order: 2 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .support-dialogs__phone-wrap > .support-dialogs__phone {
    display: none !important;
  }

  .support-dialogs__mobile-final-track {
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: var(--dialogs-final-gap) !important;
    padding: 0 var(--dialogs-final-right-gap) 4px var(--dialogs-final-left-gap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: var(--dialogs-final-left-gap) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .support-dialogs__mobile-final-track::-webkit-scrollbar {
    display: none !important;
  }

  .support-dialogs__mobile-final-slide {
    flex: 0 0 var(--dialogs-final-slide) !important;
    width: var(--dialogs-final-slide) !important;
    min-width: var(--dialogs-final-slide) !important;
    max-width: var(--dialogs-final-slide) !important;
    scroll-snap-align: start !important;
  }

  .support-dialogs__mobile-final-slide .support-dialogs__phone {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;

    /* рамка уже, полезная область внутри больше */
    border-width: clamp(8px, 2.4vw, 10px) !important;
    border-radius: clamp(36px, 10vw, 44px) !important;
    overflow: hidden !important;
  }

  /* Шапка телефона компактнее, но без схлопывания */
  .support-dialogs__mobile-final-slide .support-dialogs__phone::before {
    width: clamp(104px, 31vw, 124px) !important;
    height: clamp(24px, 7vw, 30px) !important;
    border-radius: 0 0 15px 15px !important;
  }

  .support-dialogs__phone-top {
    height: clamp(38px, 11vw, 46px) !important;
    padding: clamp(10px, 3vw, 13px) clamp(18px, 5vw, 24px) 0 !important;
  }

  .support-dialogs__phone-time {
    font-size: clamp(15px, 4.6vw, 18px) !important;
    line-height: 1 !important;
  }

  .support-dialogs__status {
    gap: 7px !important;
    transform: scale(.88) !important;
    transform-origin: right top !important;
  }

  .support-dialogs__phone-head {
    height: clamp(48px, 14vw, 56px) !important;
    padding: 0 clamp(12px, 3.5vw, 16px) !important;
    grid-template-columns: clamp(38px, 11vw, 46px) 1fr clamp(27px, 8vw, 32px) !important;
    gap: clamp(6px, 2vw, 9px) !important;
  }

  .support-dialogs__back {
    width: clamp(34px, 10vw, 40px) !important;
    height: clamp(24px, 7.5vw, 28px) !important;
    padding-left: 5px !important;
    gap: 2px !important;
  }

  .support-dialogs__back-arrow {
    font-size: clamp(17px, 5vw, 20px) !important;
  }

  .support-dialogs__badge {
    width: clamp(16px, 4.8vw, 18px) !important;
    height: clamp(16px, 4.8vw, 18px) !important;
    font-size: 8px !important;
  }

  .support-dialogs__contact {
    min-width: clamp(108px, 34vw, 126px) !important;
    padding: 6px 10px 5px !important;
  }

  .support-dialogs__contact strong {
    font-size: clamp(7px, 2.1vw, 8px) !important;
    line-height: 1.05 !important;
  }

  .support-dialogs__contact small {
    font-size: clamp(6px, 1.9vw, 7px) !important;
    line-height: 1.05 !important;
  }

  .support-dialogs__avatar {
    width: clamp(25px, 7.8vw, 30px) !important;
    height: clamp(25px, 7.8vw, 30px) !important;
  }

  /* Главная оптимизация: чат занимает больше внутренней высоты */
  .support-dialogs__chat {
    left: clamp(14px, 4vw, 18px) !important;
    right: clamp(14px, 4vw, 18px) !important;
    top: clamp(112px, 33vw, 132px) !important;
    bottom: clamp(54px, 15vw, 66px) !important;
    min-height: 0 !important;
    gap: clamp(7px, 2.1vw, 10px) !important;
    justify-content: flex-end !important;
  }

  .support-dialogs__bubble {
    max-width: 90% !important;
    min-height: 0 !important;
    padding: clamp(7px, 2vw, 9px) clamp(48px, 12vw, 60px) clamp(7px, 2vw, 9px) clamp(11px, 3vw, 14px) !important;
    border-radius: clamp(13px, 3.8vw, 16px) !important;
    font-size: clamp(10.5px, 3.2vw, 12.5px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
  }

  .support-dialogs__bubble-time {
    right: clamp(10px, 2.8vw, 14px) !important;
    font-size: clamp(7px, 2vw, 8.5px) !important;
  }

  .support-dialogs__input {
    left: clamp(14px, 4vw, 18px) !important;
    right: clamp(14px, 4vw, 18px) !important;
    bottom: clamp(13px, 3.8vw, 17px) !important;
    height: clamp(32px, 9vw, 38px) !important;
    grid-template-columns:
      clamp(19px, 5.6vw, 23px)
      1fr
      clamp(19px, 5.6vw, 23px)
      clamp(19px, 5.6vw, 23px) !important;
    gap: clamp(6px, 1.9vw, 8px) !important;
  }

  .support-dialogs__input-icon {
    width: clamp(18px, 5.4vw, 21px) !important;
    height: clamp(18px, 5.4vw, 21px) !important;
  }

  .support-dialogs__input-icon svg {
    width: 100% !important;
    height: 100% !important;
  }

  .support-dialogs__input p {
    height: clamp(29px, 8.2vw, 34px) !important;
    padding: 0 clamp(12px, 3.5vw, 16px) !important;
    font-size: clamp(11.5px, 3.4vw, 14px) !important;
  }

  /* Подпись сценария — 70%, прижата к левому краю телефона */
  .support-dialogs__mobile-final-caption {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 4px auto 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #7da3ff !important;
    background: transparent !important;
    color: #28207f !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    font: inherit !important;
  }

  .support-dialogs__mobile-final-caption span {
    color: inherit !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .support-dialogs__mobile-final-caption b {
    color: #bdc9ee !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .support-dialogs__mobile-final-caption.is-active span,
  .support-dialogs__mobile-final-caption.is-active b {
    color: #6f96ff !important;
  }

  .support-dialogs__mobile-final-caption::after {
    content: "" !important;
    position: absolute !important;
    left: 38% !important;
    bottom: -9px !important;
    width: 19px !important;
    height: 19px !important;
    border-radius: 999px !important;
    background: #28207f !important;
    opacity: 0 !important;
    transform: translateX(-50%) scale(.7) !important;
  }

  .support-dialogs__mobile-final-caption.is-active::after {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }
}

@media (max-width: 430px) {
  .support-dialogs {
    --dialogs-final-left-gap: 16px;
    --dialogs-final-right-gap: 12px;
    --dialogs-final-gap: 16px;
    --dialogs-final-slide: calc(100vw - 82px);
  }

  .support-dialogs__mobile-final-caption {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .support-dialogs {
    --dialogs-final-left-gap: 14px;
    --dialogs-final-right-gap: 10px;
    --dialogs-final-gap: 14px;
    --dialogs-final-slide: calc(100vw - 72px);
  }

  .support-dialogs__bubble {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  .support-dialogs__chat {
    gap: 6px !important;
  }
}


/* Dialog scenario dot: active item should NOT show dot */
.support-dialogs__tab::after,
.support-dialogs__tab.is-active::after,
.support-dialogs__mobile-final-caption::after,
.support-dialogs__mobile-final-caption.is-active::after {
  opacity: 0 !important;
  transform: translateX(-50%) scale(.7) !important;
}

/* Dot is only hover indicator on devices with real cursor */
@media (hover: hover) and (pointer: fine) {
  .support-dialogs__tab:hover::after,
  .support-dialogs__mobile-final-caption:hover::after {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }
}

/* On touch devices dot is always hidden */
@media (hover: none), (pointer: coarse) {
  .support-dialogs__tab::after,
  .support-dialogs__tab.is-active::after,
  .support-dialogs__mobile-final-caption::after,
  .support-dialogs__mobile-final-caption.is-active::after {
    opacity: 0 !important;
    display: none !important;
  }
}


/* Support FAQ SVG orbit decor */
.faq-exact {
  position: relative !important;
  overflow: hidden !important;
}

.faq-exact__decor--svg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.faq-exact__decor--svg .faq-exact__sphere {
  display: none !important;
}

.faq-exact__orb {
  position: absolute !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: .82 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.faq-exact__orb--big {
  width: min(58vw, 760px) !important;
  left: clamp(-320px, -13vw, -160px) !important;
  top: clamp(-120px, -4vw, -40px) !important;
  transform: rotate(-7deg) !important;
}

.faq-exact__orb--small {
  width: min(20vw, 270px) !important;
  left: clamp(360px, 28vw, 560px) !important;
  bottom: clamp(-52px, -2vw, -18px) !important;
  transform: rotate(-7deg) !important;
  opacity: .88 !important;
}

.faq-exact__container {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 760px) {
  .faq-exact__orb--big {
    width: 520px !important;
    left: -290px !important;
    top: 8px !important;
    opacity: .62 !important;
  }

  .faq-exact__orb--small {
    width: 190px !important;
    right: -82px !important;
    left: auto !important;
    bottom: 40px !important;
    opacity: .5 !important;
  }
}


/* FAQ SVG orbit decor — pixel position like reference */
@media (min-width: 761px) {
  .faq-exact {
    min-height: 860px !important;
    overflow: hidden !important;
  }

  .faq-exact__decor--svg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .faq-exact__orb {
    position: absolute !important;
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Большая сфера: как на макете — уходит за левый/верхний край */
  .faq-exact__orb--big {
    width: clamp(760px, 45.2vw, 790px) !important;
    left: clamp(-225px, -10.2vw, -170px) !important;
    top: clamp(-330px, -18vw, -260px) !important;
    opacity: .82 !important;
    transform: rotate(-1.5deg) !important;
    transform-origin: 50% 50% !important;
  }

  /* Малая сфера: снизу слева от FAQ-контента */
  .faq-exact__orb--small {
    width: clamp(220px, 14.2vw, 260px) !important;
    left: clamp(390px, 23.7vw, 455px) !important;
    top: clamp(615px, 72.5%, 660px) !important;
    bottom: auto !important;
    opacity: .86 !important;
    transform: rotate(-1.5deg) !important;
    transform-origin: 50% 50% !important;
  }

  .faq-exact__container {
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Wide screens: keep decor locked to the same visual composition */
@media (min-width: 1440px) {
  .faq-exact__orb--big {
    width: 790px !important;
    left: -185px !important;
    top: -315px !important;
  }

  .faq-exact__orb--small {
    width: 255px !important;
    left: 405px !important;
    top: 635px !important;
  }
}

@media (min-width: 1700px) {
  .faq-exact__orb--big {
    width: 820px !important;
    left: -165px !important;
    top: -325px !important;
  }

  .faq-exact__orb--small {
    width: 265px !important;
    left: 430px !important;
    top: 645px !important;
  }
}


/* Lead form final SVG graphics: robot hand + blurred AI */
.lead-form-exact {
  position: relative !important;
  overflow: hidden !important;
}

.lead-form-exact__support-graphics {
  position: relative !important;
  min-height: clamp(520px, 43vw, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.lead-form-exact__ai-bg {
  position: absolute !important;
  z-index: 1 !important;
  width: clamp(390px, 34vw, 620px) !important;
  right: clamp(-40px, 1vw, 35px) !important;
  top: clamp(72px, 8vw, 132px) !important;
  opacity: .95 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.lead-form-exact__robot-hand {
  position: relative !important;
  z-index: 2 !important;
  width: clamp(430px, 39vw, 690px) !important;
  max-width: none !important;
  height: auto !important;
  transform: translate3d(clamp(-30px, -1.8vw, -8px), clamp(-6px, -.5vw, 0px), 0) !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* если старые картинки внутри визуала остались — прячем их, кроме новых SVG */
.lead-form-exact__support-graphics > img:not(.lead-form-exact__ai-bg):not(.lead-form-exact__robot-hand) {
  display: none !important;
}

@media (max-width: 980px) {
  .lead-form-exact__support-graphics {
    min-height: 440px !important;
  }

  .lead-form-exact__ai-bg {
    width: min(520px, 82vw) !important;
    right: -40px !important;
    top: 42px !important;
  }

  .lead-form-exact__robot-hand {
    width: min(560px, 86vw) !important;
    transform: translate3d(8px, 0, 0) !important;
  }
}

@media (max-width: 760px) {
  .lead-form-exact__support-graphics {
    min-height: 360px !important;
    margin-top: 28px !important;
  }

  .lead-form-exact__ai-bg {
    width: 420px !important;
    right: -150px !important;
    top: 38px !important;
    opacity: .72 !important;
  }

  .lead-form-exact__robot-hand {
    width: min(420px, 96vw) !important;
    transform: translate3d(18px, 0, 0) !important;
  }
}


/* =========================================================
   Lead form graphics REBUILD: exact right-side composition
   ========================================================= */

.lead-form-exact {
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
}

.lead-form-exact__container,
.lead-form-exact > .lead-form-exact__container {
  position: relative !important;
  z-index: 2 !important;
}

/* На десктопе: форма слева, графика справа */
@media (min-width: 981px) {
  .lead-form-exact__container {
    display: grid !important;
    grid-template-columns: minmax(560px, 0.95fr) minmax(620px, 1.05fr) !important;
    align-items: center !important;
    gap: clamp(44px, 4vw, 90px) !important;
  }

  .lead-form-exact__content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 860px !important;
  }

  .lead-form-exact__support-graphics {
    position: relative !important;
    z-index: 1 !important;
    min-height: clamp(590px, 42vw, 780px) !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  /* Фоновое AI — цельное, за рукой, справа */
  .lead-form-exact__ai-bg {
    position: absolute !important;
    z-index: 1 !important;
    width: clamp(520px, 38vw, 740px) !important;
    height: auto !important;
    right: clamp(-72px, -2vw, -22px) !important;
    top: 50% !important;
    transform: translateY(-43%) !important;
    opacity: .95 !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  /* Робот — крупно, по центру правого блока */
  .lead-form-exact__robot-hand {
    position: absolute !important;
    z-index: 2 !important;
    width: clamp(620px, 44vw, 820px) !important;
    max-width: none !important;
    height: auto !important;
    right: clamp(8px, 2.4vw, 60px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    user-select: none !important;
  }
}

/* Прячем любые старые картинки, если они остались вне правильного визуала внутри формы */
.lead-form-exact img:not(.lead-form-exact__ai-bg):not(.lead-form-exact__robot-hand) {
  max-width: 100%;
}

.lead-form-exact__support-graphics > img:not(.lead-form-exact__ai-bg):not(.lead-form-exact__robot-hand) {
  display: none !important;
}

/* Планшет */
@media (max-width: 980px) {
  .lead-form-exact__container {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .lead-form-exact__support-graphics {
    position: relative !important;
    min-height: 460px !important;
    margin-top: 36px !important;
    overflow: visible !important;
  }

  .lead-form-exact__ai-bg {
    position: absolute !important;
    z-index: 1 !important;
    width: min(620px, 95vw) !important;
    right: -120px !important;
    top: 38px !important;
    opacity: .7 !important;
  }

  .lead-form-exact__robot-hand {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: min(620px, 96vw) !important;
    max-width: none !important;
    margin: 0 auto !important;
    transform: translateX(20px) !important;
  }
}

/* Мобильная версия */
@media (max-width: 760px) {
  .lead-form-exact__support-graphics {
    min-height: 360px !important;
    margin-top: 28px !important;
  }

  .lead-form-exact__ai-bg {
    width: 430px !important;
    right: -190px !important;
    top: 34px !important;
    opacity: .58 !important;
  }

  .lead-form-exact__robot-hand {
    width: min(430px, 104vw) !important;
    margin-left: auto !important;
    margin-right: -42px !important;
    transform: none !important;
  }
}


/* Lead form: force hide old inline graphics */
.lead-form-exact__ai,
.lead-form-exact__hand {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}



/* LEAD CTA GRAPHICS FINAL OVERRIDE START */
.lead-form-exact {
  position: relative !important;
  overflow: hidden !important;
  background: #fff !important;
}

.lead-form-exact__ai,
.lead-form-exact__hand {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (min-width: 981px) {
  .lead-form-exact__container {
    display: grid !important;
    grid-template-columns: minmax(560px, 0.96fr) minmax(620px, 1.04fr) !important;
    align-items: center !important;
    gap: clamp(48px, 4.8vw, 96px) !important;
  }

  .lead-form-exact__content {
    grid-column: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    max-width: 860px !important;
  }

  .lead-form-exact__support-graphics {
    grid-column: 2 !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: clamp(620px, 43vw, 780px) !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    isolation: isolate !important;
  }

  .lead-form-exact__ai-bg {
    position: absolute !important;
    z-index: 1 !important;
    width: clamp(520px, 39vw, 760px) !important;
    height: auto !important;
    right: clamp(-80px, -3vw, -24px) !important;
    top: 50% !important;
    transform: translateY(-45%) !important;
    opacity: .95 !important;
    display: block !important;
    max-width: none !important;
    background: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  .lead-form-exact__robot-hand {
    position: absolute !important;
    z-index: 2 !important;
    width: clamp(660px, 45vw, 850px) !important;
    height: auto !important;
    right: clamp(4px, 2.2vw, 56px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    max-width: none !important;
    background: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
  }
}

@media (max-width: 980px) {
  .lead-form-exact__container {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .lead-form-exact__content {
    position: relative !important;
    z-index: 3 !important;
  }

  .lead-form-exact__support-graphics {
    position: relative !important;
    z-index: 1 !important;
    min-height: 460px !important;
    margin-top: 34px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .lead-form-exact__ai-bg {
    position: absolute !important;
    z-index: 1 !important;
    width: min(620px, 95vw) !important;
    right: -120px !important;
    top: 42px !important;
    opacity: .65 !important;
    background: transparent !important;
  }

  .lead-form-exact__robot-hand {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: min(620px, 96vw) !important;
    max-width: none !important;
    margin: 0 auto !important;
    transform: translateX(18px) !important;
    background: transparent !important;
  }
}

@media (max-width: 760px) {
  .lead-form-exact__support-graphics {
    min-height: 350px !important;
    margin-top: 28px !important;
  }

  .lead-form-exact__ai-bg {
    width: 430px !important;
    right: -190px !important;
    top: 34px !important;
    opacity: .55 !important;
  }

  .lead-form-exact__robot-hand {
    width: min(430px, 104vw) !important;
    margin-left: auto !important;
    margin-right: -42px !important;
    transform: none !important;
  }
}
/* LEAD CTA GRAPHICS FINAL OVERRIDE END */



/* Lead robot transparency/final layering */
.lead-form-exact__support-graphics {
  background: transparent !important;
}

.lead-form-exact__ai-bg {
  z-index: 1 !important;
}

.lead-form-exact__robot-hand {
  z-index: 2 !important;
  background: transparent !important;
}


/* Lead form: transparent robot PNG final layering */
.lead-form-exact__support-graphics {
  background: transparent !important;
}

.lead-form-exact__ai-bg {
  z-index: 1 !important;
  opacity: .95 !important;
}

.lead-form-exact__robot-hand {
  z-index: 2 !important;
  background: transparent !important;
}