/* VisaBot Widget v2.1 — Fluid Header + Mobile Fix */
/* Isolate widget from host site CSS — critical for Next.js/Tailwind sites */
#visabot-root { all: initial; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#visabot-root * { box-sizing: border-box; font-family: inherit; }
#visabot-root, #vb-window { max-width: 100vw; }

/* ── FAB: fluid position, no !important fighting the media query ──────── */
#vb-fab {
  position: fixed;
  bottom: clamp(16px, 4vw, 24px);
  right: clamp(16px, 4vw, 24px);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--vb-primary, #534AB7);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(83,74,183,.3);
  z-index: 99998;
  transition: transform .2s;
  padding: 0;
  overflow: hidden;
}
#vb-fab:hover { transform: scale(1.06); }
#vb-fab svg { width: 22px; height: 22px; }
#vb-fab.vb-hidden { display: none !important; }
#vb-fab.vb-pulse { animation: vb-fab-pulse 1.8s ease-in-out infinite; }
@keyframes vb-fab-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(83,74,183,.3); }
  50%      { box-shadow: 0 2px 12px rgba(83,74,183,.3), 0 0 0 8px rgba(83,74,183,.15); }
}

/* ── Window: fluid + hard viewport safety net ──────────────────────────── */
#vb-window {
  position: fixed;
  bottom: clamp(72px, 18vw, 88px);
  right: clamp(16px, 4vw, 24px);
  width: min(370px, calc(100vw - 32px));
  max-height: min(600px, 80dvh);
  background: #fff;
  border-radius: 20px 20px 16px 16px;
  border: 0.5px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  z-index: 99999;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  transform: scale(.95) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s, opacity .25s;
  overflow: hidden;
  box-sizing: border-box;
}
#vb-window.vb-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
#vb-window.vb-expanded {
  width: min(860px, calc(100vw - 32px));
  max-height: min(calc(100dvh - 120px), 900px);
}
#vb-window.vb-expanded #vb-body { max-height: calc(100dvh - 260px); }

#vb-handle-row { display: flex; justify-content: center; padding: 10px 0 2px; flex-shrink: 0; }
#vb-handle { width: 36px; height: 4px; border-radius: 4px; background: #e0e0e0; }

/* ── Header: fluid, nothing allowed to silently shrink-clip ───────────── */
#vb-header {
  background: #FF752E;
  padding: clamp(10px,3vw,14px) clamp(12px,4vw,20px) clamp(11px,3.2vw,15px) clamp(12px,3.5vw,18px);
  display: flex;
  align-items: center;
  gap: clamp(6px,2vw,14px);
  border-bottom: 0.5px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  border-radius: 19px 19px 0 0;
  min-width: 0; /* let this flex container itself participate in shrinking */
}

#vb-avatar {
  width: clamp(32px,9vw,40px);
  height: clamp(32px,9vw,40px);
  border-radius: 10px;
  background: #FFFFFFAF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
#vb-avatar svg { width: 50%; height: 50%; color: #fff; }
#vb-avatar::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1D9E75;
  border: 2px solid #1a1a2e;
  position: absolute;
  bottom: -1px; right: -1px;
}

#vb-header-info {
  flex: 1 1 auto;
  min-width: 0; /* REQUIRED for wrapping/ellipsis to work inside flex */
}
/* Name: stays on one line, but never shrinks below a comfortably readable
   size — it will only ellipsis in genuinely extreme widths (<240px window). */
#vb-bot-name {
  font-size: clamp(14px, 4vw, 15px);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subtitle: full text always shown — wraps to a second line instead of
   being cut off with "...". No more losing part of the string. */
#vb-bot-sub {
  font-size: clamp(11px, 3vw, 12px);
  color: rgba(255,255,255,.85);
  margin-top: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Live badge: fixed-size and protected from flex-shrink so it never clips.
   Shrinks its own padding (not the text) as space tightens, and only
   collapses to a dot on truly tiny screens — so name/subtitle keep the
   space they need instead of the badge hogging a fixed footprint. */
#vb-live-badge {
  flex-shrink: 0;
  font-size: clamp(9px, 2.2vw, 11px);
  padding: clamp(3px, 0.8vw, 5px) clamp(6px, 1.6vw, 12px);
  border-radius: 20px;
  background: #fff;
  color: #0F6E56;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
