/* Burbuja flotante y popover de acceso rapido de Nexo IA (IA-2b). El
   chat completo vive en el modulo de pantalla completa -- ver
   nexo-ia-view.css. Usa los tokens de design-system.css (--nexo-*)
   para verse consistente con el resto del shell. */

#nexoIaBurbuja {
 position: fixed;
 right: 22px;
 bottom: 22px;
 width: 56px;
 height: 56px;
 padding: 0;
 margin: 0;
 overflow: hidden;
 border-radius: var(--nexo-radius-pill);
 background: linear-gradient(135deg, #2563ff, #7c3aed);
 color: #fff;
 border: none;
 box-shadow: var(--nexo-shadow-brand);
 display: none;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 1200;
 transition: transform .15s ease;
}

#nexoIaBurbuja.visible {
 display: flex;
}

#nexoIaBurbuja:hover {
 transform: scale(1.05);
}

#nexoIaBurbuja .nexo-ia-marca {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
 object-position: center 15%;
}

#nexoIaBurbuja.con-alerta::after {
 content: "";
 position: absolute;
 top: 4px;
 right: 4px;
 width: 11px;
 height: 11px;
 border-radius: 50%;
 background: var(--nexo-danger);
 border: 2px solid var(--nexo-bg);
}

#nexoIaPopover {
 position: fixed;
 right: 22px;
 bottom: 90px;
 width: 300px;
 max-width: calc(100vw - 44px);
 background: var(--nexo-surface-strong);
 backdrop-filter: var(--nexo-glass-blur);
 border: 1px solid var(--nexo-line);
 border-radius: var(--nexo-radius-lg);
 box-shadow: var(--nexo-shadow-soft);
 display: none;
 flex-direction: column;
 overflow: hidden;
 z-index: 1200;
 font-family: var(--nexo-font-family);
}

#nexoIaPopover.abierto {
 display: flex;
}

.nexo-ia-popover-cabecera {
 display: flex;
 align-items: center;
 gap: var(--nexo-space-2);
 padding: var(--nexo-space-3) var(--nexo-space-4);
 background: linear-gradient(135deg, #2563ff, #7c3aed);
 color: #fff;
}

.nexo-ia-popover-cabecera .nexo-ia-marca {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 object-fit: cover;
 object-position: center 20%;
 flex-shrink: 0;
 background: #fff;
 box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

.nexo-ia-popover-titulo {
 font-weight: 600;
 font-size: var(--nexo-font-size-md);
}

.nexo-ia-popover-cargando {
 padding: var(--nexo-space-4);
 margin: 0;
 font-size: var(--nexo-font-size-sm);
 color: var(--nexo-text-muted);
}

.nexo-ia-popover-resumen {
 padding: var(--nexo-space-3) var(--nexo-space-4);
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.nexo-ia-popover-resumen p {
 margin: 0;
 font-size: var(--nexo-font-size-sm);
 color: var(--nexo-text);
}

.nexo-ia-popover-preguntas {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 0 var(--nexo-space-4) var(--nexo-space-3);
}

/* !important necesario: theme-runtime.css fuerza
   background:var(--brand-color) !important en cualquier <button> para
   que respete el color de marca configurable del negocio. Los botones
   de Nexo IA usan a proposito la identidad fija del personaje (ver
   IA-5), no el color de marca del negocio, asi que hay que ganarle a
   esa regla global. */
.nexo-ia-popover-preguntas button {
 text-align: left;
 border: 1px solid var(--nexo-line) !important;
 background: var(--nexo-surface-soft) !important;
 backdrop-filter: var(--nexo-glass-blur);
 color: var(--nexo-text) !important;
 border-radius: var(--nexo-radius-sm);
 padding: 6px 10px;
 font-size: var(--nexo-font-size-sm);
 cursor: pointer;
}

.nexo-ia-popover-preguntas button:hover {
 background: color-mix(in srgb, #2563ff 16%, var(--nexo-surface-soft)) !important;
}

.nexo-ia-popover-abrir {
 margin: 0 var(--nexo-space-4) var(--nexo-space-4);
 border: 1px solid color-mix(in srgb, #2563ff 45%, transparent) !important;
 background: color-mix(in srgb, #2563ff 55%, transparent) !important;
 backdrop-filter: var(--nexo-glass-blur);
 color: #fff !important;
 border-radius: var(--nexo-radius-sm);
 padding: 10px;
 font-size: var(--nexo-font-size-sm);
 font-weight: 600;
 cursor: pointer;
}

.nexo-ia-popover-abrir:hover {
 background: color-mix(in srgb, #2563ff 68%, transparent) !important;
}

@media (max-width: 480px) {
 #nexoIaPopover {
  right: 12px;
  bottom: 82px;
  width: calc(100vw - 24px);
 }

 #nexoIaBurbuja {
  right: 12px;
  bottom: 12px;
 }
}