/* ==========================================================================
   Ai ChatBox — Panel de Cliente
   ========================================================================== */

/* ---- Reinicio forzado (va PRIMERO a propósito): anula estilos de tema o
   constructor de páginas que suelen "colarse" sobre botones, enlaces e
   inputs genéricos (color de marca del tema, mayúsculas automáticas,
   bordes, sombras, etc.) antes de que apliquen los estilos propios de este
   panel más abajo en el archivo. Como este bloque es el primero, cualquier
   regla posterior con la misma o mayor especificidad lo sobrescribe. ---- */
.aichatbox-panel :where(button, input, select, textarea, a) {
	all: revert;
	box-sizing: border-box;
}

.aichatbox-panel,
.aichatbox-panel button,
.aichatbox-panel input,
.aichatbox-panel select,
.aichatbox-panel textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.aichatbox-panel *,
.aichatbox-panel *::before,
.aichatbox-panel *::after {
	box-sizing: border-box !important;
}

.aichatbox-panel {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1f2937;
	line-height: 1.5;
	display: flex;
	align-items: stretch;
	gap: 0;
	background: #eef1fb;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	border: 0;
	z-index: 100000;
}

.aichatbox-panel * {
	box-sizing: border-box;
}

/* Evita que el resto de la página (encabezado/pie del tema) genere una
   barra de scroll extra detrás del panel, ya que este cubre todo el
   viewport con position: fixed. */
body:has(.aichatbox-panel) {
	overflow: hidden !important;
}

.aichatbox-panel-main {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #eef1fb;
}

