#ctk-chat-root, #ctk-chat-root * {
	box-sizing: border-box !important;
}
#ctk-chat-root {
	position: fixed !important;
	bottom: 20px !important;
	z-index: 999999 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	line-height: normal !important;
}
#ctk-chat-root.ctk-position-right { right: 20px !important; left: auto !important; }
#ctk-chat-root.ctk-position-left { left: 20px !important; right: auto !important; }

/* Estas propiedades se blindan con !important porque algunas plantillas del tema
   (ficha de producto, categoría, etc.) traen su propio CSS de botones/imágenes que,
   sin esto, "pisa" el diseño del icono y cambia su aspecto según la página. */
.ctk-launcher {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	min-height: 64px !important;
	max-width: 64px !important;
	max-height: 64px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #2E86DE, #1B4F91) !important;
	box-shadow: 0 6px 20px rgba(20, 40, 80, .35) !important;
	border: none !important;
	outline: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
#ctk-chat-root.ctk-open .ctk-launcher {
	opacity: 0 !important;
	pointer-events: none !important;
	transform: scale(.8) !important;
}
.ctk-launcher:hover { transform: scale(1.06) !important; box-shadow: 0 8px 26px rgba(20, 40, 80, .45) !important; }
.ctk-launcher img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
	margin: 0 !important;
	border: 0 !important;
}
.ctk-launcher .ctk-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	background: #F5A623;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}

.ctk-panel {
	position: absolute;
	bottom: 78px;
	width: 460px !important;
	max-width: calc(100vw - 32px) !important;
	height: 700px !important;
	max-height: 84vh !important;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(20, 40, 80, .28);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(.97);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.ctk-position-right .ctk-panel { right: 0; }
.ctk-position-left .ctk-panel { left: 0; }
#ctk-chat-root.ctk-open .ctk-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.ctk-header {
	background: linear-gradient(135deg, #2E86DE, #1B4F91);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ctk-header img { width: 34px !important; height: 34px !important; max-width: 34px !important; border-radius: 50% !important; object-fit: cover !important; background: #fff !important; margin: 0 !important; border: 0 !important; display: block !important; }
.ctk-header-text { flex: 1; line-height: 1.2; }
.ctk-header-title { font-weight: 700; font-size: 14px; }
.ctk-header-sub { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 5px; }
.ctk-header-sub::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: #4CD964; display: inline-block;
}
.ctk-close {
	background: rgba(255,255,255,.15);
	border: none;
	color: #fff;
	width: 28px; height: 28px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.ctk-close:hover { background: rgba(255,255,255,.28); }

.ctk-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #F5F7FA;
}
.ctk-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.ctk-msg-bot { align-self: flex-start; background: #fff; color: #1c2b3a; border: 1px solid #E4E9F0; border-bottom-left-radius: 4px; }
.ctk-msg-user { align-self: flex-end; background: #2E86DE; color: #fff; border-bottom-right-radius: 4px; }
.ctk-msg-error { align-self: flex-start; background: #FFF3EC; color: #A94E1B; border: 1px solid #F5A623; }

.ctk-cards {
	align-self: flex-start;
	max-width: 92%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ctk-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #E4E9F0;
	border-radius: 12px;
	padding: 8px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.ctk-card:hover { box-shadow: 0 4px 14px rgba(20,40,80,.12); border-color: #B9D6F5; }
.ctk-card-image-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.ctk-card-image { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #F5F7FA; display: block; }
.ctk-card-badge {
	position: absolute;
	top: -4px;
	left: -4px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .02em;
	color: #fff;
	padding: 2px 6px;
	border-radius: 6px;
	line-height: 1.4;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	text-transform: uppercase;
}
.ctk-card-badge-oferta { background: #E0533D; }
.ctk-card-badge-nuevo { background: #4CD964; }
.ctk-card-badge-destacado { background: #F5A623; }
.ctk-card-info { min-width: 0; }
.ctk-card-name { font-size: 13px; font-weight: 600; color: #1c2b3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctk-card-meta { font-size: 12px; color: #6B7A8C; }
.ctk-card-cat {
	background: #EAF2FC;
	color: #1B4F91;
}
.ctk-card-cat img { border-radius: 50%; }

.ctk-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 14px; }
.ctk-typing span { width: 6px; height: 6px; border-radius: 50%; background: #B7C2CF; animation: ctk-bounce 1.2s infinite ease-in-out; }
.ctk-typing span:nth-child(2) { animation-delay: .15s; }
.ctk-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ctk-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ctk-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #E4E9F0;
	background: #fff;
}
.ctk-input-row textarea {
	flex: 1;
	resize: none;
	border: 1px solid #D8DFE7;
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 13.5px;
	font-family: inherit;
	max-height: 90px;
	outline: none;
}
.ctk-input-row textarea:focus { border-color: #2E86DE; }
.ctk-send {
	background: #2E86DE !important;
	border: none !important;
	color: #fff !important;
	width: 38px !important; height: 38px !important;
	min-width: 38px !important; min-height: 38px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.ctk-send svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
	flex-shrink: 0 !important;
	overflow: visible !important;
	pointer-events: none !important;
}
.ctk-send svg path {
	stroke: #fff !important;
	fill: none !important;
}
.ctk-send:hover { background: #1B4F91 !important; }
.ctk-send:disabled { background: #B7C2CF !important; cursor: default !important; }

@media (max-width: 420px) {
	.ctk-panel { width: calc(100vw - 24px) !important; height: 74vh !important; }
}

/* En escritorio (pantalla ancha) el icono flotante se ve más grande para que destaque más. */
@media (min-width: 641px) {
	.ctk-launcher {
		width: 78px !important;
		height: 78px !important;
		min-width: 78px !important;
		min-height: 78px !important;
		max-width: 78px !important;
		max-height: 78px !important;
	}
}