/* Floating Button */
#chatToggle{
  position:fixed;right:120px;bottom:20px;
  width:60px;height:60px;border-radius:50%;
  background:#3399ff;color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.3);
  z-index:9999;
}

/* Chat Container */
#chatContainer{
  position:fixed;right:20px;bottom:90px;
  width:340px;height:520px;
  background:#fff;border-radius:12px;
  box-shadow:0 0 15px rgba(0,0,0,0.2);
  display:none;flex-direction:column;
  overflow:hidden;z-index:9998;
}

/* Header */
#chatHeader{
  background:#007bff;color:#fff;padding:10px;
  display:flex;justify-content:space-between;align-items:center;
}
#chatHeader button{
  background:none;border:none;color:#fff;font-size:20px;cursor:pointer;
}

/* User Info Form & Chat UI */
#userForm,#chatUI{
  padding:10px;flex:1;display:flex;flex-direction:column;
}
input{
  width:100%;padding:8px;margin:6px 0;
  border:1px solid #ccc;border-radius:4px;
}
button.mainBtn{
  padding:8px 10px;border:none;border-radius:4px;
  background:#007bff;color:#fff;cursor:pointer;margin-top:8px;
}

/* Chat Box with Scrollbar */
#chatBox{
  flex:1;
  overflow-y:auto;
  border:1px solid #ccc;border-radius:6px;
  padding:8px;margin-top:10px;
  display:flex;flex-direction:column;
}

/* Custom Scrollbar */
#chatBox::-webkit-scrollbar{
  width:8px;
}
#chatBox::-webkit-scrollbar-thumb{
  background:#007bff;
  border-radius:4px;
}
#chatBox::-webkit-scrollbar-track{
  background:#f0f0f0;
  border-radius:4px;
}

/* Messages */
.msg{
  margin:6px 0;padding:8px;border-radius:6px;max-width:75%;
  word-wrap:break-word;
}
.user{align-self:flex-end;background:#d1e7dd;}
.bot{align-self:flex-start;background:#f8d7da;}
.user::before{content:'👤 ';} .bot::before{content:'🤖 ';}

/* Input Area */
#inputArea{display:flex;margin-top:10px;}
#inputArea input{flex:1;}
#inputArea button{
  padding:8px 12px;background:#007bff;color:#fff;
  border:none;border-radius:4px;cursor:pointer;margin-left:5px;
}
#chatUI{
  flex:1;
  display:flex;
  flex-direction:column;
  height:400px; /* ✅ নির্দিষ্ট height, যাতে chatBox বাড়লে scrollbar কাজ করে */
}

/* Chat Box with Scrollbar */
#chatBox{
  flex:1;
  overflow-y:auto;
  border:1px solid #ccc;
  border-radius:6px;
  padding:8px;
  margin-top:10px;
  display:flex;
  flex-direction:column;
  min-height:0; /* ✅ flex-item overflow ঠিক করার জন্য */
}

/* Custom Scrollbar */
#chatBox::-webkit-scrollbar{
  width:8px;
}
#chatBox::-webkit-scrollbar-thumb{
  background:#007bff;
  border-radius:4px;
}
#chatBox::-webkit-scrollbar-track{
  background:#f0f0f0;
  border-radius:4px;
}