#mcw-widget,
#mcw-widget * {
	box-sizing: border-box;
}

#mcw-widget {
	position: fixed;
	bottom: 24px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	opacity: 0;
	pointer-events: none;
}

#mcw-widget.mcw-pos-bottom-right {
	right: 20px;
}

#mcw-widget.mcw-pos-bottom-left {
	left: 20px;
}

#mcw-widget.mcw-visible {
	opacity: 1;
	pointer-events: auto;
}

/* Entrance animations */
#mcw-widget.mcw-anim-fade {
	transition: opacity 0.5s ease;
}

#mcw-widget.mcw-anim-slide.mcw-pos-bottom-right {
	transform: translateX(140%);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

#mcw-widget.mcw-anim-slide.mcw-pos-bottom-left {
	transform: translateX(-140%);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

#mcw-widget.mcw-anim-slide.mcw-visible {
	transform: translateX(0);
}

#mcw-widget.mcw-anim-bounce {
	transform: scale(0);
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

#mcw-widget.mcw-anim-bounce.mcw-visible {
	transform: scale(1);
}

/* Toggle button */
.mcw-toggle {
	position: relative;
	width: var(--mcw-btn-size, 60px);
	height: var(--mcw-btn-size, 60px);
	border-radius: 50%;
	border: none;
	background: var(--mcw-toggle-color, #14213d);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.mcw-toggle:hover {
	transform: scale(1.05);
}

.mcw-toggle-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6) rotate(-45deg);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.mcw-toggle-icon svg,
.mcw-toggle-icon img {
	width: var(--mcw-icon-size, 28px);
	height: var(--mcw-icon-size, 28px);
	color: var(--mcw-icon-color, #fff);
	fill: var(--mcw-icon-color, #fff);
}

/* Multi mode, collapsed: show the 2-bubbles icon */
#mcw-widget.is-multi .mcw-icon-multi {
	opacity: 1;
	transform: scale(1) rotate(0);
	pointer-events: auto;
}

/* Multi mode, expanded: show the close (X) icon */
#mcw-widget.is-multi.is-expanded .mcw-icon-multi {
	opacity: 0;
	transform: scale(0.6) rotate(45deg);
}

#mcw-widget.is-multi.is-expanded .mcw-icon-x {
	opacity: 1;
	transform: scale(1) rotate(0);
	pointer-events: auto;
}

#mcw-widget.is-multi.is-expanded .mcw-toggle {
	background: var(--mcw-close-color, #14213d);
}

/* Single mode: the toggle itself represents the one active channel */
#mcw-widget.is-single .mcw-toggle {
	background: var(--mcw-color, var(--mcw-toggle-color, #14213d));
}

#mcw-widget.is-single .mcw-icon-single {
	opacity: 1;
	transform: scale(1) rotate(0);
	pointer-events: auto;
}

