/*!
 * ASB Czat: paleta motywu (granat #0e2240, czerwień #c8102e).
 * Namespace .asbc-* żeby nie nachodzić na chmurkę kontaktową motywu.
 */
.asbc-root {
	--asbc-granat: #0e2240;
	--asbc-czerw: #c8102e;
	--asbc-jasny: #f5f7fa;
	--asbc-tekst: #0e2240;
	--asbc-przyt: #5a6b80;
	--asbc-linia: #e2e8f0;
	--asbc-biel: #ffffff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	position: fixed;
	inset: auto 0 0 auto;
	z-index: 2147483000;
	pointer-events: none;
}
.asbc-root *,
.asbc-root *::before,
.asbc-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.asbc-btn {
	pointer-events: auto;
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 64px;
	height: 64px;
	min-width: 64px;
	min-height: 64px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var(--asbc-czerw);
	color: var(--asbc-biel);
	box-shadow: 0 10px 12px rgba(77, 0, 13, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 160ms ease-out;
	-webkit-tap-highlight-color: transparent;
}
.asbc-btn:hover,
.asbc-btn:focus-visible {
	transform: translateY(-3px);
}
.asbc-btn:focus-visible {
	outline: 2px solid var(--asbc-granat);
	outline-offset: 3px;
}
/*
 * Ikona czatu pojawia się, zamiast być od pierwszej klatki.
 *
 * Polecenie właściciela z 27 sierpnia, przy okazji animacji logo. Krótkie
 * opóźnienie sprawia, że przycisk nie konkuruje z treścią pierwszego ekranu:
 * najpierw klient widzi, gdzie trafił, potem pojawia się pomoc.
 *
 * `prefers-reduced-motion` wyłącza to całkowicie: przycisk jest od razu i w pełni
 * widoczny, bo to element obsługi, a nie ozdoba.
 */
@media (prefers-reduced-motion: no-preference) {
	.asbc-btn {
		animation: asbc-btn-wejscie .45s cubic-bezier(.2, .9, .3, 1.2) .9s both;
	}
}

@keyframes asbc-btn-wejscie {
	from { opacity: 0; transform: scale(.6) translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.asbc-btn svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.asbc-btn .asbc-ico-x { display: none; }
.asbc-open .asbc-btn .asbc-ico-chat { display: none; }
.asbc-open .asbc-btn .asbc-ico-x { display: block; }

/*
 * Panel wychodzi z rogu przycisku, zamiast pojawiać się bez przejścia.
 *
 * Polecenie właściciela z 31 sierpnia. Ruch jest krótki i mały (200 ms, 6 px
 * w górę plus skala od rogu), bo to element obsługi, a nie pokaz: ma dać oku
 * punkt zaczepienia, skąd okno się wzięło, i zejść z drogi.
 *
 * Dlaczego `visibility`, a nie `display`: przejścia nie da się animować między
 * `none` a `flex`, więc panel zostaje w układzie i jest chowany kryciem. Przy
 * zamykaniu `visibility` ma opóźnienie równe czasowi przejścia, żeby wygaszenie
 * zdążyło się pokazać, zanim panel zniknie z drzewa dostępności i spod kursora.
 */
.asbc-panel {
	pointer-events: auto;
	position: fixed;
	right: 24px;
	bottom: 100px;
	width: 380px;
	max-width: calc(100vw - 24px);
	height: 560px;
	max-height: min(600px, 85vh);
	background: var(--asbc-biel);
	border-radius: 16px;
	border: 1px solid var(--asbc-linia);
	box-shadow: 0 24px 60px rgba(14, 34, 64, 0.22);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px) scale(.96);
	transform-origin: 100% 100%;
	transition:
		opacity 200ms ease-out,
		transform 200ms cubic-bezier(.2, .8, .3, 1),
		visibility 0s linear 200ms;
}
.asbc-open .asbc-panel {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 200ms ease-out,
		transform 200ms cubic-bezier(.2, .8, .3, 1),
		visibility 0s;
}
/* Panel dostaje ognisko skryptem tylko na telefonie (tabindex -1), więc bez obwódki. */
.asbc-panel:focus { outline: none; }

.asbc-head {
	background: var(--asbc-granat);
	color: var(--asbc-biel);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.asbc-ava {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	overflow: hidden;
}
.asbc-ava img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}
.asbc-head-t { font-weight: 700; font-size: 16px; }
.asbc-head-s { font-size: 13px; color: #c9d6ea; }
.asbc-head-close {
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--asbc-biel);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.asbc-head-close svg { width: 18px; height: 18px; }

.asbc-msgs {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--asbc-jasny);
}
.asbc-m {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.5;
	word-wrap: break-word;
}
.asbc-bot {
	background: var(--asbc-biel);
	color: var(--asbc-tekst);
	border: 1px solid var(--asbc-linia);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}
.asbc-user {
	background: var(--asbc-czerw);
	color: var(--asbc-biel);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}
/*
 * Treść dymka bota jest formatowana (akapity, listy, linki), więc potrzebuje
 * własnych odstępów. Bez tego lista skrzyń zlewała się w jeden blok tekstu.
 */
.asbc-m p { margin: 0; }
/*
 * Przedrostek `.asbc-root` jest KONIECZNY. Arkusz motywu ma `body.asb p, body.asb ul, body.asb ol
 * { margin: 0 }` o tej samej specyficzności (0,1,2) i ładuje się później, więc bez przedrostka
 * akapity odpowiedzi stały bez odstępu, a listy bez marginesu (pomiar w przeglądarce 15.09.2026:
 * margin-top drugiego akapitu 0 px). Z przedrostkiem (0,2,2) reguła czatu wygrywa.
 */
.asbc-root .asbc-m p + p,
.asbc-root .asbc-m p + ul,
.asbc-root .asbc-m p + ol { margin-top: 8px; }
/*
 * Odstęp DZIAŁA W OBIE STRONY. Bez tego zdanie kończące odpowiedź („Jeśli
 * chcesz umówić się na diagnostykę, daj znać") przyklejało się do ostatniego
 * punktu listy i czytało jak jej dalszy ciąg.
 */
.asbc-root .asbc-m ul + p,
.asbc-root .asbc-m ol + p,
.asbc-root .asbc-m ul + .asbc-hd,
.asbc-root .asbc-m ol + .asbc-hd { margin-top: 10px; }
.asbc-root .asbc-m .asbc-hd { margin-top: 10px; }
/*
 * Numer telefonu nie ma prawa złamać się w pół. To najważniejszy odnośnik
 * w tym oknie, a numer rozbity na dwa wiersze przestaje wyglądać jak numer.
 */
.asbc-m a.asbc-tel { white-space: nowrap; }
.asbc-root .asbc-lista {
	margin: 6px 0 0;
	padding-left: 20px;
}
.asbc-root .asbc-lista li { margin: 3px 0; }
.asbc-lista li::marker { color: var(--asbc-czerw); }
.asbc-m code {
	font-size: 13px;
	background: var(--asbc-jasny);
	border-radius: 4px;
	padding: 1px 5px;
}
.asbc-m a {
	color: #2a6bc4;
	/* Adresy usług bywają długie: mają się łamać, a nie rozpychać dymka. */
	word-break: break-word;
}
.asbc-typing {
	align-self: flex-start;
	align-items: center;
	background: var(--asbc-biel);
	border: 1px solid var(--asbc-linia);
	border-radius: 14px;
	padding: 12px 16px;
	display: flex;
	gap: 5px;
}
.asbc-wait-txt {
	font-size: 14px;
	color: var(--asbc-przyt);
	margin-right: 6px;
}
.asbc-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--asbc-przyt);
	opacity: .4;
	animation: asbcb 1.2s infinite;
}
.asbc-typing i:nth-child(2) { animation-delay: .2s; }
.asbc-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes asbcb {
	0%, 100% { opacity: .3; transform: none; }
	50% { opacity: 1; transform: translateY(-3px); }
}