.aichatbox-panel-content {
	padding: 28px 32px 40px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.aichatbox-panel .aichatbox-panel-footer {
	flex: 0 0 auto;
	padding: 12px 32px !important;
	border-top: 1px solid #e5e7eb !important;
	background: #fff !important;
	color: #9ca3af !important;
	font-size: 12px !important;
	line-height: 1.5;
	text-align: center;
}

.aichatbox-panel .aichatbox-panel-footer a {
	color: #4338ca !important;
	text-decoration: underline !important;
}

/* ---- Sidebar oscuro ---- */
.aichatbox-sidebar {
	flex: 0 0 260px;
	width: 260px;
	background: linear-gradient(180deg, #0e1c46 0%, #0a1636 100%);
	color: #c7d2f0;
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	overflow-y: auto;
}

.aichatbox-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aichatbox-sidebar-brand:has(.aichatbox-sidebar-logo) {
	padding: 0;
}

.aichatbox-sidebar-brand:not(:has(.aichatbox-sidebar-logo)) {
	padding: 0 6px;
}

.aichatbox-sidebar-brand-icon {
	font-size: 22px;
	flex-shrink: 0;
}

.aichatbox-sidebar-logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.aichatbox-sidebar-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.aichatbox-sidebar-brand-text strong {
	color: #ffffff;
	font-size: 15px;
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aichatbox-sidebar-brand-text small {
	font-size: 10px;
	font-weight: 700;
	color: #8fa0d6;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.aichatbox-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aichatbox-sidebar-nav a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 11px 14px !important;
	border-radius: 10px !important;
	color: #b9c4ea !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}

.aichatbox-sidebar-nav a:hover {
	background: rgba(255, 255, 255, .06) !important;
	color: #ffffff !important;
}

.aichatbox-sidebar-nav a.active {
	background: #2f5fe0 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(47, 95, 224, .45);
}

.aichatbox-sidebar-nav-icon {
	font-size: 15px;
	width: 18px;
	text-align: center;
	flex-shrink: 0;
}

.aichatbox-sidebar-upgrade {
	margin-top: auto;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	padding: 18px 16px;
	text-align: center;
}

.aichatbox-sidebar-upgrade-icon {
	width: 42px;
	height: 42px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: #2f5fe0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.aichatbox-sidebar-upgrade strong {
	display: block;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
}

.aichatbox-sidebar-upgrade p {
	margin: 0 0 14px;
	font-size: 12px;
	color: #a9b6e2;
	line-height: 1.5;
}

.aichatbox-btn-upgrade {
	display: block !important;
	width: 100%;
	background: #2f5fe0 !important;
	border-color: #2f5fe0 !important;
	color: #ffffff !important;
	text-align: center;
}

.aichatbox-btn-upgrade:hover {
	background: #2650c4 !important;
	color: #ffffff !important;
}

.aichatbox-sidebar-logout {
	display: flex !important;
	align-items: center;
	gap: 8px;
	color: #8fa0d6 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	padding: 4px 6px !important;
}

.aichatbox-sidebar-logout:hover {
	color: #ffffff !important;
}

/* ---- Topbar superior (dentro del área principal) ---- */
.aichatbox-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 32px;
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.aichatbox-topbar-user {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.aichatbox-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #2f5fe0;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	flex-shrink: 0;
}

.aichatbox-topbar-greeting {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}

.aichatbox-topbar-greeting strong {
	color: #111827;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aichatbox-topbar-greeting small {
	color: #6b7280;
	font-size: 12.5px;
}

.aichatbox-topbar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aichatbox-icon-btn {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f3f4f6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.aichatbox-icon-btn-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2f5fe0;
	border: 2px solid #ffffff;
}

.aichatbox-help-btn {
	background: #ffffff !important;
	border-color: #d1d5db !important;
	color: #374151 !important;
}

/* ---- Subnavegación (dentro de un ChatBox) ---- */
.aichatbox-subnav {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	border-bottom: 2px solid #f3f4f6;
	margin: 16px 0 24px;
}

.aichatbox-subnav a {
	text-decoration: none !important;
	color: #6b7280 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 10px 14px !important;
	border-bottom: 2px solid transparent !important;
	margin-bottom: -2px;
	white-space: nowrap;
}

.aichatbox-subnav a:hover {
	color: #2563eb !important;
}

.aichatbox-subnav a.active {
	color: #2563eb !important;
	border-bottom-color: #2563eb !important;
}

/* ---- Secciones y encabezados ---- */
.aichatbox-panel-section {
	margin-bottom: 32px;
}

.aichatbox-panel-subsection {
	margin-top: 24px;
}

.aichatbox-panel-section h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: #111827;
}

.aichatbox-panel-section h3 {
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	margin: 20px 0 10px;
}

.aichatbox-panel-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.aichatbox-back-link {
	margin: 0 0 6px;
}

.aichatbox-back-link a {
	color: #6b7280;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.aichatbox-back-link a:hover {
	color: #2563eb;
}

.aichatbox-chip {
	display: inline-block;
	background: #eef2ff;
	color: #4338ca;
	font-weight: 700;
	font-size: 13px;
	padding: 4px 12px;
	border-radius: 999px;
}

.aichatbox-empty-state {
	color: #9ca3af;
	font-size: 14px;
	padding: 20px 0;
}

.aichatbox-panel .aichatbox-suspended-banner {
	display: block;
	background: #fef2f2 !important;
	color: #b91c1c !important;
	border: 1px solid #fecaca !important;
	padding: 12px 14px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 18px !important;
}

.aichatbox-panel .aichatbox-suspended-banner.aichatbox-renewal-warn {
	background: #fffbeb !important;
	color: #b45309 !important;
	border-color: #fde68a !important;
}

.aichatbox-panel .aichatbox-suspended-banner.aichatbox-renewal-ok {
	background: #eef2ff !important;
	color: #3730a3 !important;
	border-color: #c7d2fe !important;
}

.aichatbox-panel-card {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
}

/* ---- Tabla comparativa de planes (Mi Cuenta) ---- */
.aichatbox-plans-compare-wrap {
	overflow-x: auto;
	margin-bottom: 28px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

.aichatbox-plans-compare {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	background: #fff;
}

.aichatbox-plans-compare th,
.aichatbox-plans-compare td {
	padding: 12px 16px;
	text-align: center;
	border-bottom: 1px solid #f1f5f9;
	white-space: nowrap;
}

.aichatbox-plans-compare-label {
	text-align: left !important;
	color: #374151;
	font-weight: 600;
	white-space: normal !important;
	min-width: 220px;
}

.aichatbox-plans-compare thead th {
	border-bottom: 2px solid #e5e7eb;
	vertical-align: top;
}

.aichatbox-plans-compare-name {
	font-weight: 800;
	color: #0f172a;
	margin-top: 2px;
}

.aichatbox-plans-compare-price {
	font-weight: 700;
	color: #2f5fe0;
	font-size: 12px;
}

.aichatbox-plans-compare-current {
	background: #eef2ff;
}

.aichatbox-plans-compare-yes {
	color: #16a34a;
	font-weight: 800;
	font-size: 15px;
}

.aichatbox-plans-compare-no {
	color: #cbd5e1;
}

/* ---- Tarjetas de planes (Mi Cuenta) ---- */
.aichatbox-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.aichatbox-plan-card {
	position: relative;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aichatbox-plan-card.aichatbox-plan-current {
	border-color: #2f5fe0;
	box-shadow: 0 0 0 1px #2f5fe0;
}

.aichatbox-plan-card h3 {
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
}

.aichatbox-plan-price {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #2f5fe0;
}

.aichatbox-plan-features {
	list-style: none;
	margin: 0;
	padding: 0;
	flex-grow: 1;
	font-size: 13px;
	color: #4b5563;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aichatbox-plan-features li {
	padding-left: 18px;
	position: relative;
}

.aichatbox-plan-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #16a34a;
	font-weight: 700;
}

.aichatbox-plan-card form {
	margin-top: 4px;
}

.aichatbox-plan-cycle-toggle {
	display: flex;
	gap: 4px;
	background: #f3f4f6;
	border-radius: 999px;
	padding: 3px;
}

.aichatbox-cycle-btn {
	flex: 1 1 0;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 6px 8px;
	font-size: 12px;
	font-weight: 700;
	color: #4b5563;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.2;
}

.aichatbox-cycle-btn.is-active {
	background: #fff;
	color: #2f5fe0;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}

.aichatbox-cycle-save {
	font-size: 10px;
	font-weight: 700;
	color: #16a34a;
}

.aichatbox-plan-variant {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.aichatbox-plan-variant[hidden] {
	display: none;
}

.aichatbox-plan-card .aichatbox-btn {
	width: 100%;
	text-align: center;
}

.aichatbox-plan-note {
	margin: 4px 0 0;
	font-size: 12px;
	color: #9ca3af;
	text-align: center;
	font-style: italic;
}

.aichatbox-replies-usage {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
	background: #f3f4f6;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.aichatbox-replies-usage-full {
	background: #fef3c7;
	color: #b45309;
}

.aichatbox-feature-locked {
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	margin-bottom: 16px;
}

.aichatbox-feature-locked p {
	margin: 0 0 12px;
	color: #4b5563;
	font-size: 14px;
}

/* ---- Botones ---- */
.aichatbox-btn {
	display: inline-block !important;
	padding: 9px 18px !important;
	border-radius: 8px !important;
	border: 1px solid #d1d5db !important;
	background: #ffffff !important;
	color: #374151 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

/* Botones que usan la clase genérica ".button" de WordPress (selector de
   imagen, "Enviar prueba" del webhook, etc.): sin este bloque quedan sin
   ningún estilo propio del plugin y el tema activo termina definiendo su
   apariencia (color, forma, tamaño) — por eso todo va con !important. */
.aichatbox-panel .button {
	display: inline-block !important;
	padding: 7px 14px !important;
	border-radius: 6px !important;
	border: 1px solid #d1d5db !important;
	background: #ffffff !important;
	color: #374151 !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	vertical-align: middle;
}

.aichatbox-panel .button:hover {
	background: #f3f4f6 !important;
	border-color: #9ca3af !important;
	color: #374151 !important;
}

.aichatbox-panel .button-small {
	padding: 4px 10px !important;
	font-size: 11px !important;
}

.aichatbox-btn:hover {
	background: #f3f4f6 !important;
	color: #111827 !important;
}

.aichatbox-btn-primary {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

.aichatbox-btn-primary:hover {
	background: #1d4ed8 !important;
	color: #ffffff !important;
}

.aichatbox-danger-link {
	background: none !important;
	border: none !important;
	color: #b91c1c !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	font-size: 13px !important;
	padding: 0 !important;
	margin-top: 8px;
}

.aichatbox-btn-small {
	padding: 5px 12px !important;
	font-size: 12px !important;
}

.aichatbox-btn-danger {
	color: #b91c1c !important;
	border-color: #fca5a5 !important;
	background: #fff !important;
}

.aichatbox-btn-danger:hover {
	background: #b91c1c !important;
	border-color: #b91c1c !important;
	color: #fff !important;
}

.aichatbox-inline-form {
	display: inline-block;
	margin-left: 6px;
}

.aichatbox-link-delete {
	background: none !important;
	border: none !important;
	color: #b91c1c !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 0 !important;
}

/* ---- Historial de Consultas ---- */
.aichatbox-history-filters {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	padding: 14px 16px;
	border-radius: 10px;
	margin: 14px 0;
}

.aichatbox-history-filters label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #374151;
}

.aichatbox-conversation-cell {
	background: #f9fafb !important;
}

.aichatbox-conversation {
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aichatbox-conversation-item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 14px;
}

.aichatbox-conversation-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 6px;
}

.aichatbox-conversation-question,
.aichatbox-conversation-answer {
	margin: 4px 0;
	font-size: 13px;
	color: #374151;
}

.aichatbox-badge-warn {
	background: #fffbeb;
	color: #b45309;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	margin-left: 6px;
}

/* ---- Grilla del dashboard: contenido principal + panel de ayuda ---- */
.aichatbox-dashboard-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 1000px) {
	.aichatbox-dashboard-grid {
		grid-template-columns: 1fr;
	}
}

.aichatbox-panel-heading-split {
	justify-content: space-between;
	align-items: flex-start;
}

.aichatbox-panel-heading-split h2 {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aichatbox-panel-subtitle {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: #6b7280;
}

/* ---- Panel "¿Necesitas ayuda?" ---- */
.aichatbox-help-card {
	background: linear-gradient(160deg, #e8edfd 0%, #eef1fb 100%);
	border: 1px solid #dfe4fa;
	border-radius: 16px;
	padding: 22px 20px;
}

.aichatbox-help-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 14px;
	box-shadow: 0 4px 10px rgba(47, 95, 224, .12);
}

.aichatbox-help-card h3 {
	margin: 0 0 6px !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #111827 !important;
	border: none !important;
}

.aichatbox-help-card p {
	margin: 0 0 16px;
	font-size: 13px;
	color: #4b5563;
	line-height: 1.5;
}

.aichatbox-help-card-btn {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: #2f5fe0 !important;
	font-weight: 700 !important;
}

.aichatbox-help-card-btn:hover {
	background: #f8faff !important;
	color: #2650c4 !important;
}

.aichatbox-help-card-security {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(47, 95, 224, .12);
}

.aichatbox-help-card-security-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.aichatbox-help-card-security strong {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 3px;
}

.aichatbox-help-card-security p {
	margin: 0;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.45;
}

/* ---- Consejos rápidos ---- */
.aichatbox-quick-tips {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	margin-top: 20px;
}

.aichatbox-quick-tips h3 {
	margin: 0 0 16px !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	color: #111827 !important;
	border: none !important;
}

.aichatbox-quick-tips-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.aichatbox-quick-tip {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.aichatbox-quick-tip-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.aichatbox-quick-tip-icon-blue {
	background: #e3ecff;
}

.aichatbox-quick-tip-icon-purple {
	background: #f1e6fb;
}

.aichatbox-quick-tip-icon-green {
	background: #dcf5e6;
}

.aichatbox-quick-tip strong {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: #111827;
	margin-bottom: 4px;
}

.aichatbox-quick-tip p {
	margin: 0;
	font-size: 12.5px;
	color: #6b7280;
	line-height: 1.5;
}

/* ---- Tarjetas de ChatBox (listado) ---- */
.aichatbox-bot-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.aichatbox-bot-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.aichatbox-bot-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
}

.aichatbox-bot-card-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #111827;
}

.aichatbox-bot-card-header-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.aichatbox-card-menu {
	position: relative;
}

.aichatbox-card-menu summary {
	list-style: none;
	cursor: pointer;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	font-size: 16px;
	font-weight: 700;
}

.aichatbox-card-menu summary::-webkit-details-marker {
	display: none;
}

.aichatbox-card-menu summary:hover {
	background: #f3f4f6;
	color: #374151;
}

.aichatbox-card-menu[open] summary {
	background: #f3f4f6;
	color: #374151;
}

.aichatbox-card-menu-list {
	position: absolute;
	right: 0;
	top: 30px;
	z-index: 5;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
	padding: 6px;
	min-width: 190px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aichatbox-card-menu-list a,
.aichatbox-card-menu-list button {
	display: block !important;
	width: 100%;
	text-align: left;
	padding: 8px 10px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	color: #374151 !important;
	text-decoration: none !important;
	background: none !important;
	border: none !important;
	cursor: pointer;
}

.aichatbox-card-menu-list a:hover,
.aichatbox-card-menu-list button:hover {
	background: #f3f4f6 !important;
}

.aichatbox-card-menu-danger {
	color: #b91c1c !important;
}

.aichatbox-card-menu-danger:hover {
	background: #fef2f2 !important;
}

.aichatbox-bot-card-stats {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	border-top: 1px solid #f3f4f6;
	border-bottom: 1px solid #f3f4f6;
	padding: 14px 0;
	margin-bottom: 14px;
}

.aichatbox-stat-icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	margin-bottom: 6px;
}

.aichatbox-stat-icon-blue {
	background: #e3ecff;
}

.aichatbox-stat-icon-purple {
	background: #f1e6fb;
}

.aichatbox-stat-icon-green {
	background: #dcf5e6;
}

.aichatbox-bot-card-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.aichatbox-bot-card-actions .aichatbox-btn {
	flex: 1;
	text-align: center;
	padding: 10px 10px;
	font-size: 12.5px;
}

.aichatbox-btn-block {
	display: block !important;
	width: 100%;
	text-align: center;
	padding: 10px 10px !important;
	font-size: 12.5px !important;
}

/* ---- Chips de estado ---- */
.aichatbox-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.aichatbox-badge-active {
	background: #dcfce7;
	color: #166534;
}

.aichatbox-badge-suspended {
	background: #fee2e2;
	color: #991b1b;
}

/* ---- Estadísticas (números destacados) ---- */
.aichatbox-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.aichatbox-stat-value {
	font-size: 20px;
	font-weight: 800;
	color: #111827;
}

.aichatbox-stat-label {
	font-size: 11px;
	color: #6b7280;
	text-align: center;
}

.aichatbox-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.aichatbox-stat-card {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 10px;
	text-align: center;
}

.aichatbox-stat-card .aichatbox-stat-value {
	font-size: 24px;
}

.aichatbox-chart-box {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 24px;
}

/* ---- Formularios ---- */
.aichatbox-panel-form .aichatbox-field {
	margin-bottom: 14px;
}

.aichatbox-panel-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #374151;
	margin-bottom: 4px;
}

.aichatbox-panel-form input[type="text"],
.aichatbox-panel-form input[type="email"],
.aichatbox-panel-form input[type="number"],
.aichatbox-panel-form select,
.aichatbox-panel-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}

.aichatbox-panel-form input[type="color"] {
	width: 48px;
	height: 34px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 2px;
	background: #fff;
}

.aichatbox-api-key-box code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: .02em;
}

.aichatbox-quota {
	font-size: 13px;
	color: #4b5563;
}

/* ---- Fieldsets del editor avanzado ---- */
.aichatbox-panel-fieldset {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px 20px;
	margin: 0 0 20px;
	background: #fff;
}

.aichatbox-panel-fieldset legend {
	font-weight: 700;
	padding: 0 8px;
	color: #111827;
}

.aichatbox-field-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
}

.aichatbox-field-inline label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
	font-size: 13px;
}

