/* Zdunek AI — pływający pomocnik.
   Kolory i kroje bierze z motywu Zdunek (zmienne CSS), a bez niego ma własne. */

.zdai {
	--zdai-noc: var(--noc, #140d09);
	--zdai-karta: var(--noc-2, #1e140e);
	--zdai-karta-2: var(--noc-3, #2a1d14);
	--zdai-linia: var(--linia, #3b2b1f);
	--zdai-zloto: var(--zloto, #dea93f);
	--zdai-zloto-jasne: var(--zloto-jasne, #f4c96a);
	--zdai-neon: var(--neon, #fff3dc);
	--zdai-zar: var(--zar, #ff9636);
	--zdai-tekst: var(--tekst, #f5ece2);
	--zdai-szary: var(--dym, #bcaea2);
	--zdai-bok: 20px;
	--zdai-dol: 20px;

	position: fixed;
	bottom: calc(var(--zdai-dol) + env(safe-area-inset-bottom, 0px));
	z-index: 96;
	font: 400 15px/1.5 var(--f-tekst, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--zdai-tekst);
	text-align: left;
}
.zdai *,
.zdai *::before,
.zdai *::after { box-sizing: border-box; }
.zdai [hidden] { display: none !important; }
:where(.zdai) p { margin: 0; }
/* :where = zerowa specyficzność: reset nie przykrywa kolorów i grubości z klas niżej. */
:where(.zdai) :where(button, input) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0; }
.zdai--lewo { left: calc(var(--zdai-bok) + env(safe-area-inset-left, 0px)); }
.zdai--prawo { right: calc(var(--zdai-bok) + env(safe-area-inset-right, 0px)); }

/* Na telefonie nad paskiem „Zadzwoń” motywu. */
@media (max-width: 720px) {
	.zdai { --zdai-bok: 14px; --zdai-dol: 20px; }
	/* Pasek „Zadzwoń” na całą szerokość (motyw albo wtyczka statystyk) — stajemy nad nim. */
	body.zd-ma-pasek .zdai,
	body.lz-ma-pasek .zdai { --zdai-dol: 82px; }
	.zdai--bez-telefonow { display: none !important; }
}
/* Gdy otwarte jest menu motywu — chowamy się. */
body:has(.menu.is-open) .zdai { display: none; }

/* ---------- przycisk: mikrofon z logo ---------- */

.zdai__przycisk {
	position: relative;
	display: grid; place-items: center;
	width: 62px; height: 62px;
	padding: 0; border: 2px solid var(--zdai-zloto); border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, #2c2016, #0d0805 72%);
	color: var(--zdai-zloto);
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 0 5px rgba(222, 169, 63, .1);
	transition: transform .18s cubic-bezier(.2, .8, .3, 1.3), box-shadow .2s;
	-webkit-tap-highlight-color: transparent;
}
.zdai__przycisk:focus-visible { outline: 3px solid var(--zdai-zloto-jasne); outline-offset: 3px; }
.zdai__przycisk .zdai__mikrofon { width: 36px; height: 36px; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 170, 70, .35)); }
.zdai__pedy { stroke-dasharray: 10; animation: zdai-pedy 2.6s ease-in-out infinite; }
@keyframes zdai-pedy {
	0%, 60%, 100% { stroke-dashoffset: 0; opacity: 1; }
	75% { stroke-dashoffset: 10; opacity: .2; }
}
.zdai--otwarty .zdai__przycisk { background: radial-gradient(circle at 50% 38%, #3a2b1d, #160e09 72%); }

.zdai__znaczek {
	position: absolute; right: -6px; bottom: -4px;
	padding: 1px 6px; border-radius: 9px;
	background: var(--zdai-zloto); color: #120b07;
	border: 2px solid #120b07;
	font: 800 10px/1.4 var(--f-tekst, system-ui, sans-serif); letter-spacing: .04em;
}
/* Nowa podpowiedź po zabawie atrakcją. */
.zdai--kropka .zdai__przycisk::after {
	content: ""; position: absolute; top: 0; right: 2px;
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--zdai-zar); border: 2px solid #120b07;
	box-shadow: 0 0 10px var(--zdai-zar);
	animation: zdai-puls 1.4s ease-in-out infinite;
}
@keyframes zdai-puls { 50% { transform: scale(1.25); } }

/* ---------- dymek ---------- */

.zdai__dymek {
	position: absolute; bottom: 76px;
	display: flex; align-items: flex-start; gap: 4px;
	width: max-content; max-width: min(300px, calc(100vw - 40px));
	padding: 12px 8px 12px 16px;
	border-radius: 16px;
	background: var(--zdai-karta);
	border: 1px solid rgba(222, 169, 63, .35);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(255, 150, 54, .15);
	animation: zdai-wjazd .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.zdai--lewo .zdai__dymek,
.zdai--lewo .zdai__panel { left: 0; }
.zdai--prawo .zdai__dymek,
.zdai--prawo .zdai__panel { right: 0; }
.zdai__dymek::after {
	content: ""; position: absolute; bottom: -7px; left: 24px;
	width: 14px; height: 14px; rotate: 45deg;
	background: var(--zdai-karta);
	border-right: 1px solid rgba(222, 169, 63, .35); border-bottom: 1px solid rgba(222, 169, 63, .35);
}
.zdai--prawo .zdai__dymek::after { left: auto; right: 24px; }
.zdai__dymek-tekst {
	padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
	font-weight: 600; line-height: 1.4;
}
.zdai__dymek-x {
	flex: none; width: 40px; height: 40px; margin: -10px -4px -10px 0;
	padding: 0; border: 0; border-radius: 50%; background: none;
	color: var(--zdai-szary); font-size: 20px; line-height: 1; cursor: pointer;
}

@keyframes zdai-wjazd { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ---------- panel ---------- */

.zdai__panel {
	position: absolute; bottom: 76px;
	display: grid; gap: 14px;
	width: min(380px, calc(100vw - 28px));
	/* Zostawiamy miejsce na nagłówek strony u góry. */
	max-height: calc(100vh - var(--zdai-dol) - 190px);
	max-height: calc(100dvh - var(--zdai-dol) - 190px);
	overflow-y: auto; overscroll-behavior: contain;
	padding: 16px 16px 14px;
	border-radius: 22px;
	background: var(--zdai-noc);
	border: 1px solid rgba(222, 169, 63, .28);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 150, 54, .08);
	animation: zdai-wjazd .25s cubic-bezier(.2, .9, .3, 1.1) both;
	scrollbar-width: thin; scrollbar-color: #4a3726 transparent;
}

/* Kreator (dopóki gość go nie skończy) — na górę panelu, zaraz pod powitaniem. */
.zdai__glowa { order: -3; }
.zdai__witaj { order: -2; }
.zdai--kreator-trwa .zdai__kreator { order: -1; }
.zdai__glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zdai__tytul { display: flex; align-items: center; gap: 8px; }
.zdai__tytul .zdai__mikrofon { width: 26px; height: 26px; color: var(--zdai-zloto); }
.zdai__tytul .zdai__pedy { animation: none; }
.zdai__nazwa {
	font: 800 1.5rem/1 var(--f-szyld, "Arial Narrow", Impact, sans-serif);
	letter-spacing: .01em;
	background: linear-gradient(90deg, var(--zdai-neon), var(--zdai-zloto-jasne) 40%, var(--zdai-zloto));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.zdai__zamknij {
	width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
	background: none; color: var(--zdai-szary); font-size: 24px; line-height: 1; cursor: pointer;
}
.zdai__zamknij:focus-visible,
.zdai__panel button:focus-visible,
.zdai__panel input:focus-visible { outline: 2px solid var(--zdai-zloto-jasne); outline-offset: 2px; }

.zdai__witaj { color: var(--zdai-szary); font-size: .93rem; margin-top: -6px; }

/* ---------- podpowiedzi ---------- */

.zdai__rady { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zdai__rada {
	display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px;
	padding: 12px;
	border-radius: 14px;
	background: var(--zdai-karta);
	border: 1px solid var(--zdai-linia);
	animation: zdai-wjazd .3s both;
}
.zdai__rada:nth-child(2) { animation-delay: .05s; }
.zdai__rada:nth-child(3) { animation-delay: .1s; }
.zdai__rada-ikona {
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: rgba(222, 169, 63, .14); color: var(--zdai-zloto-jasne);
	font-size: 15px; line-height: 1;
}
.zdai__rada-srodek { display: grid; gap: 8px; justify-items: start; }
.zdai__rada-tekst { font-size: .95rem; line-height: 1.45; }

.zdai__akcja {
	display: inline-flex; align-items: center;
	padding: 7px 14px; border-radius: 999px;
	border: 1.5px solid var(--zdai-zloto); background: none;
	color: var(--zdai-zloto-jasne); font-weight: 700; font-size: .88rem; line-height: 1.2;
	cursor: pointer; transition: background-color .2s, color .2s;
}
.zdai__dodano { font-size: .88rem; font-weight: 700; color: #a9e6a0; }

/* ---------- kreator ---------- */

.zdai__kreator {
	padding: 14px;
	border-radius: 16px;
	background: linear-gradient(160deg, #2b1d12, #170f0a);
	border: 1px solid rgba(222, 169, 63, .45);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.zdai__kreator-tytul {
	font: 800 1.35rem/1.05 var(--f-szyld, "Arial Narrow", Impact, sans-serif);
	color: var(--zdai-zloto-jasne);
	margin-bottom: 8px !important;
}
.zdai__kreator-tresc { display: grid; gap: 12px; }
.zdai__kreator-pytanie { font-weight: 600; line-height: 1.4; }

.zdai__postep { display: flex; gap: 6px; }
.zdai__postep span { width: 22px; height: 4px; border-radius: 4px; background: var(--zdai-linia); transition: background-color .3s; }
.zdai__postep span.jest { background: var(--zdai-zloto); }
.zdai__postep span.teraz { background: var(--zdai-zloto-jasne); box-shadow: 0 0 8px var(--zdai-zar); }

.zdai__opcje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zdai__opcja {
	min-height: 44px; padding: 9px 10px;
	border-radius: 12px;
	border: 1px solid var(--zdai-linia); background: var(--zdai-noc);
	font-weight: 600; font-size: .9rem; line-height: 1.25; text-align: left;
	cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.zdai__opcja[aria-pressed="true"] { background: var(--zdai-zloto); border-color: var(--zdai-zloto); color: #120b07; }
.zdai__opcje--wiele .zdai__opcja[aria-pressed="true"]::before { content: "✓ "; }

.zdai__data {
	width: 100%; padding: 11px 13px; border-radius: 12px;
	font-size: 16px; /* poniżej 16 px iPhone powiększa stronę przy wyborze daty */
	border: 1px solid var(--zdai-linia); background: var(--zdai-noc);
	color-scheme: dark;
}
.zdai__data:focus { outline: none; border-color: var(--zdai-zloto); }

.zdai__nawigacja { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.zdai__nawigacja .zdai__przycisk-glowny { margin-left: auto; }
.zdai__link {
	min-height: 44px; padding: 6px 4px; border: 0; background: none;
	color: var(--zdai-szary); font-size: .88rem; text-decoration: underline; text-underline-offset: .2em;
	cursor: pointer;
}
.zdai__przycisk-glowny {
	justify-self: start;
	padding: 10px 18px; border: 0; border-radius: 999px;
	background: var(--zdai-zloto); color: #120b07;
	font-weight: 800; font-size: .95rem; line-height: 1.2;
	box-shadow: 0 8px 20px -10px rgba(255, 150, 54, .8);
	cursor: pointer; transition: background-color .2s, box-shadow .2s;
}

.zdai__podsumowanie {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px;
	margin: 0; padding: 10px 12px;
	border-radius: 12px; background: rgba(0, 0, 0, .25);
	font-size: .9rem;
}
.zdai__podsumowanie dt { color: var(--zdai-szary); }
.zdai__podsumowanie dd { margin: 0; font-weight: 600; }
.zdai__wynik-przyciski { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- szybkie pytania ---------- */

.zdai__pytania { display: grid; gap: 10px; }
.zdai__naglowek { font: 800 1.15rem/1.1 var(--f-szyld, "Arial Narrow", Impact, sans-serif); }
.zdai__chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.zdai__chip {
	padding: 7px 12px; border-radius: 999px;
	border: 1px solid var(--zdai-linia); background: var(--zdai-karta);
	font-size: .86rem; font-weight: 600; line-height: 1.25; text-align: left;
	cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.zdai__chip[aria-pressed="true"] { background: var(--zdai-zloto); border-color: var(--zdai-zloto); color: #120b07; }
.zdai__odpowiedz { display: grid; gap: 8px; justify-items: start; }
.zdai__odpowiedz:empty { display: none; }
.zdai__odpowiedz-tekst {
	padding: 12px 14px; border-radius: 4px 14px 14px 14px;
	background: var(--zdai-karta-2); font-size: .93rem; line-height: 1.5;
	animation: zdai-wjazd .25s both;
}

.zdai__dopisek { font-size: .85rem; color: var(--zdai-szary); line-height: 1.45; }

/* Dotyk: przyciski panelu co najmniej 44 px. */
@media (pointer: coarse) {
	.zdai__zamknij { width: 44px; height: 44px; }
	.zdai__akcja,
	.zdai__chip,
	.zdai__przycisk-glowny { min-height: 44px; }
}

/* Telefon w poziomie: panel obok przycisku, na całą wysokość ekranu (nad przyciskiem byłby wąskim paskiem). */
@media (max-height: 520px) and (orientation: landscape) {
	.zdai--lewo .zdai__panel { left: 76px; bottom: 0; }
	.zdai--prawo .zdai__panel { right: 76px; bottom: 0; }
	.zdai__panel { max-height: calc(100dvh - var(--zdai-dol) - 80px - env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.zdai *,
	.zdai *::before,
	.zdai *::after { animation: none !important; transition: none !important; }
}

/* Najechanie myszą — tylko tam, gdzie jest mysz (na dotyku hover „wisi” na elemencie pod palcem). */
@media (hover: hover) {
	.zdai__przycisk:hover { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 150, 54, .4); }
	.zdai__dymek-tekst:hover { color: var(--zdai-zloto-jasne); }
	.zdai__dymek-x:hover { background: var(--zdai-karta-2); color: var(--zdai-tekst); }
	.zdai__zamknij:hover { background: var(--zdai-karta-2); color: var(--zdai-tekst); }
	.zdai__akcja:hover { background: var(--zdai-zloto); color: #120b07; }
	.zdai__opcja:hover { border-color: var(--zdai-zloto); }
	.zdai__link:hover { color: var(--zdai-tekst); }
	.zdai__przycisk-glowny:hover { background: var(--zdai-zloto-jasne); box-shadow: 0 0 18px rgba(255, 170, 70, .45); }
	.zdai__chip:hover { border-color: var(--zdai-zloto); }
}