/* ============================================================
   AYUDA — burbuja flotante y panel de chat. Va con ayuda.js
   Todos los colores salen de los tokens de base.css: un color
   escrito a mano acá no cambiaría en modo oscuro.
============================================================ */

/* ---------- Burbuja ---------- */
.ay-burbuja{
  position:fixed; right:20px; bottom:20px; z-index:900;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--azul); color:#fff; border:none;
  padding:11px 18px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .16s ease, background .16s ease;
}
.ay-burbuja:hover{background:var(--azul-oscuro); transform:translateY(-2px)}
.ay-burbuja:focus-visible{outline:2px solid var(--amarillo); outline-offset:2px}
.ay-burbuja-ico{font-size:16px; line-height:1}

/* ---------- Cuando hay mensajes sin leer ----------
   Los tokens de aviso y no un color suelto: en modo oscuro un naranja
   escrito a mano queda ilegible. Ver personalizar() en ayuda.js. */
.ay-burbuja.ay-hay{background:var(--warn-fg); color:var(--warn-bg)}
.ay-burbuja.ay-hay:hover{filter:brightness(1.08)}
.ay-punto{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; padding:0 5px;
  background:var(--rojo); color:#fff;
  font-size:11px; font-weight:800; line-height:1;
  box-shadow:0 0 0 2px var(--panel);
}
/* El punto se ancla en la burbuja, que ya es position:fixed más arriba. */
@media (max-width:700px){
  .ay-burbuja{right:14px; bottom:14px; padding:12px}
  .ay-burbuja-txt{display:none}
}

/* ---------- Panel ---------- */
.ay-panel{
  position:fixed; right:20px; bottom:20px; z-index:901;
  display:flex; flex-direction:column;
  width:min(390px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 40px));
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:0 18px 50px rgba(0,0,0,.24);
  overflow:hidden; animation:ayEntra .16s ease;
}
@keyframes ayEntra{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
/* En el teléfono ocupa todo: un panel chico ahí no se puede ni leer. */
@media (max-width:560px){
  .ay-panel{
    right:0; bottom:0; width:100vw; height:100dvh;
    border:none; border-radius:0;
  }
}

.ay-cab{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--linea);
  background:var(--suave); flex-shrink:0;
}
.ay-cab h2{font-size:15px; margin:0; flex:1}
.ay-cab-sub{display:block; font-size:12px; color:var(--gris); font-weight:400;
  font-family:'Barlow',sans-serif}
.ay-cerrar, .ay-limpiar{
  background:none; border:1px solid var(--linea); color:var(--gris);
  border-radius:6px; cursor:pointer; font:inherit; font-size:12px;
  padding:4px 8px; line-height:1.2;
}
.ay-cerrar:hover, .ay-limpiar:hover{border-color:var(--azul); color:var(--azul)}
.ay-cerrar{font-size:15px; padding:2px 8px}

/* ---------- Conversación ---------- */
.ay-hilo{
  flex:1; overflow-y:auto; padding:14px;
  display:flex; flex-direction:column; gap:10px;
}
.ay-msg{
  max-width:86%; padding:9px 12px; border-radius:12px;
  font-size:14px; line-height:1.5; overflow-wrap:anywhere;
}
.ay-msg p + p{margin-top:8px}
.ay-msg ol, .ay-msg ul{margin:6px 0 0 18px}
.ay-msg li{margin-bottom:4px}
.ay-msg code{
  background:var(--resalte); border-radius:4px;
  padding:1px 5px; font-size:13px;
}
.ay-yo{
  align-self:flex-end; background:var(--info-bg); color:var(--info-fg);
  border-bottom-right-radius:4px;
}
.ay-bot{
  align-self:flex-start; background:var(--suave); color:var(--tinta);
  border:1px solid var(--linea); border-bottom-left-radius:4px;
}
.ay-error{
  align-self:stretch; background:var(--error-bg); color:var(--error-fg);
  border:none; font-size:13px;
}

/* Bienvenida: no es un mensaje, es la pantalla vacía. */
.ay-vacio{margin:auto; text-align:center; color:var(--gris); padding:20px 10px}
.ay-vacio strong{display:block; color:var(--tinta); margin-bottom:6px; font-size:15px}
.ay-vacio span{font-size:13px; line-height:1.5; display:block}

/* Puntitos de "está pensando" */
.ay-pensando{display:flex; gap:4px; align-items:center; padding:11px 13px}
.ay-pensando i{
  width:6px; height:6px; border-radius:50%; background:var(--gris);
  animation:ayLatir 1s infinite ease-in-out;
}
.ay-pensando i:nth-child(2){animation-delay:.15s}
.ay-pensando i:nth-child(3){animation-delay:.3s}
@keyframes ayLatir{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .ay-panel{animation:none}
  .ay-pensando i{animation:none; opacity:.5}
}

/* ---------- Escribir ---------- */
.ay-pie{
  display:flex; gap:8px; align-items:flex-end;
  padding:10px; border-top:1px solid var(--linea);
  background:var(--suave); flex-shrink:0;
}
.ay-texto{
  flex:1; resize:none; font:inherit; font-size:14px;
  border:1px solid var(--linea); border-radius:8px;
  padding:8px 10px; background:var(--panel); color:var(--tinta);
  max-height:110px; min-height:38px;
}
.ay-texto:focus{outline:none; border-color:var(--azul)}
.ay-enviar{
  background:var(--azul); color:#fff; border:none; border-radius:8px;
  padding:9px 14px; cursor:pointer; font:inherit; font-size:14px;
  flex-shrink:0;
}
.ay-enviar:hover:not(:disabled){background:var(--azul-oscuro)}
.ay-enviar:disabled{opacity:.5; cursor:default}

/* ---------- Los avisos que llegan solos ----------
   Un recordatorio del cron o un mensaje de otro agente NO es una
   respuesta a lo que preguntaste: llega aunque no hayas escrito nada.
   El borde lo separa del resto del hilo sin sacarlo de la conversación,
   que es donde tiene que estar. */
.ay-msg.ay-aviso{
  border-left:3px solid var(--warn-fg);
  background:var(--warn-bg); color:var(--warn-fg);
}