.aichatbox-auto-reply-row {
	border-top: 1px dashed #e5e7eb;
	padding-top: 12px;
	margin-top: 12px;
}

.aichatbox-auto-reply-row:first-of-type {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.aichatbox-reply-image-picker {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.aichatbox-reply-image-preview {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
}

.aichatbox-reply-buttons-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}

.aichatbox-reply-button-row {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.aichatbox-reply-button-row input {
	flex: 1 1 160px;
}

.aichatbox-reply-remove-button {
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
	padding: 4px 8px;
}

#aichatbox-lead-fields-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.aichatbox-lead-field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aichatbox-lead-field-row .aichatbox-lead-field-label { flex: 1 1 220px; min-width: 160px; }
.aichatbox-lead-field-row .aichatbox-lead-field-type { flex: 0 0 auto; }
.aichatbox-lead-field-required { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 400; }
.aichatbox-lead-field-remove-row { flex: 0 0 auto; font-size: 15px; line-height: 1; padding: 4px 8px; }


/* ---- Tablas ---- */
.aichatbox-panel-table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin-top: 12px !important;
	font-size: 13px !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px;
	overflow: hidden;
}

.aichatbox-panel-table th {
	text-align: left !important;
	background: #f9fafb !important;
	color: #374151 !important;
	font-weight: 700 !important;
	padding: 10px 12px !important;
	border: none !important;
	border-bottom: 1px solid #e5e7eb !important;
}

.aichatbox-panel-table td {
	padding: 10px 12px !important;
	border: none !important;
	border-bottom: 1px solid #f3f4f6 !important;
	color: #374151 !important;
}

.aichatbox-panel-table tr:last-child td {
	border-bottom: 0 !important;
}

/* ---- Bloques de código (código de integración) ---- */
.aichatbox-embed-codes strong {
	color: #111827;
}

.aichatbox-embed-label {
	margin-top: 18px;
	margin-bottom: 6px;
}

.aichatbox-panel-subsection .aichatbox-embed-label:first-of-type {
	margin-top: 10px;
}

.aichatbox-shortcode-box {
	background: var(--ac-bg);
	border: 1px solid var(--ac-border-soft);
	border-radius: var(--ac-radius-sm);
	padding: 9px 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
}

.aichatbox-shortcode-box code {
	flex: 1 1 auto;
	min-width: 0;
	width: 0;
	overflow-wrap: anywhere;
	word-break: break-all;
	white-space: pre-wrap;
	background: none;
	padding: 2px 0;
	color: #4338ca;
	line-height: 1.5;
}

.aichatbox-panel .aichatbox-copy-code {
	flex-shrink: 0;
	margin-top: 1px;
	background: #eef2ff !important;
	color: #4338ca !important;
	border: 1px solid #c7d2fe !important;
	border-radius: 999px !important;
	padding: 4px 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.aichatbox-panel .aichatbox-copy-code:hover,
.aichatbox-panel .aichatbox-copy-code:focus {
	background: #e0e7ff !important;
	color: #4338ca !important;
	border-color: #c7d2fe !important;
}

.aichatbox-panel .aichatbox-copy-code.is-copied {
	background: #dcfce7 !important;
	color: #15803d !important;
	border-color: #bbf7d0 !important;
}

/* ---- Paginación ---- */
.aichatbox-pagination {
	margin-top: 14px;
}

.aichatbox-pagination .page-numbers {
	display: inline-block;
	padding: 4px 10px;
	margin-right: 4px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	text-decoration: none;
	font-size: 13px;
	color: #374151;
}

.aichatbox-pagination .page-numbers.current {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.aichatbox-panel {
		flex-direction: column;
	}

	.aichatbox-sidebar {
		width: 100%;
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 8px 12px;
		gap: 8px;
	}

	.aichatbox-sidebar-brand {
		padding: 0;
	}

	/* La imagen de logo se define pensando en el ancho completo del sidebar
	   vertical (260px); en la barra horizontal de mobile eso la hacía verse
	   gigante — se limita a una altura de ícono. */
	.aichatbox-sidebar-logo {
		width: auto;
		max-width: 120px;
		max-height: 24px;
	}

	.aichatbox-sidebar-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}

	.aichatbox-sidebar-nav a {
		padding: 6px 10px !important;
		font-size: 12px !important;
		gap: 6px;
	}

	.aichatbox-sidebar-nav-icon {
		font-size: 13px;
	}

	.aichatbox-sidebar-upgrade {
		display: none;
	}

	.aichatbox-sidebar-logout {
		margin-left: auto;
		font-size: 12px !important;
	}
}

@media (max-width: 640px) {
	.aichatbox-topbar {
		padding: 10px 14px;
		gap: 8px;
	}

	.aichatbox-avatar {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}

	.aichatbox-topbar-greeting strong {
		font-size: 13px;
	}

	.aichatbox-topbar-greeting small {
		display: none;
	}

	.aichatbox-icon-btn {
		width: 30px;
		height: 30px;
	}

	.aichatbox-help-btn {
		padding: 6px 10px !important;
		font-size: 12px !important;
	}

	.aichatbox-panel-content {
		padding: 14px 14px 24px;
	}

	.aichatbox-bot-cards {
		grid-template-columns: 1fr;
	}

	.aichatbox-panel-heading-split {
		flex-direction: column;
		align-items: stretch;
	}

	.aichatbox-panel-heading-split form {
		width: 100%;
	}

	.aichatbox-panel-heading-split .aichatbox-btn {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Editor de ChatBox — mismo lenguaje visual que el editor de wp-admin:
   pestañas internas (JS, sin recargar), filas tipo form-table, y vista
   previa en vivo del widget.
   ========================================================================== */

.aichatbox-panel {
	--ac-primary: #6366f1;
	--ac-primary-dark: #4f46e5;
	--ac-primary-light: #eef2ff;
	--ac-surface: #ffffff;
	--ac-bg: #f8fafc;
	--ac-border: #e2e8f0;
	--ac-border-soft: #eef1f6;
	--ac-text: #1e293b;
	--ac-text-muted: #64748b;
	--ac-radius-sm: 8px;
	--ac-radius-md: 12px;
	--ac-radius-lg: 18px;
	--ac-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	--ac-shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
	--ac-shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);
	--ac-transition: all .18s cubic-bezier(.4, 0, .2, 1);
}

/* ---- Nombre del ChatBox (fila destacada arriba del editor) ---- */
.aichatbox-name-card {
	background: var(--ac-surface) !important;
	border: 1px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-lg) !important;
	padding: 20px 24px !important;
	margin-bottom: 18px !important;
	box-shadow: var(--ac-shadow-sm) !important;
}

/* ---- Pestañas internas del editor (JS, sin recargar) ---- */
.aichatbox-edit-tabs {
	display: inline-flex !important;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 18px !important;
	padding: 5px !important;
	background: var(--ac-border-soft) !important;
	border-radius: 999px !important;
}

.aichatbox-edit-tab-btn {
	background: transparent !important;
	border: none !important;
	padding: 9px 18px !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--ac-text-muted) !important;
	border-radius: 999px !important;
	transition: var(--ac-transition);
}

