/* LeadBot AI — Widget v5.5 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#leadbot-root, #leadbot-root * {
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
#leadbot-root {
  --lb-brand:  #0A6EFF;
  --lb-accent: #00D4AA;
  --lb-bg:     #F6F7FB;
  --lb-white:  #FFFFFF;
  --lb-text:   #111827;
  --lb-muted:  #6B7280;
  --lb-border: #E5E7EB;
}

/* ═══════════════════════════
   LAUNCHER BUTTON
═══════════════════════════ */
#lb-launcher {
  position: fixed;
  z-index: 2147483647;
  bottom: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--lb-brand);
  border: none; cursor: pointer;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(10,110,255,.50);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
}
#lb-launcher.lb-right { right: 24px; }
#lb-launcher.lb-left  { left:  24px; }
#lb-launcher:hover    { transform: scale(1.1); }
#lb-launcher:active   { transform: scale(.95); }

/* icon/logo inside launcher */
#lb-launcher .lb-ico-open,
#lb-launcher .lb-ico-close,
#lb-launcher .lb-launcher-logo {
  position: absolute;
  transition: opacity .2s, transform .22s;
}
#lb-launcher .lb-ico-open   { opacity: 1; transform: scale(1) rotate(0); }
#lb-launcher .lb-ico-close  { opacity: 0; transform: scale(.5) rotate(-90deg); }
#lb-launcher .lb-launcher-logo {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  opacity: 1; transform: scale(1) rotate(0);
}
/* when open — hide logo/chat icon, show X */
#lb-launcher.lb-open .lb-ico-open    { opacity: 0; transform: scale(.5) rotate(90deg); }
#lb-launcher.lb-open .lb-launcher-logo { opacity: 0; transform: scale(.5) rotate(90deg); }
#lb-launcher.lb-open .lb-ico-close   { opacity: 1; transform: scale(1) rotate(0); }

/* pulse ring */
#lb-launcher::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(10,110,255,.4);
  animation: lb-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes lb-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.75); opacity: 0;  }
}

/* notification badge */
.lb-badge {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #EF4444; border: 2px solid #fff;
  font-size: 9px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}

/* ═══════════════════════════
   CHAT WINDOW
═══════════════════════════ */
#lb-window {
  position: fixed;
  z-index: 2147483646;
  width: 360px;
  height: 560px;
  max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
  background: var(--lb-bg);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(10,110,255,.16), 0 2px 8px rgba(0,0,0,.08);
  overflow: hidden;
  /* closed state */
  opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.95);
  transition: opacity .22s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
#lb-window.lb-open {
  opacity: 1; pointer-events: all;
  transform: translateY(0) scale(1);
}
/* desktop positioning */
#lb-window.lb-right { right: 24px; bottom: 94px; }
#lb-window.lb-left  { left:  24px; bottom: 94px; }

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
.lb-header {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--lb-brand) 0%, #2979FF 100%);
  padding: 16px 18px 14px;
  position: relative; overflow: hidden;
}
.lb-header::before {
  content: ''; position: absolute;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  top: -36px; right: -24px;
  pointer-events: none;
}
.lb-header-row {
  display: flex; align-items: center;
  justify-content: space-between;
  position: relative; z-index: 1;
}
.lb-agent { display: flex; align-items: center; gap: 10px; }

/* avatar with logo */
.lb-avatar {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.42);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  overflow: hidden;
}
/* explicit img sizing — beats Flatsome */
.lb-avatar img {
  display: block !important;
  width: 42px !important; height: 42px !important;
  min-width: 42px !important; min-height: 42px !important;
  max-width: 42px !important; max-height: 42px !important;
  object-fit: cover !important; border-radius: 50% !important;
  border: none !important; padding: 0 !important; margin: 0 !important;
}
.lb-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #34D399; border: 2px solid #1560C8;
}
.lb-bot-name  { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; display: block; }
.lb-bot-sub   { color: rgba(255,255,255,.78); font-size: 11.5px; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.lb-close-btn {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50%; width: 32px; height: 32px;
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: 0;
}
.lb-close-btn:hover  { background: rgba(255,255,255,.32); }
.lb-close-btn:active { background: rgba(255,255,255,.45); }
.lb-header-note {
  color: rgba(255,255,255,.68); font-size: 11.5px;
  margin-top: 10px; position: relative; z-index: 1; display: block;
}

/* ═══════════════════════════
   MESSAGES AREA
═══════════════════════════ */
.lb-messages {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;   /* stops scroll chaining to parent page */
  overscroll-behavior: contain;
  padding: 16px 14px 10px;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
  background: var(--lb-bg);
}
.lb-messages::-webkit-scrollbar { width: 3px; }
.lb-messages::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; }

