/*! * SmartOps Chat - style widgetu (bez zaleznosci od zadnej zewnetrznej * biblioteki czatu). Kolory brandu ustawiane sa przez JS jako zmienne CSS * (--so-chat-primary / --so-chat-primary-dark / --so-chat-bright), wiec ten * plik jest identyczny dla kazdej marki - roznice ustawia konfiguracja. */ .so-chat-root { --so-chat-primary: #0f62d0; --so-chat-primary-dark: #123a91; --so-chat-bright: #2f7ff0; --so-chat-z: 9000; /* UWAGA: celowo NIE definiujemy tu --so-chat-cookie-h (nawet jako 0px). JS ustawia te zmienna na document.documentElement (), a gdyby .so-chat-root mial wlasna, zawsze-obecna deklaracje tej zmiennej, to ONA wygralaby przy dziedziczeniu (blizszy przodek w drzewie DOM wygrywa z odleglejszym, niezaleznie od specyficznosci selektora) - i wartosc z JS nigdy by sie nie przebila do .so-chat-toggle/.so-chat-window. Realny blad zlapany na produkcji: przycisk czatu byl niewidoczny, dopoki uzytkownik nie zaakceptowal/odrzucil bannera cookies - bo bez tego przesuniecia banner (z wyzszym z-index) po prostu lezal na przycisku. Fallback "120px" w calc() nizej wystarcza, gdy JS nigdy nie ustawi tej zmiennej (bo cookieBanner nie jest skonfigurowany) - i tak dziala tylko w obrebie klasy .so-chat-cookie-banner-visible na . */ --so-chat-grad: linear-gradient(135deg, var(--so-chat-primary) 0%, var(--so-chat-primary-dark) 100%); --so-chat-grad-bright: linear-gradient(135deg, var(--so-chat-bright) 0%, var(--so-chat-primary) 100%); --so-chat-ink: #14172c; --so-chat-ink-soft: #4a4f66; --so-chat-line: #e3e8f2; --so-chat-canvas: #f7f9fc; --so-chat-surface: #ffffff; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color-scheme: light; /* Bez tego kazdy element widgetu, ktory sam nie deklaruje wlasnego "color" (np. .so-chat-textarea), dziedziczy kolor tekstu z HOSTUJACEJ strony, nie z tokenow widgetu. Realny bug zglaszany na produkcji: na smartopsit.co.uk (ciemny motyw, jasny tekst na stronie) wpisywany w polu tekst byl niemal niewidoczny - jasny tekst na jasnym tle pola (--so-chat-canvas). .so-chat-root jest bezposrednim dzieckiem , wiec ta jedna deklaracja przecina dziedziczenie z hosta dla calego widgetu, niezaleznie od tego, jak ciemna/jasna jest strona, na ktorej widget jest osadzony. */ color: var(--so-chat-ink); } .so-chat-root, .so-chat-root * { box-sizing: border-box; } /* Ogolna siatka bezpieczenstwa: elementy z atrybutem [hidden] MUSZA znikac, nawet jesli maja gdzie indziej wlasna regule "display: flex" o takiej samej specyficznosci (ktora normalnie wygralaby z domyslnym [hidden] przegladarki - to realny blad zlapany testem: ukryte okno czatu nadal zajmowalo miejsce i przechwytywalo kliknieca). */ .so-chat-root [hidden] { display: none !important; } /* --- Przycisk otwierajacy ------------------------------------------------ */ .so-chat-toggle { position: fixed; right: var(--so-chat-offset-right, 20px); bottom: var(--so-chat-offset-bottom, 20px); width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--so-chat-grad); box-shadow: 0 4px 12px rgba(15, 98, 208, .28), 0 12px 32px rgba(10, 47, 120, .22); z-index: var(--so-chat-z); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, bottom .25s ease; animation: so-chat-breathe 4s ease-in-out infinite; } .so-chat-toggle:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 16px rgba(15,98,208,.34), 0 18px 44px rgba(10,47,120,.28); animation-play-state: paused; } .so-chat-toggle:active { transform: translateY(-1px) scale(1.02); } @keyframes so-chat-breathe { 0%, 100% { box-shadow: 0 4px 12px rgba(15,98,208,.28), 0 12px 32px rgba(10,47,120,.22), 0 0 0 0 rgba(15,98,208,.34); } 50% { box-shadow: 0 4px 12px rgba(15,98,208,.28), 0 12px 32px rgba(10,47,120,.22), 0 0 0 14px rgba(15,98,208,0); } } body.so-chat-cookie-banner-visible .so-chat-toggle, body.so-chat-cookie-banner-visible .so-chat-window { bottom: calc(var(--so-chat-cookie-h, 120px) + var(--so-chat-offset-bottom, 20px)); } /* --- Okno czatu ------------------------------------------------------------ */ .so-chat-window { position: fixed; right: var(--so-chat-offset-right, 20px); /* 72px = odstep miedzy dolem okna a dolem przycisku (60px wysokosci przycisku + ok. 12px prześwitu), doliczony do skonfigurowanego offsetu - dzieki temu okno zawsze "startuje" tuz nad przyciskiem, niezaleznie od tego, jak bardzo przycisk jest odsuniety od krawedzi. Sam offset (--so-chat-offset-bottom/-right, opcja "offset" w configu) zostal dodany, zeby dalo sie rozsunac widget z elementami strony, ktore juz siedza w tym samym rogu, np. wlasnym pływającym przyciskiem CTA. */ bottom: calc(var(--so-chat-offset-bottom, 20px) + 72px); /* Sztywne 400px nie miesci sie w waskim, ale wciaz "desktopowym" oknie (np. przegladarka zwezona do ~450px, tablet w trybie split-view) - ponizej 480px i tak wchodzi pelnoekranowy tryb mobile, wiec to lata "posrodku". */ width: min(400px, calc(100vw - 40px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); height: 620px; background: var(--so-chat-canvas); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(16,19,48,.06), 0 12px 28px rgba(16,19,48,.10), 0 32px 64px rgba(16,19,48,.14); border: 1px solid rgba(255,255,255,.6); display: flex; flex-direction: column; z-index: var(--so-chat-z); transition: bottom .25s ease; } body.so-chat-cookie-banner-visible .so-chat-window { max-height: calc(100vh - var(--so-chat-cookie-h, 120px) - 40px); max-height: calc(100dvh - var(--so-chat-cookie-h, 120px) - 40px); } /* --- Naglowek -------------------------------------------------------------- */ .so-chat-header { background: var(--so-chat-grad); color: #fff; padding: 18px 20px; display: flex; align-items: center; gap: 12px; position: relative; flex: 0 0 auto; } .so-chat-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%); pointer-events: none; } .so-chat-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255,255,255,.92); background-size: 22px; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 8px rgba(10,47,120,.28); } .so-chat-heading { flex: 1 1 auto; min-width: 0; } .so-chat-heading h1 { font-size: 15.5px; font-weight: 650; margin: 0; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .so-chat-status { font-size: 12.5px; margin: 2px 0 0; opacity: .85; display: inline-flex; align-items: center; gap: 6px; } .so-chat-close { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: background .16s ease; } .so-chat-close:hover { background: rgba(255,255,255,.28); } .so-chat-status-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #46e08a; box-shadow: 0 0 0 0 rgba(70,224,138,.7); animation: so-chat-pulse 2.4s ease-out infinite; } @keyframes so-chat-pulse { 0% { box-shadow: 0 0 0 0 rgba(70,224,138,.7); } 70% { box-shadow: 0 0 0 7px rgba(70,224,138,0); } 100% { box-shadow: 0 0 0 0 rgba(70,224,138,0); } } /* --- Cialo / ekran powitalny ------------------------------------------------ */ .so-chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--so-chat-canvas); } .so-chat-getstarted { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } .so-chat-btn-primary { background: var(--so-chat-grad); color: #fff; border: none; border-radius: 12px; padding: 12px 22px; font: inherit; font-weight: 600; letter-spacing: .01em; cursor: pointer; box-shadow: 0 4px 14px rgba(15,98,208,.3); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; } .so-chat-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,98,208,.36); } /* --- Lista wiadomosci -------------------------------------------------------- */ .so-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; } .so-chat-messages::-webkit-scrollbar { width: 8px; } .so-chat-messages::-webkit-scrollbar-thumb { background: #cfd6e6; border-radius: 99px; border: 2px solid var(--so-chat-canvas); } .so-chat-messages::-webkit-scrollbar-thumb:hover { background: #b6c0d6; } .so-chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; line-height: 1.55; font-size: 14.5px; box-shadow: 0 1px 2px rgba(16,19,48,.06), 0 4px 12px rgba(16,19,48,.05); animation: so-chat-msg-in .32s cubic-bezier(.22, 1, .36, 1) both; word-wrap: break-word; } .so-chat-msg p { margin: 0 0 8px; } .so-chat-msg p:last-child { margin-bottom: 0; } @keyframes so-chat-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .so-chat-msg-bot { align-self: flex-start; background: var(--so-chat-surface); color: var(--so-chat-ink); border: 1px solid var(--so-chat-line); border-radius: 16px 16px 16px 5px; } .so-chat-msg-bot a { color: var(--so-chat-primary); text-underline-offset: 2px; } .so-chat-msg-user { align-self: flex-end; background: var(--so-chat-grad-bright); color: #fff; border: none; border-radius: 16px 16px 5px 16px; box-shadow: 0 2px 10px rgba(15,98,208,.26); } .so-chat-msg-user a { color: #fff; } .so-chat-typing { display: flex; gap: 4px; align-items: center; padding: 14px; } .so-chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--so-chat-primary); opacity: .55; animation: so-chat-typing-bounce 1s infinite ease-in-out; } .so-chat-typing span:nth-child(2) { animation-delay: .15s; } .so-chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes so-chat-typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } } /* --- Chipy szybkich odpowiedzi ----------------------------------------------- */ .so-chat-chips { display: flex; flex-wrap: nowrap; gap: 7px; padding: 10px 14px; background: var(--so-chat-surface); border-top: 1px solid var(--so-chat-line); overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; } .so-chat-chips::-webkit-scrollbar { display: none; } .so-chat-chip { flex: 0 0 auto; font: inherit; font-size: 12.5px; line-height: 1.2; padding: 8px 13px; border-radius: 99px; border: 1px solid #cfdcf5; background: #f2f7ff; color: var(--so-chat-primary); cursor: pointer; white-space: nowrap; transition: background .16s ease, border-color .16s ease, transform .16s ease; } .so-chat-chip:hover { background: #e4eeff; border-color: var(--so-chat-primary); transform: translateY(-1px); } /* --- Pole wprowadzania -------------------------------------------------------- */ .so-chat-inputbar { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; background: var(--so-chat-surface); border-top: 1px solid var(--so-chat-line); } .so-chat-textarea { flex: 1 1 auto; resize: none; border-radius: 14px; border: 1px solid var(--so-chat-line); background: var(--so-chat-canvas); /* Realny bug zgloszony na produkcji: wpisywany tekst byl "prawie niewidoczny". Przyczyna: strony budowane w Tailwind (jak smartopsit.co.uk) ladujа Preflight, ktory ustawia "textarea, input, button, select { color: inherit; ... }" - to jawna regula w arkuszu strony, wiec pole tekstowe naszego widgetu zaczyna dziedziczyc kolor tekstu z HOSTA, a nie z naszych tokenow. Na ciemnej stronie (jasny tekst na ciemnym tle) to jasny tekst na naszym jasnym tle pola (--so-chat-canvas) - stad niemal niewidoczny. Bez Tailwinda przegladarka i tak dalaby polu swoj wlasny domyslny kolor (nie dziedziczony), wiec ten sam brak jawnego "color" tutaj bywal "znosny" przypadkiem, w zaleznosci od hosta - nie mozna na to liczyc. Ta jedna linia wygrywa w obu sytuacjach (specyficznosc selektora klasy jest wyzsza niz selektor typu w regule Tailwinda, a jako regula autorska wygrywa tez z jakimkolwiek UA-domyslem przegladarki). Zweryfikowane Playwrightem z symulacja reguly Tailwind Preflight na stronie hosta. */ color: var(--so-chat-ink); font: inherit; font-size: 14.5px; padding: 12px 14px; max-height: 120px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .so-chat-textarea:focus { outline: none; background: var(--so-chat-surface); border-color: var(--so-chat-primary); box-shadow: 0 0 0 3px rgba(15,98,208,.16); } .so-chat-textarea::placeholder { color: var(--so-chat-ink-soft); opacity: .75; } .so-chat-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--so-chat-grad-bright); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(15,98,208,.32); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, opacity .2s ease; } .so-chat-send:hover:not(:disabled) { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 18px rgba(15,98,208,.4); } .so-chat-send:disabled { opacity: .38; box-shadow: none; cursor: default; } /* --- Stopka ------------------------------------------------------------------- */ .so-chat-footer { flex: 0 0 auto; padding: 8px 16px 10px; font-size: 11.5px; color: #8b93a8; background: var(--so-chat-surface); text-align: center; } .so-chat-footer:empty { display: none; } /* --- Mobile: pelny ekran -------------------------------------------------- */ @media (max-width: 480px) { .so-chat-window { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; right: 0; bottom: 0; left: 0; } body.so-chat-cookie-banner-visible .so-chat-window { bottom: 0; } } /* --- Dostepnosc: szanuj wylaczone animacje --------------------------------- */ @media (prefers-reduced-motion: reduce) { .so-chat-toggle, .so-chat-msg, .so-chat-send, .so-chat-typing span { animation: none !important; transition: none !important; } }