.aichatbox-edit-tab-btn:hover {
	color: var(--ac-primary-dark) !important;
}

.aichatbox-edit-tab-btn.active {
	background: var(--ac-surface) !important;
	color: var(--ac-primary-dark) !important;
	font-weight: 700 !important;
	box-shadow: var(--ac-shadow-sm);
}

.aichatbox-edit-tab-content {
	display: none;
	background: var(--ac-surface) !important;
	border: 1px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-lg) !important;
	padding: 24px 26px !important;
	box-shadow: var(--ac-shadow-sm) !important;
}

.aichatbox-edit-tab-content.active {
	display: block !important;
}

/* ---- Filas de campo del editor (basadas en div, no en <table>: se acabaron
   los bordes de celda "estilo planilla" que dejaban un aire anticuado) ---- */
.aichatbox-field-rows {
	width: 100%;
	border: none !important;
}

.aichatbox-field-row {
	display: grid !important;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 16px 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--ac-border-soft) !important;
}

.aichatbox-field-rows .aichatbox-field-row:last-child {
	border-bottom: none !important;
}

@media (max-width: 640px) {
	.aichatbox-field-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.aichatbox-name-card {
		padding: 14px 16px !important;
	}

	.aichatbox-edit-tabs {
		width: 100%;
		display: flex !important;
		padding: 4px !important;
		margin-bottom: 14px !important;
	}

	.aichatbox-edit-tab-btn {
		flex: 1 1 auto;
		padding: 7px 8px !important;
		font-size: 12px !important;
	}

	.aichatbox-edit-tab-content {
		padding: 16px 14px !important;
	}
}

