/* ══════════════════════════════════════════════════════════════════════════
   chat-nexus.css — Asistente de datos como PALETA DE COMANDOS (⌘K).

   Por qué no es una ventana de chat
   ─────────────────────────────────
   El patrón de asistente embebido que usan Notion AI y Linear AI en 2026 abre
   con un input centrado y chips de sugerencia, sin historial visible hasta que
   el usuario pregunta algo. El input ES la interfaz. Se invoca, se responde,
   se descarta. No hay ventana persistente ni botón flotante.

   Lo que se muestra de la respuesta incluye su PROCEDENCIA — qué métrica, qué
   período, qué filtros — porque en un asistente de datos la cifra sin origen
   obliga a un acto de fe. Es el patrón de "tool-use disclosure".
   ══════════════════════════════════════════════════════════════════════════ */

.nxk {
  --nxk-bg:     #ffffff;
  --nxk-ink:    #18181b;
  --nxk-ink-2:  #52525b;
  --nxk-ink-3:  #a1a1aa;
  --nxk-line:   #e4e4e7;
  --nxk-soft:   #f4f4f5;
  --nxk-accent: #4f46e5;
  --nxk-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Overlay ────────────────────────────────────────────────────────────── */

.nxk-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
  background: rgba(9, 9, 11, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
}
.nxk-overlay.abierto { opacity: 1; pointer-events: auto; }

/* ── Panel ──────────────────────────────────────────────────────────────── */

.nxk-panel {
  width: 100%;
  max-width: 640px;
  background: var(--nxk-bg);
  border-radius: 16px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  transform: translateY(-8px) scale(0.98);
  opacity: 0;
  transition: transform .22s var(--nxk-spring), opacity .18s ease-out;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--nxk-ink);
}
.nxk-overlay.abierto .nxk-panel { transform: translateY(0) scale(1); opacity: 1; }

/* ── Fila de entrada: el input ES la interfaz ───────────────────────────── */

.nxk-fila {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem;
  flex: 0 0 auto;
}
/* El SVG suelto de la fila necesita tamaño explícito: sin esto se estira a
   todo el ancho disponible del flex. */
.nxk-fila > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--nxk-ink-3); }

.nxk-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--nxk-ink);
  padding: 0;
}
.nxk-input::placeholder { color: var(--nxk-ink-3); }

.nxk-accion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem; width: 2rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 9999px;
  background: var(--nxk-ink);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity .18s, transform .18s var(--nxk-spring), background-color .18s;
}
.nxk-accion.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.nxk-accion:hover   { opacity: .88; }
.nxk-accion svg     { width: 0.9rem; height: 0.9rem; }
.nxk-accion .ic {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5) rotate(35deg);
  transition: opacity .22s var(--nxk-spring), transform .22s var(--nxk-spring);
}
.nxk-accion[data-modo="send"] .ic-send,
.nxk-accion[data-modo="mic"]  .ic-mic,
.nxk-accion[data-modo="stop"] .ic-stop { opacity: 1; transform: scale(1) rotate(0); }
.nxk.sin-voz .nxk-accion .ic-mic { display: none; }

/* Ondas del dictado */
.nxk-wave { display: flex; align-items: center; gap: 3px; width: 0; opacity: 0;
  overflow: hidden; transition: width .3s var(--nxk-spring), opacity .2s; }
.nxk-wave i { display: block; width: 3px; height: 3px; border-radius: 9999px;
  background: var(--nxk-ink); transition: height .08s ease-out; }
.nxk.grabando .nxk-wave { width: 2.75rem; opacity: 1; }

/* ── Cuerpo: sugerencias o respuesta ────────────────────────────────────── */

.nxk-cuerpo {
  border-top: 1px solid var(--nxk-line);
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 0.875rem 1.25rem 1.125rem;
  scrollbar-width: thin;
  scrollbar-color: var(--nxk-line) transparent;
}
.nxk-cuerpo:empty { display: none; }
.nxk-cuerpo::-webkit-scrollbar { width: 5px; }
.nxk-cuerpo::-webkit-scrollbar-thumb { background: var(--nxk-line); border-radius: 9999px; }

.nxk-rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nxk-ink-3);
  margin: 0 0 0.6rem;
}

/* Chips de sugerencia: preguntas reales del golden set */
.nxk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nxk-chip {
  border: 1px solid var(--nxk-line);
  background: var(--nxk-bg);
  border-radius: 9999px;
  padding: 0.4rem 0.8rem;
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--nxk-ink-2);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.nxk-chip:hover { background: var(--nxk-soft); border-color: #d4d4d8; color: var(--nxk-ink); }

/* Respuesta */
.nxk-resp {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--nxk-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: nxk-in .25s var(--nxk-spring) both;
}
@keyframes nxk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.nxk-pregunta {
  font-size: 0.8125rem;
  color: var(--nxk-ink-3);
  margin: 0 0 0.5rem;
}

/* Procedencia: de dónde salió la cifra */
.nxk-proc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--nxk-line);
}
.nxk-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--nxk-soft);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.6875rem;
  color: var(--nxk-ink-2);
  font-variant-numeric: tabular-nums;
}
.nxk-tag b { font-weight: 600; color: var(--nxk-ink); }

/* Cargando: el agente trabajando, con la herramienta a la vista */
.nxk-cargando { display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--nxk-ink-3); }
@keyframes nxk-dot { 0%,100% { opacity:.25 } 50% { opacity:1 } }
.nxk-cargando i { width: 5px; height: 5px; border-radius: 9999px;
  background: var(--nxk-ink-3); animation: nxk-dot .9s ease-in-out infinite; }
.nxk-cargando i:nth-child(2) { animation-delay: .15s }
.nxk-cargando i:nth-child(3) { animation-delay: .3s }

/* ── Pie: atajos ────────────────────────────────────────────────────────── */

.nxk-pie {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--nxk-line);
  background: var(--nxk-soft);
  font-size: 0.6875rem;
  color: var(--nxk-ink-3);
  flex: 0 0 auto;
}
.nxk-pie kbd {
  font-family: inherit;
  background: var(--nxk-bg);
  border: 1px solid var(--nxk-line);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.6875rem;
  color: var(--nxk-ink-2);
}

/* ── Punto de entrada en el header ──────────────────────────────────────── */

.nxk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 0.6rem 0 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.nxk-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.nxk-trigger svg { width: 14px; height: 14px; opacity: .8; }
.nxk-trigger kbd {
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.6875rem;
  opacity: .85;
}
@media (max-width: 720px) { .nxk-trigger .nxk-trigger-txt, .nxk-trigger kbd { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nxk-overlay, .nxk-panel, .nxk-resp, .nxk-accion, .nxk-accion .ic { transition: opacity .12s linear; animation: none; }
}

/* Cursor mientras el modelo escribe */
.nxk-resp.escribiendo::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--nxk-ink);
  animation: nxk-cursor 1s steps(2) infinite;
}
@keyframes nxk-cursor { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }

/* Aviso del dictado: el motivo por el que el micrófono no arrancó.
   Antes estos errores se descartaban y el botón se apagaba en silencio. */
.nxk-aviso {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--nxk-ink-2);
  background: var(--nxk-soft);
  border-left: 2px solid var(--nxk-accent);
  border-radius: 0 6px 6px 0;
  padding: 0.65rem 0.8rem;
  margin: 0;
  animation: nxk-in .25s var(--nxk-spring) both;
}