/* Wroobel AI — widżet czatu. Kolory marki WroobelDJ; fonty dziedziczy z motywu, jeśli są. */
.wai {
	--wai-accent: #b200a8;
	--wai-accent-2: #c81bbe;
	--wai-pink: #f48aee;
	--wai-bg: #150914;
	--wai-surface: #211022;
	--wai-surface-2: #2e1730;
	--wai-text: #fbf2f8;
	--wai-muted: #b7a3b5;
	--wai-line: rgba(251, 242, 248, .14);
	--wai-font: var(--font-text, "Instrument Sans", "Segoe UI", system-ui, sans-serif);
	--wai-display: var(--font-display, "Unbounded", "Segoe UI", system-ui, sans-serif);
	--wai-gap: 24px;
	--wai-ease: cubic-bezier(.2, .7, .2, 1);
	position: fixed;
	z-index: 9990;
	bottom: calc(var(--wai-gap) + env(safe-area-inset-bottom, 0px));
	right: var(--wai-gap);
	font-family: var(--wai-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--wai-text);
}
.wai--left { right: auto; left: var(--wai-gap); }
.wai *, .wai *::before, .wai *::after { box-sizing: border-box; }
.wai [hidden] { display: none !important; }
.wai-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.wai button { font: inherit; }
.wai :focus-visible { outline: 2px solid var(--wai-pink); outline-offset: 2px; }

/* ---------- przycisk ---------- */
.wai-launcher {
	position: relative; isolation: isolate;
	display: flex; align-items: center; gap: 10px;
	height: 58px; padding: 0 22px 0 8px;
	border: 0; border-radius: 999px;
	background: var(--wai-bg); color: var(--wai-text);
	box-shadow: 0 14px 34px -10px rgba(178, 0, 168, .75), 0 4px 14px rgba(10, 2, 9, .35);
	cursor: pointer;
	transition: transform .25s var(--wai-ease), box-shadow .25s;
}
.wai-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(178, 0, 168, .9), 0 4px 14px rgba(10, 2, 9, .35); }
.wai-launcher__ring {
	position: absolute; inset: -2px; z-index: -1; border-radius: inherit; overflow: hidden;
}
.wai-launcher__ring::before {
	content: ""; position: absolute; inset: -60%;
	background: conic-gradient(from 0deg, var(--wai-accent), var(--wai-pink), #7e8fd6, var(--wai-accent));
	animation: wai-spin 5s linear infinite;
}
.wai-launcher__ring::after { content: ""; position: absolute; inset: 2px; border-radius: inherit; background: var(--wai-bg); }
.wai-launcher__icon {
	display: grid; place-items: center; width: 42px; height: 42px; flex: none;
	border-radius: 50%; background: linear-gradient(135deg, var(--wai-accent), #6c0a8c); color: #fff;
}
.wai-launcher__icon svg { width: 22px; height: 22px; animation: wai-twinkle 3.2s ease-in-out infinite; }
.wai-launcher__label { font-weight: 600; white-space: nowrap; }
.wai.is-open .wai-launcher { transform: scale(.92); }
@keyframes wai-spin { to { transform: rotate(360deg); } }
@keyframes wai-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(12deg); } }