.aichatbox-field-label {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	font-weight: 600 !important;
	font-size: 13px !important;
	color: var(--ac-text) !important;
	border: none !important;
	background: none !important;
}

.aichatbox-field-label label {
	font-weight: 600 !important;
	color: var(--ac-text) !important;
}

.aichatbox-field-control {
	min-width: 0;
	border: none !important;
	background: none !important;
}

.aichatbox-field-control input[type="text"],
.aichatbox-field-control input[type="email"],
.aichatbox-field-control input[type="number"],
.aichatbox-field-control select,
.aichatbox-field-control textarea {
	width: 100% !important;
	max-width: 480px;
	box-sizing: border-box !important;
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-sm) !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	color: var(--ac-text) !important;
	background: #ffffff !important;
	transition: var(--ac-transition);
}

.aichatbox-field-control input[type="text"]:focus,
.aichatbox-field-control input[type="email"]:focus,
.aichatbox-field-control input[type="number"]:focus,
.aichatbox-field-control select:focus,
.aichatbox-field-control textarea:focus {
	border-color: var(--ac-primary) !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
	outline: none !important;
}

.aichatbox-field-control input[type="color"] {
	width: 44px !important;
	height: 32px !important;
	border: 1.5px solid var(--ac-border) !important;
	border-radius: var(--ac-radius-sm) !important;
	padding: 2px !important;
}