/* Bubbles list */
.mcw-bubbles {
	position: absolute;
	bottom: calc(var(--mcw-btn-size, 60px) + 16px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	pointer-events: none;
}

.mcw-pos-bottom-right .mcw-bubbles {
	right: 0;
	align-items: flex-end;
}

.mcw-pos-bottom-left .mcw-bubbles {
	left: 0;
	align-items: flex-start;
}

.mcw-bubble {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px) scale(0.9);
	transition: opacity 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

.mcw-pos-bottom-left .mcw-bubble {
	flex-direction: row-reverse;
}

#mcw-widget.is-multi.is-expanded .mcw-bubble.mcw-is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Stagger the bubbles slightly for a nicer expand */
#mcw-widget.is-multi.is-expanded .mcw-bubble:nth-child(1) { transition-delay: 0.02s; }
#mcw-widget.is-multi.is-expanded .mcw-bubble:nth-child(2) { transition-delay: 0.07s; }
#mcw-widget.is-multi.is-expanded .mcw-bubble:nth-child(3) { transition-delay: 0.12s; }

.mcw-bubble-icon {
	width: calc(var(--mcw-btn-size, 60px) * 0.78);
	height: calc(var(--mcw-btn-size, 60px) * 0.78);
	border-radius: 50%;
	background: var(--mcw-color, #25d366);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.mcw-bubble-icon svg,
.mcw-bubble-icon img,
.mcw-bubble-img {
	width: calc(var(--mcw-icon-size, 28px) * 0.85);
	height: calc(var(--mcw-icon-size, 28px) * 0.85);
	color: var(--mcw-icon-color, #fff);
	fill: var(--mcw-icon-color, #fff);
	object-fit: contain;
}

.mcw-bubble-label {
	background: var(--mcw-label-bg, #14213d);
	color: var(--mcw-label-color, #fff);
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hide bubbles entirely in single mode, hide toggle default icons appropriately */
#mcw-widget.is-single .mcw-bubbles {
	display: none;
}

/* Device visibility, toggled by JS via inline class */
.mcw-bubble.mcw-device-hidden {
	display: none !important;
}

/* Offline / outside business hours popover */
.mcw-offline-popover {
	position: absolute;
	bottom: calc(var(--mcw-btn-size, 60px) + 16px);
	max-width: 260px;
	background: #fff;
	color: #222;
	padding: 16px 18px 14px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	font-size: 14px;
	line-height: 1.4;
}

.mcw-pos-bottom-right .mcw-offline-popover {
	right: 0;
}

.mcw-pos-bottom-left .mcw-offline-popover {
	left: 0;
}

.mcw-offline-popover[hidden] {
	display: none;
}

.mcw-offline-close {
	position: absolute;
	top: 6px;
	right: 10px;
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #888;
}

.mcw-offline-text {
	margin: 4px 0 12px;
}

.mcw-offline-continue {
	border: none;
	background: var(--mcw-toggle-color, #14213d);
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
}

@media (max-width: 480px) {
	.mcw-bubble-label {
		font-size: 13px;
		padding: 6px 12px;
	}
}

/* Custom chat panel (chat propio conectado por API a GHL) */
.mcw-chat-panel {
	position: absolute;
	bottom: calc(var(--mcw-btn-size, 60px) + 16px);
	width: 320px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - var(--mcw-btn-size, 60px) - 90px);
	background: var(--mcw-chat-bg, #fff);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: auto;
}

.mcw-chat-panel[hidden] {
	display: none;
}

.mcw-pos-bottom-right .mcw-chat-panel {
	right: 0;
}

.mcw-pos-bottom-left .mcw-chat-panel {
	left: 0;
}

.mcw-chat-header {
	background: var(--mcw-color, var(--mcw-toggle-color, #14213d));
	color: var(--mcw-chat-header-text, #fff);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
}

.mcw-chat-title {
	font-size: 15px;
	font-weight: 600;
}

.mcw-chat-close {
	border: none;
	background: transparent;
	color: var(--mcw-chat-header-text, #fff);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}

.mcw-chat-close:hover {
	opacity: 1;
}

.mcw-chat-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
}

/* Embedded native GHL widget (Integrado/En línea mode) mounted inside our panel */
.mcw-chat-panel-embed {
	overflow: hidden;
}

.mcw-chat-embed-body {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
}

.mcw-chat-embed-body iframe {
	width: 100%;
	height: 100%;
	border: none;
	flex: 1 1 auto;
}

.mcw-chat-prechat {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mcw-chat-welcome {
	margin: 0 0 4px;
	font-size: 13.5px;
	color: #444;
	line-height: 1.4;
}

.mcw-chat-field-row {
	display: flex;
	gap: 8px;
}

.mcw-chat-field-row .mcw-chat-field {
	flex: 1 1 50%;
	min-width: 0;
}

.mcw-chat-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: #555;
}

.mcw-chat-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.mcw-chat-consent a {
	color: var(--mcw-color, #2d8cff);
}

.mcw-chat-field {
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
}

.mcw-chat-field:focus {
	outline: 2px solid var(--mcw-color, #2d8cff);
	outline-offset: 1px;
}

.mcw-chat-error {
	color: #c0392b;
	font-size: 12px;
	margin: -2px 0 0;
}

.mcw-chat-send-btn {
	border: none;
	background: var(--mcw-color, var(--mcw-toggle-color, #14213d));
	color: #fff;
	padding: 9px 14px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
}

.mcw-chat-thread {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
}

.mcw-chat-thread[hidden] {
	display: none;
}

.mcw-chat-msg {
	max-width: 80%;
	padding: 8px 12px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.35;
	white-space: pre-wrap;
	word-break: break-word;
}

.mcw-chat-msg-out {
	align-self: flex-end;
	background: var(--mcw-chat-visitor-bg, var(--mcw-color, #14213d));
	color: var(--mcw-chat-visitor-text, #fff);
	border-bottom-right-radius: 4px;
}

.mcw-chat-msg-in {
	align-self: flex-start;
	background: var(--mcw-chat-agent-bg, #f0f1f3);
	color: var(--mcw-chat-agent-text, #222);
	border-bottom-left-radius: 4px;
}

.mcw-chat-reply-form {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid #eee;
}

.mcw-chat-reply-form[hidden] {
	display: none;
}

.mcw-chat-reply-input {
	flex: 1 1 auto;
	border: 1px solid #dcdcde;
	border-radius: 999px;
	padding: 9px 14px;
	font-size: 14px;
}

.mcw-chat-reply-input:focus {
	outline: 2px solid var(--mcw-color, #2d8cff);
	outline-offset: 1px;
}

.mcw-chat-reply-send {
	border: none;
	background: var(--mcw-color, var(--mcw-toggle-color, #14213d));
	color: #fff;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	flex: 0 0 auto;
}

#mcw-widget.mcw-chat-open .mcw-bubbles,
#mcw-widget.mcw-chat-open .mcw-offline-popover {
	display: none;
}

.mcw-chat-footer {
	flex: 0 0 auto;
	text-align: center;
	font-size: 10.5px;
	color: #999;
	padding: 6px 0 8px;
	border-top: 1px solid #f0f0f0;
}

/* -------------------------------------------------------------------------
 * Chat layout fix v1.0.1
 * - Avoids a duplicated full header when GHL is embedded.
 * - Lets the chat adapt to the available viewport instead of relying on a
 *   rigid 320x460 box.
 * - Hides the launcher while chat is open so the panel can use that space.
 * ---------------------------------------------------------------------- */
.mcw-chat-panel {
	width: min(360px, calc(100vw - 32px));
	max-width: none;
	height: min(560px, calc(100dvh - 96px));
	max-height: calc(100dvh - 48px);
	min-height: 320px;
}

#mcw-widget.mcw-chat-open .mcw-toggle {
	display: none;
}

#mcw-widget.mcw-chat-open .mcw-chat-panel {
	bottom: 0;
}

.mcw-chat-body,
.mcw-chat-embed-body,
.mcw-chat-thread {
	min-height: 0;
}

/* GHL embedded mode: GHL keeps its own native header. Our plugin only adds
 * this small floating close button, so there is no second header row. */
.mcw-chat-panel-embed {
	width: min(400px, calc(100vw - 32px));
	height: min(640px, calc(100dvh - 72px));
	max-height: calc(100dvh - 48px);
	background: #fff;
}

.mcw-chat-embed-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 20;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	color: #222;
	font-size: 22px;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.mcw-chat-embed-close:hover {
	background: rgba(0, 0, 0, 0.14);
}

.mcw-chat-embed-body,
.mcw-chat-embed-body > div,
.mcw-chat-embed-body > iframe {
	width: 100%;
	max-width: 100%;
}

.mcw-chat-embed-body {
	height: 100%;
}

.mcw-chat-embed-body iframe {
	min-height: 0;
}

@media (max-width: 600px) {
	.mcw-chat-panel,
	.mcw-chat-panel-embed {
		position: fixed;
		left: 10px !important;
		right: 10px !important;
		bottom: 10px !important;
		width: auto;
		height: calc(100dvh - 20px);
		max-height: calc(100dvh - 20px);
		min-height: 0;
		border-radius: 16px;
	}

	.mcw-chat-body {
		padding: 12px;
	}

	.mcw-chat-field-row {
		gap: 7px;
	}
}

@supports not (height: 100dvh) {
	.mcw-chat-panel {
		height: min(560px, calc(100vh - 96px));
		max-height: calc(100vh - 48px);
	}

	.mcw-chat-panel-embed {
		height: min(640px, calc(100vh - 72px));
		max-height: calc(100vh - 48px);
	}

	@media (max-width: 600px) {
		.mcw-chat-panel,
		.mcw-chat-panel-embed {
			height: calc(100vh - 20px);
			max-height: calc(100vh - 20px);
		}
	}
}