@media (max-width: 340px) {
  #vb-live-badge {
    width: 10px; height: 10px;
    padding: 5px;
    overflow: hidden;
    text-indent: -9999px;
    border-radius: 50%;
  }
}

#vb-header-btns {
  display: flex;
  gap: clamp(4px,1.5vw,7px);
  flex-shrink: 0;
  margin-left: clamp(4px,1.5vw,7px);
}
.vb-hdr-btn {
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  width: clamp(25px,7vw,29px);
  height: clamp(25px,7vw,29px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s;
  flex-shrink: 0;
}
.vb-hdr-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── Body / messages ─────────────────────────────────────────────────── */
#vb-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 180px;
  max-height: 380px;
  background: #F9F9FB;
}
#vb-body::-webkit-scrollbar { width: 4px; }
#vb-body::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

.vb-msg-wrap { display: flex; flex-direction: column; margin-bottom: 10px; }
.vb-msg-wrap.vb-user { align-items: flex-end; }
.vb-msg-row { display: flex; align-items: flex-end; gap: 8px; }
.vb-msg-wrap.vb-user .vb-msg-row { flex-direction: row-reverse; }

.vb-mini-av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--vb-primary, #534AB7);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 11px; color: #fff;
  margin-bottom: 2px;
}
.vb-mini-av svg { width: 12px; height: 12px; }