.aichatbox-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.aichatbox-field-control .description,
.aichatbox-field-rows .description {
	color: var(--ac-text-muted) !important;
	font-size: 12px !important;
	margin: 6px 0 0 !important;
	border: none !important;
}

.aichatbox-subheading {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--ac-border-soft);
}

.aichatbox-subheading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.aichatbox-import-export-box {
	background: var(--ac-primary-light);
	border: 1px solid #c7d2fe;
	border-radius: var(--ac-radius-md, 10px);
	padding: 14px 16px;
	margin: 12px 0 18px;
}
.aichatbox-import-export-box .aichatbox-import-controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.aichatbox-import-export-box .aichatbox-import-controls label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 400; }
.aichatbox-import-export-box .description { margin-top: 8px; margin-bottom: 0; }

/* ---- Layout de dos columnas: editor + vista previa en vivo ---- */
.aichatbox-editor-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 22px;
	align-items: start;
}

@media (max-width: 1000px) {
	.aichatbox-editor-layout {
		grid-template-columns: 1fr;
	}
}

.aichatbox-preview-sticky {
	position: sticky;
	top: 20px;
	background: var(--ac-surface);
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	padding: 18px;
	box-shadow: var(--ac-shadow-sm);
}

.aichatbox-preview-sticky h3 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #111827;
}

