/* ============================= */
/* Global */
/* ============================= */

body {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;

  background: #f4f7fb;

  margin: 0;
}


/* ============================= */
/* Brand Gradient Variable */
/* ============================= */

:root {

  --madura-gradient: linear-gradient(
    135deg,
    #ff7a00,
    #ff2d8d,
    #a64dff,
    #3db6ff
  );

}



/* ============================= */
/* Chatbox Container */
/* ============================= */

.chatbox {

  display: block;

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 600px;

  height: 540px;

  background:linear-gradient(
    135deg,
    #ff7a00,
    #ff2d8d,
    #a64dff,
    #3db6ff);

  backdrop-filter: blur(10px);

  border-radius: 16px;

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

  overflow: hidden;

  z-index: 999;

  animation: slideUp 0.4s ease;

}

@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(40px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ============================= */
/* Header */
/* ============================= */

.header {

  background: var(--madura-gradient);

  color: white;

  padding: 12px 18px;

  font-size: 18px;

  font-weight: 600;

  letter-spacing: 0.5px;

  display: flex;

  gap: 10px;

}

.header img {

  width: 32px;

  height: 32px;

  border-radius: 6px;

  background: white;

  padding: 2px;

}



/* ============================= */
/* Messages Area */
/* ============================= */

.messages {

  height: 370px;

  overflow-y: auto;

  padding: 15px;

  background: linear-gradient(to bottom, #f8fbff, #eef3f9);

}

.messages::-webkit-scrollbar {

  width: 6px;

}

.messages::-webkit-scrollbar-thumb {

  background: var(--madura-gradient);

  border-radius: 10px;

}



/* ============================= */
/* User Message */
/* ============================= */

.user {

  background: linear-gradient(135deg, #007bff, #2f639b);

  color: white;

  padding: 12px;

  border-radius: 12px 12px 0 12px;

  margin: 8px;

  max-width: 75%;

  margin-left: auto;

  text-align: right;

  font-size: 14px;

  box-shadow: 0 5px 15px rgba(166, 77, 255, 0.35);

  line-height: 1.5;

  word-wrap: break-word;

}



/* ============================= */
/* Bot Message */
/* ============================= */

.bot {

  background: white;

  color: #333;

  padding: 12px;

  border-radius: 12px 12px 12px 0;

  margin: 8px;

  max-width: 75%;

  margin-right: auto;

  font-size: 14px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

  line-height: 1.6;

  word-wrap: break-word;

}

.bot strong {

  font-weight: bold;

  color: #a64dff;

}

.bot em {

  font-style: italic;

  color: #555;

}

.bot code {

  background: #f0f0f0;

  padding: 2px 6px;

  border-radius: 3px;

  font-family: "Courier New", monospace;

  font-size: 13px;

}

.bot a {

  background: var(--madura-gradient);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-weight: bold;

  cursor: pointer;

  text-decoration: none;

}

.bot a:hover {

  opacity: 0.7;

}

.bot br {

  display: block;

  content: "";

  margin: 4px 0;

}



/* ============================= */
/* Typing Animation */
/* ============================= */

.typing {

  font-size: 13px;

  color: #666;

  margin: 8px;

  font-style: italic;

  animation: blink 1s infinite;

}

@keyframes blink {

  0% {

    opacity: 0.3;

  }

  50% {

    opacity: 1;

  }

  100% {

    opacity: 0.3;

  }

}



/* ============================= */
/* Input Area */
/* ============================= */

.input-area {

  display: flex;

  border-top: 1px solid #e0e6ed;

  background: white;

  padding: 8px;

}

.input-area input {

  flex: 1;

  padding: 12px;

  border: none;

  outline: none;

  font-size: 14px;

  border-radius: 10px;

  background: #f4f7fb;

  margin-right: 5px;

}

.input-area button {

  background: var(--madura-gradient);

  color: white;

  border: none;

  padding: 12px 18px;

  cursor: pointer;

  border-radius: 10px;

  transition: all 0.3s ease;

}

.input-area button:hover {

  transform: scale(1.05);

  box-shadow: 0 5px 20px rgba(166, 77, 255, 0.4);

}



/* ============================= */
/* Responsive */
/* ============================= */

/* ================================================= */
/* FULL RESPONSIVE ADD-ON (Floating WhatsApp Style) */
/* Laptop, Tablet, Mobile L, M, S */
/* DO NOT MODIFY EXISTING CSS */
/* ================================================= */


/* ================= Laptop Large (1440px and above) ================= */

@media (min-width: 1440px) {

  .chatbox {

    width: 400px;

    height: 600px;

    bottom: 110px;

    right: 40px;

  }

  .messages {

    height: calc(600px - 140px);

  }

  .chat-toggle {

    width: 65px;

    height: 65px;

    font-size: 28px;

    right: 40px;

    bottom: 40px;

  }

}



/* ================= Laptop Standard (1024px – 1439px) ================= */

@media (min-width: 1024px) and (max-width: 1439px) {

  .chatbox {

    width: 360px;

    height: 520px;

    bottom: 100px;

    right: 25px;

  }

  .messages {

    height: calc(520px - 140px);

  }

}



/* ================= Tablet Large (768px – 1023px) ================= */

@media (min-width: 768px) and (max-width: 1023px) {

  .chatbox {

    width: 340px;

    height: 500px;

    right: 20px;

    bottom: 90px;

  }

  .messages {

    height: calc(500px - 140px);

  }

  .chat-toggle {

    right: 20px;

    bottom: 20px;

  }

}



/* ================= Tablet Small (600px – 767px) ================= */

@media (min-width: 600px) and (max-width: 767px) {

  .chatbox {

    width: 90%;

    right: 5%;

    bottom: 90px;

    height: 75vh;

  }

  .messages {

    height: calc(75vh - 140px);

  }

}



/* ================= Mobile Large (425px – 599px) ================= */

@media (min-width: 425px) and (max-width: 599px) {

  .chatbox {

    width: 94%;

    right: 3%;

    bottom: 85px;

    height: 80vh;

  }

  .messages {

    height: calc(80vh - 140px);

  }

  .chat-toggle {

    width: 60px;

    height: 60px;

  }

}



/* ================= Mobile Medium (375px – 424px) ================= */

@media (min-width: 375px) and (max-width: 424px) {

  .chatbox {

    width: 96%;

    right: 2%;

    bottom: 80px;

    height: 85vh;

  }

  .messages {

    height: calc(85vh - 140px);

  }

  .header {

    font-size: 16px;

  }

}



/* ================= Mobile Small (320px – 374px) ================= */

@media (max-width: 374px) {

  .chatbox {

    width: 98%;

    right: 1%;

    bottom: 75px;

    height: 88vh;

  }

  .messages {

    height: calc(88vh - 140px);

    padding: 10px;

  }

  .chat-toggle {

    width: 55px;

    height: 55px;

    font-size: 22px;

  }

  .header {

    font-size: 15px;

  }

  .input-area input {

    font-size: 13px;

  }

}