.purity-chat-root {
  /* purityorganicshop.com-এর আসল ব্র্যান্ড কালার — লোগোর গাঢ় সবুজ ও CTA বাটনের উজ্জ্বল সবুজ থেকে নেওয়া। */
  --pc-sand: #FAF5EA;
  --pc-surface: #FFFFFF;
  --pc-ink: #1B2A2A;
  --pc-ink-soft: #4C5F5C;
  --pc-teal: #2D7D3D;
  --pc-teal-deep: #1E5A2A;
  --pc-amber: #81D742;
  --pc-amber-soft: #E9F7DC;
  --pc-line: #E4D9C3;
  --pc-bubble-bot: #F2ECDD;
  font-family: 'Hind Siliguri', 'Segoe UI', Tahoma, sans-serif;
  box-sizing: border-box;
}
.purity-chat-root * { box-sizing: border-box; }

/* ---- Floating launcher ---- */
.purity-chat-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--pc-teal-deep), var(--pc-teal));
  box-shadow: 0 8px 24px rgba(10, 52, 53, 0.35);
  border: none;
  cursor: pointer;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.purity-chat-launcher svg { width: 26px; height: 26px; }
.purity-chat-launcher .pc-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7CD9A0;
  border: 2px solid var(--pc-sand);
}

/* ---- Panel (floating) ---- */
.purity-chat-panel {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: 360px;
  max-width: calc(100vw - 24px);
  height: min(560px, calc(100vh - 120px));
  background: var(--pc-sand);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  border: 1px solid var(--pc-line);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 999999;
}
.purity-chat-panel.pc-open { display: flex; }

/* ---- Inline (shortcode) mode ---- */
.purity-chat-inline .purity-chat-panel {
  position: static;
  width: 100%;
  max-width: 640px;
  height: 560px;
  display: flex;
  margin: 0 auto;
}
.purity-chat-inline .purity-chat-launcher { display: none; }

.pc-header {
  background: linear-gradient(180deg, var(--pc-teal-deep), var(--pc-teal));
  color: #FBF7EC;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pc-header .pc-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--pc-amber);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pc-header .pc-mark svg { width: 18px; height: 18px; }
.pc-header h3 { margin: 0; font-size: 0.98rem; font-weight: 600; color: #FBF7EC !important; }
.pc-header p { margin: 2px 0 0 0; font-size: 0.74rem; opacity: 0.85; color: #FBF7EC !important; }
.pc-header .pc-close {
  margin-left: auto;
  background: none; border: none; color: #FBF7EC;
  font-size: 1.2rem; cursor: pointer; opacity: 0.85; padding: 4px;
}

.pc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pc-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--pc-sand);
}
.pc-row { display: flex; max-width: 88%; }
.pc-row.pc-user { align-self: flex-end; margin-left: auto; }
.pc-row.pc-bot { align-self: flex-start; }
.pc-bubble {
  padding: 9px 12px;
  border-radius: 4px 14px 14px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--pc-bubble-bot);
  border: 1px solid var(--pc-line);
  color: var(--pc-ink);
}
.pc-row.pc-user .pc-bubble {
  background: var(--pc-teal);
  color: #FBF7EC;
  border: none;
  border-radius: 14px 4px 14px 14px;
}

.pc-intro { text-align: center; padding: 6px 4px; color: var(--pc-ink-soft); }
.pc-intro h4 { font-size: 1.02rem; margin: 4px 0 4px 0; color: var(--pc-ink); }
.pc-intro p { margin: 0; font-size: 0.8rem; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.pc-chip {
  border: 1px solid var(--pc-line);
  background: var(--pc-surface);
  color: var(--pc-teal-deep);
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
}

.pc-typing { display: inline-flex; gap: 4px; padding: 3px 1px; }
.pc-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pc-ink-soft); opacity: 0.5;
  animation: pc-blink 1.2s infinite ease-in-out;
}
.pc-typing span:nth-child(2) { animation-delay: .2s; }
.pc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pc-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: .9; } }

/* ---- লিড-গেট: চ্যাট শুরুর আগে নাম/ফোন নেওয়ার বাধ্যতামূলক ফর্ম ---- */
.pc-lead-gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px 20px;
  background: var(--pc-sand);
}
.pc-lead-gate h4 { margin: 0; font-size: 1rem; color: var(--pc-ink); text-align: center; }
.pc-lead-gate .pc-lead-note { margin: 0 0 6px 0; font-size: 0.78rem; color: var(--pc-ink-soft); text-align: center; }
.pc-lead-gate input {
  width: 100%;
  border: 1px solid var(--pc-line);
  background: var(--pc-surface);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--pc-ink);
  outline: none;
}
.pc-lead-gate input:focus { border-color: var(--pc-teal); }
.pc-lead-gate input::placeholder {
  color: var(--pc-ink-soft);
  opacity: 1;
}
.pc-lead-gate .pc-lead-error {
  display: none;
  font-size: 0.76rem;
  color: #B3261E;
  text-align: center;
}
.pc-lead-gate .pc-lead-submit {
  border: none;
  background: var(--pc-teal);
  color: #FBF7EC;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  margin-top: 4px;
}
.pc-lead-gate .pc-lead-submit:disabled { opacity: .6; cursor: default; }

.pc-footer { padding: 8px 10px; border-top: 1px solid var(--pc-line); background: var(--pc-sand); flex-shrink: 0; }
.pc-banner {
  font-size: 0.66rem; color: var(--pc-ink-soft); text-align: center;
  background: var(--pc-amber-soft); border-radius: 8px; padding: 5px 8px; margin-bottom: 7px;
}

/* ---- WhatsApp-এ পাঠাও: কমপক্ষে একটা user মেসেজ হওয়ার পরেই দেখা যায় ---- */
.pc-whatsapp-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--pc-line);
  background: var(--pc-surface);
  color: var(--pc-teal-deep);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pc-whatsapp-btn.pc-visible { display: flex; }
.pc-whatsapp-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.pc-whatsapp-btn:hover { background: var(--pc-amber-soft); border-color: var(--pc-amber); }
.pc-composer {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--pc-surface); border: 1px solid var(--pc-line);
  border-radius: 18px; padding: 5px 5px 5px 12px;
}
.pc-composer textarea {
  flex: 1; border: none; outline: none; resize: none;
  background: transparent; color: var(--pc-ink);
  font-family: inherit; font-size: 0.86rem; min-height: 50px; max-height: 80px; padding: 6px 0; line-height: 1.4;
}
.pc-composer textarea::placeholder {
  color: var(--pc-ink-soft);
  opacity: 1;
}
.pc-send {
  width: 32px; height: 32px; border-radius: 50%; background: var(--pc-teal);
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.pc-send:disabled { opacity: .4; cursor: default; }
.pc-send svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
  .purity-chat-panel {
    right: 8px; left: 8px; width: auto; bottom: 78px;
    height: min(70vh, 560px);
  }
  .purity-chat-launcher { right: 12px; bottom: 12px; }
}