/* ==========================================================
   Unibot Conversaciones — Eduardo Luna · 2026
   Mismo lenguaje visual que Unibot Dashboard: Tailwind hace el
   grueso; aqui solo keyframes y detalles finos.
   ========================================================== */

html, body, #root { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.font-mono-num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Barra de gradiente animada bajo el header */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.grad-bar { background-size: 200% 100%; animation: gradientShift 4s linear infinite; }

/* Punto vivo */
@keyframes livePulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
.live-dot { animation: livePulse 1.4s ease-in-out infinite; }

/* Skeleton */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.shimmer {
  background: linear-gradient(90deg, rgba(148,163,184,0.08) 0%, rgba(148,163,184,0.18) 50%, rgba(148,163,184,0.08) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-2px); }
.themed { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }

/* Mascota flotando (avatar del bot en el visor) */
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.mascot-float { animation: mascotFloat 3s ease-in-out infinite; }

/* Burbujas entrando */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bubble-in { animation: bubbleIn .28s ease-out both; }

/* Resaltado de busqueda */
mark.hl { background: rgba(250,204,21,0.45); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Scroll fino dentro de paneles */
.scroll-fino { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.45) transparent; }
.scroll-fino::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-fino::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.40); border-radius: 8px; }
.scroll-fino::-webkit-scrollbar-track { background: transparent; }

/* Fila seleccionada de la lista */
.fila-activa { position: relative; }
.fila-activa::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .grad-bar, .live-dot, .shimmer, .mascot-float, .bubble-in { animation: none !important; }
}