/* ══ XPERTZA LEAD AGENT — WIDGET CSS v1.3 ══ */
:root {
  --xla-green:  #14A800;
  --xla-lime:   #C6F432;
  --xla-ink:    #0B0D0E;
  --xla-mu:     #6B7280;
  --xla-soft:   #F5FCF1;
  --xla-white:  #ffffff;
  --xla-border: #E9F7E4;
  --xla-ease:   cubic-bezier(.22,.8,.22,1);
  --xla-shadow: 0 24px 64px rgba(10,12,14,.26), 0 4px 16px rgba(10,12,14,.14);
  --xla-font:   'Neue Montreal',Inter,system-ui,-apple-system,sans-serif;
}
#xla-root * { box-sizing:border-box; font-family:var(--xla-font); }
#xla-root   { position:fixed; bottom:24px; right:24px; z-index:999999; }

/* ══ LAUNCHER ══ */
#xla-launcher {
  width:60px; height:60px; border-radius:50%;
  background:#0B0D0E; border:2.5px solid #C6F432;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(10,12,14,.4);
  transition:transform .22s var(--xla-ease),box-shadow .22s;
  position:relative; animation:xlaPulse 2.8s ease-in-out infinite;
}
#xla-launcher:hover { transform:scale(1.1); box-shadow:0 14px 38px rgba(10,12,14,.55); }
@keyframes xlaPulse {
  0%,100%{ box-shadow:0 8px 28px rgba(10,12,14,.4),0 0 0 0 rgba(198,244,50,.45); }
  50%    { box-shadow:0 8px 28px rgba(10,12,14,.4),0 0 0 10px rgba(198,244,50,.0); }
}
.xla-launcher-icon { display:flex; align-items:center; justify-content:center; }
.xla-unread-badge {
  position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; border-radius:50%;
  background:#C6F432; color:#0B0D0E;
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

/* ══ TOOLTIP ══ */
#xla-tooltip {
  position:absolute; bottom:72px; right:0; width:244px;
  background:#fff; border-radius:14px 14px 4px 14px;
  box-shadow:0 8px 32px rgba(10,12,14,.18);
  padding:12px 14px 12px 12px;
  display:flex; align-items:center; gap:10px;
  border:1.5px solid #E9F7E4;
  opacity:0; transform:translateY(10px) scale(.95);
  transition:opacity .28s var(--xla-ease),transform .28s var(--xla-ease);
  pointer-events:none; cursor:pointer;
}
#xla-tooltip.xla-tooltip-show { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.xla-tooltip-close {
  position:absolute; top:5px; right:8px;
  background:none; border:none; cursor:pointer;
  font-size:17px; color:#6B7280; line-height:1; padding:0;
}
.xla-tooltip-close:hover { color:#0B0D0E; }
.xla-tooltip-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#A4E34F,#22C55E);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#052e16;
  flex-shrink:0; position:relative;
}
.xla-tooltip-text { font-size:13px; color:#0B0D0E; line-height:1.45; flex:1; padding-right:14px; }
.xla-online-dot {
  width:10px; height:10px; border-radius:50%; background:#C6F432;
  border:2px solid #0B0D0E;
  position:absolute; bottom:0; right:0;
  animation:xlaDotPulse 2s ease-in-out infinite;
}
.xla-widget-avatar .xla-online-dot { border-color:#fff; }
@keyframes xlaDotPulse { 0%{opacity:1}50%{opacity:.35}100%{opacity:1} }

/* ══ WIDGET ══ */
.xla-widget {
  position:absolute; bottom:72px; right:0;
  width:375px; max-width:calc(100vw - 32px);
  background:#fff; border-radius:20px;
  box-shadow:var(--xla-shadow); overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .3s var(--xla-ease),transform .3s var(--xla-ease);
  pointer-events:none; max-height:590px;
  border:1.5px solid rgba(198,244,50,.22);
}
.xla-widget.xla-widget-open { opacity:1; transform:none; pointer-events:all; }

/* ══ HEADER ══ */
.xla-widget-header {
  background:#0B0D0E; padding:13px 14px;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; border-bottom:2px solid #C6F432;
}
.xla-widget-header-left  { display:flex; align-items:center; gap:10px; }
.xla-widget-header-right { display:flex; align-items:center; gap:8px; }
.xla-widget-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#A4E34F,#22C55E);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#052e16;
  flex-shrink:0; position:relative;
  border:2px solid rgba(198,244,50,.5);
}
.xla-widget-name   { font-size:14px; font-weight:700; color:#fff; }
.xla-widget-status { font-size:11px; color:#C6F432; margin-top:2px; display:flex; align-items:center; gap:4px; }
.xla-status-dot    { width:6px; height:6px; border-radius:50%; background:#C6F432; }

/* ══ HEADER BUTTONS ══
   SOLID LIME BACKGROUND + INK ICONS
   100% visible on dark header, no theme can hide them */
.xla-hdr-btn {
  width:36px; height:36px; border-radius:10px;
  background:#C6F432;                /* solid neon lime — always visible */
  border:2px solid #A4E34F;          /* slightly darker lime border */
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:background .18s,transform .15s,opacity .18s;
  outline:none;
}
.xla-hdr-btn:hover  { background:#d4f548; transform:scale(1.1); }
.xla-hdr-btn:active { transform:scale(.94); }
/* Muted = dimmed lime */
.xla-hdr-btn.xla-voice-muted {
  background:rgba(198,244,50,.28);
  border-color:rgba(198,244,50,.4);
  opacity:.65;
}

/* ══ VOICE CONSENT ══ */
.xla-voice-consent {
  background:rgba(198,244,50,.1); border-top:1px solid #E9F7E4;
  padding:9px 14px; display:flex; align-items:center; gap:8px;
  font-size:12px; color:#0B0D0E; flex-shrink:0; flex-wrap:wrap;
}
.xla-consent-btn {
  font-family:var(--xla-font); font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:999px; cursor:pointer; transition:all .15s;
}
.xla-consent-yes { background:#0B0D0E; color:#C6F432; border:1.5px solid #0B0D0E; }
.xla-consent-yes:hover { background:#1a1c1e; }
.xla-consent-no  { background:transparent; color:#6B7280; border:1.5px solid #D1D5DB; }
.xla-consent-no:hover  { border-color:#9CA3AF; }

/* ══ MESSAGES ══ */
.xla-messages {
  flex:1; overflow-y:auto; padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth; min-height:180px;
  background:linear-gradient(180deg,#F5FCF1 0%,#fff 55%);
}
.xla-messages::-webkit-scrollbar { width:4px; }
.xla-messages::-webkit-scrollbar-thumb { background:rgba(20,168,0,.2); border-radius:4px; }

.xla-msg      { display:flex; align-items:flex-end; gap:8px; }
.xla-msg-user { flex-direction:row-reverse; }
.xla-msg-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#A4E34F,#22C55E);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#052e16; flex-shrink:0;
  border:1.5px solid rgba(198,244,50,.4);
}
.xla-msg-bubble {
  max-width:80%; padding:10px 14px;
  font-size:13px; line-height:1.58;
  animation:xlaFadeUp .22s var(--xla-ease);
}
@keyframes xlaFadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.xla-msg-bot-bubble {
  background:#fff; color:#0B0D0E;
  border:1.5px solid #E9F7E4; border-radius:14px 14px 14px 4px;
  box-shadow:0 2px 8px rgba(10,12,14,.06);
}
.xla-msg-user-bubble {
  background:#0B0D0E; color:#fff;
  border-radius:14px 14px 4px 14px;
  border:1px solid rgba(198,244,50,.2);
}
.xla-msg-success { background:rgba(20,168,0,.06)!important; border-color:rgba(20,168,0,.22)!important; }
.xla-success-icon { display:block; margin-bottom:4px; }
.xla-confirm-email { font-size:11px; color:#6B7280; margin-top:5px; display:block; }

/* typing */
.xla-typing { display:flex; gap:5px; align-items:center; padding:11px 14px!important; min-width:54px; }
.xla-typing span {
  width:7px; height:7px; border-radius:50%; background:#14A800; display:block;
  animation:xlaTyping 1.3s ease-in-out infinite;
}
.xla-typing span:nth-child(2){animation-delay:.2s}
.xla-typing span:nth-child(3){animation-delay:.4s}
@keyframes xlaTyping { 0%,60%,100%{transform:translateY(0);opacity:.3} 30%{transform:translateY(-7px);opacity:1} }

/* confirm links */
.xla-confirm-links { display:flex; gap:7px; flex-wrap:wrap; padding:2px 0 4px 36px; }
.xla-confirm-link {
  font-size:12px; font-weight:600; color:#14A800; text-decoration:none;
  padding:5px 11px; background:#F5FCF1; border-radius:999px;
  border:1.5px solid #E9F7E4; transition:background .15s,border-color .15s;
}
.xla-confirm-link:hover { background:#EDFFF4; border-color:#BBF7D0; }

/* ══ CHOICE BUTTONS ══ */
.xla-btn-group { display:flex; flex-wrap:wrap; gap:7px; padding:2px 0 4px 36px; }
.xla-choice-btn {
  font-family:var(--xla-font); font-size:12px; font-weight:600;
  padding:8px 14px; border-radius:999px; border:1.5px solid #D1F0C4;
  background:#fff; color:#0B0D0E; cursor:pointer;
  transition:all .18s; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.xla-choice-btn:hover:not(:disabled) {
  background:#F5FCF1; border-color:#C6F432; color:#14A800;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(198,244,50,.25);
}
.xla-choice-btn:disabled { opacity:.4; cursor:default; }
.xla-choice-btn svg { width:13px; height:13px; stroke:currentColor; fill:none; flex-shrink:0; }

/* Other free text */
.xla-other-input-wrap {
  display:flex; gap:7px; padding:4px 0 4px 36px; align-items:center;
  animation:xlaFadeUp .2s var(--xla-ease);
}
.xla-other-input {
  flex:1; font-family:var(--xla-font); font-size:13px;
  padding:9px 13px; border-radius:999px;
  border:1.5px solid #C6F432; background:#F5FCF1; color:#0B0D0E; outline:none;
}
.xla-other-send {
  width:34px; height:34px; border-radius:50%; border:none;
  background:#0B0D0E; display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .18s;
}
.xla-other-send:hover { background:#14A800; }
.xla-other-send svg { width:14px; height:14px; stroke:#C6F432; fill:none; }

/* ══ TEXT INPUT ══ */
.xla-input-area {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-top:1px solid #E9F7E4;
  background:#fff; flex-shrink:0;
}
.xla-text-input {
  flex:1; font-family:var(--xla-font); font-size:13px;
  padding:10px 14px; border-radius:999px;
  border:1.5px solid #E9F7E4; background:#F5FCF1; color:#0B0D0E;
  outline:none; transition:border-color .18s,box-shadow .18s,background .18s;
}
.xla-text-input:focus {
  border-color:#C6F432; box-shadow:0 0 0 3px rgba(198,244,50,.18); background:#fff;
}
.xla-text-input::placeholder { color:#9CA3AF; }
.xla-text-input.xla-input-error { border-color:#EF4444; }
.xla-send-btn {
  width:40px; height:40px; border-radius:50%;
  background:#0B0D0E; border:2px solid #C6F432;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .18s,transform .15s;
}
.xla-send-btn:hover { background:#14A800; transform:scale(1.08); }

/* ══ FILE UPLOAD ══ */
.xla-file-area {
  border-top:1px solid #E9F7E4; background:#fff;
  padding:12px 14px; flex-shrink:0;
  animation:xlaFadeUp .22s var(--xla-ease);
}
.xla-file-label {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px; border:2px dashed #D1F0C4; border-radius:14px;
  background:#F5FCF1; cursor:pointer; transition:border-color .18s,background .18s;
  text-align:center;
}
.xla-file-label:hover { border-color:#C6F432; background:#EDFFF4; }
.xla-file-label span:first-of-type { font-size:13px; font-weight:600; color:#14A800; }
.xla-file-hint { font-size:11px; color:#9CA3AF; }
.xla-file-preview {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.xla-file-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:4px 9px;
  border-radius:999px; background:#F5FCF1; border:1.5px solid #D1F0C4;
  color:#14A800; max-width:150px;
}
.xla-file-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xla-file-chip button {
  background:none; border:none; cursor:pointer; color:#9CA3AF;
  font-size:14px; line-height:1; padding:0; flex-shrink:0;
}
.xla-file-chip button:hover { color:#EF4444; }
.xla-file-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.xla-file-skip-btn {
  font-family:var(--xla-font); font-size:12px; font-weight:600;
  padding:7px 14px; border-radius:999px;
  background:transparent; border:1.5px solid #D1D5DB; color:#6B7280;
  cursor:pointer; transition:all .15s;
}
.xla-file-skip-btn:hover { border-color:#9CA3AF; color:#374151; }
.xla-file-send-btn {
  font-family:var(--xla-font); font-size:12px; font-weight:700;
  padding:7px 14px; border-radius:999px;
  background:#0B0D0E; border:1.5px solid #0B0D0E; color:#C6F432;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  transition:background .18s;
}
.xla-file-send-btn:hover { background:#14A800; border-color:#14A800; color:#fff; }

/* ══ POWERED BY ══ */
.xla-powered {
  padding:5px 14px; text-align:center; font-size:10px; color:#9CA3AF;
  background:#fff; border-top:1px solid #E9F7E4; flex-shrink:0;
}
.xla-powered a { color:#14A800; text-decoration:none; font-weight:600; }

/* ══ POPUP LEAD FORM ══ */
#xla-popup-form {
  position:fixed; bottom:100px; right:24px; z-index:999998;
  width:314px;
  background:#fff; border-radius:18px;
  box-shadow:0 16px 48px rgba(10,12,14,.24),0 0 0 1.5px rgba(198,244,50,.22);
  overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .28s var(--xla-ease),transform .28s var(--xla-ease);
  pointer-events:none;
}
#xla-popup-form.xla-popup-show { opacity:1; transform:none; pointer-events:all; }
.xla-popup-header {
  background:#0B0D0E; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:2px solid #C6F432;
}
.xla-popup-title { font-size:14px; font-weight:700; color:#fff; }
.xla-popup-meta  { font-size:11px; color:#C6F432; margin-top:1px; }

/* POPUP CLOSE — solid lime, ink X */
.xla-popup-close {
  width:30px; height:30px; border-radius:8px;
  background:#C6F432; border:1.5px solid #A4E34F;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .15s,transform .15s;
}
.xla-popup-close:hover { background:#d4f548; transform:scale(1.08); }

/* Countdown */
.xla-popup-timer-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 14px; background:rgba(198,244,50,.06);
  border-bottom:1px solid #E9F7E4;
}
.xla-popup-timer-label { font-size:11px; color:#6B7280; white-space:nowrap; flex-shrink:0; }
.xla-popup-timer-label strong { color:#14A800; }
.xla-popup-progress-track { flex:1; height:5px; border-radius:999px; background:rgba(20,168,0,.1); }
.xla-popup-progress-bar {
  height:5px; border-radius:999px;
  background:linear-gradient(90deg,#A4E34F,#14A800);
  transition:width 1s linear;
}

.xla-popup-body { padding:14px; display:flex; flex-direction:column; gap:8px; }
.xla-popup-input {
  font-family:var(--xla-font); font-size:13px;
  padding:10px 12px; border:1.5px solid #E5E7EB; border-radius:10px;
  background:#F5FCF1; color:#0B0D0E; outline:none; width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.xla-popup-input:focus { border-color:#C6F432; box-shadow:0 0 0 2px rgba(198,244,50,.2); background:#fff; }
.xla-popup-input::placeholder { color:#9CA3AF; }
.xla-popup-input.xla-err { border-color:#EF4444; }
.xla-popup-submit {
  font-family:var(--xla-font); font-size:13px; font-weight:700;
  padding:11px 16px; border-radius:999px; border:none; cursor:pointer;
  background:#0B0D0E; color:#C6F432;
  display:flex; align-items:center; justify-content:center; gap:7px;
  position:relative; overflow:hidden; transition:background .18s,transform .15s;
}
.xla-popup-submit::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,#A4E34F,#22C55E,#16A34A);
  opacity:0; transition:opacity .22s;
}
.xla-popup-submit:hover { color:#0B0D0E; transform:translateY(-1px); }
.xla-popup-submit:hover::before { opacity:1; }
.xla-popup-submit > * { position:relative; z-index:1; }

/* ══ MOBILE ══ */
@media(max-width:480px){
  #xla-root { bottom:16px; right:16px; }
  .xla-widget { width:calc(100vw - 32px); bottom:68px; max-height:74vh; }
  #xla-tooltip { width:206px; }
  #xla-popup-form { width:calc(100vw - 48px); right:16px; bottom:90px; }
}
@media(prefers-reduced-motion:reduce){
  #xla-launcher,.xla-widget,#xla-tooltip,.xla-msg-bubble,.xla-typing span,
  .xla-online-dot,#xla-popup-form { animation:none!important; transition:none!important; }
}