/* Chat de Nexi (agente comercial) — burbuja flotante + panel. Mismo diseño que la demo del stand.
   Todo va con prefijo .nxc- y sus propias variables, para no mezclarse con styles.css. */
.nxc {
  --nxc-bg: #05060f; --nxc-panel: #0d1030; --nxc-panel-2: #141850; --nxc-border: #262c66; --nxc-border-soft: #1b2050;
  --nxc-text: #e9ebfb; --nxc-dim: #9298c9; --nxc-faint: #5d6396;
  --nxc-cyan: #2fd0f0; --nxc-green: #3fcf72;
  --nxc-grad: linear-gradient(90deg, #8b2fe0, #2fd0f0 55%, #3fcf72);
  font-family: var(--f-sans, 'Archivo', 'Helvetica Neue', sans-serif);
}
.nxc *, .nxc *::before, .nxc *::after { box-sizing: border-box; }

.nxc-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--nxc-panel-2); box-shadow: 0 14px 34px -8px rgba(139,47,224,.5), 0 0 0 1px var(--nxc-border);
  display: flex; align-items: center; justify-content: center;
}
.nxc-bubble .nxc-face { width: 72%; height: 72%; display: flex; align-items: center; justify-content: center; }
.nxc-bubble .nxc-face img { width: 100%; height: 100%; object-fit: contain; }
.nxc-badge {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--nxc-green); border: 3px solid var(--nxc-bg); display: flex; align-items: center; justify-content: center;
}
.nxc-badge svg { width: 60%; height: 60%; }
.nxc-badge .nxc-ic-min { display: none; }
.nxc-bubble.is-open .nxc-badge { background: #1c2470; }
.nxc-bubble.is-open .nxc-ic-dot { display: none; }
.nxc-bubble.is-open .nxc-ic-min { display: block; }

.nxc-panel {
  position: fixed; right: 22px; bottom: 98px; z-index: 89;
  width: 380px; height: min(600px, calc(100% - 120px));
  background: #0b0e2e; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--nxc-text);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.5), 0 0 0 1px var(--nxc-border);
  transform-origin: bottom right; transition: opacity .18s ease, transform .18s ease;
}
.nxc-panel.is-closed { opacity: 0; transform: scale(.9) translateY(16px); pointer-events: none; visibility: hidden; }

.nxc-head { padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--nxc-border-soft); display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nxc-head .nxc-face { width: 40px; height: 40px; border-radius: 11px; background: var(--nxc-panel-2); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nxc-head .nxc-face img { width: 78%; height: 78%; object-fit: contain; }
.nxc-title { font-size: 13px; font-weight: 700; }
.nxc-live { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #0b0e2e; background: var(--nxc-green); padding: 3px 7px; border-radius: 20px; white-space: nowrap; }
.nxc-live.is-off { background: var(--nxc-faint); }
.nxc-close { background: transparent; border: none; color: var(--nxc-dim); font-size: 18px; cursor: pointer; width: 28px; height: 28px; border-radius: 7px; line-height: 1; }
.nxc-close:hover { background: var(--nxc-panel-2); color: var(--nxc-text); }

.nxc-chat { flex: 1; overflow-y: auto; padding: 14px 14px 6px; }
.nxc-msg { margin-bottom: 12px; max-width: 92%; }
.nxc-role { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--nxc-faint); margin-bottom: 4px; }
.nxc-body { background: var(--nxc-panel-2); border: 1px solid var(--nxc-border-soft); border-radius: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.55; color: var(--nxc-text); white-space: pre-wrap; }
.nxc-body a { color: var(--nxc-cyan); }
.nxc-li { display: flex; gap: 7px; margin: 6px 0; }
.nxc-li-m { flex: 0 0 auto; min-width: 1.1em; color: var(--nxc-cyan); font-weight: 700; }
.nxc-body b { color: #fff; }
.nxc-msg.is-user { margin-left: auto; }
.nxc-msg.is-user .nxc-body { background: #1c2470; border-color: #2b3390; }
.nxc-msg.is-asesor .nxc-body { background: #0f3a2a; border-color: #1e6b49; }
.nxc-msg.is-asesor .nxc-role { color: var(--nxc-green); }
.nxc-msg.is-system .nxc-body { background: #2a2206; border-color: #59470c; color: #f3dca0; font-style: italic; }

.nxc-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; white-space: normal; }
.nxc-opt { background: #0b0e2e; border: 1px solid var(--nxc-border); color: var(--nxc-cyan); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; font-family: inherit; line-height: 1.35; }
.nxc-opt:hover:not(:disabled) { border-color: var(--nxc-cyan); background: rgba(47,208,240,.08); }
.nxc-opt:disabled { opacity: .45; cursor: default; }
.nxc-opt.is-chosen { opacity: 1; border-color: var(--nxc-green); color: var(--nxc-green); }
.nxc-body a.nxc-catalogo { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: #0b0e2e; background: var(--nxc-grad); border-radius: 20px; padding: 6px 12px; text-decoration: none; }

.nxc-typing { display: flex; gap: 4px; padding: 4px 0; }
.nxc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--nxc-faint); animation: nxc-typing 1s infinite ease-in-out; }
.nxc-typing span:nth-child(2) { animation-delay: .15s; }
.nxc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes nxc-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.nxc-composer { padding: 10px 14px 14px; border-top: 1px solid var(--nxc-border-soft); flex: 0 0 auto; display: flex; gap: 6px; }
.nxc-input { flex: 1; min-width: 0; height: 36px; border-radius: 8px; background: var(--nxc-panel-2); border: 1px solid var(--nxc-border-soft); padding: 0 11px; font-size: 16px; color: var(--nxc-text); font-family: inherit; }
.nxc-input::placeholder { color: var(--nxc-faint); }
.nxc-input:focus { outline: none; border-color: var(--nxc-cyan); }
.nxc-send { height: 36px; border-radius: 8px; border: none; background: var(--nxc-grad); color: #0b0e2e; font-weight: 700; padding: 0 16px; font-size: 12px; cursor: pointer; font-family: inherit; }
.nxc-send:disabled { opacity: .5; cursor: default; }
.nxc-mic { height: 36px; width: 36px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--nxc-border); background: transparent; color: var(--nxc-text); font-size: 15px; cursor: pointer; padding: 0; line-height: 1; }
.nxc-mic:hover:not(:disabled) { border-color: var(--nxc-cyan); }
.nxc-mic:disabled { opacity: .5; cursor: default; }
.nxc-mic.is-recording { background: #4a0f0f; border-color: #e04444; color: #ff8a8a; animation: nxc-pulso 1.2s infinite; }
@keyframes nxc-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,68,68,.5); } 50% { box-shadow: 0 0 0 6px rgba(224,68,68,0); } }

body.ficha-abierta .nxc { display: none; }

@media (max-width: 520px) {
  .nxc-bubble { right: 16px; bottom: 16px; }
  .nxc-panel { width: calc(100% - 32px); right: 16px; bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .nxc-panel { transition: none; }
  .nxc-typing span { animation: none; }
  .nxc-mic.is-recording { animation: none; }
}