#csbot-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #16a34a;
  color: #fff;
  padding: 14px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999999;
}

#csbot-box {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 320px;
  height: 420px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  display: none;
  flex-direction: column;
  z-index: 999999;
}

#csbot-box.open {
  display: flex;
}

.csbot-header {
  background: #16a34a;
  color: #fff;
  padding: 12px;
}

#csbot-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.me {
  background: #dcfce7;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  align-self: flex-end;
}

.bot {
  background: #f1f5f9;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  align-self: flex-start;
}

.csbot-input {
  display: flex;
  border-top: 1px solid #ddd;
}

.csbot-input input {
  flex: 1;
  border: none;
  padding: 10px;
}

.csbot-input button {
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 0 14px;
}

/* ===============================
   CHAT MESSAGE CONTAINER
=============================== */
.csbot-messages {
  padding: 10px;
  overflow-y: auto;
  background: #ece5dd; /* WhatsApp background */
}

/* ===============================
   BASE MESSAGE
=============================== */
.csbot-msg {
  max-width: 78%;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
  border-radius: 8px;
  clear: both;
}

/* ===============================
   BOT (LEFT – WHATSAPP STYLE)
=============================== */
.csbot-msg.bot {
  background: #ffffff;
  color: #000;
  float: left;
  border-radius: 8px 8px 8px 0;
}

/* BOT TAIL */
.csbot-msg.bot::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 8px solid #ffffff;
  border-left: 8px solid transparent;
}

/* ===============================
   USER (RIGHT – WHATSAPP STYLE)
=============================== */
.csbot-msg.user {
  background: #dcf8c6;
  color: #000;
  float: right;
  border-radius: 8px 8px 0 8px;
}

/* USER TAIL */
.csbot-msg.user::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 8px solid #dcf8c6;
  border-right: 8px solid transparent;
}