/* =================================================
   💬 CHAT — ESTILO PROFESIONAL ESTABLE
================================================= */

html, body{
  height:100%;
}

:root{
  --chat-bg:#f0f2f5;
  --chat-header:#ffffff;
  --chat-border:#e4e6eb;
  --chat-user:#2563eb;
  --chat-bot:#e4e6eb;
  --chat-text:#111827;
  --chat-radius:18px;
}

/* ===== EVITA SCROLL DE FONDO CUANDO CHAT ABIERTO ===== */

body.chat-open{
  overflow:hidden;
}

/* ===== BOTÓN FLOTANTE ===== */

.chat-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:#fff;
  cursor:pointer;
  z-index:9999;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  transition:.25s ease;
}

.chat-float:hover{
  transform:scale(1.05);
}

/* ===== CONTENEDOR CHAT ===== */

.chat-box{
  position:fixed;
  bottom:22px;
  right:22px;
  width:360px;
  height:520px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:10000;
  animation:fadeIn .25s ease;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* ===== HEADER ===== */

.chat-header{
  height:55px;
  background:var(--chat-header);
  padding:0 18px;
  font-weight:600;
  font-size:14px;
  border-bottom:1px solid var(--chat-border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-shrink:0;
}

.chat-header span{
  display:flex;
  align-items:center;
  gap:8px;
}

.chat-header button{
  width:32px;
  height:32px;
  border:none;
  border-radius:8px;
  background:#f3f4f6;
  cursor:pointer;
  font-size:14px;
  transition:.2s;
}

.chat-header button:hover{
  background:#e5e7eb;
}

/* ===== MENSAJES ===== */

.chat-messages{
  flex:1;
  padding:18px;
  background:var(--chat-bg);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  scroll-behavior:smooth;
}

/* ===== BURBUJAS ===== */

.chat-box .msg{
  max-width:75%;
  padding:10px 14px;
  border-radius:var(--chat-radius);
  font-size:13px;
  line-height:1.4;
  word-wrap:break-word;
  animation:msgFade .2s ease;
   display:flex;
  flex-direction:column;
}

@keyframes msgFade{
  from{opacity:0;transform:translateY(5px);}
  to{opacity:1;transform:translateY(0);}
}

.chat-box .msg.user{
  background:var(--chat-user);
  color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:6px;
  align-items:flex-end;
}

.chat-box .msg.bot{
  background:var(--chat-bot);
  color:var(--chat-text);
  align-self:flex-start;
  border-bottom-left-radius:6px;
}

/* ===== INPUT ===== */

.chat-input{
  height:60px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  background:#fff;
  border-top:1px solid var(--chat-border);
  flex-shrink:0;
}

.chat-input input{
  flex:1;
  min-width:0;
  border:none;
  background:#f3f4f6;
  padding:10px 14px;
  border-radius:999px;
  font-size:16px;
  outline:none;
}

.chat-input input:focus{
  background:#e5e7eb;
}

.chat-input button{
  flex-shrink:0;
  border:none;
  background:#2563eb;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.chat-input button:hover{
  transform:scale(1.08);
}

/* ===== BOTONES ADJUNTOS ===== */

.attach-btn{
  flex-shrink:0;
  border:none;
  background:#2563eb;
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.attach-btn:hover{
  background:#1d4ed8;
}

/* ===== IMÁGENES ===== */

.msg-img{
  max-width:220px;
  width:auto;
  height:auto;
  border-radius:12px;
  display:block;
  cursor:pointer;
}

.msg.user .msg-img{
  margin-left:auto;
}

/* ===== SCROLL ===== */

.chat-messages::-webkit-scrollbar{
  width:6px;
}

.chat-messages::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:10px;
}

/* VISOR DE IMAGEN */

.img-viewer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}

.img-viewer img{
max-width:95%;
max-height:95%;
border-radius:10px;
}

#closeViewer{
position:absolute;
top:20px;
right:25px;
font-size:30px;
color:white;
cursor:pointer;
}

.msg-img{
max-width:220px;
border-radius:10px;
cursor:pointer;
}

.emoji-picker{
    display:flex;
    position:absolute;
    bottom:60px;
    left:10px;
    right:10px;
    background:#fff;
    border-radius:15px;
    padding:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    max-height:150px;
    overflow-y:auto;
    font-size:22px;
    z-index:999;
    flex-wrap:wrap;
    gap:5px;
}

.emoji-picker span{
    cursor:pointer;
    padding:5px;
}

.emoji-picker span:hover{
    background:#f1f1f1;
    border-radius:8px;
}
/* =================================================
   📱 MOBILE
================================================= */

@media(max-width:768px){

  .chat-box{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    border-radius:0;
    display:none;
    flex-direction:column;
  }

  .chat-messages{
    flex:1;
    overflow-y:auto;
    min-height:0;
    padding:16px;
  }

  .chat-input{
    height:64px;
    padding:10px;
    gap:6px;
  }

  .attach-btn{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .chat-input button{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .chat-input input{
    flex:1;
    font-size:16px;
    padding:9px 12px;
  }

}