/* CSS profesional estilo WhatsApp Business (versión resumida por espacio) */

:root{
 --wa:#00a884;--wa2:#008069;--bg:#efeae2;--user:#d9fdd3;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Arial,sans-serif}
body{background:#f5f5f5}
.chat-bubble{position:fixed;right:24px;bottom:24px;width:64px;height:64px;border-radius:50%;
background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
font-size:34px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.25s}
.chat-bubble:hover{transform:scale(1.08)}
.chat-container{

    position:fixed;

    right:20px;
    bottom:40px;

    width:clamp(320px,28vw,380px);
    height:clamp(420px,70vh,560px);

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    display:none;
    flex-direction:column;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

    z-index:2147483646;

}
.header{background:linear-gradient(180deg,var(--wa),var(--wa2));padding:12px 15px;color:#fff;
display:flex;align-items:center;justify-content:space-between}
.header .info{display:flex;gap:10px;align-items:center}
.header .avatar{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--wa);
display:flex;align-items:center;justify-content:center;font-weight:700}
.header .titulo{font-size:15px;font-weight:700}
.header .estado{font-size:11px;opacity:.9}
.header button{background:none;border:none;color:#fff;font-size:22px;cursor:pointer}
#chat{flex:1;padding:14px;overflow:auto;background:var(--bg)}
#chat::-webkit-scrollbar{width:7px}
#chat::-webkit-scrollbar-thumb{background:#c2c2c2;border-radius:10px}
.bot,.usuario{position:relative;display:inline-block;max-width:78%;padding:10px 12px;
margin-bottom:10px;border-radius:10px;font-size:13px;line-height:1.45;
box-shadow:0 1px 2px rgba(0,0,0,.12);animation:in .2s}
.bot{background:#fff;align-self:flex-start;border-top-left-radius:3px}
.bot{display:inline-block;width:auto;max-width:82%;padding:12px 14px;line-height:1.5;}
.bot:before{content:'';position:absolute;left:-7px;top:0;border:8px solid transparent;border-right:#fff}
.bot ul{margin:10px 0 0 18px;padding:0;}.bot li{margin:4px 0;}.bot p{margin-bottom:8px;}.bot br{line-height:1.8;}
.usuario{background:var(--user);align-self:flex-end;border-top-right-radius:3px}
.usuario:after{content:'';position:absolute;right:-7px;top:0;border:8px solid transparent;border-left:var(--user)}
.bienvenida{max-width:170px}
.hora{display:block;text-align:right;font-size:10px;color:#777;margin-top:4px}
.footer{display:flex;gap:8px;padding:10px;background:#f7f7f7;border-top:1px solid #ddd}
.footer input{flex:1;border:1px solid #ddd;border-radius:25px;padding:11px 15px;font-size:14px}
.footer input:focus{outline:none;border-color:var(--wa)}
.footer button{width:54px;height:54px;border:none;border-radius:50%;background:var(--wa);color:#fff;font-size:18px;cursor:pointer}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:480px){.chat-container{right:8px;left:8px;width:auto;height:78vh;bottom:85px}.chat-bubble{right:16px;bottom:16px}}