/* VIDA - Widget de chats "Siempre Activo" (estilo messenger)
   Ajustá las variables para que combine con busquedas.site */
:root {
  --vida-fondo: #1c1f26;
  --vida-panel: #262a33;
  --vida-borde: #3a4050;
  --vida-texto: #e8eaf0;
  --vida-texto-suave: #9aa1b5;
  --vida-acento: #7c5cff;        /* color de la entidad */
  --vida-usuario: #2f6fed;       /* burbujas del usuario */
  --vida-badge: #ff4d67;
  --vida-radio: 14px;
  --vida-fuente: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Dock de burbujas (abajo a la derecha, ARRIBA del asistente de ayuda) ---------- */
#vida-dock {
  position: fixed; right: 28px; bottom: 100px;   /* el asistente ocupa bottom:25 right:25 (60px) */
  display: flex; flex-direction: column-reverse; gap: 10px;
  z-index: 9990; font-family: var(--vida-fuente);
}
.vida-burbuja {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--vida-acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; cursor: pointer;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  position: relative; user-select: none;
  transition: transform .15s ease;
}
.vida-burbuja:hover { transform: scale(1.08); }
.vida-burbuja .vida-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--vida-badge);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--vida-fondo);
}
/* Corazón latiendo: señal de que la entidad está viva */
.vida-burbuja .vida-corazon {
  position: absolute; bottom: -5px; right: -5px;
  font-size: 15px; line-height: 1; color: #ff4d67;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  animation: vida-corazon-latido 1.15s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vida-corazon-latido {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.35); }   /* bum */
  28%      { transform: scale(1); }
  42%      { transform: scale(1.25); }   /* bum-bum, como un latido real */
  56%      { transform: scale(1); }
}

.vida-burbuja.vida-latido { animation: vida-latido 1.2s ease-in-out 3; }
@keyframes vida-latido {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(124,92,255,.25); }
}

/* ---------- Ventanas de chat ---------- */
#vida-ventanas {
  position: fixed; right: 100px; bottom: 16px;   /* deja libre la esquina del asistente */
  display: flex; flex-direction: row-reverse; gap: 12px; align-items: flex-end;
  z-index: 9991; font-family: var(--vida-fuente);
}
.vida-ventana {
  width: 330px; height: 440px;
  background: var(--vida-fondo); border: 1px solid var(--vida-borde);
  border-radius: var(--vida-radio); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  animation: vida-aparecer .22s ease;
}
@keyframes vida-aparecer {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.vida-cabecera {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--vida-panel);
  border-bottom: 1px solid var(--vida-borde);
}
.vida-cabecera .vida-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vida-acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.vida-cabecera .vida-nombre {
  color: var(--vida-texto); font-weight: 600; font-size: 14px;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vida-cabecera .vida-estado-punto {
  width: 8px; height: 8px; border-radius: 50%; background: #3ddc84;
  box-shadow: 0 0 6px #3ddc84; margin-right: 4px;
}
.vida-cabecera button {
  background: none; border: none; color: var(--vida-texto-suave);
  font-size: 18px; cursor: pointer; padding: 2px 6px; line-height: 1;
}
.vida-cabecera button:hover { color: var(--vida-texto); }

.vida-mensajes {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.vida-msg {
  max-width: 78%; padding: 8px 12px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.45; color: var(--vida-texto);
  word-wrap: break-word; white-space: pre-wrap;
}
.vida-msg.entidad { background: var(--vida-panel); border-bottom-left-radius: 4px; align-self: flex-start; }
.vida-msg.usuario { background: var(--vida-usuario); border-bottom-right-radius: 4px; align-self: flex-end; }
.vida-msg .vida-hora {
  display: block; font-size: 10px; color: var(--vida-texto-suave);
  margin-top: 3px; opacity: .8;
}
.vida-msg.evento { border-left: 3px solid var(--vida-acento); } /* mensajes proactivos, sutilmente marcados */
.vida-escribiendo {
  align-self: flex-start; color: var(--vida-texto-suave);
  font-size: 12px; font-style: italic; padding: 4px 8px;
}

.vida-entrada {
  display: flex; gap: 8px; padding: 10px;
  background: var(--vida-panel); border-top: 1px solid var(--vida-borde);
}
.vida-entrada textarea {
  flex: 1; resize: none; border: 1px solid var(--vida-borde);
  background: var(--vida-fondo); color: var(--vida-texto);
  border-radius: 18px; padding: 8px 12px; font-size: 13.5px;
  font-family: var(--vida-fuente); height: 38px; outline: none;
}
.vida-entrada textarea:focus { border-color: var(--vida-acento); }
.vida-entrada button {
  border: none; background: var(--vida-acento); color: #fff;
  border-radius: 50%; width: 38px; height: 38px; cursor: pointer;
  font-size: 16px; flex-shrink: 0;
}
.vida-entrada button:disabled { opacity: .5; cursor: default; }

/* ---------- Botones para el panel de favoritos ---------- */
.vida-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--vida-fuente); transition: filter .15s;
}
.vida-btn:hover { filter: brightness(1.15); }
.vida-btn-dar { background: var(--vida-acento); color: #fff; }
.vida-btn-quitar { background: transparent; color: var(--vida-texto-suave); border: 1px solid var(--vida-borde); }

/* ---------- Mobile: una ventana a pantalla completa ---------- */
@media (max-width: 640px) {
  #vida-ventanas { right: 0; bottom: 0; }
  .vida-ventana {
    position: fixed; inset: 0; width: 100%; height: 100%;
    border-radius: 0; border: none;
  }
  #vida-dock { bottom: 80px; right: 14px; }  /* arriba del asistente también en mobile */
}

@media (prefers-reduced-motion: reduce) {
  .vida-burbuja, .vida-ventana { animation: none; transition: none; }
}