.vb-bubble {
  display: block;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 82%;
}
.vb-bubble.vb-bot { background: #fff; color: #1a1a1a; border-radius: 4px 14px 14px 14px; border: 0.5px solid #ebebeb; }
.vb-bubble.vb-user { background: #1a1a2e; color: #fff; border-radius: 14px 4px 14px 14px; align-self: flex-end; }

.vb-msg-time { font-size: 10px; color: #bbb; margin-top: 3px; padding: 0 2px; }

.vb-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #0F6E56; margin-top: 5px; padding: 0 2px; }
.vb-verified svg { width: 11px; height: 11px; flex-shrink: 0; }

.vb-sources { margin-top: 4px; padding: 0 2px; }
.vb-source-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: #E1F5EE; color: #085041; border: 0.5px solid #9FE1CB;
}

.vb-typing-indicator {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 0.5px solid #ebebeb;
  padding: 9px 13px; border-radius: 4px 14px 14px 14px;
}
.vb-typing-name { font-size: 12px; color: #999; white-space: nowrap; }
.vb-typing-dots { display: flex; gap: 3px; align-items: center; }
.vb-typing-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #bbb; display: block;
  animation: vb-bounce .9s ease-in-out infinite;
}
.vb-typing-dots span:nth-child(2) { animation-delay: .18s; }
.vb-typing-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes vb-bounce { 0%,80%,100%{ transform: translateY(0); opacity: .5; } 40%{ transform: translateY(-5px); opacity: 1; } }

.vb-hints { display: flex; flex-wrap: wrap; gap: 6px 7px; margin-top: 10px; padding: 2px; }
.vb-hint-link {
  font-size: 12px; color: #1a1a2e; background: #fff;
  border: 0.5px solid #e0e0e0; border-radius: 6px;
  padding: 4px 11px; cursor: pointer; transition: background .15s;
  user-select: none; display: inline-block;
}
.vb-hint-link:hover { background: #f5f5f5; border-color: #bbb; }

/* ── Lead form ────────────────────────────────────────────────────────── */
#vb-lead-form { padding: 12px 14px; background: #fafafa; border-top: 0.5px solid #eee; flex-shrink: 0; }
#vb-lead-form p { color: #444; margin-bottom: 10px; font-size: 13px; line-height: 1.55; }
.vb-lead-input {
  width: 100%; padding: 9px 12px;
  border: 0.5px solid #ddd; border-radius: 10px;
  font-size: 13px; color: #1a1a1a; background: #fff;
  margin-bottom: 8px; outline: none; transition: border-color .15s;
}
.vb-lead-input:focus { border-color: var(--vb-primary, #534AB7); }
.vb-lead-row { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-size: 12px; color: #555; }
.vb-lead-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: #25D366; flex-shrink: 0; }
.vb-wa-label { color: #25D366; font-weight: 500; }
.vb-lead-btns { display: flex; gap: 8px; }
.vb-lead-submit {
  flex: 1; padding: 9px; border: none; border-radius: 10px;
  background: var(--vb-primary, #534AB7); color: #fff;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.vb-lead-skip {
  padding: 9px 14px; border: 0.5px solid #ddd; border-radius: 10px;
  background: transparent; color: #888; font-size: 13px; cursor: pointer;
}

.vb-fallback {
  background: #FAECE7; border: 0.5px solid #F5C4B3; border-radius: 12px;
  padding: 12px 14px; font-size: 12px; color: #712B13;
  max-width: 90%; line-height: 1.6;
}
.vb-fallback-title { font-weight: 500; margin-bottom: 4px; font-size: 13px; }
.vb-fallback-btn {
  display: block; width: 100%; margin-top: 10px; text-align: center;
  padding: 8px; border-radius: 8px; background: #993C1D; color: #fff;
  font-size: 12px; font-weight: 500; cursor: pointer; border: none;
}

/* ── Input area ───────────────────────────────────────────────────────── */
#vb-input-area {
  padding: 10px 14px 14px;
  border-top: 0.5px solid #ebebeb;
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0; background: #fff;
}
#vb-input {
  flex: 1; min-width: 0;
  padding: 9px 14px;
  border: 0.5px solid #e8e8e8; border-radius: 8px;
  font-size: 13px; color: #1a1a1a; background: #f5f5f5;
  outline: none; transition: border-color .15s, background .15s;
}
#vb-input:focus { border-color: #534AB7; background: #fff; }
#vb-input::placeholder { color: #bbb; }
#vb-send {
  width: 34px; height: 34px; border-radius: 8px;
  background: #FF752E; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#vb-send svg { width: 15px; height: 15px; color: #fff; }
#vb-send:disabled { opacity: .35; cursor: default; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #vb-window {
    left: 0; right: 0; bottom: 0;
    width: 100dvw;
    max-width: 100vw;
    border-radius: 20px 20px 0 0;
    max-height: 85dvh;
  }
  #vb-window.vb-expanded { width: 100dvw; max-width: 100vw; }
  #vb-fab { right: 16px; bottom: 16px; }
  #vb-pill { bottom: 20px; right: 76px; max-width: 150px; white-space: normal; font-size: 11px; padding: 7px 12px; line-height: 1.3; }
  .vb-ripple { bottom: 16px; right: 16px; }
  #visabot-root.vb-pos-left .vb-ripple { left: 16px; }
}

/* ── Landing popup teaser ─────────────────────────────────────────────── */
#vb-teaser {
  position: fixed;
  bottom: clamp(80px, 18vw, 90px);
  right: clamp(16px, 4vw, 20px);
  max-width: min(260px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: 12px 30px 12px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  font-size: 13px; line-height: 1.5;
  color: #1a1a1a; z-index: 99997; cursor: pointer;
  animation: vb-teaser-in .3s ease;
}
#vb-teaser-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: #aaa;
  font-size: 16px; cursor: pointer; line-height: 1; padding: 0;
}
@keyframes vb-teaser-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Persistent "How may I help you?" pill ────────────────────────────── */
#vb-pill {
  position: fixed;
  bottom: clamp(24px, 6vw, 32px);
  right: clamp(72px, 20vw, 88px);
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer; z-index: 99997;
  transition: transform .15s;
}
#vb-pill:hover { transform: translateY(-1px); }

/* ── Left-side positioning variant ────────────────────────────────────── */
#visabot-root.vb-pos-left #vb-fab    { right: auto !important; left: clamp(16px, 4vw, 24px) !important; }
#visabot-root.vb-pos-left #vb-window { right: auto !important; }
#visabot-root.vb-pos-left #vb-teaser { right: auto; left: clamp(16px, 4vw, 20px); border-radius: 16px 16px 16px 4px; }
#visabot-root.vb-pos-left #vb-pill   { right: auto; left: clamp(72px, 20vw, 88px); }

/* ── Radar-style ripple rings (FAB attention animation) ─────────────────
   Uses the exact same bottom/right clamp() formula as #vb-fab so the
   rings stay perfectly concentric with the button at every viewport
   width — previously the ring used a different clamp() and drifted
   off-center, which is why it could look like the effect had vanished. */
.vb-ripple {
  position: fixed;
  bottom: clamp(16px, 4vw, 24px);
  right: clamp(16px, 4vw, 24px);
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--vb-primary, #534AB7);
  opacity: 0; pointer-events: none; z-index: 99997;
  animation: vb-ripple-out 2s ease-out infinite;
}
.vb-ripple.vb-ripple-delay { animation-delay: 1s; }
@keyframes vb-ripple-out { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.1); opacity: 0; } }