.ccpw-chatbot {
	--ccpw-chat-accent: #2563eb;
	--ccpw-chat-accent-contrast: #fff;
	--ccpw-chat-surface: #fff;
	--ccpw-chat-canvas: #f6f7f9;
	--ccpw-chat-text: #1f2937;
	--ccpw-chat-muted: #667085;
	--ccpw-chat-border: #d9dee7;
	--ccpw-chat-error: #b42318;
	--ccpw-chat-success: #16803c;
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 99990;
	box-sizing: border-box;
	color: var(--ccpw-chat-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.45;
}

.ccpw-chatbot *,
.ccpw-chatbot *::before,
.ccpw-chatbot *::after {
	box-sizing: border-box;
}

.ccpw-chatbot--left {
	right: auto;
	left: max(1rem, env(safe-area-inset-left));
}

.ccpw-chatbot__toggle {
	position: relative;
	display: grid;
	width: 60px;
	height: 60px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--ccpw-chat-accent) 75%, #000);
	border-radius: 999px;
	background: var(--ccpw-chat-accent);
	color: var(--ccpw-chat-accent-contrast);
	box-shadow: 0 16px 40px rgb(15 23 42 / 24%);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.ccpw-chatbot__toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 44px rgb(15 23 42 / 30%);
}

.ccpw-chatbot__toggle:focus-visible,
.ccpw-chatbot__close:focus-visible,
.ccpw-chatbot__restart:focus-visible,
.ccpw-chatbot__quick-reply:focus-visible,
.ccpw-chatbot__action:focus-visible,
.ccpw-chatbot__form textarea:focus-visible,
.ccpw-chatbot__form button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--ccpw-chat-accent) 45%, #fff);
	outline-offset: 3px;
}

.ccpw-chatbot__avatar,
.ccpw-chatbot__header-avatar {
	display: grid;
	overflow: hidden;
	place-items: center;
	border-radius: 999px;
}

.ccpw-chatbot__avatar {
	width: 44px;
	height: 44px;
}

.ccpw-chatbot__header-avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	background: rgb(255 255 255 / 14%);
}

.ccpw-chatbot__avatar-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccpw-chatbot svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.ccpw-chatbot__presence {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 13px;
	height: 13px;
	border: 2px solid var(--ccpw-chat-surface);
	border-radius: 999px;
	background: var(--ccpw-chat-success);
}

.ccpw-chatbot__panel {
	position: absolute;
	right: 0;
	bottom: 74px;
	display: flex;
	overflow: hidden;
	width: min(380px, calc(100vw - 2rem));
	max-width: calc(100vw - 2rem);
	height: min(620px, calc(100dvh - 7rem));
	max-height: calc(100dvh - 7rem);
	flex-direction: column;
	border: 1px solid var(--ccpw-chat-border);
	border-radius: 16px;
	background: var(--ccpw-chat-surface);
	box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

.ccpw-chatbot--left .ccpw-chatbot__panel {
	right: auto;
	left: 0;
}

.ccpw-chatbot__panel[hidden] {
	display: none;
}

.ccpw-chatbot--open .ccpw-chatbot__toggle {
	visibility: hidden;
}

.ccpw-chatbot__header {
	display: flex;
	min-height: 64px;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--ccpw-chat-accent);
	color: var(--ccpw-chat-accent-contrast);
}

.ccpw-chatbot__identity {
	display: flex;
	min-width: 0;
	flex: 1;
	flex-direction: column;
}

.ccpw-chatbot__identity strong,
.ccpw-chatbot__identity small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ccpw-chatbot__identity strong {
	font: inherit;
	font-weight: 700;
}

.ccpw-chatbot__identity small {
	font-size: 12px;
	opacity: 0.9;
}

.ccpw-chatbot__identity small::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	border-radius: 999px;
	background: #7cf09a;
}

