/* El asistente flotante de Every Benefits: botón abajo a la derecha, burbuja de
   aviso y ventana de conversación. En móvil la ventana sube como hoja desde abajo. */

.asistente{position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:70;
  font-family:var(--cuerpo); display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none}
.asistente > *{pointer-events:auto}
.asistente [hidden]{display:none !important}

/* ---------- botón ---------- */
.lanza-asistente{position:relative; width:60px; height:60px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:var(--verde); color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,138,78,.34), 0 2px 6px rgba(5,48,29,.18);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .25s ease, opacity .3s ease}
.lanza-asistente:hover{transform:translateY(-3px) scale(1.04); background:var(--verde-hondo)}
.lanza-asistente::before{content:""; position:absolute; inset:0; border-radius:50%; background:var(--verde); z-index:-1;
  animation:latido-asistente 2.8s ease-out infinite}
.asistente.abierto .lanza-asistente::before{animation:none; opacity:0}
@keyframes latido-asistente{0%{transform:scale(1); opacity:.45} 70%,100%{transform:scale(1.55); opacity:0}}
.lanza-asistente svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.lanza-asistente .icono-abre, .lanza-asistente .icono-cierra{grid-area:1/1; display:grid; place-items:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .25s ease}
.lanza-asistente .icono-cierra{opacity:0; transform:rotate(-90deg) scale(.6)}
.asistente.abierto .lanza-asistente .icono-abre{opacity:0; transform:rotate(90deg) scale(.6)}
.asistente.abierto .lanza-asistente .icono-cierra{opacity:1; transform:none}
.asistente.apartado .lanza-asistente, .asistente.apartado .aviso-asistente{opacity:0; pointer-events:none}

/* ---------- burbuja de aviso ---------- */
.aviso-asistente{position:relative; max-width:250px; background:var(--papel); border:1px solid var(--linea); border-radius:18px 18px 4px 18px;
  padding:14px 38px 14px 16px; box-shadow:0 14px 34px rgba(18,16,13,.12);
  opacity:0; transform:translateY(10px) scale(.96); transform-origin:bottom right;
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.3,1)}
.aviso-asistente.visible{opacity:1; transform:none}
.aviso-asistente p{margin:0; font-size:14.5px; line-height:1.45; color:var(--tinta); cursor:pointer}
.cierra-aviso{position:absolute; top:6px; right:6px; width:30px; height:30px; border:0; border-radius:50%; background:transparent;
  color:var(--tinta-suave); cursor:pointer; display:grid; place-items:center; padding:0}
.cierra-aviso::after{content:""; position:absolute; inset:-7px}
.cierra-aviso:hover{background:var(--hueso); color:var(--tinta)}
.cierra-aviso svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}

/* ---------- ventana ---------- */
.ventana-asistente{padding:0; width:min(390px, calc(100vw - 40px)); height:min(600px, calc(100dvh - 130px));
  background:var(--papel); border:1px solid var(--linea); border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 30px 70px rgba(5,48,29,.2), 0 4px 14px rgba(18,16,13,.06);
  opacity:0; transform:translateY(16px) scale(.97); transform-origin:bottom right;
  transition:opacity .22s ease, transform .26s cubic-bezier(.4,0,.2,1)}
.asistente.abierto .ventana-asistente{opacity:1; transform:none; transition:opacity .3s ease, transform .42s cubic-bezier(.2,.7,.3,1)}

