/* Pływający przycisk czatu.
   Ładowany osobno przez WordPressa, z numerem wersji (bez @import — patrz gemini-public.css). */

#pixelis-bot-open-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--pixelis-bot-primary-color);
    border-radius: 50%;
    display: none;                       /* JS włącza dopiero po starcie, żeby nie było martwego guzika */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, .45), 0 2px 6px rgba(15, 23, 42, .12);
    z-index: 10000;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), box-shadow .25s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    #pixelis-bot-open-icon:hover {
        transform: scale(1.06);
        box-shadow: 0 14px 30px -8px rgba(15, 23, 42, .5), 0 2px 6px rgba(15, 23, 42, .12);
    }
}

#pixelis-bot-open-icon:focus-visible {
    outline: 3px solid var(--pixelis-bot-primary-color);
    outline-offset: 3px;
}

/* Tylko ikony będące bezpośrednim dzieckiem przycisku leżą jedna na drugiej.
   Bez '>' ta reguła łapała też sylwetkę konsultanta (siedzi w <span>) i
   wyrywała ją z kółka: absolutnie pozycjonowany SVG liczy rozmiar względem
   przycisku, więc omijał przycinanie i wylewał się na stronę. */
#pixelis-bot-open-icon > svg {
    color: #fff;
    position: absolute;
    transition: transform .3s ease, opacity .3s ease;
}

#pixelis-bot-open-icon .close-icon {
    transform: scale(0);
    opacity: 0;
}

/* --- 2.2: otwarte okno chowa pływający przycisk ---
   Miał z-index 10000, okno czatu 9999, oba przyklejone do prawego dolnego rogu.
   Jego "X" siadał DOKŁADNIE na przycisku wysyłania i całkowicie go zasłaniał,
   więc kliknięcie w miejsce, gdzie każdy spodziewa się "wyślij", zamykało czat.
   Do zamykania służy przycisk w nagłówku i samo kliknięcie w nagłówek. */
#pixelis-bot-open-icon.is-open {
    display: none !important;
}

/* --- Przycisk z twarzą konsultanta ---
   Białe kółko z obwódką w kolorze marki czyta się na każdym tle strony,
   także na zdjęciu w tle. */
#pixelis-bot-open-icon.has-mascot {
    box-sizing: border-box;
    background: #fff;
    border: 3px solid var(--pixelis-bot-primary-color);
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: visible;
}

#pixelis-bot-open-icon.has-mascot .message-icon,
#pixelis-bot-open-icon.has-mascot .close-icon {
    display: none;
}

/* Zielona kropka "dostępny" — ten sam znak, co w każdym komunikatorze. */
#pixelis-bot-open-icon .pixelis-bot-online {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border-width: 2.5px;
    border-color: #fff;
    z-index: 2;
}

#pixelis-bot-open-icon:not(.has-mascot) .pixelis-bot-online {
    display: none;
}