/* Paleta/tipografía/sombras alineadas al mismo lenguaje visual del tema
   Transparencia (wp-content/themes/transparencia/assets/css/transparencia.css):
   colores sólidos (nada de degradados llamativos salvo el mismo dark-a-dark
   sutil que usa el hero del sitio), radios 8–16px, sombra suave
   0 10px 28px rgba(0,0,0,.18), Montserrat para títulos. */
#cbd-chat-root {
	position: fixed !important;
	bottom: 24px !important;
	z-index: 999999 !important;
	font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	box-sizing: border-box;
}
#cbd-chat-root, #cbd-chat-root * { box-sizing: border-box; }
#cbd-chat-root.cbd-pos-right { right: 24px; }
#cbd-chat-root.cbd-pos-left { left: 24px; }

/* Reset total en todos los botones/campo de texto del widget: algunos
   sitios (Bootstrap vía Elementor, resets del tema, etc.) traen sus
   propios estilos de <button>/<textarea> con suficiente especificidad
   para pisar los nuestros. "all: unset" los deja en blanco antes de que
   apliquemos nuestro propio diseño explícito, sin depender de adivinar
   qué está ganando en cada sitio. */
#cbd-chat-root button, #cbd-chat-root textarea {
	all: unset;
	box-sizing: border-box;
}

#cbd-chat-root .cbd-bubble {
	width: 58px;
	height: 58px;
	border-radius: 50% !important;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(0,0,0,.18);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cbd-color, #0d2f60);
	color: #fff;
	font-size: 24px;
	padding: 0;
	transition: box-shadow .15s ease;
}
#cbd-chat-root .cbd-bubble:hover { box-shadow: 0 12px 32px rgba(0,0,0,.24); }
.cbd-bubble img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.cbd-teaser {
	position: absolute;
	bottom: 74px;
	width: max-content;
	max-width: min(280px, calc(100vw - 48px));
	background: #fff;
	color: #25272b;
	padding: 12px 16px;
	border-radius: 12px !important;
	font-size: 14px;
	line-height: 1.5;
	white-space: normal;
	box-shadow: 0 10px 28px rgba(0,0,0,.18);
	cursor: pointer;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.cbd-teaser.cbd-teaser-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#cbd-chat-root.cbd-pos-right .cbd-teaser { right: 0; }
#cbd-chat-root.cbd-pos-left .cbd-teaser { left: 0; }

.cbd-panel {
	position: absolute;
	bottom: 74px;
	width: 350px;
	max-width: calc(100vw - 32px);
	height: 500px;
	max-height: 72vh;
	background: #fff;
	border-radius: 16px !important;
	box-shadow: 0 10px 28px rgba(0,0,0,.2);
	border: 1px solid #e7e7e4;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}
#cbd-chat-root.cbd-pos-right .cbd-panel { right: 0; }
#cbd-chat-root.cbd-pos-left .cbd-panel { left: 0; }
#cbd-chat-root.cbd-open .cbd-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Pantalla completa: el panel pasa a ocupar toda la ventana, sin importar
   la posición configurada del widget. */
#cbd-chat-root.cbd-fullscreen .cbd-panel {
	position: fixed;
	inset: 0;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	border-radius: 0 !important;
	border: none;
	transform: none;
}
#cbd-chat-root.cbd-fullscreen .cbd-bubble { display: none; }

.cbd-header {
	background: linear-gradient(135deg, var(--cbd-color, #0d2f60), #123a78);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cbd-header img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.cbd-header-text { flex: 1; line-height: 1.3; }
.cbd-header-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px; }
.cbd-header-subtitle { font-size: 12px; opacity: .85; }
#cbd-chat-root .cbd-fullscreen-toggle,
#cbd-chat-root .cbd-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	padding: 6px;
	border-radius: 6px;
	opacity: .85;
	transition: opacity .15s ease, background .15s ease;
}
#cbd-chat-root .cbd-fullscreen-toggle:hover, #cbd-chat-root .cbd-close:hover { opacity: 1; background: rgba(255,255,255,.14); }
#cbd-chat-root .cbd-close { font-size: 17px; }

.cbd-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f4f4f2;
}

.cbd-msg { max-width: 85%; padding: 10px 13px; border-radius: 12px !important; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.cbd-msg-bot { align-self: flex-start; background: #fff; border: 1px solid #e7e7e4; color: #25272b; }
.cbd-msg-user { align-self: flex-end; background: var(--cbd-color, #0d2f60); color: #fff; }
.cbd-msg-typing { align-self: flex-start; color: #8a8c88; font-style: italic; }

.cbd-citations { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cbd-citation { font-size: 12px; }
.cbd-citation a { color: var(--cbd-color2, #1a5fb4); text-decoration: underline; }

.cbd-choice-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#cbd-chat-root .cbd-choice-btn {
	display: block;
	width: 100%;
	border: 1px solid var(--cbd-color2, #1a5fb4);
	background: var(--cbd-color2, #1a5fb4);
	color: #fff;
	font-family: inherit;
	border-radius: 8px !important;
	padding: 8px 12px;
	font-size: 12.5px;
	cursor: pointer;
	text-align: left;
}
#cbd-chat-root .cbd-choice-btn:hover { background: var(--cbd-color, #0d2f60); }
#cbd-chat-root .cbd-choice-btn-secondary { background: #fff; color: var(--cbd-color2, #1a5fb4); }
#cbd-chat-root .cbd-choice-btn-secondary:hover { background: #f4f4f2; }

.cbd-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid #e7e7e4; background: #fff; }
#cbd-chat-root .cbd-input-row textarea {
	display: block;
	flex: 1;
	resize: none;
	border: 1.5px solid #e7e7e4;
	border-radius: 20px !important;
	padding: 8px 15px;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.4;
	color: #25272b;
	height: 38px;
	min-height: 38px;
	max-height: 160px;
	overflow-y: auto;
	background: #fff;
	transition: height .1s ease, border-color .15s ease;
}
#cbd-chat-root .cbd-input-row:focus-within textarea { border-color: var(--cbd-color2, #1a5fb4); }
#cbd-chat-root.cbd-fullscreen .cbd-input-row textarea { max-height: 240px; }
#cbd-chat-root .cbd-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50% !important;
	background: var(--cbd-color2, #1a5fb4);
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s ease;
}
#cbd-chat-root .cbd-send:hover:not(:disabled) { background: var(--cbd-color, #0d2f60); }
#cbd-chat-root .cbd-send:disabled { opacity: .5; cursor: default; }

@media (max-width: 480px) {
	.cbd-panel { width: calc(100vw - 24px); height: 68vh; }
}