/* ===========================================================================
   Наши переопределения поверх вёрстки-образца. Правим тут, а не в style.css —
   чтобы при пересборке из оригинала ничего не потерялось.
   =========================================================================== */

/* --- Шапка: бейдж Demo и кнопки ЛК / CRM ---------------------------------- */

/* логотип и бейдж «Demo» — одной группой слева.
   В .header .logo ширина зафиксирована (122px), поэтому бейдж кладём не внутрь
   ссылки, а рядом, в общую обёртку. */
.header .brand {
    margin-right: auto;
}

.header .brand .logo {
    margin: 0;
}

.logo-demo {
    font-size: 22px;
    margin: 3px 0 0 10px;
    line-height: 1;
    color: var(--blue);
    white-space: nowrap;
}

/* три кнопки в ряд — им нужен зазор */
.header-links {
    gap: 8px;
}

/* до 992px десктопное меню прячется и появляется бургер (style.css),
   три кнопки туда уже не влезают — ЛК и CRM уходят в мобильное меню. */
@media screen and (max-width: 992px) {
    .header-links .btn-lk,
    .header-links .btn-crm {
        display: none;
    }
}

/* --- Первый экран: ссылка на демо-бота ------------------------------------- */

/* .details — фирменный синий линк со стрелкой (как «Подробнее»), inline-flex
   чтобы подчёркивание/стрелка шли по ширине текста, а не на всю колонку. */
.main-intro .tg-link {
    display: inline-flex;
    margin-top: 24px;
}

/* --- Чат-виджет keyMessenger: сдвиг из угла ---------------------------------
   Задача: пузырь (60x60) не должен накрывать кнопку «наверх» #toTop
   (30x30, right/bottom 15px).

   Сам пузырь лежит в Shadow DOM: .ptm { position:fixed; bottom:20px; right:20px }
   — снаружи этот селектор недоступен. Но доступен хост #km-widget-root, который
   виджет вставляет в <body> и никак не стилизует.

   Приём: даём хосту transform. Любой transform, кроме none, делает элемент
   containing block для потомков с position:fixed — и .ptm начинает считать свои
   bottom/right от хоста, а не от вьюпорта. Хост при этом нулевого размера,
   поэтому кликов по странице (и по самой #toTop) он не перехватывает.

   Итог на десктопе: 50 + 20 = 70px от правого края и от низа. */
#km-widget-root {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 0;
    height: 0;
    transform: translate(0, 0);
}

/* На узких экранах двигаем только вверх: панель чата (340px, right:0 от .ptm)
   при сдвиге влево вылезала бы за левый край. */
@media (max-width: 767px) {
    #km-widget-root {
        right: 0;
        bottom: 50px;
    }
}