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

:host {
	font-family: Arial, sans-serif;
}

/* Launcher */
.wpsc-chatbot-launcher {
	position: fixed;
	bottom: var(--wpsc-chatbot-offset-bottom, 20px);
	right: var(--wpsc-chatbot-offset-right, 20px);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpsc-chatbot-launcher-bg, #2271b1);
	color: var(--wpsc-chatbot-launcher-icon, #ffffff);
	font-size: 22px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	z-index: 9999;
	will-change: transform;
}

/* Widget */
.wpsc-chatbot {
	position: fixed;
	bottom: var(--wpsc-chatbot-offset-bottom, 20px);
	right: var(--wpsc-chatbot-offset-right, 20px);
	width: min(400px, calc(100vw - 40px));
	height: min(700px, calc(100vh - 120px));
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
	z-index: 9999;
	padding-bottom: env(safe-area-inset-bottom);
	transform-origin: bottom right;
	transform: scale(.8) translateY(20px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.wpsc-chatbot.wpsc-chatbot--active {
	transform: scale(1) translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.wpsc-chatbot.active {
	transform: scale(1) translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.wpsc-chatbot-launcher {
	opacity: 1;
	transition: opacity .2s ease;
}

.wpsc-chatbot-launcher--hidden {
	opacity: 0;
	pointer-events: none;
}

/* Header Layout */
.wpsc-chatbot__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	padding: 10px 16px;
	background: var(--wpsc-chatbot-header-bg, #ffffff);
	color: var(--wpsc-chatbot-header-fg, #111827);
	border-bottom: 1px solid var(--wpsc-chatbot-header-border, #eeeeee);
}

.wpsc-chatbot__header-title {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 16px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Header Actions */
.wpsc-chatbot__header-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 4px;
}

.wpsc-chatbot__header-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--wpsc-chatbot-header-btn-fg, var(--wpsc-chatbot-header-fg, #111827));
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}

.wpsc-chatbot__header-btn:hover {
	background: var(--wpsc-chatbot-header-btn-hover, rgba(0, 0, 0, 0.08));
	color: var(--wpsc-chatbot-header-btn-hover-fg, var(--wpsc-chatbot-header-fg, #111827));
}

.wpsc-chatbot__header-btn:focus-visible {
	outline: 2px solid var(--wpsc-chatbot-header-btn-focus, #2271b1);
	outline-offset: 2px;
}

.wpsc-chatbot__header-btn svg {
	color: currentColor;
	width: 15px;
	height: 15px;
	display: block;
}

.wpsc-chatbot__header-title svg {
	color: currentColor;
	fill: currentColor;
}

/* Minimize $ Maximize */
.wpsc-chatbot {
	transition:
		transform .50s ease,
		opacity .50s ease,
		visibility .50s ease,
		height .30s ease;
}

.wpsc-chatbot__footer {
	flex-shrink: 0;
	background: #fff;
}

.wpsc-chatbot__body,
.wpsc-chatbot__footer {
	transition:
		opacity .25s ease,
		transform .25s ease;
}

.wpsc-chatbot__compress, 
.wpsc-chatbot--expanded .wpsc-chatbot__expand,
.wpsc-chatbot--expanded .wpsc-chatbot__minimize {
	display: none;
}

.wpsc-chatbot--expanded .wpsc-chatbot__body,
.wpsc-chatbot--expanded .wpsc-chatbot__footer {
	padding-left: 25vw;
    padding-right: 25vw;
}

.wpsc-chatbot--expanded .wpsc-chatbot__compress {
	display: inline-flex;
}

/* Fullscreen */
.wpsc-chatbot--fullscreen {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	border-radius: 0;
	z-index: 999999;
}

.wpsc-chatbot--fullscreen .wpsc-chatbot__header-title svg {
	width: 35px;
	height: 35px;
	display: block;
	fill: currentColor;
}

.wpsc-chatbot--fullscreen .wpsc-chatbot__header-btn svg {
	color: var(--wpsc-chatbot-header-fg, #666);
	fill: currentColor;
	width: 20px;
	height: 20px;
	display: block;
}

.wpsc-chatbot--fullscreen .wpsc-chatbot__header-btn {
	width: 35px;
    height: 35px;
}

/* Body */
.wpsc-chatbot__body {
	background: #f5f5f5;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 15px;
	overflow-y: auto;
	overflow-x: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
	opacity: 1;
	transform: translateY(0);
	scroll-behavior: smooth;
}

/* System Message */
.wpsc-chatbot__system__message {
	display: block;
	align-self: flex-start;
	font-size: 13px;
	margin: 5px 0;
	padding: 8px 12px;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 .25rem 6px rgba(0, 0, 0, .25);
	max-width: 80%;
	word-break: break-word;
	overflow-wrap: anywhere;
	border-bottom-left-radius: 1px;
}

/* User Message */
.wpsc-chatbot__user__message {
	display: block;
	align-self: flex-end;
	font-size: 13px;
	margin: 5px 0;
	padding: 8px 12px;
	background: #2271b1;
	color: #fff;
	border-radius: 1rem;
	box-shadow: 0 .25rem 6px rgba(0, 0, 0, .25);
	max-width: 80%;
	word-break: break-word;
	overflow-wrap: anywhere;
	border-bottom-right-radius: 1px;
}

.wpsc-chatbot__message-meta {
	display: flex;
	gap: 6px;
	margin-top: 3px;
	font-size: 10px;
}

.wpsc-chatbot__message-content p {
	margin: 0;
}

.wpsc-chatbot__system__message .wpsc-chatbot__message-meta {
	justify-content: flex-start;
	color: #666;
}

.wpsc-chatbot__user__message .wpsc-chatbot__message-meta {
	justify-content: flex-end;
	color: #ffffff;
}

/* Footer */
/* Input */
.wpsc-chatbot__input {
	flex: 1;
	width: 100%;
	height: 44px;
	min-height: 44px;
	max-height: 120px;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #1f2937;
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	resize: none;
	overflow-y: hidden;
	box-sizing: border-box;
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 1px 3px rgba(0,0,0,.08);
	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background-color .2s ease;
}

.wpsc-chatbot__input-group {
	flex-shrink: 0;
	padding: 15px 15px 0px 15px;
	display: flex;
	gap: 10px;
	border-top: 1px solid #eee;
	opacity: 1;
	transform: translateY(0);
}

.wpsc-chatbot__input:hover {
	border-color: #d1d5db;
}

.wpsc-chatbot__input:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow:
		0 0 0 3px rgba(34,113,177,.15),
		0 2px 8px rgba(0,0,0,.08);
}

.wpsc-chatbot__input::placeholder {
	color: #9ca3af;
}

.wpsc-chatbot__powered-by {
    display: flex;
    align-items: center;
	justify-content: center;
	margin: 10px 0px 10px 0px;
	font-size: 10px;
	color: #9ca3af;
}

.wpsc-chatbot__powered-by a {
    display: flex;
    align-items: center;
	justify-content: center;
	height: auto;
	padding-left: 5px;
}

.wpsc-chatbot__powered-by svg {
	width: 75px;
}

.wpsc-chatbot__input-conversation-end {
    display: flex;
    align-items: center;
	justify-content: center;
	padding-top: 10px;
	font-size: 10px;
	color: #9ca3af;
}

/* Send Button */
.wpsc-chatbot__send {
	display: none;
	color: var(--wpsc-chatbot-header-fg, #ffffff);
	background-color: var(--wpsc-chatbot-header-bg, #2271b1);
	flex-shrink: 0;
	padding: 8px;
	align-content: center;
	cursor: pointer;
	border-color: var(--wpsc-chatbot-header-bg, #2271b1);
	border-radius: 50%;
}

@media (hover: hover) {
	.wpsc-chatbot__send:hover {
		color: var(--wpsc-chatbot-header-fg, #ffffff);
		border-color: color-mix(in srgb, var(--wpsc-chatbot-header-bg, #2271b1) 85%, black);
		background-color: color-mix(in srgb, var(--wpsc-chatbot-header-bg, #2271b1) 85%, black);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpsc-chatbot-header-bg, #2271b1) 25%, transparent);
	}
}

.wpsc-chatbot__header-title svg,
.wpsc-chatbot__send svg {
	width: 25px;
	height: 25px;
	display: block;
	fill: currentColor;
}

.wpsc-chatbot-launcher svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

/* Typing Indicator */
.wpsc-chatbot__typing {
	display: inline-flex;
	width: auto;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	background: #f5f5f5;
	border-radius: 18px;
	max-width: 60px;
}

.wpsc-chatbot__typing span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #7a7a7a;
	animation: wpsc-chatbot-typing 1.2s infinite ease-in-out;
}

.wpsc-chatbot__typing span:nth-child(1) {
	animation-delay: 0s;
}

.wpsc-chatbot__typing span:nth-child(2) {
	animation-delay: 0.2s;
}

.wpsc-chatbot__typing span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes wpsc-chatbot-typing {
	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: .5;
	}

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

.wpsc-chatbot--disabled .wpsc-chatbot__body,
.wpsc-chatbot--disabled .wpsc-chatbot__footer,
.wpsc-chatbot--disabled .wpsc-chatbot__header {
	opacity: .4;
	user-select: none;
}

.wpsc-chatbot--disabled .wpsc-chatbot__body,
.wpsc-chatbot--disabled .wpsc-chatbot__footer {
	pointer-events: none;
}

/* WebKit Browsers (Chrome, Edge, Safari) */
.wpsc-chatbot__input::-webkit-scrollbar,
.wpsc-chatbot__body::-webkit-scrollbar {
	width: 8px;
}

.wpsc-chatbot__input::-webkit-scrollbar-track,
.wpsc-chatbot__body::-webkit-scrollbar-track {
	background: transparent;
}

.wpsc-chatbot__input::-webkit-scrollbar-thumb,
.wpsc-chatbot__body::-webkit-scrollbar-thumb {
	background: #d9d9d9;
	border-radius: 999px;
}

.wpsc-chatbot__input::-webkit-scrollbar-thumb:hover,
.wpsc-chatbot__body::-webkit-scrollbar-thumb:hover {
	background: #c5c5c5;
}

/* Firefox */
.wpsc-chatbot__input,
.wpsc-chatbot__body {
	scrollbar-width: thin;
	scrollbar-color: #d9d9d9 transparent;
}

/* Responsive */
@media (max-width: 768px) {

	.wpsc-chatbot__expand,
	.wpsc-chatbot__compress {
		display: none;
	}

	.wpsc-chatbot__send {
		display: block;
	}

	.wpsc-chatbot__system__message,
	.wpsc-chatbot__user__message {
		font-size: 16px;
	}

	.wpsc-chatbot {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		max-width: none;
		max-height: none;
		border-radius: 0;
		z-index: 9999;
		/* Height/top are kept in sync with window.visualViewport via JS while the on-screen
		   keyboard is open/closing, so a transition here would fight that and lag/jitter. */
		transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
	}

	/* Prevent iOS Safari from auto-zooming the page when the textarea receives focus -
	   it requires the focused field's font-size to be at least 16px. */
	.wpsc-chatbot__input {
		font-size: 16px;
	}

	.wpsc-chatbot--fullscreen {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		max-width: none;
		max-height: none;
		border-radius: 0;
		z-index: 999999;
	}
	
	.wpsc-chatbot--expanded .wpsc-chatbot__body {
        padding-left: 2vw;
        padding-right: 2vw;
	}

	.wpsc-chatbot--expanded .wpsc-chatbot__footer {
        padding-left: 2vw;
        padding-right: 2vw;
	}

	.wpsc-chatbot-launcher {
		bottom: var(--wpsc-chatbot-offset-bottom, 16px);
		right: var(--wpsc-chatbot-offset-right, 16px);
	}

	.wpsc-chatbot__header {
		padding: 12px;
	}

	.wpsc-chatbot__header-btn {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
	
	.wpsc-chatbot__header-btn svg {
		width: 18px;
		height: 18px;
	}
}