/* ---- Widget de vista previa (réplica del chat real) ---- */
.aichatbox-live-preview {
	--aichatbox-primary: #2563eb;
	--aichatbox-header-text: #ffffff;
	--aichatbox-window-bg: #ffffff;
	--aichatbox-user-bubble: #2563eb;
	--aichatbox-bot-bubble: #ffffff;
	--aichatbox-border-color: #e5e7eb;
	--aichatbox-border-width: 1px;
	--aichatbox-border-radius: 16px;
	position: relative;
	min-height: 400px;
}

.aichatbox-preview-window {
	width: 100%;
	height: 380px;
	background: var(--aichatbox-window-bg);
	border-radius: var(--aichatbox-border-radius);
	border: var(--aichatbox-border-width) solid var(--aichatbox-border-color);
	box-shadow: var(--ac-shadow-lg);
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.aichatbox-live-preview.open .aichatbox-preview-window { display: flex; }

.aichatbox-preview-toggle {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--aichatbox-primary) !important;
	color: #fff !important;
	border: none !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: var(--ac-shadow-md) !important;
	transition: var(--ac-transition);
}
.aichatbox-preview-toggle:hover { transform: scale(1.06); }

.aichatbox-preview-header {
	background: var(--aichatbox-primary);
	color: var(--aichatbox-header-text);
	padding: 12px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	gap: 8px;
}

