:root{--color:#c10077;}
body{margin:0;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f0f2f5;}
.messenger-toggle{position:fixed;bottom:100px;right:23px;background:var(--color);color:white;font-size:24px;padding:5px;border-radius:50%;box-shadow:0 4px 15px rgba(0,0,0,0.2);cursor:pointer;z-index:1000;width:60px;height:60px;display:flex;justify-content:center;align-items:center;}
.messenger-toggle img{width:50px}
.messenger-box{position:fixed;bottom:170px;right:20px;width:360px;max-height:550px;background:white;border-radius:15px;display:flex;flex-direction:column;box-shadow:0 10px 25px rgba(0,0,0,0.3);overflow:hidden;z-index:99999;}
.hidden{display:none;}
.messenger-header{background:var(--color);color:white;padding:15px;display:flex;align-items:center;gap:10px;font-weight:bold;position:relative;}
.messenger-header .avatar{width:36px;height:36px;background:white;border-radius:50%;}
.messenger-header .close-btn{position:absolute;right:15px;top:10px;background:transparent;border:none;color:white;font-size:20px;cursor:pointer;}
.messenger-messages{  /*flex: 1;*/
padding:15px;background:#e5ddd5;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.message{max-width:80%;padding:10px 15px;border-radius:20px;font-size:14px;line-height:1.4;display:inline-block;animation:fadeIn 0.3s ease;}
.user-message{align-self:flex-end;background:#0084ff;color:white;border-bottom-right-radius:0;}
.bot-message{align-self:flex-start;background:#f1f0f0;color:#111;border-bottom-left-radius:0;}
.messenger-input{display:flex;border-top:1px solid #ccc;}
.messenger-input input{flex:1;padding:22px;border:none;outline:none;font-size:15px;font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
.messenger-input button{background:var(--color);color:white;border:none;padding:0 20px;cursor:pointer;font-size:18px;}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(5px);}
  to{opacity:1;transform:translateY(0);}
}
@media (max-width:400px){
  .messenger-box{width:95%;right:2.5%;}
}
.typing::after{content:'';display:inline-block;animation:dots 1.2s steps(3,end) infinite;margin-top:6px;}
@keyframes dots{
  0%{content:'';}
  33%{content:'.';}
  66%{content:'..';}
  100%{content:'...';}
}
.chatbox{position:fixed;bottom:80px;right:30px;width:320px;height:480px;background:white;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.2);overflow:hidden;transform:scale(0.7);opacity:0;pointer-events:none;transition:transform 0.3s ease,opacity 0.3s ease;z-index:9999;}
.chatbox.active{transform:scale(1);opacity:1;pointer-events:auto;}
#openChatBtn{position:fixed;bottom:20px;right:30px;background-color:#007bff;color:white;border:none;padding:14px 16px;border-radius:50%;font-size:20px;cursor:pointer;z-index:10000;}

/* Optional fade-in overlay when chat is active */
body.chatbox-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.3s;}
body.chatbox-open.chatbox-overlay::before{opacity:1;pointer-events:auto;}
.message{display:flex;align-items:flex-start;margin:10px 0;position:relative;margin-left:23px!important}
.avatar img{width:37px;}
.message .avatar{width:26px;height:26px;border-radius:50%;object-fit:contain;margin-right:8px;position:absolute;left:-31px;top:0;background:#fff;}
.bot-message .bubble{background-color:#f0f2f5;color:#050505;padding:6px 4px;border-radius:18px;max-width:100%;font-size:15px;line-height:1.4;word-wrap:break-word;}