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

#chat-analista-button{
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #143756;
  color: #fff;
  padding: 12px 18px;
  border-radius: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  z-index: 9999;
  font-weight: 600;
  transition: all .25s ease;
}

#chat-analista-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.chat-dot{
  width: 10px;
  height: 10px;
  background: #25D366;
  border-radius: 50%;
}


/* ============================= */
/* PANEL */
/* ============================= */

#chat-analista-panel{
  position: fixed;
  bottom: 85px;
  right: 20px;
  width: 360px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  overflow: hidden;
  display: none;
  z-index: 10000;
  animation: fadeInChat .25s ease;
}

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


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

.chat-header{
  padding: 14px 16px;
  background: #143756;
  color: #fff;
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}


/* ============================= */
/* BODY */
/* ============================= */

.chat-body{
  padding: 16px;
  max-height: 440px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

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

.chat-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 6px;
}


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

.chat-msg{
  margin-bottom: 14px;
  display: flex;
}

.chat-msg.user{
  justify-content: flex-end;
}

.bubble{
  background: #f3f4f6;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 85%;
}

.user-bubble{
  background: #143756;
  color: #fff;
}


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

.chat-actions{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-btn{
  border: none;
  background: #e34624;
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
}

.chat-btn:hover{
  transform: translateY(-1px);
  opacity: .92;
}

.chat-btn.secondary{
  background: #e9eaee;
  color: #143756;
}


/* ============================= */
/* INPUTS CONVERSACIONALES */
/* ============================= */

.chat-input-area{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.chat-input-area input{
  flex: 1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  outline: none;
  transition: all .2s ease;
}

.chat-input-area input:focus{
  border-color: #143756;
  box-shadow: 0 0 0 2px rgba(20,55,86,.15);
}

.chat-input-area button{
  background: #143756;
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all .2s ease;
}

.chat-input-area button:hover{
  transform: translateY(-1px);
  opacity: .92;
}