/* ============================================================
   Asistente flotante del Núcleo TIC Caribe — bilingüe ES/EN
   ============================================================ */

.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:60px; height:60px; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(140deg,var(--purple-600),var(--magenta));
  color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(28,15,61,.38);
  transition:transform .18s ease, box-shadow .18s ease;
}
.chat-fab:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(28,15,61,.46)}
.chat-fab:focus-visible{outline:3px solid #fff; outline-offset:3px}
.chat-fab svg{width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.chat-fab .ico-close{display:none}
.chat-fab[aria-expanded="true"] .ico-chat{display:none}
.chat-fab[aria-expanded="true"] .ico-close{display:block}

/* Punto de aviso hasta la primera apertura */
.chat-fab .dot{
  position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%;
  background:var(--orange); border:2.5px solid #fff;
}
.chat-fab.visto .dot{display:none}

/* ---------- Panel ---------- */
.chat-panel{
  position:fixed; right:22px; bottom:94px; z-index:95;
  width:min(390px, calc(100vw - 44px)); max-height:min(600px, calc(100vh - 130px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:0 26px 70px rgba(28,15,61,.30);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.chat-panel.abierto{opacity:1; transform:none; pointer-events:auto}

.chat-head{
  display:flex; align-items:center; gap:12px; padding:15px 16px;
  background:linear-gradient(140deg,var(--purple-950),var(--purple-800)); color:#fff;
}
.chat-head .avatar{
  width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  background:#fff; padding:3px; overflow:hidden;
}
.chat-head .avatar img{width:100%; height:100%; object-fit:contain; display:block}
.chat-head .quien{flex:1; min-width:0}
.chat-head strong{display:block; font-size:15px; line-height:1.3}
.chat-head span{display:block; font-size:12.5px; color:#c6bce8}
.chat-head .estado::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#3ddc97; margin-right:6px; vertical-align:middle;
}

/* Selector de idioma con banderas */
.chat-idiomas{display:flex; gap:5px}
.chat-idiomas button{
  width:34px; height:26px; padding:0; cursor:pointer; border-radius:6px; overflow:hidden;
  border:1.5px solid rgba(255,255,255,.28); background:none; opacity:.5;
  transition:opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.chat-idiomas button:hover{opacity:.85}
.chat-idiomas button[aria-pressed="true"]{opacity:1; border-color:#fff; transform:scale(1.06)}
.chat-idiomas svg{display:block; width:100%; height:100%}

.chat-cerrar{
  background:none; border:0; color:#cfc6ec; cursor:pointer; font-size:22px;
  line-height:1; padding:4px 2px;
}
.chat-cerrar:hover{color:#fff}

/* ---------- Conversación ---------- */
.chat-log{
  flex:1; overflow-y:auto; padding:18px 16px; background:var(--surface-alt);
  display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth;
}
.chat-msg{max-width:86%; font-size:14.8px; line-height:1.55; border-radius:14px; padding:11px 14px}
.chat-msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px}
.chat-msg.yo{align-self:flex-end; background:var(--purple-600); color:#fff; border-bottom-right-radius:5px}
.chat-msg p{margin:0 0 9px}
.chat-msg p:last-child{margin-bottom:0}
.chat-msg ul{margin:8px 0 0; padding-left:18px}
.chat-msg li{margin-bottom:4px}
.chat-msg a{color:var(--purple-600); font-weight:600}
.chat-msg.yo a{color:#fff}
.chat-msg strong{color:inherit}

/* Escribiendo… */
.chat-tecleando{display:flex; gap:4px; align-items:center; padding:13px 15px}
.chat-tecleando i{
  width:7px; height:7px; border-radius:50%; background:var(--muted); display:block;
  animation:chatPunto 1.15s infinite ease-in-out;
}
.chat-tecleando i:nth-child(2){animation-delay:.16s}
.chat-tecleando i:nth-child(3){animation-delay:.32s}
@keyframes chatPunto{0%,60%,100%{opacity:.28; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  .chat-tecleando i{animation:none; opacity:.55}
  .chat-panel{transition:none}
}

/* Sugerencias */
.chat-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; background:var(--surface-alt)}
.chat-chips button{
  font:inherit; font-size:12.8px; cursor:pointer; padding:7px 12px; border-radius:999px;
  background:#fff; border:1px solid #e3d9fb; color:var(--purple-800);
  transition:background .15s ease, border-color .15s ease;
}
.chat-chips button:hover{background:#f1ecfd; border-color:var(--purple-500)}

/* ---------- Entrada ---------- */
.chat-form{display:flex; gap:9px; padding:12px 14px; border-top:1px solid var(--line); background:#fff}
.chat-form input{
  flex:1; min-width:0; font:inherit; font-size:14.8px; padding:11px 14px;
  border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff;
}
.chat-form input:focus{outline:2px solid var(--purple-500); outline-offset:-1px; border-color:transparent}
.chat-form button{
  width:44px; flex:0 0 auto; border:0; border-radius:11px; cursor:pointer; display:grid; place-items:center;
  background:var(--purple-600); color:#fff;
}
.chat-form button:hover{background:var(--purple-800)}
.chat-form button svg{width:19px; height:19px; fill:currentColor}

.chat-pie{
  padding:0 14px 12px; background:#fff; text-align:center;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.chat-pie a{color:var(--purple-600); font-weight:700; text-decoration:none}
.chat-pie a:hover{text-decoration:underline}

@media (max-width:520px){
  .chat-fab{right:16px; bottom:16px; width:55px; height:55px}
  .chat-panel{
    right:10px; left:10px; bottom:82px; width:auto;
    max-height:min(76vh, calc(100vh - 110px));
  }
  .chat-msg{max-width:92%}
}