.aichatbox-preview-header-info {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.aichatbox-preview-header-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.aichatbox-preview-title-text {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aichatbox-preview-subtitle-text {
	font-size: 11px;
	opacity: .85;
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aichatbox-preview-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
	display: inline-block;
	flex-shrink: 0;
}

.aichatbox-preview-close-icon {
	cursor: default;
	font-size: 18px;
	flex-shrink: 0;
}

.aichatbox-preview-messages {
	flex: 1;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	font-size: 13px;
}

.aichatbox-preview-msg {
	max-width: 80%;
	padding: 8px 11px;
	border-radius: 12px;
	line-height: 1.4;
}

.aichatbox-preview-msg.bot {
	align-self: flex-start;
	background: var(--aichatbox-bot-bubble);
	border: 1px solid #e5e7eb;
	color: #1f2937;
}

.aichatbox-preview-msg.user {
	align-self: flex-end;
	background: var(--aichatbox-user-bubble);
	color: #fff;
}

.aichatbox-preview-form {
	padding: 10px;
	border-top: 1px solid #e5e7eb;
	background: #fff;
}

.aichatbox-preview-placeholder-text {
	display: block;
	color: #9ca3af;
	font-size: 13px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 8px 10px;
}

.aichatbox-preview-branding {
	text-align: center;
	padding: 6px 10px;
	background: #fff;
	border-top: 1px solid #f3f4f6;
	font-size: 11px;
}

.aichatbox-preview-branding a,
.aichatbox-preview-branding span {
	color: #9ca3af;
	text-decoration: none;
}

.aichatbox-preview-branding a:hover {
	color: var(--aichatbox-primary);
	text-decoration: underline;
}

.aichatbox-preview-note {
	color: var(--ac-text-muted);
	font-size: 12px;
	margin: 10px 0 0;
}

/* ---- Botón de guardar destacado ---- */
.aichatbox-btn-hero {
	padding: 12px 26px !important;
	font-size: 14px !important;
	border-radius: var(--ac-radius-sm) !important;
	background: linear-gradient(135deg, var(--ac-primary), var(--ac-primary-dark)) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	box-shadow: 0 3px 10px rgba(79, 70, 229, .35);
	cursor: pointer !important;
}

.aichatbox-btn-hero:hover {
	filter: brightness(1.05) !important;
}

/* ==========================================================================
   Refinamiento visual adicional: íconos de campo, intros de pestaña, marca
   con nombre del sitio, y fondo con textura suave — inspirado en el mockup
   de referencia.
   ========================================================================== */

body:has(.aichatbox-panel) {
	background: #f3f5fb;
}

.aichatbox-panel-wrapper,
.aichatbox-panel {
	position: relative;
}

.aichatbox-field-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 50%;
	background: var(--ac-primary-light);
	font-size: 14px;
	flex-shrink: 0;
}

.aichatbox-tab-intro {
	margin-bottom: 18px;
}

.aichatbox-tab-intro h3 {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
	border: none;
	padding: 0;
}

.aichatbox-tab-intro p {
	margin: 0;
	color: var(--ac-text-muted);
	font-size: 13px;
}

/* ==========================================================================
   Selector de imágenes (wp.media) — a diferencia de todo lo anterior, esta
   ventana NO se inserta dentro de .aichatbox-panel: WordPress la agrega
   directo en <body>. Por eso el reset de arriba no la alcanza y el tema
   activo del sitio se cuela en sus pestañas, bordes y botones (color de
   enlaces, fondo tipo "pill", etc.). Los selectores van encadenados a
   propósito (varias clases reales en vez de una sola) para tener MÁS
   especificidad que cualquier regla genérica del tema, y además todo lleva
   !important — así gana pase lo que pase.
   ========================================================================== */
body div.media-modal .media-modal-close {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #666 !important;
}

body div.media-modal .media-modal-close:hover {
	color: #000 !important;
}

body div.media-modal div.media-frame-router a.media-menu-item,
body div.media-modal div.media-frame-menu a.media-menu-item,
body div.media-modal a.media-menu-item {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #64748b !important;
	padding: 12px 16px !important;
	font-weight: 600 !important;
}

body div.media-modal div.media-frame-router a.media-menu-item.active,
body div.media-modal div.media-frame-menu a.media-menu-item.active {
	background: #fff !important;
	background-color: #fff !important;
	color: #1f2937 !important;
	box-shadow: inset 4px 0 0 0 #2f5fe0 !important;
}

body div.media-modal div.media-frame-router a.media-menu-item:hover,
body div.media-modal div.media-frame-menu a.media-menu-item:hover {
	background: none !important;
	background-color: transparent !important;
	color: #2f5fe0 !important;
}

body div.media-modal div.media-toolbar a.button,
body div.media-modal div.media-toolbar button.button,
body div.media-modal div.media-frame-content a.button,
body div.media-modal div.media-frame-toolbar a.button {
	border-radius: 6px !important;
	border: 1px solid #d1d5db !important;
	background: #ffffff !important;
	background-image: none !important;
	color: #374151 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	font-weight: 600 !important;
}

body div.media-modal div.media-toolbar a.button:hover,
body div.media-modal div.media-toolbar button.button:hover {
	background: #f3f4f6 !important;
	background-image: none !important;
	border-color: #9ca3af !important;
	color: #374151 !important;
}

body div.media-modal div.media-toolbar a.button-primary,
body div.media-modal div.media-toolbar button.button-primary {
	background: #2f5fe0 !important;
	background-image: none !important;
	border-color: #2f5fe0 !important;
	color: #ffffff !important;
}

body div.media-modal div.media-toolbar a.button-primary:hover,
body div.media-modal div.media-toolbar button.button-primary:hover {
	background: #2650c4 !important;
	background-image: none !important;
	border-color: #2650c4 !important;
	color: #ffffff !important;
}

body div.media-modal div.media-toolbar a.button-primary.disabled,
body div.media-modal div.media-toolbar button.button-primary.disabled,
body div.media-modal div.media-toolbar a.button-primary:disabled,
body div.media-modal div.media-toolbar button.button-primary:disabled {
	background: #e5e7eb !important;
	background-image: none !important;
	border-color: #e5e7eb !important;
	color: #9ca3af !important;
}

body div.media-modal a {
	color: #2f5fe0 !important;
}

body div.media-modal .media-progress-bar .bar {
	background: #2f5fe0 !important;
}