/*
 * Contact Boost - dymek kontaktowy.
 *
 * Kolory, krój i przyciski biorą się ze zmiennych motywu (--bp-...).
 * Wartości po przecinku to zapas dla strony bez naszego motywu.
 *
 * Wymiary w px, nie w rem: dymek stoi także na stronach, na których
 * skala rem jest inna niż u nas, a ma wszędzie wyglądać tak samo.
 */

.bpcb-dymek {
	--bpcb-tlo: var(--bp-biel, #ffffff);
	--bpcb-tekst: var(--bp-tekst, #1e293b);
	--bpcb-tytul: var(--bp-czern, #020617);
	--bpcb-slabszy: var(--bp-tekst-slabszy, #64748b);
	--bpcb-ramka: var(--bp-ramka-lekka, #e2e8f0);
	--bpcb-akcent: var(--bp-akcent, #2563eb);
	--bpcb-online: var(--bp-online, #16a34a);
	--bpcb-odstep: 20px;
	--bpcb-dol: var(--bpcb-odstep);

	position: fixed;
	bottom: calc(var(--bpcb-dol) + env(safe-area-inset-bottom, 0px));
	right: var(--bpcb-odstep);
	z-index: 99970;
	box-sizing: border-box;
	width: 380px;
	max-width: calc(100vw - 32px);
	padding: 22px 22px 16px;
	background: var(--bpcb-tlo);
	color: var(--bpcb-tekst);
	border: 1px solid var(--bpcb-ramka);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
	font-family: var(--bp-pismo, inherit);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s ease, transform .3s ease;
}

.bpcb-dymek *,
.bpcb-dymek *::before,
.bpcb-dymek *::after {
	box-sizing: border-box;
}

/* Atrybut [hidden] z arkusza przeglądarki ma zerową wagę i przegrywa
   z każdą regułą ustawiającą display - dlatego jawnie. */
.bpcb-dymek[hidden],
.bpcb-dymek [hidden] {
	display: none !important;
}

.bpcb-dymek.is-widoczny {
	opacity: 1;
	transform: none;
}

/* Kolejna podstrona tego samego dnia - dymek już stoi, nie wjeżdża od nowa. */
.bpcb-dymek--bez-animacji {
	transition: none;
}

.bpcb-dymek--lewa {
	right: auto;
	left: var(--bpcb-odstep);
}

/* Czat w tym samym rogu - dymek staje nad jego przyciskiem. */
body:has(.bpco:not(.bpco--lewa)) .bpcb-dymek--prawa,
body:has(.bpco.bpco--lewa) .bpcb-dymek--lewa {
	--bpcb-dol: calc(var(--bpco-dol, 20px) + 84px);
}

/* --- Zamknięcie --- */

.bpcb-dymek__zamknij {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bpcb-slabszy);
	cursor: pointer;
	box-shadow: none;
}

.bpcb-dymek__zamknij:hover,
.bpcb-dymek__zamknij:focus-visible {
	background: var(--bp-tlo-jasne, #f1f5f9);
	color: var(--bpcb-tytul);
}

/* --- Głowa: zdjęcie i napisy --- */

.bpcb-dymek__glowa {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-right: 28px;
}

.bpcb-dymek__awatar {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.bpcb-dymek__zdjecie,
.bpcb-dymek__bez-zdjecia {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--bpcb-tlo), 0 0 0 3px var(--bpcb-ramka);
}

.bpcb-dymek__bez-zdjecia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bpcb-akcent);
	color: var(--bp-btn-napis, #ffffff);
}

.bpcb-dymek__bez-zdjecia .bpcb-ikona {
	width: 28px;
	height: 28px;
}

.bpcb-dymek__kropka {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--bpcb-online);
	border: 2px solid var(--bpcb-tlo);
}

.bpcb-dymek__napisy {
	min-width: 0;
}

.bpcb-dymek .bpcb-dymek__nadtytul {
	margin: 0 0 2px;
	color: var(--bpcb-slabszy);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bpcb-dymek .bpcb-dymek__tytul {
	margin: 0;
	color: var(--bpcb-tytul);
	font-family: var(--bp-pismo-naglowki, inherit);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.bpcb-dymek .bpcb-dymek__tresc {
	margin: 14px 0 0;
	color: var(--bpcb-tekst);
	font-size: 15px;
}

/* --- Przyciski ---
   Klasy .bp-btn i .bp-btn--kontur dają kolory, kształt i pismo z „Dostosuj”.
   Reguły :where() niżej mają zerową wagę - działają tylko tam, gdzie
   motyw nie dał swoich (strona bez naszego motywu). */

.bpcb-dymek__przyciski {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 18px;
}

.bpcb-dymek .bpcb-btn {
	display: flex;
	width: 100%;
	text-decoration: none;
}

/* Telefon - odnośnik w jednej linii pod przyciskiem. */
.bpcb-dymek .bpcb-dymek__telefon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px 0;
	color: var(--bp-btn-kontur-napis, var(--bpcb-akcent));
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.bpcb-dymek .bpcb-dymek__telefon strong {
	font-weight: 700;
}

.bpcb-dymek .bpcb-dymek__telefon:hover span,
.bpcb-dymek .bpcb-dymek__telefon:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

:where(.bpcb-dymek) :where(.bpcb-btn) {
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--bpcb-akcent);
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}


.bpcb-dymek .bpcb-dymek__telefon .bpcb-ikona {
	flex: 0 0 auto;
}

.bpcb-dymek .bpcb-dymek__dopisek {
	margin: 10px 0 0;
	color: var(--bpcb-slabszy);
	font-size: 12px;
	text-align: center;
}

/* --- Telefon --- */

@media (max-width: 600px) {
	.bpcb-dymek {
		--bpcb-odstep: 16px;
		width: auto;
		left: 16px;
		right: 16px;
		max-width: none;
		padding: 18px 18px 14px;
	}

	.bpcb-dymek--bez-telefonu {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bpcb-dymek {
		transition: none;
		transform: none;
	}
}