.ccpw-chatbot__close,
.ccpw-chatbot__restart {
	display: grid;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ccpw-chatbot__close:hover,
.ccpw-chatbot__restart:hover {
	background: rgb(255 255 255 / 14%);
}

.ccpw-chatbot__close svg,
.ccpw-chatbot__restart svg {
	width: 20px;
	height: 20px;
}

.ccpw-chatbot__messages {
	display: flex;
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	background: var(--ccpw-chat-canvas);
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.ccpw-chatbot__bubble {
	overflow-wrap: anywhere;
	max-width: 86%;
	padding: 10px 13px;
	border-radius: 14px;
	font: inherit;
	font-size: 14px;
	white-space: pre-wrap;
}

.ccpw-chatbot__bubble--assistant {
	align-self: flex-start;
	border: 1px solid var(--ccpw-chat-border);
	border-bottom-left-radius: 4px;
	background: var(--ccpw-chat-surface);
	color: var(--ccpw-chat-text);
}

.ccpw-chatbot__bubble--user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: var(--ccpw-chat-accent);
	color: var(--ccpw-chat-accent-contrast);
}

.ccpw-chatbot__bubble--error {
	align-self: flex-start;
	border: 1px solid color-mix(in srgb, var(--ccpw-chat-error) 35%, transparent);
	background: color-mix(in srgb, var(--ccpw-chat-error) 9%, var(--ccpw-chat-surface));
	color: var(--ccpw-chat-error);
}

.ccpw-chatbot__quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.ccpw-chatbot__quick-reply {
	min-height: 40px;
	padding: 7px 11px;
	border: 1px solid var(--ccpw-chat-accent);
	border-radius: 999px;
	background: var(--ccpw-chat-surface);
	color: var(--ccpw-chat-accent);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.ccpw-chatbot__quick-reply:hover {
	background: var(--ccpw-chat-accent);
	color: var(--ccpw-chat-accent-contrast);
}

.ccpw-chatbot__typing {
	display: inline-flex;
	align-self: flex-start;
	gap: 5px;
	padding: 13px;
	border: 1px solid var(--ccpw-chat-border);
	border-radius: 14px;
	background: var(--ccpw-chat-surface);
}

.ccpw-chatbot__typing span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	animation: ccpw-chatbot-typing 1.1s infinite ease-in-out;
	background: var(--ccpw-chat-muted);
}

.ccpw-chatbot__typing span:nth-child(2) {
	animation-delay: 120ms;
}

.ccpw-chatbot__typing span:nth-child(3) {
	animation-delay: 240ms;
}

.ccpw-chatbot__actions {
	display: flex;
	flex: 0 0 auto;
	border-top: 1px solid var(--ccpw-chat-border);
}

.ccpw-chatbot__action {
	display: grid;
	min-width: 0;
	min-height: 44px;
	flex: 1 1 0;
	padding: 8px;
	place-items: center;
	border-right: 1px solid var(--ccpw-chat-border);
	color: var(--ccpw-chat-text);
	font: inherit;
	font-size: 13px;
	font-weight: 650;
	text-align: center;
	text-decoration: none;
}

.ccpw-chatbot__action:last-child {
	border-right: 0;
}

.ccpw-chatbot__action:hover {
	color: var(--ccpw-chat-accent);
}

.ccpw-chatbot__form {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--ccpw-chat-border);
	background: var(--ccpw-chat-surface);
}

.ccpw-chatbot__form textarea {
	width: auto;
	min-width: 0;
	min-height: 44px;
	max-height: 112px;
	flex: 1 1 auto;
	resize: none;
	border: 1px solid var(--ccpw-chat-border);
	border-radius: 11px;
	background: var(--ccpw-chat-surface);
	color: var(--ccpw-chat-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	padding-block: 11px;
	padding-inline: 12px;
}

.ccpw-chatbot__form button {
	display: grid;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--ccpw-chat-accent);
	border-radius: 999px;
	background: var(--ccpw-chat-accent);
	color: var(--ccpw-chat-accent-contrast);
	cursor: pointer;
}

.ccpw-chatbot__form button:disabled,
.ccpw-chatbot__form textarea:disabled {
	cursor: wait;
	opacity: 0.6;
}

.ccpw-chatbot__form button svg {
	width: 19px;
	height: 19px;
}

.ccpw-chatbot__privacy {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 12px 10px;
	background: var(--ccpw-chat-surface);
	color: var(--ccpw-chat-muted);
	font: inherit;
	font-size: 11px;
	line-height: 1.35;
	text-align: center;
}

@keyframes ccpw-chatbot-typing {
	0%,
	60%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

@media (max-width: 480px) {
	.ccpw-chatbot,
	.ccpw-chatbot--left {
		right: max(0.5rem, env(safe-area-inset-right));
		bottom: max(0.5rem, env(safe-area-inset-bottom));
		left: auto;
	}

	.ccpw-chatbot__panel,
	.ccpw-chatbot--left .ccpw-chatbot__panel {
		right: 0;
		bottom: 70px;
		left: auto;
		width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right));
		max-width: none;
		height: min(680px, calc(100dvh - 5.5rem - env(safe-area-inset-top)));
		max-height: calc(100dvh - 5.5rem - env(safe-area-inset-top));
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ccpw-chatbot__toggle,
	.ccpw-chatbot__typing span {
		animation: none;
		transition: none;
	}
}