.lb-msg {
  display: flex; align-items: flex-end; gap: 7px;
  max-width: 88%; animation: lb-in .26s ease;
}
@keyframes lb-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.lb-bot  { align-self: flex-start; }
.lb-user { align-self: flex-end; flex-direction: row-reverse; }

/* message mini-avatar */
.lb-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lb-white); border: 1.5px solid var(--lb-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; overflow: hidden;
}
.lb-av img {
  display: block !important;
  width: 28px !important; height: 28px !important;
  object-fit: cover !important; border-radius: 50% !important;
  border: none !important; padding: 0 !important; margin: 0 !important;
}

/* chat bubbles */
.lb-bbl {
  padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.6;
  max-width: 100%; word-break: break-word;
}
.lb-bot .lb-bbl {
  background: var(--lb-white); color: var(--lb-text);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 0 0 1px var(--lb-border);
}
.lb-user .lb-bbl {
  background: var(--lb-brand); color: #fff;
  border-bottom-right-radius: 4px;
}

/* typing indicator */
.lb-typing { display: flex; gap: 5px; padding: 4px 2px; align-items: center; }
.lb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9CA3AF; animation: lb-bounce 1.2s ease-in-out infinite;
}
.lb-dot:nth-child(2) { animation-delay: .18s; }
.lb-dot:nth-child(3) { animation-delay: .36s; }
@keyframes lb-bounce {
  0%,60%,100% { transform: translateY(0);    opacity: .5; }
  30%          { transform: translateY(-5px); opacity: 1;  }
}

