/* ==========================================================
   Master Vishnu – Astrologer in California | Chat Widget
   ========================================================== */
.mvc-root {
  --mvc-orange: #d96a00;
  --mvc-orange-2: #ff9a2f;
  --mvc-dark: #111111;
  --mvc-bg: #fff8f1;
  --mvc-text: #222;
  --mvc-muted: #777;
  --mvc-wa: #25d366;
  --mvc-call: #0d6efd;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100000;
  line-height: 1.45;
}
.mvc-root *, .mvc-root *::before, .mvc-root *::after { box-sizing: border-box; }

/* keep the theme's scroll-to-top button clear of the chat launcher & greeting bubble */
.scroll-top { right: auto !important; left: 20px !important; bottom: 20px !important; border-radius: 50% !important; }

/* ---------- Launcher pill ---------- */
.mvc-launcher {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #1a1a1a, #000);
  color: #fff; border: 2px solid var(--mvc-orange);
  border-radius: 50px; padding: 6px 18px 6px 6px;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .2s ease;
  margin-left: auto;
}
.mvc-launcher:hover { transform: translateY(-2px); }
.mvc-launcher:focus-visible { outline: 3px solid var(--mvc-orange-2); outline-offset: 2px; }
.mvc-launcher-text { display: flex; flex-direction: column; text-align: left; }
.mvc-launcher-text strong { font-size: 14px; font-weight: 700; }
.mvc-launcher-text span { font-size: 11px; opacity: .8; }

.mvc-avatar {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--mvc-orange-2), var(--mvc-orange) 60%, #8a3f00);
  color: #fff; display: grid; place-items: center;
  font-size: 22px; font-weight: 700; border: 2px solid #fff;
}
.mvc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mvc-avatar::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: #2ecc71; border: 2px solid #fff;
}
.mvc-launcher .mvc-avatar { animation: mvcPulse 2.4s infinite; }
@keyframes mvcPulse {
  0% { box-shadow: 0 0 0 0 rgba(217,106,0,.7); }
  70% { box-shadow: 0 0 0 12px rgba(217,106,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(217,106,0,0); }
}

.mvc-badge {
  position: absolute; top: -4px; left: 34px;
  background: #e53935; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px;
  display: grid; place-items: center; padding: 0 5px;
}

/* ---------- Teaser bubble ---------- */
.mvc-teaser {
  position: absolute; right: 0; bottom: 70px; width: 250px;
  background: #fff; color: var(--mvc-text); font-size: 13px;
  padding: 12px 30px 12px 14px; border-radius: 14px 14px 4px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); cursor: pointer;
  border-left: 4px solid var(--mvc-orange);
  animation: mvcUp .35s ease;
}
.mvc-teaser-close {
  position: absolute; top: 4px; right: 6px; background: none; border: 0;
  font-size: 18px; color: #999; cursor: pointer; line-height: 1;
}

