/* Awatar konsultanta, dymek powitalny i mikrofon. Osobny plik rejestrowany przez wp_enqueue_style z numerem wersji — przy @import przeglądarka pobierała arkusz bez ?ver= i trzymała starą kopię. */ /* --------------------------------------------------------------- 0. Odporność na style motywu Widget wchodzi na cudzą stronę i dziedziczy jej CSS. Na zabudowytarasu.pl (Elementor) globalny styl przycisków rozjechał podpowiedzi: WERSALIKI, własna rodzina pisma, duży padding i szerokość na całą linię — guziki wyszły poza dymek na pół ekranu. Dlatego każdy przycisk i pole widgetu dostaje jawny reset. Selektory są celowo wąskie (tylko wnętrze widgetu), więc nic nie wycieka na stronę. --------------------------------------------------------------- */ #pixelis-bot-intro, #pixelis-bot-chat-container, #pixelis-bot-open-icon, #pixelis-bot-intro *, #pixelis-bot-chat-container *, #pixelis-bot-open-icon * { box-sizing: border-box; } /* Padding zerujemy PUNKTOWO, selektorem po ID, a nie w bloku zbiorczym. Blok zbiorczy ma wagę selektora ID i przykryłby własne style podpowiedzi, które padding potrzebują. Tu rozmiar guzika ma dawać wyłącznie width/height: motyw wstrzykuje "padding: 15px 40px", co w kółku 44 px wypycha ikonę poza box — zamiast przycisku wysyłania zostawała pusta niebieska elipsa, a mikrofon znikał zupełnie. */ #pixelis-bot-open-icon, #pixelis-bot-chat-send, #pixelis-bot-mic, #pixelis-bot-minimize-btn, #pixelis-bot-anim-toggle, #pixelis-bot-intro-close { /* '!important', bo na zabudowytarasu.pl regułą był zwykły 'button{padding:15px 40px}' z zestawu Elementora, ale inne motywy stawiają tu '!important' i wtedy sam selektor po ID nie wystarczy. To nasze własne elementy, więc nic cudzego nie psujemy. */ padding: 0 !important; } #pixelis-bot-intro button, #pixelis-bot-chat-container button, #pixelis-bot-chat-container input { text-shadow: none; box-shadow: none; min-width: 0; min-height: 0; max-width: 100%; margin: 0; text-align: left; text-decoration: none; transform: none; /* Te trzy z '!important' nie z lenistwa: motywy (Elementor, Divi, WooCommerce) ustawiają je globalnie z '!important', a bez nadpisania podpowiedzi wychodzą WERSALIKAMI w cudzym kroju pisma i rozjeżdżają dymek. Zakres to wnętrze widgetu, więc na stronę nic z tego nie wycieka. */ font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; } /* --------------------------------------------------------------- 0b. Układ i pozycja Wartości przychodzą ze zmiennych, które wtyczka drukuje w . Reguły siedzą TUTAJ, bo tamten blok drukuje się po arkuszach i gdyby zawierał gotowy układ, wygrywałby z każdym @media poniżej — widget nie dałby się ułożyć inaczej na telefonie. --------------------------------------------------------------- */ #pixelis-bot-open-icon, #pixelis-bot-chat-container, #pixelis-bot-intro { left: var(--pixelis-bot-left, auto); right: var(--pixelis-bot-right, 20px); } #pixelis-bot-open-icon, #pixelis-bot-chat-container { bottom: var(--pixelis-bot-bottom, 20px); } #pixelis-bot-intro { bottom: var(--pixelis-bot-intro-bottom, 98px); } #pixelis-bot-chat-container, #pixelis-bot-intro { transform-origin: bottom var(--pixelis-bot-origin, right); } /* Tablet i telefon: strona zwykle przestawia tu własne pływające ikony, więc widget dostaje osobne odsunięcia. */ @media (max-width: 1024px) { #pixelis-bot-open-icon, #pixelis-bot-chat-container, #pixelis-bot-intro { left: var(--pixelis-bot-left-m, auto); right: var(--pixelis-bot-right-m, 20px); } #pixelis-bot-open-icon, #pixelis-bot-chat-container { bottom: var(--pixelis-bot-bottom-m, 20px); } #pixelis-bot-intro { bottom: var(--pixelis-bot-intro-bottom-m, 98px); } } /* --------------------------------------------------------------- 1. Awatar --------------------------------------------------------------- */ .pixelis-bot-avatar { display: block; line-height: 0; flex-shrink: 0; } .pixelis-bot-mascot { display: block; width: 100%; height: 100%; } .pixelis-bot-mascot--image { object-fit: cover; border-radius: 50%; } /* W przycisku i nagłówku awatar siedzi w kółku — sylwetka jest przycięta viewBoxem do popiersia, więc nie trzeba jej dodatkowo skalować. Wypełnia cały przycisk. To ten przycina sylwetkę do kółka — sam przycisk musi mieć overflow: visible, żeby zmieścił animowany pierścień. */ .pixelis-bot-avatar--launcher { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--pixelis-bot-mascot-bg, rgba(255, 255, 255, .92)); } /* Zdjęcie zamiast rysunku. Rysunek jest sylwetką do pasa i potrzebuje pionowego kadru; zdjęcie to portret w kole, więc pudełko musi być kwadratem — inaczej okrągłe przycięcie robi z twarzy elipsę. */ .pixelis-bot-avatar--intro.has-photo { width: 88px; height: 88px; margin-top: 0; margin-inline-start: 0; align-self: center; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } .pixelis-bot-avatar--header { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .9); margin-right: 10px; } /* Konsultant wystaje ponad górną krawędź dymku — stoi przy nim, a nie siedzi w środku. Dymek nie ma overflow:hidden, więc nic go nie przycina. */ .pixelis-bot-avatar--intro { width: 84px; height: 106px; align-self: flex-end; margin-top: -24px; margin-inline-start: -4px; } /* --------------------------------------------------------------- 2. Dymek powitalny ("zaczepka") --------------------------------------------------------------- */ #pixelis-bot-intro { position: fixed; z-index: 9998; /* pod oknem czatu, nad treścią strony */ display: flex; align-items: flex-end; gap: 10px; width: 340px; max-width: calc(100vw - 40px); padding: 14px 16px; background: var(--pixelis-bot-bg-color, #fff); border: 1px solid var(--pixelis-bot-border-color, #e0e0e0); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--pixelis-bot-text-color, #333); } #pixelis-bot-intro[hidden] { display: none; } #pixelis-bot-intro-bubble { flex: 1; cursor: pointer; min-width: 0; } #pixelis-bot-intro-bubble:focus-visible { outline: 3px solid var(--pixelis-bot-primary-color); outline-offset: 4px; border-radius: 8px; } #pixelis-bot-intro-text { margin: 0 0 8px; font-size: 14px; line-height: 1.5; } #pixelis-bot-intro-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-width: 0; /* bez tego długa podpowiedź rozpycha dymek zamiast się zawinąć */ } #pixelis-bot-intro-chips .pixelis-bot-chip { /* 'width: auto' i 'flex: 0 1 auto' jawnie — motyw potrafi dać przyciskom szerokość 100%, a wtedy każda podpowiedź zajmuje osobną, pełną linię. */ display: inline-block; width: auto; flex: 0 1 auto; border: 1px solid var(--pixelis-bot-primary-color); background: transparent; color: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.35; padding: 6px 11px; border-radius: 14px; white-space: normal; cursor: pointer; transition: background-color .18s, color .18s; } #pixelis-bot-intro-chips .pixelis-bot-chip:hover, #pixelis-bot-intro-chips .pixelis-bot-chip:focus-visible { background: var(--pixelis-bot-primary-color); color: #fff; } .pixelis-bot-intro-cta { display: inline-block; font-size: 13px; font-weight: 600; color: var(--pixelis-bot-primary-color); } #pixelis-bot-intro-close { position: absolute; top: -9px; /* Krzyżyk po stronie przeciwnej do krawędzi ekranu, żeby nie wychodził poza widok. */ inset-inline-end: -9px; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pixelis-bot-border-color, #e0e0e0); border-radius: 50%; background: #fff; color: #6b7280; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } #pixelis-bot-intro-close:hover { color: #111827; } /* --------------------------------------------------------------- Telefon Okno 370 px w rogu ekranu telefonu to ciasny prostokąt, w którym nie da się czytać dłuższej odpowiedzi ani wygodnie pisać. Na wąskich ekranach czat zajmuje więc prawie cały ekran, tak jak każdy komunikator. --------------------------------------------------------------- */ @media (max-width: 600px) { #pixelis-bot-chat-container { left: 8px; right: 8px; top: 10px; bottom: 10px; width: auto; max-width: none; height: auto; max-height: none; border-radius: 14px; } /* * 16 px to nie kwestia gustu: przy mniejszej czcionce Safari na iOS * SAM przybliża stronę w chwili kliknięcia w pole i użytkownik zostaje * z rozjechanym układem, z którego nie umie wyjść. */ #pixelis-bot-chat-input { font-size: 16px; } #pixelis-bot-intro { left: 12px; right: 12px; width: auto; max-width: none; } /* Sylwetka się kurczy, żeby zostało miejsce na tekst. */ .pixelis-bot-avatar--intro { width: 60px; height: 76px; margin-top: -14px; } .pixelis-bot-avatar--intro.has-photo { width: 64px; height: 64px; } } /* --------------------------------------------------------------- 3. Nagłówek czatu: awatar + przyciski --------------------------------------------------------------- */ #pixelis-bot-header-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } #pixelis-bot-anim-toggle { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; display: flex; align-items: center; opacity: .7; transition: opacity .2s; } #pixelis-bot-anim-toggle:hover, #pixelis-bot-anim-toggle[aria-pressed="true"] { opacity: 1; } /* Animacje wyłączone = przekreślony zegar, żeby stan było widać bez najeżdżania myszą. */ #pixelis-bot-anim-toggle[aria-pressed="true"] svg { opacity: .55; } /* --------------------------------------------------------------- 3a. Kropka z licznikiem Jedyny sygnał, który nie znika sam. Dymek pokazuje się i chowa, a ta kropka zostaje na przycisku przez całą wizytę, dopóki ktoś nie otworzy rozmowy — i przeżywa przejście na inną podstronę. --------------------------------------------------------------- */ #pixelis-bot-unread { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 11px; border: 2px solid #fff; background: #e11d48; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; z-index: 2; } #pixelis-bot-unread[hidden] { display: none; } @keyframes pixelis-bot-badge-in { 0% { transform: scale(0); } 65% { transform: scale(1.35); } 100% { transform: scale(1); } } .pixelis-bot-anim #pixelis-bot-unread.is-new { animation: pixelis-bot-badge-in .45s cubic-bezier(.2, .85, .3, 1.4); } /* --------------------------------------------------------------- 3b. Informacja, że rozmówcą jest program Przy awatarze ze zdjęciem człowieka to nie ozdoba, tylko uczciwość: odwiedzający ma prawo wiedzieć, że pisze do bota. --------------------------------------------------------------- */ .pixelis-bot-badge { margin-inline-start: 8px; padding: 2px 7px; border-radius: 9px; background: rgba(255, 255, 255, .25); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; line-height: 1.5; flex-shrink: 0; } #pixelis-bot-ai-note { margin: 0; padding: 7px 15px; background: rgba(0, 0, 0, .03); border-bottom: 1px solid var(--pixelis-bot-border-color, #e0e0e0); color: #6b7280; font-size: 11.5px; line-height: 1.4; flex-shrink: 0; } .pixelis-bot-intro-note { margin: 8px 0 0; color: #8a9099; font-size: 11px; line-height: 1.4; } /* --------------------------------------------------------------- 4. Mikrofon i pasek stanu nagrywania --------------------------------------------------------------- */ #pixelis-bot-mic { width: 42px; height: 42px; flex-shrink: 0; margin-right: 4px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: #6b7280; cursor: pointer; transition: background-color .2s, color .2s; } #pixelis-bot-mic[hidden] { display: none; } #pixelis-bot-mic:hover:not(:disabled) { background: rgba(0, 0, 0, .06); color: var(--pixelis-bot-primary-color); } #pixelis-bot-mic:focus-visible { outline: 3px solid var(--pixelis-bot-primary-color); outline-offset: 2px; } #pixelis-bot-mic:disabled { opacity: .45; cursor: default; } #pixelis-bot-mic.is-listening { background: #e11d48; color: #fff; } #pixelis-bot-voice-status { padding: 6px 15px; font-size: 12.5px; color: #6b7280; border-top: 1px solid var(--pixelis-bot-border-color, #e0e0e0); display: flex; align-items: center; gap: 7px; } #pixelis-bot-voice-status[hidden] { display: none; } #pixelis-bot-voice-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e11d48; flex-shrink: 0; } /* --------------------------------------------------------------- 5. Animacje Wszystkie siedzą za klasą .pixelis-bot-anim na . Klasę zdejmuje przełącznik w nagłówku czatu (wybór zapamiętany w localStorage), ustawienie w panelu oraz systemowe "ogranicz ruch". --------------------------------------------------------------- */ @keyframes pixelis-bot-intro-in { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 60% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pixelis-bot-intro-out { to { opacity: 0; transform: translateY(10px) scale(.94); } } /* Konsultant wyskakuje zza krawędzi dymku: z dołu, z przeskalowaniem i lekkim przestrzeleniem. Bez tego pojawiał się „po prostu" i nikt go nie zauważał. */ @keyframes pixelis-bot-pop { 0% { opacity: 0; transform: translateY(42px) scale(.45); } 55% { opacity: 1; transform: translateY(-7px) scale(1.09); } 78% { transform: translateY(3px) scale(.97); } 100% { transform: translateY(0) scale(1); } } /* Podskok przycisku z twarzą — pierwszy ruch całej sekwencji. */ @keyframes pixelis-bot-launcher-pop { 0% { opacity: 0; transform: scale(.45); } 60% { opacity: 1; transform: scale(1.14); } 80% { transform: scale(.96); } 100% { transform: scale(1); } } /* Trącenie dla tych, którzy dymku nie zobaczą. */ @keyframes pixelis-bot-nudge { 0%, 100% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-8px) rotate(-5deg); } 26% { transform: translateY(0) rotate(4deg); } 40% { transform: translateY(-4px) rotate(-3deg); } 55% { transform: translateY(0) rotate(0); } } @keyframes pixelis-bot-fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes pixelis-bot-wave { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-26deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-22deg); } 80% { transform: rotate(4deg); } } @keyframes pixelis-bot-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } } @keyframes pixelis-bot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } @keyframes pixelis-bot-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.8); } } @keyframes pixelis-bot-ring { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes pixelis-bot-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .5); } 50% { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); } } /* Pojawienie się dymku. Bez 'both' — inaczej dymek trzymałby pierwszą klatkę (przezroczystą) tak długo, jak długo wisi na nim klasa. Gdy animacja nie ruszy albo sprzątanie klasy się spóźni, element po prostu stoi w swoim naturalnym, widocznym stanie. */ .pixelis-bot-anim #pixelis-bot-intro.is-entering { animation: pixelis-bot-intro-in .45s cubic-bezier(.2, .9, .3, 1.2); } /* Tu 'forwards' jest potrzebne: dymek ma zostać zgaszony do chwili, w której JS ustawi mu atrybut hidden. */ .pixelis-bot-anim #pixelis-bot-intro.is-leaving { animation: pixelis-bot-intro-out .25s ease-in forwards; } .pixelis-bot-anim #pixelis-bot-open-icon.is-popping { animation: pixelis-bot-launcher-pop .55s cubic-bezier(.2, .85, .3, 1.35); } .pixelis-bot-anim #pixelis-bot-open-icon.is-nudging { animation: pixelis-bot-nudge 1.2s ease-in-out; } /* Treść wchodzi na miejsce kropek "pisze". */ .pixelis-bot-anim #pixelis-bot-intro-content.is-revealing { animation: pixelis-bot-fade-up .32s ease-out; } #pixelis-bot-intro-typing[hidden], #pixelis-bot-intro-content[hidden] { display: none; } /* Kropki w dymku powitalnym są nieco większe niż te w rozmowie — mają być widoczne z drugiego końca ekranu. */ #pixelis-bot-intro-typing { padding: 6px 2px; } #pixelis-bot-intro-typing span { width: 8px; height: 8px; } .pixelis-bot-anim #pixelis-bot-intro.is-entering .pixelis-bot-avatar--intro { transform-origin: bottom center; animation: pixelis-bot-pop .62s cubic-bezier(.2, .85, .3, 1.15); } /* Sylwetka: oddech, mruganie, machanie na powitanie */ .pixelis-bot-anim .pixelis-bot-mascot-body { animation: pixelis-bot-bob 3.6s ease-in-out infinite; } /* * BŁĄD, KTÓRY TU SIEDZIAŁ: samo "transform-origin: center" w SVG liczy się * względem układu współrzędnych CAŁEGO rysunku, a nie środka elementu. * Skalowanie powiek w pionie zbiegało więc do środka obrazka i oczy * odjeżdżały poza twarz. "transform-box: fill-box" przestawia punkt * odniesienia na własne pole elementu — dopiero wtedy oko mruga w miejscu. */ .pixelis-bot-anim .pixelis-bot-mascot-eye { transform-box: fill-box; transform-origin: center; animation: pixelis-bot-blink 5s infinite; } .pixelis-bot-anim .pixelis-bot-mascot-arm { /* Punkt obrotu w barku, nie w środku obrazka — inaczej ręka "odpada". Musi zgadzać się z początkiem ścieżki ramienia w Pixelis_Bot_Mascot::arm(). */ transform-origin: 106px 110px; } .pixelis-bot-anim .pixelis-bot-avatar--intro .pixelis-bot-mascot-arm, .pixelis-bot-anim #pixelis-bot-open-icon.is-calling .pixelis-bot-mascot-arm { animation: pixelis-bot-wave 1.8s ease-in-out 2; } /* Usta ruszają się, kiedy bot "pisze" odpowiedź */ /* To samo dotyczy ust: bez fill-box "mówienie" przesuwało je po całej twarzy. */ .pixelis-bot-anim .is-talking .pixelis-bot-mascot-mouth { transform-box: fill-box; transform-origin: center; animation: pixelis-bot-talk .45s ease-in-out infinite; } /* Pierścień przy przycisku — sygnał "tu jest czat", zanim ktokolwiek kliknie */ #pixelis-bot-open-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pixelis-bot-primary-color); opacity: 0; pointer-events: none; } .pixelis-bot-anim #pixelis-bot-open-icon.is-calling::after { animation: pixelis-bot-ring 2.4s ease-out infinite; } .pixelis-bot-anim #pixelis-bot-mic.is-listening { animation: pixelis-bot-mic-pulse 1.4s ease-in-out infinite; } /* Ustawienie systemowe wygrywa z każdym ustawieniem wtyczki. */ @media (prefers-reduced-motion: reduce) { .pixelis-bot-anim #pixelis-bot-intro, .pixelis-bot-anim .pixelis-bot-mascot-body, .pixelis-bot-anim .pixelis-bot-mascot-eye, .pixelis-bot-anim .pixelis-bot-mascot-arm, .pixelis-bot-anim .pixelis-bot-mascot-mouth, .pixelis-bot-anim #pixelis-bot-open-icon::after, .pixelis-bot-anim #pixelis-bot-mic.is-listening, .pixelis-bot-anim #pixelis-bot-open-icon.is-popping, .pixelis-bot-anim #pixelis-bot-open-icon.is-nudging, .pixelis-bot-anim #pixelis-bot-intro-content.is-revealing, .pixelis-bot-anim #pixelis-bot-unread.is-new { animation: none !important; } }