/<style>
#edward-launcher{
position:fixed;
bottom:25px;
right:25px;
width:70px;
height:70px;
border-radius:50%;
background:#B11226;
color:white;
border:none;
cursor:pointer;
font-size:30px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:999999;
transition:.3s;
}

#edward-launcher:hover{
transform:scale(1.05);
}

#edward-chat{
position:fixed;
bottom:110px;
right:25px;
width:420px;
max-width:95vw;
height:700px;
max-height:80vh;
background:white;
border-radius:20px;
overflow:hidden;
display:none;
flex-direction:column;
box-shadow:0 20px 50px rgba(0,0,0,.25);
z-index:999999;
font-family:Arial,sans-serif;
}

#edward-header{
background:#B11226;
padding:16px;
color:white;
display:flex;
align-items:center;
gap:12px;
}

#edward-avatar{
width:45px;
height:45px;
border-radius:50%;
background:white;
color:#B11226;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:18px;
}

#edward-title{
font-weight:700;
font-size:16px;
}

#edward-subtitle{
font-size:12px;
opacity:.9;
}

#edward-messages{
flex:1;
overflow-y:auto;
padding:15px;
background:#f7f7f7;
}

.bot-msg{
background:white;
padding:12px;
border-radius:14px;
margin-bottom:12px;
max-width:85%;
line-height:1.5;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.user-msg{
background:#dcf8c6;
padding:12px;
border-radius:14px;
margin-bottom:12px;
max-width:85%;
margin-left:auto;
line-height:1.5;
}

#edward-footer{
padding:12px;
background:white;
border-top:1px solid #eee;
display:flex;
gap:10px;
}

#edward-input{
flex:1;
padding:12px;
border:1px solid #ddd;
border-radius:10px;
outline:none;
font-size:14px;
}

#edward-send{
background:#B11226;
color:white;
border:none;
padding:12px 18px;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

#edward-send:hover{
opacity:.9;
}
</style>

<button id="edward-launcher">🤝</button>

<div id="edward-chat">

<div id="edward-header">

<div id="edward-avatar">
E
</div>

<div>
<div id="edward-title">
Edward
</div>

<div id="edward-subtitle">
Asesor Inmobiliario · En línea
</div>
</div>

</div>

<div id="edward-messages">

<div class="bot-msg">
Hola 👋

Soy Edward, asesor inmobiliario de Abbey Properties.

Puedo ayudarte a comprar, vender o valorar una propiedad en Dénia, Jávea, Moraira, Calpe y toda la Costa Blanca Norte.

¿En qué puedo ayudarte hoy?
</div>

</div>

<div id="edward-footer">

<input
id="edward-input"
type="text"
placeholder="Escribe tu mensaje..."
>

<button id="edward-send">
Enviar
</button>

</div>

</div>

<script>

const WEBHOOK_URL =
"https://hook.eu2.make.com/otw71dwiwb5vqdohlx4sjbiwsbvjljan";

const launcher =
document.getElementById("edward-launcher");

const chat =
document.getElementById("edward-chat");

const messages =
document.getElementById("edward-messages");

const input =
document.getElementById("edward-input");

const send =
document.getElementById("edward-send");

launcher.addEventListener("click",()=>{

if(chat.style.display==="flex"){
chat.style.display="none";
}else{
chat.style.display="flex";
}

});

async function sendMessage(){

const text =
input.value.trim();

if(!text) return;

messages.innerHTML += `
<div class="user-msg">${text}</div>
`;

input.value="";

messages.innerHTML += `
<div class="bot-msg" id="typing">
Edward está escribiendo...
</div>
`;

messages.scrollTop =
messages.scrollHeight;

try{

const response =
await fetch(WEBHOOK_URL,{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
message:text
})
});

const reply =
await response.text();

document
.getElementById("typing")
.remove();

messages.innerHTML += `
<div class="bot-msg">${reply}</div>
`;

messages.scrollTop =
messages.scrollHeight;

}catch(error){

document
.getElementById("typing")
.remove();

messages.innerHTML += `
<div class="bot-msg">
Lo siento, no he podido conectar con el servidor.
</div>
`;

}

}

send.addEventListener(
"click",
sendMessage
);

input.addEventListener(
"keypress",
function(e){
if(e.key==="Enter"){
sendMessage();
}
}
);

</script>