.asbc-chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: flex-start;
	max-width: 92%;
}
.asbc-chip {
	background: var(--asbc-biel);
	border: 1.5px solid var(--asbc-czerw);
	color: var(--asbc-czerw);
	border-radius: 999px;
	padding: 10px 14px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.asbc-foot {
	border-top: 1px solid var(--asbc-linia);
	background: var(--asbc-biel);
	padding: 10px;
}
.asbc-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}
.asbc-act {
	flex: 1;
	min-height: 44px;
	border: 1px solid var(--asbc-linia);
	border-radius: 11px;
	padding: 8px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: var(--asbc-tekst);
	background: var(--asbc-biel);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.asbc-act svg { width: 18px; height: 18px; flex: 0 0 18px; }
.asbc-row { display: flex; gap: 8px; }
.asbc-in {
	flex: 1;
	border: 1.5px solid var(--asbc-linia);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	/*
	 * Jawna interlinia, bo "normal" liczy sie inaczej w kazdej przegladarce,
	 * a wysokosc pola wyliczamy w JS z scrollHeight. Bez tego pole mialo
	 * 42 px przy tekscie wymagajacym 58 px i wychodzil pasek przewijania
	 * przy PUSTYM polu: placeholder zawijal sie do dwoch linii.
	 */
	line-height: 1.4;
	resize: none;
	min-height: 44px;
	max-height: 96px;
	overflow-y: hidden;
	outline: none;
	background: var(--asbc-jasny);
}
.asbc-in:focus { border-color: var(--asbc-czerw); }
.asbc-send {
	border: none;
	border-radius: 12px;
	background: var(--asbc-czerw);
	color: var(--asbc-biel);
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
}
.asbc-send:disabled { opacity: .5; cursor: default; }
.asbc-send svg { width: 19px; height: 19px; fill: currentColor; }

.asbc-teaser {
	pointer-events: auto;
	position: fixed;
	right: 24px;
	bottom: 100px;
	max-width: 260px;
	background: var(--asbc-biel);
	color: var(--asbc-tekst);
	border-radius: 16px 16px 4px 16px;
	box-shadow: 0 12px 40px rgba(14, 34, 64, .18);
	/* Prawy odstęp musi być większy niż pole dotykowe krzyżyka (44 px) plus jego
	   odsunięcie od krawędzi, inaczej ikona wchodzi w tekst. Było 40 px przy polu
	   44 px i krzyżyk zasłaniał ostatnie słowo. */
	padding: 14px 52px 14px 16px;
	font-size: 14px;
	line-height: 1.45;
}
.asbc-teaser-msg {
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	min-height: 44px;
}
.asbc-teaser-close {
	position: absolute;
	/* Wyśrodkowany w PIONIE względem dymka, nie przyklejony do górnej krawędzi.
	   Dymek ma jeden wiersz tekstu, więc krzyżyk przy górze wyglądał, jakby
	   odpadł od treści, zamiast do niej należeć. */
	top: 50%;
	transform: translateY(-50%);
	right: 2px;
	/* Pole dotykowe zostaje 44 px (wytyczna), ale IKONA jest mała. Bez jawnego
	   rozmiaru SVG rozciągał się na całe pole i dawał wielki krzyż na dymku:
	   pozostałe ikony w tym pliku mają rozmiar, ta jedna go nie miała. */
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	cursor: pointer;
	/* Czerwień marki zamiast szarości. Krzyżyk jest jedynym miejscem, w którym
	   człowiek może się tego dymka pozbyć, więc ma być widoczny, a nie ledwo
	   zauważalny. Krycie podniesione z .55 do .8: sam kolor już go wyróżnia,
	   a pełne krycie konkurowałoby z czerwonym przyciskiem czatu obok. */
	color: var(--asbc-czerw);
	opacity: .8;
	transition: opacity .15s ease;
}
.asbc-teaser-close svg {
	width: 14px;
	height: 14px;
	display: block;
	/* Kreska nieco grubsza: przy 13 px cienki czerwony krzyżyk gubił się
	   na białym tle bardziej niż szary o tej samej grubości. */
	stroke-width: 2.4;
}
.asbc-teaser-close:hover,
.asbc-teaser-close:focus-visible { opacity: 1; }

body.zgoda-widoczna .asbc-root { display: none !important; }
/* Okno z życzeniami (asb-przerwy) to zwykły element z przyciemnionym tłem, nie okno z warstwy
   wierzchniej przeglądarki, więc przycisk czatu stał nad nim i dawał się kliknąć (390 px, 15.09.2026). */
body.asb-okazja-otwarta .asbc-root { display: none !important; }

@media (max-width: 767px) {
	.asbc-btn {
		right: calc(16px + env(safe-area-inset-right));
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
	.asbc-panel {
		right: 0;
		left: 0;
		/* Nad klawiaturą telefonu: zmienne ustawia czat.js z window.visualViewport.
		   Bez nich panel zostawał pod klawiaturą razem z polem (zrzut z iPhone'a, 15.09.2026). */
		bottom: var(--asbc-dol, 0px);
		width: auto;
		max-width: none;
		height: min(85dvh, 640px, var(--asbc-widok, 100dvh));
		max-height: var(--asbc-widok, 100dvh);
		border-radius: 20px 20px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	/* Przy otwartej klawiaturze pas na pasek systemowy iPhone'a jest pod nią, więc bez odstępu. */
	.asbc-klawiatura .asbc-panel { padding-bottom: 0; }
	/* 16 px: przy mniejszej czcionce pola Safari na iPhonie powiększa stronę po dotknięciu. */
	.asbc-in { font-size: 16px; }
	/* Przy otwartym panelu przycisk czatu (krzyżyk) stał na polu do pisania: na środku
	   „Wyślij” był krzyżyk, więc dotknięcie zamykało czat zamiast wysłać wiadomość
	   (pomiar 375 px i zgłoszenie właściciela, 15.09.2026). Panel ma własny krzyżyk w nagłówku.
	   `visibility`, a nie `display`, żeby po zamknięciu nie grała od nowa animacja wejścia. */
	.asbc-open .asbc-btn { visibility: hidden; pointer-events: none; }
	.asbc-teaser {
		right: calc(16px + env(safe-area-inset-right));
		bottom: calc(92px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.asbc-root *, .asbc-root { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/*
 * Dostępność: przy `reduce` zostaje samo krycie, ruchu nie ma wcale.
 *
 * Reguła wyżej ścina każde przejście w widgecie do zera, więc panel musi mieć
 * własne, mocniejsze ustawienie: inaczej okno znów pojawiałoby się skokowo.
 * Wygaszenie jest krótsze (150 ms) i bez `transform`, bo to ruch przeszkadza
 * przy nadwrażliwości przedsionkowej, a nie zmiana krycia.
 */
@media (prefers-reduced-motion: reduce) {
	.asbc-root .asbc-panel {
		transform: none !important;
		transition: opacity 150ms ease, visibility 0s linear 150ms !important;
	}
	.asbc-root.asbc-open .asbc-panel {
		transform: none !important;
		transition: opacity 150ms ease, visibility 0s !important;
	}
}

/* NUMER TELEFONU NIGDY NIE LAMIE SIE MIEDZY CYFRAMI.
   Chmurka jest waska (okolo 300 px), a numer ma spacje w srodku, wiec
   przegladarka lamala go po pierwszej grupie: "Warsztat: 71" i nizej
   "315 26 72". Numer rozbity na dwa wiersze przestaje wygladac jak numer
   i nie da sie go przeczytac jednym rzutem oka. Zgloszone przez wlasciciela
   1 wrzesnia 2026 ze zrzutu odpowiedzi o lawecie.
   Nie zmieniamy tresci odpowiedzi: to ma dzialac dla KAZDEGO numeru,
   ktory czat kiedykolwiek poda, takze dodanego pozniej do bazy FAQ. */
.asbc-root a[href^="tel:"] {
	white-space: nowrap;
}