/* Frontend styles for pro chat full */
#prochat-full-root *{box-sizing:border-box}
.prochat-full-fab{position:fixed;bottom:28px;right:20px;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;z-index:99999;box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.prochat-full-widget{position:fixed;bottom:90px;right:20px;width:320px;border-radius:3px;box-shadow:0 8px 30px rgba(0,0,0,0.12);overflow:hidden;display:flex;flex-direction:column;z-index:99998;background:#fff}
.prochat-full-header{padding:5px;color:#fff;font-weight:300}
.prochat-full-chips{display:flex;gap:2px;padding:3px;border-top:2px solid #f0f0f0}
.prochat-full-chip{padding:0px 4px;border-radius:2px;background:#6f8cff;color:#fff;text-decoration:none}
.prochat-full-body{padding:4px;max-height:230px;overflow:auto}
.prochat-full-footer{padding:3px;border-top:0px solid #eee;display:flex;gap:-8px}
.prochat-full-chip {
    font-size: 10px;
}
.prochat-full-footer {
    font-size: 10px;   
}
/* ইউজারের পাঠানো মেসেজ (ডান পাশে) */
#prochat-full-root .pc-msg.pc-user {
  background: #dcf8c6; /* হালকা সবুজ */
  color: #000;
  font-size: 11px;
  padding: 8px 12px;
  margin: 6px 0;
  border-radius: 6px 6px 0 10px;
  max-width: 90%;
  float: right;
  clear: both;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  position: relative;
}

/* বট/অন্যের পাঠানো মেসেজ (বাম পাশে) */
#prochat-full-root .pc-msg.pc-bot {
  background: #EDEBF7; /* সাদা */
  color: #2A0CC2;
  font-size: 13px;
  padding: 3px 11px;
  margin: 2px 0;
  border-radius: 6px 6px 6px 0;
  max-width: 100%;
  float: left;
  clear: both;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  position: relative;
}

/* ইনপুট এরিয়া */
#prochat-full-root .pc-input {
  border-top: 1px solid #ddd;
  padding: 8px;
  background: #f9f9f9;
}

#prochat-full-root .pc-input input {
  width: 100%;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid #ccc;
  outline: none;
}

#prochat-full-root .pc-input button {
  background: #25d366; /* WhatsApp সবুজ */
  color: #fff;
  border: none;
  padding: 8px 15px;
  margin-left: 5px;
  border-radius: 20px;
  cursor: pointer;
}
/* মেসেজ ইনপুট এর জন্য */
.prochat-full-footer input[type="text"],
.prochat-full-footer textarea {
    width: 80%;                  /* ইনপুটের প্রস্থ */
    padding: 12px 15px;           /* ভিতরের ফাঁকা জায়গা */
    border: 2px solid #e63946;    /* লাল বর্ডার */
    border-radius: 2px;          /* গোলাকার কোণা */
    outline: none;
    font-size: 110px;
    font-family: "Arial", sans-serif;
    color: #333;
    transition: all 0.3s ease;
}

/* ইনপুট ফোকাস হলে */
.prochat-full-footer input[type="text"]:focus,
.prochat-full-footer textarea:focus {
    border-color: #b71c1c;        /* ডার্ক রেড */
    box-shadow: 0 0 8px rgba(230, 57, 70, 0.5);
}


/* শুধু ওই ইনপুট ফিল্ড টার্গেট করার জন্য */
.prochat-full-footer #pc_full_input {
    border: 1px solid #e63946 !important;   /* লাল বর্ডার */
    border-radius: 25px !important;         /* গোলাকার কোণা */
    padding: 10px 15px !important;          /* ভিতরের ফাঁকা */
    font-size: 13px !important;             /* ফন্ট সাইজ */
    font-family: "Arial", sans-serif !important;
    outline: none !important;
    color: #333 !important;                 /* টেক্সট কালার */
    background: #fff !important;            /* ব্যাকগ্রাউন্ড */
    box-sizing: border-box;                 /* সঠিক সাইজিং */
}

/* সেন্ড বাটনের জন্য */
.prochat-full-footer button,
.prochat-full-footer .send-btn {
    background: #23079c;          /* লাল */
    color: #fff;
    border: none;
    border-radius: 50%;           /* পুরো গোল */
    width: 45px;
    height: 45px;
    margin-left: -22px;
	padding: 8px 12px; 
    cursor: pointer;  
}

/* হোভার করলে বাটন */
.prochat-full-footer button:hover,
.prochat-full-footer .send-btn:hover {
    background: #b71c1c;
}

/* ===== ProChat Root Container ===== */


.prochat-full-header {
    background: linear-gradient(90deg, #e63946, #b71c1c); /* লাল গ্রেডিয়েন্ট */
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    padding: 4px 6px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid #b71c1c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* ==============================
   Prochat Hint Bubble Style (Updated)
   ============================== */
.prochat-hint {
  position: fixed;
  bottom: 130px;       /* আইকনের উপরে থাকবে */
  right: 20px;         /* চ্যাট আইকনের পাশে */
  background: linear-gradient(135deg, #6c63ff, #8e86ff); /* ফ্লুইড ব্যাকগ্রাউন্ড */
  color: #fff;
  padding: 8px 10px;  /* কমপ্যাক্ট প্যাডিং */
  border-radius: 20px; /* গোলাকার কোণা */
  font-size: 8px;     /* লিগিবল ফন্ট সাইজ */
  line-height: 1.5;
  max-width: 260px;
  min-width: 120px;
  text-align: left;
  animation: fadeIn 0.8s ease-in-out;
  transition: opacity 0.5s, transform 0.5s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 9999;
  pointer-events: none; /* ক্লিক এড়াতে */
}

/* নিচের দিকে arrow (ডান দিকে) */
.prochat-hint::after {
  content: "";
  position: absolute;
  top: 100%;           /* বাবলের নিচে */
  right: 20px;         /* arrow ডান পাশে */
  border-width: 8px;
  border-style: solid;
  border-color: #6c63ff transparent transparent transparent; /* arrow color বাবলের সাথে মিলিয়ে */
}

/* FadeIn animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Optional: হিন্ট বাবল transition effect */
.prochat-hint.show {
  opacity: 1;
  transform: translateY(0);
}
.prochat-hint.hide {
  opacity: 0;
  transform: translateY(20px);
}