/* ---------- zapowiedź ---------- */
.wai-teaser {
	position: absolute; bottom: calc(100% + 14px); right: 0;
	display: flex; align-items: flex-start; gap: 4px; width: max-content; max-width: min(300px, calc(100vw - 2 * var(--wai-gap)));
	padding: 14px 10px 14px 16px; border-radius: 18px 18px 6px 18px;
	background: #fbf2f8; color: #2b1029; box-shadow: 0 16px 40px -12px rgba(10, 2, 9, .5);
	opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right;
	transition: opacity .3s var(--wai-ease), transform .35s var(--wai-ease);
}
.wai--left .wai-teaser { right: auto; left: 0; border-radius: 18px 18px 18px 6px; transform-origin: bottom left; }
.wai-teaser.is-on { opacity: 1; transform: none; }
.wai-teaser__text { padding: 0; border: 0; background: none; color: inherit; text-align: left; font-weight: 500; cursor: pointer; }
.wai-teaser__close { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: -4px -2px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: #6e5670; cursor: pointer; }
.wai-teaser__close:hover { background: rgba(43, 16, 41, .08); }
.wai-teaser__close svg { width: 16px; height: 16px; }

/* ---------- okno czatu ---------- */
.wai-panel {
	position: absolute; bottom: calc(100% + 16px); right: 0;
	display: flex; flex-direction: column;
	width: min(400px, calc(100vw - 2 * var(--wai-gap)));
	height: min(640px, calc(100vh - 140px));
	overflow: hidden;
	border: 1px solid var(--wai-line); border-radius: 22px;
	background: var(--wai-bg);
	box-shadow: 0 30px 80px -20px rgba(10, 2, 9, .7), 0 0 0 1px rgba(178, 0, 168, .15);
	opacity: 0; transform: translateY(14px) scale(.97); transform-origin: bottom right;
	transition: opacity .22s var(--wai-ease), transform .3s var(--wai-ease);
}
.wai--left .wai-panel { right: auto; left: 0; transform-origin: bottom left; }
.wai.is-open .wai-panel { opacity: 1; transform: none; }
.wai.is-instant .wai-panel { transition: none; }

.wai-head {
	display: flex; align-items: center; gap: 12px; flex: none;
	padding: 14px 12px 14px 16px;
	background: radial-gradient(120% 140% at 0% 0%, rgba(178, 0, 168, .55), transparent 60%), var(--wai-surface);
	border-bottom: 1px solid var(--wai-line);
}
.wai-avatar { position: relative; flex: none; width: 44px; height: 44px; }
.wai-avatar img, .wai-avatar__spark {
	display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 2px var(--wai-bg), 0 0 0 4px var(--wai-accent);
}
.wai-avatar__spark { padding: 10px; background: linear-gradient(135deg, var(--wai-accent), #6c0a8c); color: #fff; }
.wai-online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 2px var(--wai-surface); }
.wai-head__text { display: grid; flex: 1; min-width: 0; }
.wai-name { font-family: var(--wai-display); font-weight: 500; font-size: 1rem; letter-spacing: -.02em; }
.wai-sub { overflow: hidden; color: var(--wai-muted); font-size: .8125rem; white-space: nowrap; text-overflow: ellipsis; }
.wai-iconbtn {
	display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%; background: none; color: var(--wai-text); cursor: pointer;
	transition: background-color .2s;
}
.wai-iconbtn:hover { background: rgba(251, 242, 248, .1); }
.wai-iconbtn[hidden] { display: none; }
.wai-iconbtn svg { width: 20px; height: 20px; }

.wai-body {
	flex: 1; display: flex; flex-direction: column; gap: 10px;
	overflow-y: auto; overscroll-behavior: contain;
	padding: 18px 14px 10px;
	scrollbar-width: thin; scrollbar-color: var(--wai-surface-2) transparent;
}
.wai-msg { display: flex; animation: wai-pop .3s var(--wai-ease) both; }
.wai-msg--user { justify-content: flex-end; }
.wai-bubble {
	max-width: 86%; padding: 10px 14px;
	border-radius: 18px 18px 18px 6px;
	background: var(--wai-surface-2); color: var(--wai-text);
	overflow-wrap: anywhere;
}
.wai-msg--user .wai-bubble { border-radius: 18px 18px 6px 18px; background: var(--wai-accent); color: #fff; }
.wai-bubble a { color: var(--wai-pink); text-decoration: underline; text-underline-offset: .2em; }
.wai-msg--user .wai-bubble a { color: #fff; }
.wai-bubble strong { font-weight: 700; color: #fff; }
.wai-bubble.is-typing .wai-w { opacity: 0; animation: wai-word .35s ease forwards; animation-delay: calc(var(--w) * 32ms); }
@keyframes wai-word { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
@keyframes wai-pop { from { opacity: 0; transform: translateY(8px); } }

/* korektor zamiast kropek „pisze…” */
.wai-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; vertical-align: middle; }
.wai-eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--wai-pink); transform-origin: bottom; animation: wai-eq 1s ease-in-out infinite; }
.wai-eq i:nth-child(2) { animation-delay: -.35s; animation-duration: .8s; }
.wai-eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.15s; }
.wai-eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .9s; }
@keyframes wai-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.wai-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.wai-chip {
	padding: 7px 12px; border: 1px solid rgba(244, 138, 238, .5); border-radius: 999px;
	background: rgba(178, 0, 168, .08); color: var(--wai-text); font-size: .8438rem; text-align: left; cursor: pointer;
	animation: wai-pop .35s var(--wai-ease) both; animation-delay: calc(.15s + var(--i) * 70ms);
	transition: background-color .2s, border-color .2s;
}
.wai-chip:hover { background: rgba(178, 0, 168, .25); border-color: var(--wai-pink); }

/* ---------- formularz kontaktu w czacie ---------- */
.wai-lead {
	display: grid; gap: 10px; padding: 14px; margin-top: 2px;
	border: 1px solid rgba(244, 138, 238, .35); border-radius: 16px;
	background: linear-gradient(160deg, rgba(178, 0, 168, .18), rgba(178, 0, 168, 0) 60%), var(--wai-surface);
	animation: wai-pop .35s var(--wai-ease) both;
}
.wai-lead__title { margin: 0; font-weight: 600; line-height: 1.35; }
.wai-lead label { display: grid; gap: 4px; font-size: .8125rem; color: var(--wai-muted); }
.wai-lead input, .wai-lead select {
	width: 100%; min-height: 42px; padding: 9px 11px;
	border: 1px solid var(--wai-line); border-radius: 10px;
	background: var(--wai-bg); color: var(--wai-text); font: inherit; font-size: 15px;
	color-scheme: dark;
}
.wai-lead input:focus, .wai-lead select:focus { outline: none; border-color: var(--wai-pink); box-shadow: 0 0 0 3px rgba(244, 138, 238, .2); }
.wai-lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wai-hp { position: absolute !important; left: -9999px; }
.wai-lead__btn {
	min-height: 44px; border: 0; border-radius: 999px; background: var(--wai-accent); color: #fff; font-weight: 600; cursor: pointer;
	transition: background-color .2s;
}
.wai-lead__btn:hover { background: var(--wai-accent-2); }
.wai-lead__btn[disabled] { opacity: .6; cursor: progress; }
.wai-lead__status { margin: 0; color: var(--wai-pink); font-size: .8125rem; }
.wai-lead__info { margin: 0; color: var(--wai-muted); font-size: .7188rem; line-height: 1.4; }
.wai-lead__info a { color: var(--wai-muted); }
.wai-lead__status:empty { display: none; }

/* ---------- pole pytania ---------- */
.wai-input {
	display: flex; align-items: flex-end; gap: 8px; flex: none;
	margin: 0; padding: 10px 12px 6px;
	border-top: 1px solid var(--wai-line);
}
.wai-input textarea {
	flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; resize: none; overflow-y: hidden;
	border: 1px solid var(--wai-line); border-radius: 22px;
	background: var(--wai-surface); color: var(--wai-text); font: inherit; font-size: 15px; line-height: 1.4;
}
.wai-input textarea::placeholder { color: var(--wai-muted); }
.wai-input textarea:focus { outline: none; border-color: var(--wai-pink); }
.wai-send {
	display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%; background: var(--wai-accent); color: #fff; cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.wai-send:hover { background: var(--wai-accent-2); transform: scale(1.05); }
.wai-send svg { width: 20px; height: 20px; }
.wai-input.is-busy .wai-send { opacity: .5; pointer-events: none; }
.wai-note { flex: none; margin: 0; padding: 4px 16px 12px; color: var(--wai-muted); font-size: .7188rem; line-height: 1.4; }
.wai-note a { color: var(--wai-muted); }

/* ---------- telefon ---------- */
@media (max-width: 760px) {
	/* nad paskiem „Zadzwoń / Napisz” z motywu WroobelDJ */
	body:has(.callbar) .wai { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
	.wai { --wai-gap: 14px; }
	.wai-launcher { width: 56px; height: 56px; padding: 0; justify-content: center; }
	.wai-launcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
}
@media (max-width: 600px) {
	.wai-panel {
		position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
		border: 0; border-radius: 0;
		padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.wai.is-open .wai-launcher, .wai.is-open .wai-teaser { visibility: hidden; }
	html.wai-locked, html.wai-locked body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.wai *, .wai *::before, .wai *::after { animation: none !important; transition: none !important; }
	.wai-bubble.is-typing .wai-w { opacity: 1; }
}
@media print { .wai { display: none !important; } }