.cabeza-asistente{flex:none; display:flex; align-items:center; gap:12px; padding:14px 12px 14px 16px; background:var(--verde-hondo); color:#fff}
.avatar-asistente{flex:none; width:42px; height:42px; border-radius:50%; background:var(--verde); display:grid; place-items:center; position:relative}
.avatar-asistente img{width:24px; height:24px; object-fit:contain; filter:brightness(0) invert(1)}
.cabeza-asistente .quien{flex:1; min-width:0}
.cabeza-asistente .quien b{display:block; font-family:var(--titulo); font-size:15.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cabeza-asistente .quien small{display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,.7)}
.cabeza-asistente .quien small i{width:7px; height:7px; border-radius:50%; background:#5fe39c; box-shadow:0 0 0 3px rgba(95,227,156,.2)}
.cabeza-asistente button{flex:none; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.8);
  cursor:pointer; display:grid; place-items:center; padding:0; position:relative; transition:background .2s ease, color .2s ease}
.cabeza-asistente button::after{content:""; position:absolute; inset:-2px}
.cabeza-asistente button:hover{background:rgba(255,255,255,.1); color:#fff}
.cabeza-asistente svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* el hilo se desplaza y se desvanece por arriba, para que no parezca cortado */
.hilo-asistente{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:10px; background:var(--hueso);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18px);
  mask-image:linear-gradient(180deg, transparent 0, #000 18px)}
.mensaje{max-width:86%; padding:11px 14px; border-radius:18px; font-size:14.5px; line-height:1.5;
  animation:entra-mensaje .35s cubic-bezier(.2,.7,.3,1) both}
.mensaje p{margin:0; overflow-wrap:anywhere}
@keyframes entra-mensaje{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.del-asistente{align-self:flex-start; background:var(--papel); border:1px solid var(--linea); border-bottom-left-radius:6px; color:var(--tinta)}
.del-usuario{align-self:flex-end; background:var(--verde); color:#fff; border-bottom-right-radius:6px}
.accion-mensaje{display:inline-flex; align-items:center; margin-top:10px; min-height:36px; padding:0 14px; border-radius:99px;
  background:var(--verde-claro); color:var(--verde); font-weight:600; font-size:13.5px; text-decoration:none; transition:background .2s ease, color .2s ease}
.accion-mensaje:hover{background:var(--verde); color:#fff}

.escribiendo{display:flex; gap:5px; align-items:center; padding:14px 16px}
.escribiendo span{width:7px; height:7px; border-radius:50%; background:var(--tinta-suave); opacity:.4; animation:punto-escribe 1.1s ease-in-out infinite}
.escribiendo span:nth-child(2){animation-delay:.15s}
.escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes punto-escribe{0%,60%,100%{transform:translateY(0); opacity:.35} 30%{transform:translateY(-5px); opacity:.9}}

.sugeridas-asistente{flex:none; display:flex; flex-wrap:wrap; gap:7px; padding:8px 16px 12px; background:var(--hueso)}
.sugeridas-asistente:empty{display:none}
.sugerida{border:1px solid var(--verde-borde); background:var(--papel); color:var(--verde); border-radius:99px; cursor:pointer;
  min-height:36px; padding:6px 13px; font-family:var(--cuerpo); font-size:13.5px; font-weight:500; text-align:left; line-height:1.3;
  animation:entra-mensaje .35s cubic-bezier(.2,.7,.3,1) both;
  transition:background .2s ease, color .2s ease, border-color .2s ease}
.sugerida:hover{background:var(--verde); border-color:var(--verde); color:#fff}

.escribe-asistente{flex:none; display:flex; gap:8px; padding:12px 12px 6px 16px; border-top:1px solid var(--linea); background:var(--papel)}
.escribe-asistente input{flex:1; min-width:0; min-height:44px; border:1px solid var(--linea); border-radius:99px; padding:0 16px;
  font-family:var(--cuerpo); font-size:16px; color:var(--tinta); background:var(--hueso); outline:none; transition:border-color .2s ease, background .2s ease}
.escribe-asistente input:focus{border-color:var(--verde); background:#fff}
.escribe-asistente button{flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--verde); color:#fff; cursor:pointer;
  display:grid; place-items:center; padding:0; transition:background .2s ease, opacity .2s ease}
.escribe-asistente button:hover{background:var(--verde-hondo)}
.escribe-asistente.esperando button{opacity:.45; pointer-events:none}
.escribe-asistente svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pie-asistente{flex:none; display:block; text-align:center; font-size:11.5px; color:var(--tinta-suave); padding:0 16px 10px; background:var(--papel)}

/* ---------- móvil: la ventana sube desde abajo y ocupa casi toda la pantalla ---------- */
@media(max-width:640px){
  .asistente{right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom))}
  .lanza-asistente{width:54px; height:54px}
  .ventana-asistente{position:fixed; left:0; right:0; bottom:0; width:100%; height:calc(100dvh - 64px);
    border-radius:24px 24px 0 0; border-bottom:0; transform:translateY(100%); transform-origin:bottom center}
  .asistente.abierto .ventana-asistente{transform:none}
  .asistente.abierto .lanza-asistente{opacity:0; pointer-events:none}
  .pie-asistente{padding-bottom:max(10px, env(safe-area-inset-bottom))}
  .aviso-asistente{max-width:220px}
}

@media(prefers-reduced-motion:reduce){
  .lanza-asistente::before{animation:none; opacity:0}
  .lanza-asistente, .aviso-asistente, .ventana-asistente, .lanza-asistente .icono-abre, .lanza-asistente .icono-cierra{transition:none}
  .mensaje, .sugerida{animation:none}
  .escribiendo span{animation:none; opacity:.6}
}

/* sello de IA junto al nombre y en el boton flotante */
.cabeza-asistente .quien b{display:flex; align-items:center; gap:8px}
.sello-ia{font-style:normal; font-family:var(--cuerpo); font-size:10.5px; font-weight:700; letter-spacing:.08em; line-height:1;
  padding:4px 7px; border-radius:99px; background:#5fe39c; color:var(--verde-hondo)}
.lanza-asistente::after{content:"AI"; position:absolute; top:-3px; right:-3px; min-width:24px; height:20px; padding:0 5px; border-radius:99px;
  background:var(--verde-hondo); color:#fff; border:2px solid #fff; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  display:grid; place-items:center; transition:opacity .25s ease}
html[lang="es"] .lanza-asistente::after{content:"IA"}
.asistente.abierto .lanza-asistente::after{opacity:0}