/* Общая плавающая кнопка связи (YouGile NIC-6). Разметка: resources/views/common/_contact-fab.blade.php */
.cfab {
    --cfab-brand: #ab2f52;
    --cfab-brand-dark: #8e2544;
    --cfab-violet: #644da4;
    --cfab-wa: #25d366;
    --cfab-max: #3b5bdb;
    --cfab-ink: #333333;
    --cfab-muted: #6b6b7b;
    --cfab-shadow: 0 6px 18px rgba(20, 16, 40, .18), 0 2px 4px rgba(20, 16, 40, .12);
    --cfab-ease: cubic-bezier(.2, .8, .25, 1);
    --cfab-right: 24px;
    --cfab-bottom: 24px;
    --cfab-size: 60px;
    --cfab-lift: 0px;

    position: fixed;
    right: var(--cfab-right);
    bottom: calc(var(--cfab-bottom) + var(--cfab-lift) + env(safe-area-inset-bottom, 0px));
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    transition: bottom .2s, opacity .2s;
}

.cfab *,
.cfab *::before,
.cfab *::after {
    box-sizing: border-box;
}

/* Чат Jivo открыт — кнопка не нужна и не должна перекрывать окно чата */
.cfab.cfab--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cfab__backdrop {
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(24, 20, 40, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.cfab__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
    /* первый пункт — ближе всего к кнопке */
    align-items: flex-end;
    gap: 10px;
    visibility: hidden;
}

.cfab.is-open .cfab__menu {
    visibility: visible;
}

.cfab__li {
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translateY(18px) scale(.6);
    transition: opacity .16s ease, transform .16s ease;
}

.cfab.is-open .cfab__li {
    opacity: 1;
    transform: none;
    transition: opacity .22s var(--cfab-ease), transform .28s var(--cfab-ease);
    transition-delay: calc(var(--i) * 45ms);
}

.cfab__item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 999px;
    color: var(--cfab-ink);
    font: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.cfab__item:hover,
.cfab__item:focus {
    color: var(--cfab-ink);
    text-decoration: none;
}

.cfab__icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    box-shadow: var(--cfab-shadow);
    transition: transform .15s;
}

.cfab__icon svg {
    width: 24px;
    height: 24px;
}

.cfab__item:hover .cfab__icon {
    transform: scale(1.07);
}

.cfab__item:focus-visible .cfab__icon {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cfab-violet);
}

.cfab__label {
    padding: 7px 11px;
    border-radius: 6px;
    background: rgba(36, 32, 52, .92);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--cfab-shadow);
}

.cfab__label small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    opacity: .75;
}

.cfab__i-wa {
    background: var(--cfab-wa);
}

.cfab__i-chat {
    background: var(--cfab-violet);
}

.cfab__i-tel {
    background: var(--cfab-brand);
}

.cfab__i-cb {
    background: #fff;
    color: var(--cfab-brand);
}

.cfab__i-max {
    background: var(--cfab-max);
}

.cfab__toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--cfab-size);
    height: var(--cfab-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cfab-brand);
    color: #fff;
    font: inherit;
    box-shadow: var(--cfab-shadow);
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.cfab__toggle:hover {
    background: var(--cfab-brand-dark);
}

.cfab__toggle:active {
    transform: scale(.96);
}

.cfab__toggle:focus {
    outline: none;
}

.cfab__toggle:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cfab-violet);
}

.cfab__toggle svg {
    grid-area: 1 / 1;
    width: 28px;
    height: 28px;
    transition: transform .25s var(--cfab-ease), opacity .2s;
}

.cfab__ico-close {
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
}

.cfab.is-open .cfab__ico-open {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

.cfab.is-open .cfab__ico-close {
    opacity: 1;
    transform: none;
}

.cfab.is-open .cfab__toggle {
    background: #3a3550;
}

.cfab__toggle-text,
.cfab__dot {
    display: none;
}

/* Чат загружается: вместо значка на кнопке крутится индикатор */
.cfab__spinner {
    display: none;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cfab-spin .8s linear infinite;
}

.cfab.cfab--loading .cfab__spinner {
    display: block;
    grid-area: 1 / 1;
}

.cfab.cfab--loading .cfab__ico-open,
.cfab.cfab--loading .cfab__dot {
    display: none;
}

@keyframes cfab-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Сообщение, если чат не удалось загрузить */
.cfab__notice {
    max-width: 280px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    color: var(--cfab-ink);
    font-size: 13px;
    line-height: 1.35;
    box-shadow: var(--cfab-shadow);
}

.cfab__notice[hidden] {
    display: none;
}

/* Счётчик непрочитанных сообщений чата */
.cfab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.cfab__badge[hidden] {
    display: none;
}

/* Мягкая пульсация закрытой кнопки: два раза после загрузки, чтобы её заметили */
.cfab__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(171, 47, 82, .45);
    pointer-events: none;
}

