/* Conexiala Chatbot — contenedores del chat en el sitio. */

/* Incrustado en una página (shortcode) */
.ccb-embed {
	max-width: 760px; margin: 0 auto 2em;
	border-radius: 14px; overflow: hidden;
	box-shadow: 0 12px 40px rgba(11, 20, 26, .22);
	background: #0b141a;
}
.ccb-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
/* En el celular, nunca más alto que la pantalla: así la caja de escribir siempre se ve. */
@media (max-width: 520px) {
	.ccb-embed { max-height: calc(100svh - 24px); border-radius: 10px; }
}

/* Botón flotante */
.ccb-float { --ccb-accent: #21c063; position: fixed; right: 24px; bottom: 24px; z-index: 99999; }
.ccb-float--left { right: auto; left: 24px; }

.ccb-float__launcher {
	width: 62px; height: 62px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--ccb-accent); box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	display: grid; place-items: center; transition: transform .15s;
}
.ccb-float__launcher:hover, .ccb-float__launcher:focus { background: var(--ccb-accent); transform: scale(1.06); }
.ccb-float__launcher svg { grid-area: 1 / 1; transition: opacity .15s, transform .2s; }
.ccb-float .i-close { opacity: 0; transform: rotate(-90deg); }
.ccb-float.is-open .i-close { opacity: 1; transform: none; }
.ccb-float.is-open .i-chat { opacity: 0; transform: rotate(90deg); }

.ccb-float__greeting {
	position: absolute; right: 76px; bottom: 10px; width: max-content; max-width: 240px;
	background: #fff; color: #111b21; font-size: 14px; line-height: 1.35;
	padding: 10px 14px; border-radius: 12px 12px 2px 12px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
}
.ccb-float--left .ccb-float__greeting { right: auto; left: 76px; border-radius: 12px 12px 12px 2px; }
.ccb-float.is-open .ccb-float__greeting { display: none; }

.ccb-float__panel {
	position: absolute; right: 0; bottom: 78px;
	width: 380px; height: min(640px, calc(100vh - 130px));
	border-radius: 14px; overflow: hidden; background: #0b141a;
	box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
	opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; visibility: hidden;
	transform-origin: bottom right; transition: opacity .18s, transform .18s, visibility .18s;
}
.ccb-float--left .ccb-float__panel { right: auto; left: 0; transform-origin: bottom left; }
.ccb-float.is-open .ccb-float__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.ccb-float__panel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Celular: el chat a pantalla completa (float.js ajusta top/alto al espacio visible
   sobre el teclado) y se cierra con el botón de su propia cabecera. */
@media (max-width: 520px) {
	.ccb-float { right: 16px; bottom: 16px; }
	.ccb-float--left { left: 16px; }
	.ccb-float__panel { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 100%; border-radius: 0; transform: none; }
	.ccb-float.is-open .ccb-float__launcher { display: none; }
}

.ccb-admin-note { max-width: 760px; margin: 0 auto 8px; padding: 8px 12px; background: #fcf9e8; border-left: 4px solid #dba617; color: #6e4b00; font-size: 14px; }