/* ===============================
   ABSVISA CHAT PRO - MODERN UI v8
================================ */

/* ===============================
   GLOBAL
================================ */
#visa-chat-bubble,
#visa-chat-box {
  z-index: 999999;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

#visa-chat-box * {
  box-sizing: border-box;
}


/* ===============================
   FLOATING BUTTON (CLEAN)
================================ */
#visa-chat-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 58px;
  height: 58px;

  border-radius: 50%;
  background: #25D366;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow: 0 8px 25px rgba(37,211,102,0.4);
  transition: 0.25s ease;
}

#visa-chat-bubble:hover {
  transform: scale(1.08);
}

#visa-chat-bubble img {
  width: 24px;
}


/* ===============================
   CHAT BOX (MODERN CARD)
================================ */
#visa-chat-box {
  position: fixed;
  bottom: 90px;
  right: 20px;

  width: 340px;
  height: 480px;

  display: none;
  flex-direction: column;

  background: #ffffff;
  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}


/* ===============================
   HEADER (SIMPLE)
================================ */
.header {
  background: #128C7E;
  color: white;

  padding: 14px 16px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .title {
  font-size: 14px;
  font-weight: 600;
}

.header span {
  font-size: 11px;
  opacity: 0.8;
}

#visa-chat-close {
  cursor: pointer;
  font-size: 14px;
  opacity: 0.8;
}

#visa-chat-close:hover {
  opacity: 1;
}


/* ===============================
   MESSAGES (CLEAN SCROLL)
================================ */
.messages {
  flex: 1;

  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  overflow-y: auto;
  overflow-x: hidden;

  min-height: 0;
}


/* ===============================
   CHAT BUBBLE (MINIMAL)
================================ */
.bot {
  background: #f1f3f5;
  border-radius: 14px;
  padding: 10px 14px;
  max-width: 80%;

  font-size: 13px;
  line-height: 1.5;

  color: #2d2d2d;
}

.user {
  background: #25D366;
  color: white;

  border-radius: 14px;
  padding: 10px 14px;
  max-width: 80%;

  align-self: flex-end;

  font-size: 13px;
}


/* ===============================
   INPUT AREA (MODERN)
================================ */
.input-area {
  flex-shrink: 0;

  padding: 10px;

  display: flex;
  gap: 8px;

  border-top: 1px solid #eee;
  background: #fafafa;
}

.input-area input {
  flex: 1;
  height: 38px;

  border-radius: 20px;
  padding: 0 14px;

  border: 1px solid #ddd;
  outline: none;

  font-size: 13px;
}

.input-area input:focus {
  border-color: #25D366;
}


/* ===============================
   SEND BUTTON (MODERN CTA)
================================ */
#visa-send {
  width: 38px;
  height: 38px;

  border-radius: 50%;
  background: #25D366;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.2s;
}

#visa-send:hover {
  transform: scale(1.05);
}


/* ===============================
   CHIP (CLEAN BUTTON)
================================ */
.chip {
  display: inline-block;

  background: #f1f3f5;
  border-radius: 16px;

  padding: 6px 12px;
  font-size: 11px;

  margin: 4px 6px 0 0;

  cursor: pointer;

  transition: 0.2s;
}

.chip:hover {
  background: #25D366;
  color: white;
}


/* ===============================
   SCROLLBAR (MINIMAL)
================================ */
.messages::-webkit-scrollbar {
  width: 5px;
}

.messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
}


/* ===============================
   MOBILE
================================ */
@media (max-width: 480px) {

  #visa-chat-box {
    width: 95%;
    right: 2.5%;
    height: 85vh;
  }

  #visa-chat-bubble {
    width: 54px;
    height: 54px;
  }
}