@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100..900&family=Noto+Sans+Thai:wght@100..900&display=swap');
body {font-family:'Noto Sans Thai', sans-serif;background: #f4f6f9;margin:0;padding:0;}

/* Floating Button */
.fab {position: fixed;bottom: 25px;margin-top: 40px; right: 25px;background-color: #98f109;color: #fff;border: none;border-radius: 50%;width: 60px;height: 60px;font-size: 28px;cursor: pointer;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);transition: all 0.3s ease;}
.fab:hover {background-color: #41c305;}

/* Modal */
.modal {display: none;position: fixed;right: 30px;bottom: 100px;width: 290px;max-height: 500px;background: #fff;border-radius: 16px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);overflow: hidden;flex-direction: column;animation: slideUp 0.4s ease, fadeIn 0.4s ease;z-index: 9999;}

/* เมื่อ active ให้แสดง */
.modal.active {display:flex;}
.chat-container {display:flex;flex-direction:column;overflow:hidden; height:400px;}
.chat-header {background: #98f109;color: white;font-size: 14px;font-family: 'Noto Sans Thai';padding: 12px 16px;display: flex;justify-content: space-between;align-items: center;}
.chat-body {flex: 1;height: 60px;padding: 12px;overflow-y: auto;background: #f7f9fc;max-height: 500px;scrollbar-width:thin;scrollbar-color:#CCC transparent;border-radius:4px;}
.bot-msg,
.user-msg {margin: 8px 0;padding: 10px 14px;border-radius: 12px;max-width: 90%;line-height: 1.5;font-size:12px;word-wrap: break-word;align-self:flex-end;background-color:#aaf5a5;}
.bot-msg {background: #e1f0ff;align-self: flex-start;}
.user-msg {background:#b1f788;color: #ffffff;align-self: flex-end;}
.chat-input {display:flex;padding: 10px;border-top: 1px solid #ddd;}
.chat-input input {flex: 1;padding: 1px;border-radius: 10px;border: 1px solid #ccc;}
.chat-input button {background: #98f109;border: none;color: #fff;font-family:'Noto Sans Thai';padding: 5px 9px;margin-left: 8px;border-radius: 50px;cursor: pointer;}
.chat-options {margin-top:8px;}
.chat-option {background:#fff;border: 1px solid #98f109;color: #303031;border-radius: 6px;padding: 4px 10px;margin-right: 6px;cursor: pointer;font-size: 12px;}

/*Animation popup*/
@keyframes slideUp {
  from {transform:translateY(20px);opacity:0;}
  to {transform:translateY(0);opacity:1;}
}
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
.animate-slideUp {
  animation: slideUp 0.35s ease-out;
}