/* ═══════════════════════════
   QUICK REPLIES
═══════════════════════════ */
.lb-qr-wrap {
  padding: 4px 14px 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--lb-bg);
}
.lb-qr-btn {
  background: var(--lb-white); border: 1.5px solid #BFDBFE;
  border-radius: 100px; padding: 7px 15px;
  font-size: 13px; font-weight: 500; color: var(--lb-brand);
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: background .14s; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lb-qr-btn:hover,
.lb-qr-btn:active { background: var(--lb-brand); color: #fff; border-color: var(--lb-brand); }

/* ═══════════════════════════
   TEXT INPUT AREA
═══════════════════════════ */
.lb-input-area {
  flex-shrink: 0;
  background: var(--lb-white);
  border-top: 1px solid var(--lb-border);
  padding: 10px 12px;
  /* iOS safe area */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.lb-input-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--lb-bg); border: 1.5px solid var(--lb-border);
  border-radius: 100px; padding: 4px 4px 4px 14px;
  transition: border-color .15s;
}
.lb-input-row:focus-within {
  border-color: var(--lb-brand);
  box-shadow: 0 0 0 3px rgba(10,110,255,.10);
}
.lb-text-input {
  flex: 1; border: none; background: transparent;
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  color: var(--lb-text); font-family: inherit;
  outline: none; padding: 6px 0; min-width: 0;
}
.lb-text-input::placeholder { color: #9CA3AF; }

/* round send button */
.lb-send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lb-brand); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lb-send-btn:hover  { background: #0051CC; }
.lb-send-btn:active { transform: scale(.92); }
.lb-send-btn:disabled { background: #D1D5DB; cursor: not-allowed; transform: none; }

/* ═══════════════════════════
   PHONE INPUT AREA
═══════════════════════════ */
.lb-phone-area {
  flex-shrink: 0;
  background: var(--lb-white);
  border-top: 1px solid var(--lb-border);
  padding: 10px 12px 12px;
  display: none;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.lb-phone-row {
  display: flex; align-items: center;
  background: var(--lb-bg); border: 1.5px solid var(--lb-border);
  border-radius: 100px; overflow: visible; position: relative;
  transition: border-color .15s;
}
.lb-phone-row:focus-within {
  border-color: var(--lb-brand);
  box-shadow: 0 0 0 3px rgba(10,110,255,.10);
}
.lb-flag-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px 8px 14px; cursor: pointer;
  font-size: 13px; color: var(--lb-text);
  border-right: 1px solid var(--lb-border);
  white-space: nowrap; flex-shrink: 0;
  background: transparent; border-radius: 100px 0 0 100px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lb-flag-btn:active { background: #EFF6FF; }
.lb-phone-num {
  flex: 1; border: none; background: transparent;
  font-size: 16px; /* prevents iOS zoom */
  color: var(--lb-text); font-family: inherit;
  outline: none; padding: 8px 6px 8px 10px; min-width: 0;
}
.lb-phone-num::placeholder { color: #9CA3AF; }
.lb-phone-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--lb-brand); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 3px; padding: 0;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lb-phone-send:hover  { background: #0051CC; }
.lb-phone-send:active { transform: scale(.92); }
.lb-phone-send:disabled { background: #D1D5DB; cursor: not-allowed; }
.lb-skip-link {
  display: block; text-align: center; font-size: 12.5px;
  color: var(--lb-muted); cursor: pointer; margin-top: 7px;
  padding: 4px; border: none; background: none; width: 100%;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lb-skip-link:active { color: var(--lb-text); }

/* Country dropdown */
.lb-country-dd {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  width: 270px; background: var(--lb-white);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
  z-index: 2147483647; display: none; overflow: hidden;
}
.lb-csearch-wrap { padding: 10px 12px; border-bottom: 1px solid var(--lb-border); }
.lb-csearch {
  width: 100%; padding: 8px 11px;
  border: 1.5px solid var(--lb-border); border-radius: 8px;
  font-size: 16px; /* no zoom on iOS */
  font-family: inherit; background: var(--lb-bg); color: var(--lb-text); outline: none;
}
.lb-csearch:focus { border-color: var(--lb-brand); }
.lb-clist { max-height: 200px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lb-clist::-webkit-scrollbar { width: 3px; }
.lb-clist::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 99px; }
.lb-copt {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; cursor: pointer;
  font-size: 13px; color: var(--lb-text);
  -webkit-tap-highlight-color: transparent;
}
.lb-copt:hover,
.lb-copt:active { background: #EFF6FF; color: var(--lb-brand); }
.lb-copt-code { margin-left: auto; font-size: 12px; color: var(--lb-muted); }

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
.lb-footer {
  flex-shrink: 0; padding: 6px 10px; text-align: center;
  font-size: 11px; color: #9CA3AF;
  background: var(--lb-white); border-top: 1px solid var(--lb-border);
}
.lb-footer strong { color: var(--lb-brand); font-weight: 600; }

/* ═══════════════════════════
   MOBILE — fixes specificity
   by repeating .lb-right/.lb-left
   inside the media query
═══════════════════════════ */
@media (max-width: 480px) {

  /* Launcher — smaller, lower */
  #lb-launcher.lb-right { right: 16px; bottom: 16px; }
  #lb-launcher.lb-left  { left:  16px; bottom: 16px; }

  /* Window — full screen.
     top/height are controlled by JS fitWindow() so the chat
     always stays inside the visible area when keyboard opens. */
  #lb-window.lb-right,
  #lb-window.lb-left {
    width:         100vw !important;
    top:           0     !important;
    right:         0     !important;
    left:          0     !important;
    bottom:        auto  !important;   /* JS sets top+height, not bottom */
    border-radius: 0     !important;
    box-shadow:    none  !important;
  }

  /* Messages area must scroll, not the whole window */
  .lb-messages {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide the header close (✕) button on mobile.
     Users close the chat by tapping the launcher button at the bottom. */
  .lb-close-btn { display: flex !important; }

  /* Hide the launcher button when chat is open on mobile —
     it overlaps the input area. Header ✕ button closes the chat. */
  #lb-launcher.lb-open { display: none !important; }

  /* Larger tap targets */
  .lb-qr-btn   { padding: 9px 16px; font-size: 14px; min-height: 38px; }
  .lb-send-btn,
  .lb-phone-send { width: 40px; height: 40px; }

  /* 16px prevents iOS auto-zoom on input focus */
  .lb-text-input,
  .lb-phone-num,
  .lb-csearch { font-size: 16px !important; }

  /* Safe area padding (iPhone notch/home bar) */
  .lb-input-area {
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  }
  .lb-phone-area {
    padding: 10px 12px 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  }
  .lb-footer {
    padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
  }
}