.cfab.cfab--pulse:not(.is-open) .cfab__toggle::after {
    animation: cfab-pulse 1.6s ease-out 2;
}

@keyframes cfab-pulse {
    to {
        box-shadow: 0 0 0 16px rgba(171, 47, 82, 0);
    }
}

/* Кнопка «наверх» поднимается над кнопкой связи и прячется, пока меню открыто */
.scrollup {
    right: calc(var(--cfab-scrollup-right, 31px)) !important;
    bottom: calc(var(--cfab-scrollup-bottom, 96px) + var(--cfab-lift-global, 0px)) !important;
    transition: opacity .2s, transform .2s, bottom .2s;
}

html[data-cfab-open] .scrollup,
html[data-cfab-chat] .scrollup {
    opacity: 0 !important;
    transform: translateY(8px);
    pointer-events: none;
}

/* Прежняя плавающая кнопка «Заказать звонок» (.request-call-btn.btn, position: fixed в стилях сайта)
   приходит не только из базового шаблона, но и из блоков страниц, например главной
   (resources/blocks/start/_start-request-call-modal). Её заменяет пункт меню. */
.request-call-btn.btn {
    display: none !important;
}

/* Собственный ярлык Jivo скрыт: чат открывается из нашей кнопки.
   #jvLabelWrap — ярлык «Отправьте нам сообщение» на компьютере,
   .__jivoMobileButton — круглая кнопка на телефоне. Окно чата не трогаем. */
#jvLabelWrap,
jdiv.__jivoMobileButton {
    display: none !important;
}

/* ===== Вариант Б: на широком экране кнопка с надписью, пункты — белые плашки ===== */
.cfab--b .cfab__item {
    gap: 12px;
    padding: 5px 5px 5px 14px;
    background: #fff;
    box-shadow: var(--cfab-shadow);
}

.cfab--b .cfab__label {
    padding: 0;
    background: none;
    color: var(--cfab-ink);
    font-size: 14px;
    box-shadow: none;
}

.cfab--b .cfab__label small {
    color: var(--cfab-muted);
    opacity: 1;
}

.cfab--b .cfab__icon {
    width: 40px;
    height: 40px;
    box-shadow: none;
}

.cfab--b .cfab__icon svg {
    width: 21px;
    height: 21px;
}

.cfab--b .cfab__i-cb {
    background: #fbe9ee;
}

.cfab--b .cfab__item:focus-visible {
    box-shadow: 0 0 0 3px var(--cfab-violet);
}

.cfab--b .cfab__item:focus-visible .cfab__icon {
    box-shadow: none;
}

@media (min-width: 768px) {
    .cfab--b {
        --cfab-size: 56px;
    }

    .cfab--b .cfab__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: auto;
        padding: 0 22px 0 16px;
        border-radius: 28px;
    }

    .cfab--b .cfab__toggle svg {
        grid-area: auto;
    }

    .cfab--b .cfab__ico-close,
    .cfab--b.is-open .cfab__ico-open,
    .cfab--b.is-open .cfab__dot {
        display: none;
    }

    .cfab--b.is-open .cfab__ico-close {
        display: block;
    }

    .cfab--b .cfab__toggle-text {
        display: inline;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
    }

    .cfab--b .cfab__dot {
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #5ce08b;
        box-shadow: 0 0 0 3px rgba(92, 224, 139, .3);
    }
}

/* ===== Телефон ===== */
@media (max-width: 767px) {
    .cfab {
        --cfab-right: 16px;
        --cfab-bottom: 16px;
        --cfab-size: 56px;
    }

    .scrollup {
        --cfab-scrollup-right: 21px;
        --cfab-scrollup-bottom: 84px;
    }

    /* затемнение только на телефоне: там меню занимает заметную часть экрана */
    html[data-cfab-open] .cfab__backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cfab,
    .cfab__li,
    .cfab.is-open .cfab__li,
    .cfab__toggle,
    .cfab__toggle svg,
    .cfab__icon,
    .cfab__backdrop,
    .scrollup {
        transition: none !important;
    }

    .cfab.cfab--pulse:not(.is-open) .cfab__toggle::after {
        animation: none;
    }

    .cfab__spinner {
        animation-duration: 2.4s;
    }
}