/* ========================================================================= Czat na zywo - warstwa wygladu ========================================================================= Osobny arkusz z rozmyslem: widget nie dopisuje sie do nowa.css ani do premium-2026.css, zeby kilka osob moglo pracowac nad strona rownolegle. Jezyk wizualny jest ten sam co reszta stramapanels.com (nowa.css): - kolory z ksiegi znaku: --nieb #006EB6, --nieb-800 #013A6C, --granat #171B2B, --chlod #F3F5F7, --szary #6E7378, --tekst #2D2D2D, --linia #DFE4E9 plus niebieskie 50/100/200 do plakietek i akcentow, - Poppins w naglowkach, etykietach i przyciskach, Roboto w tresci, - ZERO zaokraglen (border-radius) tak jak w calym serwisie; okragle sa tylko kropka stanu i kropki "pisze", bo to znaki, nie kontenery, - pola i przyciski maja te same wysokosci, obramowania i stan focus co formularze w serwisie (.kt-pole, .btn w nowa.css). Zmienne czytamy z :root serwisu, ale kazda ma wartosc awaryjna, wiec arkusz jest samowystarczalny nawet gdyby nowa.css sie nie wczytal. DLACZEGO TEN PLIK MUSI ISC PO INNYCH ------------------------------------ material-precision.css (arkusz starej propozycji "morskiej") ma wlasna sekcje "Chat": ustawia #czat{--czat-granat:var(--mp-navy); --czat-niebieski:var(--mp-blue)} oraz #czat .czat-fab / .czat-head / .czat-panel na kolory morsko-kremowe (#157ca8, #102b34, #fbfaf7). Stad bral sie turkusowy dymek i kremowe tlo, ktorych nie ma w ksiedze znaku. Nie ruszamy tamtego pliku (jest wspolny). Zamiast tego: - livechat.css jest wpinany w livechat.html, czyli w BODY, wiec w kaskadzie stoi PO wszystkich arkuszach z i przy tej samej specyficznosci wygrywa, - kazda regula ma prefiks #czat (id + klasa = 1,1,0), czyli dokladnie tyle samo co selektory z material-precision.css, - nie uzywamy juz nazw --czat-granat/--czat-niebieski (tamten plik je podmienia); wlasne zmienne nazywaja sie --cz-*, wiec sa poza jego zasiegiem. Wysokosc banera zgody na ciasteczka: patrz --czat-dol nizej. ========================================================================= */ #czat{ --cz-nieb:var(--nieb,#006EB6); --cz-nieb-800:var(--nieb-800,#013A6C); --cz-n50:#E6F1F8; --cz-n100:#CCE2F0; --cz-n200:#99C5E2; --cz-granat:var(--granat,#171B2B); --cz-chlod:var(--chlod,#F3F5F7); --cz-szary:var(--szary,#6E7378); --cz-tekst:var(--tekst,#2D2D2D); --cz-linia:var(--linia,#DFE4E9); --cz-naglowki:Poppins,Arial,sans-serif; --cz-tresc:Roboto,Arial,sans-serif; --cz-ease:var(--ease,cubic-bezier(.2,.8,.2,1)); /* Odstep od dolu krawedzi. Baner zgody na ciasteczka (osobny plik) ustawia --strama-baner-wys na swoja wysokosc w px, a przycisk i okno same odsuwaja sie do gory. Domyslnie 0, wiec brak banera niczego nie psuje. */ --czat-dol:calc(24px + var(--strama-baner-wys, 0px)); --czat-bok:24px; position:fixed; inset:auto var(--czat-bok) var(--czat-dol) auto; z-index:800; /* nad naglowkiem (50), pod lightboxem (1000+) */ font-family:var(--cz-tresc); font-size:15px; line-height:1.55; color:var(--cz-tekst); } /* Atrybut hidden musi wygrac z display: flex/grid ustawionym nizej. Bez tego ukryty formularz albo ukryty watek i tak by sie rysowal. */ #czat [hidden]{display:none !important} /* tekst tylko dla czytnikow ekranu (etykiety pol, podpis przycisku) */ #czat .czat-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- znak marki ---------- Sygnet z logotypu (stos listew) z ogonkiem dymka. Kolor idzie za tekstem przycisku, wiec ten sam plik jest bialy na niebieskim i niebieski na bialym. */ #czat .czat-fab .czat-znak-svg, #czat .czat-znak .czat-znak-svg{display:block; width:34px; height:34px; flex:none} /* ---------- przycisk wywolania ---------- */ #czat .czat-fab{ display:grid; place-items:center; width:56px; height:56px; padding:0; background:var(--cz-nieb); color:#fff; border:1px solid var(--cz-nieb); border-radius:0; font:inherit; cursor:pointer; box-shadow:0 12px 30px rgba(1,58,108,.24); transition:background .18s var(--cz-ease), border-color .18s var(--cz-ease), box-shadow .18s var(--cz-ease); } #czat .czat-fab:hover{background:var(--cz-nieb-800); border-color:var(--cz-nieb-800); box-shadow:0 14px 34px rgba(1,58,108,.32)} /* Podwojny pierscien: bialy tuz przy krawedzi i granatowy na zewnatrz. Przycisk lezy na dowolnym tle strony (czesto na zdjeciu), wiec jeden kolor by nie wystarczyl - zawsze jeden z dwoch ma kontrast. */ #czat .czat-fab:focus-visible{ outline:2px solid #fff; outline-offset:-4px; box-shadow:0 12px 30px rgba(1,58,108,.24), 0 0 0 3px var(--cz-granat); } #czat .czat-fab-txt{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } #czat[data-stan="otwarty"] .czat-fab{opacity:0; pointer-events:none; transform:translateY(6px)} /* ---------- okno rozmowy ---------- Panel zostaje w ukladzie i chowa sie przez visibility/opacity, a nie przez display:none. Dzieki temu ZAMYKANIE tez jest animowane, bez ruszania skryptu (skrypt przelacza tylko data-stan, inert i aria-hidden - tak jak dotad). */ #czat .czat-panel{ position:absolute; right:0; bottom:0; /* Gest palcem zlozony na oknie czatu nie przewija strony pod spodem. Ta wlasnosc dziala tylko tam, gdzie jest co przewijac, wiec naglowek, pasek pola i plansze pilnuje dodatkowo livechat.js (sekcja "przewijanie nie przecieka na strone"). Jedno bez drugiego nie wystarcza. */ overscroll-behavior:contain; width:min(384px, calc(100vw - 2 * var(--czat-bok))); height:min(580px, calc(100vh - var(--czat-dol) - 110px)); display:flex; flex-direction:column; background:#fff; border:1px solid var(--cz-linia); box-shadow:0 24px 64px rgba(23,27,43,.18); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px); transition:opacity .2s var(--cz-ease), transform .2s var(--cz-ease), visibility 0s .2s; } #czat[data-stan="otwarty"] .czat-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .22s var(--cz-ease), transform .22s var(--cz-ease), visibility 0s; } /* ---------- naglowek okna ---------- Jedna wyrazna akcja zamykajaca (obwiedziony kwadrat X), "Zakoncz" jako drugorzedny napis bez ramki. Nadtytul "STRAMA PANELS" zniknal: to nasza wlasna strona, wiec powtarzanie marki tylko zabieralo miejsce tytulowi. */ #czat .czat-head{ flex:none; display:flex; align-items:center; gap:12px; padding:13px 12px 13px 16px; background:var(--cz-granat); color:#fff; } #czat .czat-znak{flex:none; display:grid; place-items:center; width:34px; height:34px; color:#fff} #czat .czat-head-txt{flex:1; min-width:0} #czat .czat-tytul{ display:block; font-family:var(--cz-naglowki); font-weight:500; font-size:16px; line-height:1.2; letter-spacing:-.005em; } #czat .czat-stan{ display:flex; align-items:center; gap:7px; margin-top:3px; font-size:12px; line-height:1.3; color:#A7B0BC; } #czat .czat-stan i{width:7px; height:7px; flex:none; background:#8A929E; border-radius:50%} #czat[data-online="1"] .czat-stan i{background:#3FBF71} #czat .czat-koniec{ flex:none; padding:6px 2px; background:none; border:0; border-radius:0; color:var(--cz-n200); font-family:var(--cz-naglowki); font-weight:500; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; border-bottom:1px solid transparent; transition:color .18s var(--cz-ease), border-color .18s var(--cz-ease); } #czat .czat-koniec:hover{color:#fff; border-bottom-color:rgba(255,255,255,.6)} #czat .czat-koniec:focus-visible{outline:2px solid #fff; outline-offset:2px} #czat .czat-koniec[disabled]{opacity:.5; cursor:default} #czat .czat-x{ flex:none; width:34px; height:34px; display:grid; place-items:center; background:transparent; border:1px solid rgba(255,255,255,.24); color:#fff; cursor:pointer; transition:background .18s var(--cz-ease), border-color .18s var(--cz-ease); } #czat .czat-x:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5)} #czat .czat-x:focus-visible{outline:2px solid #fff; outline-offset:2px} #czat .czat-x svg{width:14px; height:14px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round} /* ---------- dymki rozmowy ---------- */ #czat .czat-body{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; background:var(--cz-chlod); padding:18px 16px; display:flex; flex-direction:column; gap:12px; } #czat .czat-msg{ max-width:84%; padding:10px 13px 8px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } #czat .czat-msg.visitor{ align-self:flex-end; background:var(--cz-nieb); color:#fff; border:1px solid var(--cz-nieb); } #czat .czat-msg.operator{ align-self:flex-start; background:#fff; border:1px solid var(--cz-linia); } /* plakietka nadawcy: spokojna, w kroju serwisu (Poppins), bez czarnego bloku */ #czat .czat-nazwa{ display:flex; align-items:center; gap:6px; margin-bottom:5px; font-family:var(--cz-naglowki); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--cz-szary); } #czat .czat-ai{ padding:1px 5px; background:var(--cz-n50); border:1px solid var(--cz-n100); color:var(--cz-nieb); font-size:9.5px; letter-spacing:.1em; } #czat .czat-czas{ display:block; margin-top:5px; font-size:11px; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--cz-szary); } #czat .czat-msg.visitor .czat-czas{text-align:right; color:rgba(255,255,255,.88)} /* notatka systemowa (powitanie, informacja o przekazaniu) */ #czat .czat-nota{ margin:0; padding:11px 13px; align-self:stretch; background:#fff; border:1px solid var(--cz-linia); border-left:2px solid var(--cz-nieb); font-size:13.5px; line-height:1.5; color:var(--cz-szary); } /* "pisze..." */ #czat .czat-pisze{display:flex; gap:5px; align-items:center; padding:14px 13px} #czat .czat-pisze i{width:6px; height:6px; background:var(--cz-szary); border-radius:50%; animation:czat-kropka 1.1s infinite ease-in-out} #czat .czat-pisze i:nth-child(2){animation-delay:.15s} #czat .czat-pisze i:nth-child(3){animation-delay:.3s} @keyframes czat-kropka{0%,60%,100%{opacity:.28; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}} /* przycisk "porozmawiaj z czlowiekiem" - jak .btn--kontur w serwisie */ #czat .czat-czlowiek{ align-self:flex-start; margin-top:-4px; background:#fff; border:1px solid var(--cz-nieb); border-radius:0; color:var(--cz-nieb); font-family:var(--cz-naglowki); font-weight:500; font-size:12.5px; letter-spacing:0; padding:8px 14px; cursor:pointer; transition:background .18s var(--cz-ease), color .18s var(--cz-ease); } #czat .czat-czlowiek:hover{background:var(--cz-nieb); color:#fff} #czat .czat-czlowiek:focus-visible{outline:2px solid var(--cz-nieb); outline-offset:2px} #czat .czat-czlowiek[disabled]{opacity:.5; cursor:default} /* ---------- pole wpisywania ---------- Te same wysokosci, obramowanie i focus co .kt-pole na stronie Kontakt, przycisk wysylki w jezyku .btn (niebieski, ostre naroza, hover --nieb-800). */ #czat .czat-form{ flex:none; display:flex; align-items:flex-end; gap:8px; padding:12px; border-top:1px solid var(--cz-linia); background:#fff; } #czat .czat-form textarea{ flex:1; min-height:46px; max-height:120px; resize:none; margin:0; padding:11px 12px; border:1px solid var(--cz-linia); border-radius:0; background:#fff; font:400 15px/1.5 var(--cz-tresc); color:var(--cz-tekst); box-shadow:none; transition:border-color .18s var(--cz-ease); } #czat .czat-form textarea:hover{border-color:var(--cz-szary)} #czat .czat-form textarea:focus{outline:2px solid var(--cz-nieb); outline-offset:0; border-color:var(--cz-nieb)} #czat .czat-form textarea::placeholder{color:var(--cz-szary); opacity:.85} #czat .czat-slij{ flex:none; width:46px; height:46px; display:grid; place-items:center; background:var(--cz-nieb); border:1px solid var(--cz-nieb); border-radius:0; color:#fff; cursor:pointer; transition:background .18s var(--cz-ease), border-color .18s var(--cz-ease); } #czat .czat-slij:hover{background:var(--cz-nieb-800); border-color:var(--cz-nieb-800)} #czat .czat-slij:focus-visible{outline:2px solid var(--cz-granat); outline-offset:2px} #czat .czat-slij[disabled]{background:#9BA6B2; border-color:#9BA6B2; cursor:default} #czat .czat-slij svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} /* ---------- stan "nikogo nie ma" / zakonczono ---------- */ #czat .czat-info{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:26px 20px; background:var(--cz-chlod); } #czat .czat-info p{margin:0 0 14px; font-size:14.5px; color:var(--cz-tekst)} #czat .czat-info p.czat-info-lead{font-size:16px; line-height:1.5} /* Nadtytul w jezyku .etyk z nowa.css. Selektor MUSI byc trojczlonowy: samo "#czat .czat-eyebrow" (1,1,0) przegrywa z "#czat .czat-info p" (1,1,1) i nadtytul wychodzil szary, 14,5 px zamiast niebieskiego 12 px. */ #czat .czat-info p.czat-eyebrow{ margin:0 0 8px; font-family:var(--cz-naglowki); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cz-nieb); } #czat .czat-kontakt{display:grid; gap:8px; margin-top:18px} #czat .czat-kontakt a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; background:#fff; border:1px solid var(--cz-linia); font-family:var(--cz-naglowki); font-weight:500; font-size:14.5px; color:var(--cz-tekst); transition:border-color .18s var(--cz-ease), color .18s var(--cz-ease); } #czat .czat-kontakt a:hover{border-color:var(--cz-nieb); color:var(--cz-nieb)} #czat .czat-kontakt a:focus-visible{outline:2px solid var(--cz-nieb); outline-offset:2px} #czat .czat-kontakt a span{color:var(--cz-nieb)} /* ---------- formularz zastepczy w panelu ---------- */ /* Przycisk musi wygladac jak sasiadujacy odnosnik z telefonem - stad powtorzenie regul zamiast wspolnego selektora: .czat-kontakt a ma wlasny zestaw i nie chcemy go ruszac. */ #czat .czat-kontakt button{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:13px 15px; background:#fff; border:1px solid var(--cz-linia); border-radius:0; font-family:var(--cz-naglowki); font-weight:500; font-size:14.5px; text-align:left; color:var(--cz-tekst); cursor:pointer; transition:border-color .18s var(--cz-ease), color .18s var(--cz-ease); } #czat .czat-kontakt button:hover{border-color:var(--cz-nieb); color:var(--cz-nieb)} #czat .czat-kontakt button:focus-visible{outline:2px solid var(--cz-nieb); outline-offset:2px} #czat .czat-kontakt button span{color:var(--cz-nieb)} #czat .czat-mini{display:grid; gap:6px; margin-top:18px} #czat .czat-mini label{ font-family:var(--cz-naglowki); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--cz-szary); } #czat .czat-mini-opc{font-weight:400; letter-spacing:0; text-transform:none} #czat .czat-mini input, #czat .czat-mini textarea{ width:100%; margin:0; padding:11px 12px; background:#fff; border:1px solid var(--cz-linia); border-radius:0; font:400 15px/1.5 var(--cz-tresc); color:var(--cz-tekst); resize:vertical; transition:border-color .18s var(--cz-ease); } #czat .czat-mini input:hover, #czat .czat-mini textarea:hover{border-color:var(--cz-szary)} #czat .czat-mini input:focus, #czat .czat-mini textarea:focus{ outline:2px solid var(--cz-nieb); outline-offset:0; border-color:var(--cz-nieb); } #czat .czat-mini-slij{ margin-top:8px; justify-self:start; background:var(--cz-nieb); color:#fff; border:1px solid var(--cz-nieb); border-radius:0; font-family:var(--cz-naglowki); font-weight:500; font-size:14.5px; padding:13px 22px; cursor:pointer; transition:background .18s var(--cz-ease), border-color .18s var(--cz-ease); } #czat .czat-mini-slij:hover{background:var(--cz-nieb-800); border-color:var(--cz-nieb-800)} #czat .czat-mini-slij:focus-visible{outline:2px solid var(--cz-granat); outline-offset:2px} #czat .czat-mini-slij[disabled]{opacity:.55; cursor:default} #czat .czat-mini-blad{margin:2px 0 0; font-size:13px; color:#A32020} #czat .czat-nowa{ margin-top:18px; background:var(--cz-nieb); color:#fff; border:1px solid var(--cz-nieb); border-radius:0; font-family:var(--cz-naglowki); font-weight:500; font-size:14.5px; padding:13px 22px; cursor:pointer; transition:background .18s var(--cz-ease), border-color .18s var(--cz-ease); } #czat .czat-nowa:hover{background:var(--cz-nieb-800); border-color:var(--cz-nieb-800)} #czat .czat-nowa:focus-visible{outline:2px solid var(--cz-granat); outline-offset:2px} /* Po zakonczeniu rozmowy plansza pokazuje DWA przyciski naraz: "Zostaw wiadomosc" i "Zacznij nowa rozmowe" (skrypt steruje nimi niezaleznie). Dwa pelne niebieskie bloki jeden pod drugim nie mowia, ktory jest glowny. Gdy widoczny jest "Zacznij nowa rozmowe" - a to on jest wtedy naturalnym pierwszym krokiem - drugi schodzi do wariantu konturowego, jezykiem .btn--kontur z nowa.css. Gdy nikogo nie ma na czacie, "Zostaw wiadomosc" stoi sam i zostaje pelnym przyciskiem. Warunek jest czysto wizualny: nie ruszamy ani DOM, ani skryptu. */ #czat .czat-info:has(#czatNowa:not([hidden])) #czatOtworzMini{ background:transparent; color:var(--cz-granat); border-color:var(--cz-szary); } #czat .czat-info:has(#czatNowa:not([hidden])) #czatOtworzMini:hover{ background:var(--cz-granat); color:#fff; border-color:var(--cz-granat); } #czat .czat-blad{ flex:none; margin:0; padding:10px 16px; background:#FBECEC; border-top:1px solid #EFC9C9; color:#A32020; font-size:13px; } /* ---------- telefon ---------- Okno nie zajmuje calego ekranu: zostaje pasek strony u gory, wiec widac, ze rozmowa jest NA stronie. KLAWIATURA EKRANOWA. Same dvh nie wystarczaja: w Safari na iOS wysuniecie klawiatury NIE zmienia ani 100dvh, ani wysokosci okna dokumentu - kurczy sie tylko widoczny obszar (visualViewport), a element position:fixed dalej trzyma sie dolu ukladu, czyli chowa sie pod klawiatura. Skutek byl taki, ze naglowek okna wyjezdzal ponad ekran, a obok okna przeswitywala tresc strony. Dlatego livechat.js mierzy widoczny obszar i podaje dwie liczby: --czat-klaw - ile pikseli zaslania klawiatura u dolu ukladu, --czat-gora - o ile widoczny obszar jest przesuniety w dol. Okno odsuwa sie o te wartosci i zawsze miesci sie w tym, co widac. Gdy klawiatury nie ma (albo przegladarka nie zna visualViewport), obie zmienne sa zerami i zachowanie jest dokladnie takie jak wczesniej. */ @media (max-width:640px){ #czat{--czat-bok:14px; --czat-dol:calc(14px + var(--strama-baner-wys, 0px))} #czat .czat-fab{width:52px; height:52px} #czat .czat-fab .czat-znak-svg{width:32px; height:32px} #czat .czat-panel{ position:fixed; right:var(--czat-bok); left:var(--czat-bok); bottom:calc(var(--czat-dol) + var(--czat-klaw, 0px)); width:auto; height:min(74vh, calc(100vh - var(--czat-dol) - var(--czat-klaw, 0px) - var(--czat-gora, 0px) - 72px)); height:min(74dvh, calc(100dvh - var(--czat-dol) - var(--czat-klaw, 0px) - var(--czat-gora, 0px) - 72px)); min-height:220px; } #czat .czat-head{padding:12px 10px 12px 14px} #czat .czat-znak, #czat .czat-znak .czat-znak-svg{width:30px; height:30px} #czat .czat-tytul{font-size:15.5px} #czat .czat-body{padding:15px 13px} #czat .czat-msg{max-width:88%} #czat .czat-form{padding:10px} #czat .czat-info{padding:22px 16px} } /* ---------- spokojniej dla tych, ktorzy o to prosza ---------- */ @media (prefers-reduced-motion:reduce){ #czat *,#czat *::before,#czat *::after{animation:none !important; transition:none !important} #czat .czat-panel{transform:none} } /* ---------- pola wpisywania na telefonie i tablecie ---------- Safari na iOS sam PRZYBLIZA strone, gdy uzytkownik wejdzie w pole formularza o rozmiarze czcionki mniejszym niz 16 px, i po wyjsciu z pola juz jej NIE oddala. Zostawal trwale powiekszony widok: okno czatu wystawalo za prawa krawedz, X byl uciety, naglowek i filtry rosly. Dlatego na waskich ekranach kazde pole, w ktore da sie kliknac, ma dokladnie 16 px. Na monitorze (powyzej 1024 px) zostaje 15 px, czyli wyglad bez zmian. */ @media (max-width:1024px){ #czat .czat-form textarea{font-size:16px} #czat .czat-mini input, #czat .czat-mini textarea{font-size:16px} }