/* ---------- Chat window ---------- */
.mvc-window {
  position: absolute; right: 0; bottom: 72px;
  width: 360px; height: 540px; max-height: calc(100vh - 110px);
  background: var(--mvc-bg); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(217,106,0,.35);
  animation: mvcUp .3s ease;
}
.mvc-root:not(.mvc-open) .mvc-window { display: none; }
.mvc-root.mvc-open .mvc-teaser { display: none; }
@keyframes mvcUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.mvc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #000 0%, #2a1500 60%, var(--mvc-orange) 140%);
  color: #fff; border-bottom: 3px solid var(--mvc-orange);
}
.mvc-header .mvc-avatar { width: 40px; height: 40px; font-size: 20px; }
.mvc-title { flex: 1; min-width: 0; }
.mvc-title strong { display: block; font-size: 15px; }
.mvc-title span { font-size: 11.5px; opacity: .85; }
.mvc-title span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #2ecc71; margin-right: 5px; vertical-align: middle;
}
.mvc-head-btn {
  background: rgba(255,255,255,.12); border: 0; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; text-decoration: none; flex: 0 0 auto;
}
.mvc-head-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.mvc-head-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- Messages ---------- */
.mvc-body {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(217,106,0,.08), transparent 40%),
    var(--mvc-bg);
  scroll-behavior: smooth;
}
.mvc-msg {
  max-width: 85%; padding: 9px 12px; font-size: 13.5px;
  border-radius: 14px; word-wrap: break-word; white-space: pre-line;
  animation: mvcUp .25s ease;
}
.mvc-bot {
  align-self: flex-start; background: #fff; color: var(--mvc-text);
  border-bottom-left-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.mvc-user {
  align-self: flex-end; color: #fff;
  background: linear-gradient(135deg, var(--mvc-orange), #b85600);
  border-bottom-right-radius: 4px;
}
.mvc-bot a { color: var(--mvc-orange); font-weight: 600; }
.mvc-time { display: block; font-size: 10px; opacity: .55; margin-top: 3px; text-align: right; }

.mvc-actions { display: flex; gap: 6px; flex-wrap: wrap; align-self: flex-start; max-width: 90%; }
.mvc-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 30px; font-size: 12px; font-weight: 600;
  text-decoration: none; color: #fff !important; border: 0; cursor: pointer;
  text-transform: uppercase; letter-spacing: .3px;
}
.mvc-act svg { width: 14px; height: 14px; fill: currentColor; }
.mvc-act-wa { background: var(--mvc-wa); }
.mvc-act-call { background: var(--mvc-call); }
.mvc-act-more { background: transparent; color: var(--mvc-orange) !important; border: 1.5px solid var(--mvc-orange); }
.mvc-act:hover { filter: brightness(1.08); }

/* typing dots */
.mvc-typing { display: inline-flex; gap: 4px; align-items: center; }
.mvc-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mvc-orange);
  animation: mvcDot 1.2s infinite; display: block;
}
.mvc-typing i:nth-child(2) { animation-delay: .15s; }
.mvc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mvcDot { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* ---------- Quick-reply chips ---------- */
.mvc-chips {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px;
  border-top: 1px solid rgba(217,106,0,.15); background: #fff;
  max-height: 104px; overflow-y: auto;
}
.mvc-chips:empty { display: none; }
.mvc-chip {
  border: 1.5px solid var(--mvc-orange); color: var(--mvc-orange);
  background: #fff; border-radius: 20px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.mvc-chip:hover { background: var(--mvc-orange); color: #fff; }

/* ---------- Input ---------- */
.mvc-form { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid #eee; }
.mvc-input {
  flex: 1; border: 1.5px solid #e2c6a8; border-radius: 22px;
  padding: 9px 14px; font-size: 13.5px; outline: none; font-family: inherit;
  color: var(--mvc-text); background: #fff; min-width: 0;
}
.mvc-input:focus { border-color: var(--mvc-orange); box-shadow: 0 0 0 3px rgba(217,106,0,.15); }
.mvc-send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--mvc-orange-2), var(--mvc-orange));
  color: #fff; display: grid; place-items: center; flex: 0 0 auto;
}
.mvc-send svg { width: 18px; height: 18px; fill: currentColor; }
.mvc-foot { text-align: center; font-size: 10px; color: var(--mvc-muted); padding: 0 0 6px; background: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .mvc-root { right: 12px; bottom: 12px; }
  .mvc-root.mvc-open { left: 0; right: 0; bottom: 0; top: 0; }
  .mvc-root.mvc-open .mvc-launcher { display: none; }
  .mvc-root.mvc-open .mvc-window {
    position: fixed; inset: 0; width: 100%; height: 100%;
    max-height: none; border-radius: 0; border: 0;
  }
  .mvc-launcher-text span { display: none; }
  .mvc-teaser { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .mvc-root * { animation: none !important; }
}

/* ---------- WhatsApp lead card (v3) ---------- */
.mvc-lead {
  align-self: stretch; margin: 4px 2px;
  background: linear-gradient(180deg, #fff3e6, #fff);
  border: 1.5px solid rgba(217,106,0,.35); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  animation: mvcUp .3s ease;
}
.mvc-lead p { margin: 0; font-size: 13px; color: var(--mvc-text); line-height: 1.45; }
.mvc-lead input {
  width: 100%; border: 1.5px solid #ead2b8; border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit; outline: none;
  background: #fff; color: var(--mvc-text);
}
.mvc-lead input:focus { border-color: var(--mvc-orange); box-shadow: 0 0 0 3px rgba(217,106,0,.15); }
.mvc-lead-err { color: #d32f2f; font-size: 12px; min-height: 0; }
.mvc-lead-err:empty { display: none; }
.mvc-lead-go, .mvc-lead-wa {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; border: 0; border-radius: 10px; padding: 10px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  text-decoration: none; color: #fff !important;
}
.mvc-lead-go { background: linear-gradient(135deg, var(--mvc-orange-2), var(--mvc-orange)); }
.mvc-lead-wa { background: var(--mvc-wa); }
.mvc-lead-wa svg { width: 16px; height: 16px; fill: currentColor; }
.mvc-lead-go:hover, .mvc-lead-wa:hover { filter: brightness(1.07); }
.mvc-lead-call { text-align: center; font-size: 12px; color: var(--mvc-muted) !important; text-decoration: underline; }
.mvc-lead-done { border-color: rgba(37,211,102,.5); background: #f1fff6; }