/* =========================================================
 * EwiSystem Czatbot – launcher pływającego dymka
 * ======================================================= */

:root {
	--ewi-color: #3b82f6;
}

/* ===== PRZYCISK (DYMEK) ===== */
.ewi-chat-launcher {
	position: fixed;
	bottom: 24px;
	width: 60px;
	height: 60px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var(--ewi-color);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	z-index: 2147483640;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.ewi-chat-launcher:hover {
	transform: scale(1.06);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.ewi-chat-launcher:active {
	transform: scale(0.95);
}

.ewi-chat-launcher.ewi-pos-right {
	right: 24px;
}

.ewi-chat-launcher.ewi-pos-left {
	left: 24px;
}

.ewi-chat-launcher svg {
	width: 28px;
	height: 28px;
}

.ewi-chat-launcher .ewi-icon-close {
	display: none;
}

.ewi-chat-launcher.ewi-open .ewi-icon-open {
	display: none;
}

.ewi-chat-launcher.ewi-open .ewi-icon-close {
	display: block;
}

/* ===== DYMEK ZACHĘTY ===== */
.ewi-chat-greeting {
	position: fixed;
	bottom: 38px;
	max-width: 220px;
	background: #ffffff;
	color: #1e293b;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	padding: 11px 15px;
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	z-index: 2147483639;
	cursor: pointer;
	animation: ewi-pop 0.3s ease;
}

.ewi-chat-greeting.ewi-pos-right {
	right: 96px;
}

.ewi-chat-greeting.ewi-pos-left {
	left: 96px;
}

.ewi-greeting-close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #64748b;
	color: #ffffff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ewi-greeting-close:hover {
	background: #475569;
}

/* ===== PANEL Z CZATEM (IFRAME) ===== */
.ewi-chat-panel {
	position: fixed;
	bottom: 100px;
	width: 400px;
	height: 640px;
	max-height: calc(100vh - 130px);
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	z-index: 2147483638;
	opacity: 0;
	transform: translateY(20px) scale(0.98);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.ewi-chat-panel.ewi-pos-right {
	right: 24px;
}

.ewi-chat-panel.ewi-pos-left {
	left: 24px;
	transform-origin: bottom left;
}

.ewi-chat-panel.ewi-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Powiększone okno — sygnał z chat.html (tylko desktop). */
.ewi-chat-panel.ewi-expanded {
	width: 50vw;
	min-width: 420px;
	max-width: 900px;
	height: calc(100vh - 130px);
}

.ewi-chat-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@keyframes ewi-pop {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== WERSJA MOBILNA ===== */
@media (max-width: 480px) {
	.ewi-chat-launcher {
		bottom: 16px;
	}

	.ewi-chat-launcher.ewi-pos-right {
		right: 16px;
	}

	.ewi-chat-launcher.ewi-pos-left {
		left: 16px;
	}

	.ewi-chat-panel {
		width: auto;
		height: auto;
		top: 12px;
		bottom: 86px;
		max-height: none;
		border-radius: 14px;
	}

	.ewi-chat-panel.ewi-pos-right,
	.ewi-chat-panel.ewi-pos-left {
		left: 12px;
		right: 12px;
	}

	/* Na mobile ignorujemy powiększenie — panel i tak jest pełnoekranowy. */
	.ewi-chat-panel.ewi-expanded {
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
	}

	.ewi-chat-greeting {
		display: none;
	}
}