/* ============================================================
   NEXUS AI — Widget de chat en vivo
   Usa las variables de color ya definidas en :root de cada página.
   ============================================================ */

.nx-fab{
  position:fixed; left:26px; bottom:26px; z-index:900;
  display:flex; align-items:center; gap:9px;
  padding:14px 20px;
  background:var(--pine-bright); color:#0B0C0E;
  font-weight:700; font-size:12.5px; letter-spacing:0.01em;
  border:none; box-shadow:0 10px 30px rgba(0,208,132,0.32);
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.nx-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,208,132,0.45); }
.nx-fab-dot{
  width:7px; height:7px; border-radius:50%; background:#0B0C0E; flex-shrink:0;
  animation:nxFabPulse 1.8s infinite ease-in-out;
}
@keyframes nxFabPulse{ 0%,100%{opacity:0.35;} 50%{opacity:1;} }

@media (max-width:760px){
  .nx-fab{ left:14px; bottom:78px; padding:11px 16px; font-size:11.5px; }
}

/* ---------- overlay + panel (versión flotante) ---------- */
.nx-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(11,12,14,0.62);
  backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:26px;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.nx-overlay.open{ opacity:1; pointer-events:auto; }
body.nx-lock{ overflow:hidden; }

.nx-panel-wrap{
  position:relative;
  width:380px; max-width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  transform:translateY(20px);
  transition:transform 0.35s var(--ease);
}
.nx-overlay.open .nx-panel-wrap{ transform:translateY(0); }

.nx-close{
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border:none; background:transparent;
  color:var(--text-dim); font-size:15px; line-height:1;
}
.nx-close:hover{ color:var(--pine-bright); }

@media (max-width:760px){
  .nx-overlay{ padding:0; align-items:stretch; }
  .nx-panel-wrap{ width:100%; height:100%; }
  .nx-overlay .nx-chat{ height:100%; max-height:none; }
}

/* ---------- componente de chat (compartido: flotante + inline) ---------- */
.nx-chat{
  display:flex; flex-direction:column;
  height:520px; max-height:80vh;
  background:var(--panel);
  border:1px solid var(--line-soft);
}
.nx-chat-head{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
  flex-shrink:0;
}
.nx-dot{
  width:7px; height:7px; border-radius:50%; background:var(--pine-bright);
  box-shadow:0 0 8px rgba(0,208,132,0.7); flex-shrink:0;
}
.nx-title{ font-weight:600; font-size:13.5px; color:var(--text); }
.nx-subtitle{ font-size:11.5px; color:var(--text-dim); margin-top:1px; }

.nx-bubbles{
  flex:1; overflow-y:auto;
  padding:20px; display:flex; flex-direction:column; gap:12px;
}
.nx-bubble{
  max-width:84%; padding:12px 16px; font-size:13.5px; line-height:1.55; border-radius:2px;
  white-space:pre-wrap; word-wrap:break-word;
}
.nx-bubble.in{ align-self:flex-start; background:var(--bg); border:1px solid var(--line-soft); color:var(--text-dim); }
.nx-bubble.out{ align-self:flex-end; background:var(--pine); color:var(--text); }
.nx-bubble.err{ align-self:flex-end; background:transparent; border:1px solid #7a3b3b; color:#e2a5a5; }

.nx-typing{ display:flex; align-items:center; gap:4px; padding:14px 16px; }
.nx-typing span{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--text-faint); animation:nxBlink 1.2s infinite ease-in-out;
}
.nx-typing span:nth-child(2){ animation-delay:0.2s; }
.nx-typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes nxBlink{ 0%,80%,100%{opacity:0.3;} 40%{opacity:1;} }

.nx-inputbar{
  display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line-soft); flex-shrink:0;
}
.nx-input{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--line-soft); color:var(--text);
  padding:12px 14px; font-size:13.5px; font-family:inherit;
}
.nx-input::placeholder{ color:var(--text-faint); }
.nx-input:focus{ outline:1px solid var(--pine-bright); }
.nx-send{
  width:42px; flex-shrink:0; background:var(--pine-bright); color:#0B0C0E; border:none;
  font-size:17px; font-weight:700;
  transition:opacity 0.2s ease;
}
.nx-send:hover{ opacity:0.88; }
.nx-send:disabled{ opacity:0.5; cursor:default; }

/* ---------- botón "probar demo en vivo" dentro de cada tarjeta ---------- */
.demo-trigger{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px; padding:11px 20px; min-height:44px;
  background:transparent; border:1px solid rgba(0,208,132,0.38);
  color:var(--pine-bright); font-weight:600; font-size:12px;
  font-family:inherit; letter-spacing:0.03em; cursor:pointer;
  transition:transform 0.28s var(--ease), background 0.28s var(--ease), border-color 0.28s var(--ease);
}
.demo-trigger:hover{ transform:translateY(-2px); background:rgba(0,208,132,0.08); border-color:var(--pine-bright); }
.demo-trigger .live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--pine-bright); flex-shrink:0;
  box-shadow:0 0 6px rgba(0,208,132,0.7);
  animation:nxFabPulse 1.8s infinite ease-in-out;
}

/* ---------- versión inline (sección "Así conversa Nexus") ---------- */
#nexus-live-demo{
  margin:52px auto 0; max-width:420px; text-align:left;
  box-shadow:0 40px 90px -40px rgba(0,208,132,0.25);
}
#nexus-live-demo .nx-chat{ height:460px; }