/* Wumex AI — overlay asystenta.
 *
 * Zmienne (--accent, --cta, --r-md…) pochodzą z wumex24-product-card.
 * Każda ma tu wartość zapasową, żeby overlay wyglądał poprawnie także tam,
 * gdzie tamten arkusz się nie załadował.
 */

/* Bąbelek — jedyne stale widoczne wejście do asystenta.
   Chowa się, gdy panel jest otwarty, żeby nie wisiał nad rozmową. */
.wmxai-babel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 22px 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--cta, #36682b);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	transition: transform .15s, box-shadow .15s, background .15s;
}
.wmxai-babel[hidden] { display: none; }

/* MOB-10 z audytu mobilnego (01.08.2026): bąbelek ma z-index 99990, a panel
 * filtrów kategorii leży w normalnym przepływie i nie ma własnego kontekstu
 * nakładania — więc przy otwartych filtrach bąbelek zasłaniał opcje.
 * Regresja z dzisiaj, wprowadzona razem z bąbelkiem. */
body:has(#wmx-filters.is-open) .wmxai-babel,
body:has(.filters-wrap.is-open) .wmxai-babel { display: none; }
.wmxai-babel:hover { background: var(--cta-hover, #2d5624); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .26); }
.wmxai-babel svg { width: 24px; height: 24px; flex: none; }

@media (max-width: 640px) {
	/* Na telefonie zostaje sama ikona — pełna pigułka zasłaniałaby pół ekranu
	   i wchodziła na przyciski „do koszyka" w kartach produktów. */
	.wmxai-babel { right: 14px; bottom: 14px; width: 56px; padding: 0; justify-content: center; }
	.wmxai-babel__opis { display: none; }
}

.wmxai {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wmxai[hidden] { display: none; }

body.wmxai-otwarty { overflow: hidden; }

.wmxai__tlo {
	position: absolute;
	inset: 0;
	background: rgba(17, 20, 16, .55);
	backdrop-filter: blur(2px);
}

.wmxai__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1180px, 96vw);
	height: min(760px, 92vh);
	background: var(--surface, #fff);
	border-radius: var(--r-lg, 16px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
	overflow: hidden;
}

/* ------------------------------------------------------------------ nagłówek */

.wmxai__gora {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line, #e6e6e2);
	flex: none;
}

.wmxai__tytul {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 16px;
	color: var(--ink, #1a1a18);
	margin-right: auto;
}
.wmxai__tytul svg { width: 20px; height: 20px; color: var(--accent, #36682b); }

/* Stały, zawsze widoczny — nie chowamy go za wykryciem intencji w tekście. */
.wmxai__doradca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--accent, #36682b);
	border-radius: var(--r-md, 10px);
	background: transparent;
	color: var(--accent, #36682b);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.wmxai__doradca:hover { background: var(--accent, #36682b); color: #fff; }
.wmxai__doradca svg { width: 17px; height: 17px; }

.wmxai__zamknij {
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--muted, #6b6b66);
	cursor: pointer;
	padding: 0 4px;
}

/* --------------------------------------------------------------- dwie kolumny */

.wmxai__tresc {
	display: grid;
	grid-template-columns: minmax(320px, 420px) 1fr;
	flex: 1;
	min-height: 0;
}

.wmxai__czat {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--line, #e6e6e2);
}

.wmxai__watek {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wmxai-msg { display: flex; }
.wmxai-msg--klient { justify-content: flex-end; }

.wmxai-msg__tresc {
	max-width: 88%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.5;
	white-space: pre-wrap;
}
.wmxai-msg--klient .wmxai-msg__tresc {
	background: var(--accent, #36682b);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.wmxai-msg--asystent .wmxai-msg__tresc {
	background: var(--bg-soft, #f4f4f0);
	color: var(--ink, #1a1a18);
	border-bottom-left-radius: 4px;
}
.wmxai-msg.is-czeka .wmxai-msg__tresc { color: var(--muted, #6b6b66); font-style: italic; }
.wmxai-msg.is-blad .wmxai-msg__tresc { background: #fdecec; color: #8a2020; }
.wmxai-msg.is-pytanie .wmxai-msg__tresc { border: 1px dashed var(--accent, #36682b); background: transparent; }

/* Wiadomość od żywego doradcy — musi się odróżniać od AI, żeby klient wiedział,
   z kim rozmawia. To wprost wymóg zgodności, nie ozdoba. */
.wmxai-msg.is-doradca .wmxai-msg__tresc {
	background: #eef4ec;
	border-left: 3px solid var(--accent, #36682b);
	border-bottom-left-radius: 4px;
}
.wmxai-msg.is-doradca .wmxai-msg__tresc::before {
	content: "Doradca";
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent, #36682b);
	margin-bottom: 3px;
}

/* Powitanie — pierwsza rzecz, którą klient widzi po otwarciu. */
.wmxai-msg.is-powitanie .wmxai-msg__tresc { max-width: 100%; }

.wmxai-startery { display: flex; flex-wrap: wrap; gap: 8px; }

.wmxai-starter {
	border: 1px solid var(--line, #e6e6e2);
	border-radius: 999px;
	background: #fff;
	color: var(--ink, #1a1a18);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	padding: 8px 14px;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, background .15s, color .15s;
}
.wmxai-starter:hover {
	border-color: var(--accent, #36682b);
	background: var(--accent, #36682b);
	color: #fff;
}

/* Komunikat o brak_pokrycia — to jest cała nasza przewaga, więc ma być widoczny. */
.wmxai-note {
	border-left: 3px solid;
	padding: 10px 12px;
	border-radius: 0 8px 8px 0;
	font-size: 13.5px;
	line-height: 1.5;
}
.wmxai-note strong { display: block; margin-bottom: 4px; }
.wmxai-note ul { margin: 0; padding-left: 18px; }
.wmxai-note--brak { border-color: #c8892a; background: #fdf6e9; color: #6b4a10; }
.wmxai-note--luz  { border-color: var(--accent, #36682b); background: #f0f5ee; color: #24421c; }

.wmxai-doradca-karta {
	border: 1.5px solid var(--accent, #36682b);
	border-radius: var(--r-md, 10px);
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
}
.wmxai-doradca-karta strong { display: block; margin-bottom: 6px; }
.wmxai-doradca-karta p { margin: 4px 0; }
.wmxai-doradca-karta a { color: var(--accent, #36682b); font-weight: 600; }
.wmxai-doradca-powod { color: var(--muted, #6b6b66); font-size: 13px; }
.wmxai-doradca-info { color: var(--muted, #6b6b66); font-size: 12.5px; }

/* Formularz oddzwonienia — pokazuje się, gdy doradcy nie ma albo nie odebrał w 60 s. */
.wmxai-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.wmxai-form input[type="text"],
.wmxai-form input[type="tel"],
.wmxai-form input[type="email"] {
	height: 40px;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
	border: 1.5px solid var(--line, #e6e6e2);
	border-radius: var(--r-md, 10px);
	background: #fff;
	color: var(--ink, #1a1a18);
	outline: none;
	width: 100%;
	box-sizing: border-box;
}
.wmxai-form input:focus { border-color: var(--accent, #36682b); }

.wmxai-zgoda {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted, #6b6b66);
}
.wmxai-zgoda input { margin-top: 2px; flex: none; }

.wmxai-form button {
	height: 42px;
	border: 0;
	border-radius: var(--r-md, 10px);
	background: var(--cta, #36682b);
	color: var(--cta-text, #fff);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.wmxai-form button:hover:not(:disabled) { background: var(--cta-hover, #2d5624); }
.wmxai-form button:disabled { opacity: .55; cursor: default; }

.wmxai-form__blad { margin: 0; font-size: 13px; color: #8a2020; }

/* ----------------------------------------------------------------- formularz */

.wmxai__forma {
	display: flex;
	gap: 8px;
	padding: 12px 18px;
	border-top: 1px solid var(--line, #e6e6e2);
	flex: none;
}
.wmxai__pole {
	flex: 1;
	height: 44px;
	padding: 0 14px;
	font: inherit;
	font-size: 15px;
	border: 1.5px solid var(--line, #e6e6e2);
	border-radius: var(--r-md, 10px);
	background: #fff;
	color: var(--ink, #1a1a18);
	outline: none;
}
.wmxai__pole:focus { border-color: var(--accent, #36682b); }

/* Selektor z rodzicem, bo motyw sklepu ma własne reguły dla `button`
   i potrafi nadpisać wysokość, padding oraz kolor tekstu. */
.wmxai .wmxai__forma button.wmxai__wyslij {
	flex: none;
	width: auto;
	min-width: 108px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--r-md, 10px);
	background: var(--cta, #36682b);
	color: var(--cta-text, #fff);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
}
.wmxai .wmxai__forma button.wmxai__wyslij:hover { background: var(--cta-hover, #2d5624); color: var(--cta-text, #fff); }
.wmxai .wmxai__forma button.wmxai__wyslij svg { width: 17px; height: 17px; flex: none; display: block; }

@media (max-width: 420px) {
	/* Na wąskim ekranie napis ustępuje miejsca polu tekstowemu. */
	.wmxai .wmxai__forma button.wmxai__wyslij { min-width: 0; padding: 0 14px; }
	.wmxai .wmxai__forma button.wmxai__wyslij span { display: none; }
}

.wmxai__stopka {
	margin: 0;
	padding: 0 18px 12px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--muted, #6b6b66);
	flex: none;
}

/* ------------------------------------------------------------------- wyniki */

.wmxai__wyniki {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	background: var(--bg-soft, #f9f9f6);
}

.wmxai__chipsy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 18px 0;
	flex: none;
}
.wmxai__chipsy:empty { display: none; }

.wmxai-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--accent, #36682b);
	border-radius: 999px;
	background: #fff;
	color: var(--accent, #36682b);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.wmxai-chip span { font-size: 16px; line-height: 1; opacity: .7; }
.wmxai-chip:hover { background: var(--accent, #36682b); color: #fff; }

.wmxai__siatka {
	flex: 1;
	/* `overflow: hidden auto` zamiast samego overflow-y — inaczej długa nazwa
	   albo cena rozpycha kolumnę i pod siatką pojawia się poziomy pasek przewijania. */
	overflow: hidden auto;
	min-width: 0;
	padding: 14px 18px 18px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 14px;
	align-content: start;
}
.wmxai__siatka:empty { display: none; }
.wmxai__siatka.is-wstepne { opacity: .62; }

.wmxai-wstepne {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 12.5px;
	color: var(--muted, #6b6b66);
}

.wmxai-pusto {
	grid-column: 1 / -1;
	margin: 0;
	padding: 24px 0;
	text-align: center;
	color: var(--muted, #6b6b66);
	font-size: 14px;
}

.wmxai-kafel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--line, #e6e6e2);
	border-radius: var(--r-md, 10px);
	padding: 10px;
	text-decoration: none;
	color: var(--ink, #1a1a18);
	transition: box-shadow .15s, transform .15s;
}
.wmxai-kafel:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); }

.wmxai-kafel__foto {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--bg-soft, #f4f4f0);
}
.wmxai-kafel__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wmxai-kafel__nazwa {
	font-size: 13.5px;
	line-height: 1.35;
	font-weight: 600;
	/* Nazwy mebli bywają długie i jednowyrazowe („szaro-grafitowy") — bez tego
	   rozpychają kolumnę siatki. */
	overflow-wrap: anywhere;
}
.wmxai-kafel__cena  { font-size: 14px; font-weight: 700; color: var(--accent, #36682b); }
.wmxai-kafel__cena s { font-weight: 500; color: var(--muted, #6b6b66); margin-left: 5px; }
.wmxai-kafel__brak  { font-size: 11.5px; color: var(--muted, #6b6b66); }

/* -------------------------------------------------- wejście w wyszukiwarce */

.wmxai-wejscie {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 16px;
	flex: none;
	border: 1.5px solid var(--accent, #36682b);
	border-radius: var(--r-md, 10px);
	background: transparent;
	color: var(--accent, #36682b);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.wmxai-wejscie:hover { background: var(--accent, #36682b); color: #fff; }
.wmxai-wejscie svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ telefon */

@media (max-width: 900px) {
	.wmxai__panel { width: 100vw; height: 100vh; border-radius: 0; }

	/* Na wąskim ekranie dwie kolumny obok siebie nie mają sensu —
	   wyniki idą pod czat i przewijają się razem z nim. */
	.wmxai__tresc { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
	.wmxai__czat { border-right: 0; border-bottom: 1px solid var(--line, #e6e6e2); }
	.wmxai__wyniki { max-height: 46vh; }
	.wmxai__siatka { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.wmxai__doradca span { display: none; }
	.wmxai__doradca { padding: 0 12px; }
	.wmxai-wejscie span { display: none; }
	.wmxai-wejscie { padding: 0 12px; }
}


/* P0-1 (audyt UX/UI mobile, 01.08.2026) — bąbelek zasłaniał przycisk zakupu.
 *
 * Pomiar na 390 × 844: bąbelek x 305–361 / y 774–830 (z-index 99990), przycisk
 * „Dodaj do koszyka" x 194–361 / y 780–824 (z-index 100). Nakładanie 56 × 44 px
 * to 34% przycisku, a `document.elementFromPoint()` w prawej części CTA zwracał
 * BUTTON.wmxai-babel — czyli dotknięcie w strefie kciuka osoby praworęcznej
 * otwierało czat zamiast dodać produkt do koszyka. Powtórzone na dwóch
 * produktach (Opera, Lark) z identycznym wynikiem, więc to zachowanie szablonu.
 *
 * Na karcie produktu bąbelek idzie PONAD pasek (--wmx-sb-h wylicza JS z realnej
 * wysokości paska), a jego z-index spada poniżej paska. Gdyby wyliczenie kiedyś
 * zawiodło, przegrywa bąbelek, nie przycisk zakupu. */
body.single-product .wmxai-babel,
body.wumex24-product-page .wmxai-babel {
	bottom: calc(var(--wmx-sb-h, 85px) + 14px + env(safe-area-inset-bottom));
	z-index: 90;
}