.db-ai-widget {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	font-family: 'Poppins', sans-serif;
}

.db-ai-bubble {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #011340;
	color: #FEC917;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(1, 19, 64, 0.35);
	transition: transform 0.15s ease;
}

.db-ai-bubble:hover {
	transform: scale(1.06);
}

.db-ai-panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	width: 360px;
	max-width: calc(100vw - 40px);
	height: 480px;
	max-height: 70vh;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(1, 19, 64, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.db-ai-panel[hidden] {
	display: none;
}

.db-ai-header {
	background: #011340;
	color: #ffffff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

.db-ai-header-title {
	display: block;
	font-weight: 600;
	font-size: 15px;
}

.db-ai-header-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #FEC917;
}

.db-ai-header-status::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2ecc71;
	display: inline-block;
}

.db-ai-header-status.is-offline {
	color: #c9ccd1;
}

.db-ai-header-status.is-offline::before {
	background: #9aa5b1;
}

.db-ai-form input:disabled,
.db-ai-form button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.db-ai-close {
	background: none;
	border: none;
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

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

.db-ai-msg {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
}

.db-ai-msg-bot {
	background: #ffffff;
	color: #1A1A1A;
	border: 1px solid #E1E8ED;
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.db-ai-msg-user {
	background: #011340;
	color: #ffffff;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.db-ai-typing span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 3px;
	border-radius: 50%;
	background: #9aa5b1;
	animation: db-ai-blink 1.2s infinite ease-in-out;
}

.db-ai-typing span:nth-child(2) {
	animation-delay: 0.2s;
}

.db-ai-typing span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes db-ai-blink {
	0%, 80%, 100% {
		opacity: 0.3;
	}
	40% {
		opacity: 1;
	}
}

.db-ai-whatsapp-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25D366;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 16px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}

.db-ai-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #E1E8ED;
	background: #ffffff;
	flex-shrink: 0;
}

.db-ai-form input {
	flex: 1;
	border: 1px solid #E1E8ED;
	border-radius: 20px;
	padding: 10px 16px;
	/* 16px minimo: por debajo de eso iOS Safari hace zoom automatico al
	   enfocar el campo (comportamiento nativo del navegador, no un bug
	   visual pero si un salto molesto de zoom no pedido por el usuario). */
	font-size: 16px;
	font-family: inherit;
	outline: none;
}

.db-ai-form input:focus {
	border-color: #FEC917;
}

.db-ai-form button {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FEC917;
	color: #011340;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.db-ai-panel {
		width: calc(100vw - 24px);
		right: -8px;
		height: 65vh;
	}
}