/* Widget de chat Kairos — estilos compartidos por todas las paginas.
   Extraido de los <style> embebidos, que tenian cinco copias identicas.
   Autocontenido: solo usa sus propias variables --n-*. */
    :root { --n-naranja:#F26522; --n-azul:#1B3A6B; --n-sombra:0 8px 40px rgba(0,0,0,0.18); }
#kairos-bubble { position:fixed; bottom:28px; right:28px; width:58px; height:58px; background:var(--n-azul); border-radius:50%; cursor:pointer; z-index:9999; display:flex; align-items:center; justify-content:center; box-shadow:var(--n-sombra); transition:transform 0.2s,background 0.2s; border:2px solid var(--n-naranja); }
#kairos-bubble:hover { transform:scale(1.08); background:#1a1f38; }
.k-needle { transform-origin: 16px 16px; animation: k-needle-sway 4s ease-in-out infinite; }
.k-dash-ring { animation: k-dash-fade 4s ease infinite; }
@keyframes k-needle-sway { 0%,100%{transform:rotate(-20deg)} 50%{transform:rotate(20deg)} }
@keyframes k-dash-fade { 0%,100%{opacity:0.2} 50%{opacity:0.6} }
#kairos-badge { position:absolute; top:-4px; right:-4px; width:14px; height:14px; background:var(--n-naranja); border-radius:50%; border:2px solid white; animation:kbadge 2s infinite; }
@keyframes kbadge { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.7} }
#kairos-window { position:fixed; bottom:100px; right:28px; width:360px; max-height:540px; background:#fff; border-radius:18px; box-shadow:var(--n-sombra); z-index:9998; display:none; flex-direction:column; overflow:hidden; font-family:'Inter',sans-serif; animation:kslide 0.3s ease; }
#kairos-window.open { display:flex; }
@keyframes kslide { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.n-header { background:var(--n-azul); padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; }
.n-header-info { display:flex; align-items:center; gap:0.7rem; }
.n-avatar { width:36px; height:36px; background:var(--n-naranja); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:white; }
.n-name { color:white; font-weight:600; font-size:0.88rem; }
.n-status { color:rgba(255,255,255,0.6); font-size:0.7rem; }
.n-close { background:none; border:none; color:rgba(255,255,255,0.6); cursor:pointer; font-size:1.2rem; padding:0.2rem; }
.n-close:hover { color:white; }
#kairos-messages { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.7rem; min-height:200px; max-height:320px; }
/* pre-wrap: sin esto los saltos de linea que escribe Kairos se colapsan en
   espacios y toda la respuesta se ve como un solo bloque de texto. */
.n-msg { max-width:82%; padding:0.7rem 1rem; border-radius:14px; font-size:0.82rem; line-height:1.5; white-space:pre-wrap; }
.n-msg.kairos { background:#F4F4F5; color:#09090B; border-radius:4px 14px 14px 14px; align-self:flex-start; }
.n-msg.user { background:var(--n-azul); color:white; border-radius:14px 14px 4px 14px; align-self:flex-end; }
.n-msg a { color:var(--n-naranja); text-decoration:underline; word-break:break-word; }
.n-msg.user a { color:#fff; }
.n-typing { display:flex; gap:4px; padding:0.7rem 1rem; background:#F4F4F5; border-radius:4px 14px 14px 14px; width:fit-content; }
.n-dot { width:6px; height:6px; background:#A1A1AA; border-radius:50%; animation:ndot 1.2s infinite; }
.n-dot:nth-child(2){animation-delay:0.2s} .n-dot:nth-child(3){animation-delay:0.4s}
@keyframes ndot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.n-suggestions { display:flex; flex-wrap:wrap; gap:0.4rem; padding:0 1rem 0.8rem; }
.n-chip { background:#F4F4F5; border:1px solid #E4E4E7; border-radius:100px; padding:0.35rem 0.8rem; font-size:0.72rem; color:#71717A; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.n-chip:hover { background:var(--n-azul); color:white; border-color:var(--n-azul); }
.n-capture { display:none; padding:0.8rem 1rem; background:#FFF7F3; border-top:1px solid #FFE5D5; }
.n-capture.show { display:block; }
.n-capture p { font-size:0.75rem; color:#71717A; margin-bottom:0.6rem; }
.n-capture input { width:100%; padding:0.5rem 0.7rem; border:1px solid #E4E4E7; border-radius:8px; font-size:0.8rem; margin-bottom:0.4rem; outline:none; }
.n-capture input:focus { border-color:var(--n-naranja); }
.n-capture-btn { background:var(--n-naranja); color:white; border:none; border-radius:8px; padding:0.5rem 1rem; font-size:0.78rem; font-weight:500; cursor:pointer; width:100%; }
.n-capture-btn:hover { opacity:0.85; }
.n-footer { padding:0.5rem 1rem; display:flex; gap:0.5rem; border-top:1px solid #E4E4E7; align-items:flex-end; }
#kairos-input { flex:1; border:none; outline:none; font-size:0.82rem; font-family:'Inter',sans-serif; resize:none; max-height:80px; line-height:1.5; padding:0.4rem 0; background:transparent; }
.n-send { background:var(--n-azul); border:none; border-radius:8px; width:34px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity 0.15s; flex-shrink:0; }
.n-send:hover { opacity:0.8; }

/* Movil: la ventana media 360px fijos anclada a 28px del borde, o sea 388px en
   total. En una pantalla de 375px se salia 13px por la izquierda. Aqui se
   ancla a los dos lados para que respire igual en ambos margenes. */
@media (max-width: 460px) {
  #kairos-window { width: auto; left: 14px; right: 14px; bottom: 88px; max-height: 68vh; }
  #kairos-bubble { right: 16px; bottom: 16px; }
}