.emopla-agent {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #102033;
}

.emopla-agent * {
	box-sizing: border-box;
	letter-spacing: 0;
}

.emopla-agent__launcher {
	display: grid;
	grid-template-columns: 48px minmax(0, auto);
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 8px 14px 8px 8px;
	border: 1px solid rgba(16, 32, 51, 0.12);
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(16, 32, 51, 0.2);
	color: #102033;
	cursor: pointer;
}

.emopla-agent__launcher:hover,
.emopla-agent__launcher:focus-visible {
	outline: none;
	box-shadow: 0 18px 58px rgba(33, 186, 211, 0.34);
	transform: translateY(-1px);
}

.emopla-agent__avatar { position: relative; display: block; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; background: #e8faff; }
.emopla-agent__avatar img { position: absolute; inset: 0 auto 0 0; width: 300%; height: 100%; max-width: none; object-fit: fill; transform: translateX(0); will-change: transform; }
.emopla-agent__avatar.is-thinking img { transform: translateX(-33.333333%); }
.emopla-agent__avatar.is-speaking img { animation: emopla-mouth 0.42s steps(1, end) infinite; }
.emopla-agent__avatar.is-idle { animation: emopla-breathe 2.8s ease-in-out infinite; }
.emopla-agent__avatar.is-thinking { animation: emopla-think 1.4s ease-in-out infinite; }
.emopla-agent__avatar--shin { background: #f4f8ff; }
.emopla-agent__avatar--compact { width: 38px; height: 38px; flex: 0 0 38px; }

@keyframes emopla-mouth {
	0%, 42% { transform: translateX(-66.666667%); }
	43%, 100% { transform: translateX(0); }
}

@keyframes emopla-breathe {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-1px) scale(1.025); }
}

@keyframes emopla-think {
	0%, 100% { transform: rotate(-1.5deg); }
	50% { transform: rotate(1.5deg) translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
	.emopla-agent__avatar,
	.emopla-agent__avatar.is-speaking { animation: none; }
	.emopla-agent__avatar.is-speaking img { transform: translateX(-66.666667%); }
}

.emopla-agent__launcher-text {
	display: grid;
	gap: 2px;
	text-align: left;
}

.emopla-agent__name {
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
}

.emopla-agent__hint {
	color: #596a7d;
	font-size: 11px;
	line-height: 1.2;
}

.emopla-agent__panel {
	position: absolute;
	right: 0;
	bottom: 74px;
	display: none;
	width: min(380px, calc(100vw - 32px));
	overflow: hidden;
	border: 1px solid rgba(16, 32, 51, 0.12);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 24px 72px rgba(16, 32, 51, 0.28);
}

.emopla-agent.is-open .emopla-agent__panel {
	display: block;
}

.emopla-agent__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: #102033;
	color: #ffffff;
}

.emopla-agent__title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 14px;
	font-weight: 800;
}

.emopla-agent__status {
	display: block;
	color: #b9f1dd;
	font-size: 11px;
	font-weight: 600;
}

.emopla-agent__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.emopla-agent__messages {
	display: grid;
	gap: 10px;
	height: 320px;
	padding: 14px;
	overflow-y: auto;
	background: #f5f8fb;
}

.emopla-agent__switcher {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px 12px;
	background: #eef4f8;
}

.emopla-agent__switch {
	padding: 8px 10px;
	border: 1px solid rgba(26, 127, 150, 0.22);
	border-radius: 999px;
	background: #fff;
	color: #365064;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.emopla-agent__switch.is-active {
	border-color: #21bad3;
	background: #dff9fd;
	color: #0d6678;
}

.emopla-agent__message {
	width: fit-content;
	max-width: 88%;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.65;
	white-space: pre-wrap;
}

.emopla-agent__message--bot {
	background: #ffffff;
	border: 1px solid rgba(16, 32, 51, 0.08);
	color: #102033;
}

.emopla-agent__message--user {
	justify-self: end;
	background: #1a7f96;
	color: #ffffff;
}

.emopla-agent__quick {
	display: flex;
	gap: 8px;
	padding: 0 14px 12px;
	overflow-x: auto;
	background: #f5f8fb;
}

.emopla-agent__quick button {
	flex: 0 0 auto;
	padding: 7px 10px;
	border: 1px solid rgba(26, 127, 150, 0.24);
	border-radius: 999px;
	background: #ffffff;
	color: #1a6071;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.emopla-agent__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid rgba(16, 32, 51, 0.1);
	background: #ffffff;
}

.emopla-agent__input {
	width: 100%;
	min-height: 42px;
	max-height: 110px;
	padding: 10px 11px;
	resize: vertical;
	border: 1px solid rgba(16, 32, 51, 0.16);
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	line-height: 1.45;
}

.emopla-agent__send {
	min-height: 42px;
	border: 0;
	border-radius: 8px;
	background: #21bad3;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}

.emopla-agent__send:disabled {
	background: #96a7b8;
	cursor: wait;
}

.emopla-agent__footer {
	padding: 0 12px 12px;
	background: #ffffff;
	color: #6b7785;
	font-size: 11px;
	line-height: 1.45;
}

.emopla-agent__footer a {
	color: #1a7f96;
	font-weight: 700;
}

@media (max-width: 520px) {
	.emopla-agent {
		right: 12px;
		bottom: 12px;
		left: 12px;
	}

	.emopla-agent__launcher {
		margin-left: auto;
	}

	.emopla-agent__panel {
		right: 0;
		bottom: 72px;
		width: 100%;
	}

	.emopla-agent__messages {
		height: min(320px, calc(100vh - 250px));
	}
}