/* ---------- Floating container ---------- */
.sbai-float{
  font-family: var(--sbai-font, inherit);
  font-size: var(--sbai-font-size, 14px);
  font-weight: var(--sbai-font-weight, 400);
  color: var(--sbai-text, #000);

  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  font-family: inherit;
  --sbai-accent: #13A4F6;
  --sbai-accent-rgb: 19,164,246;
}

/* ---------- Launcher ---------- */
.sbai-launcher{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,18,24,.88);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  box-shadow: 0 16px 50px rgba(0,0,0,.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 2;
}

.sbai-launcher:hover{ transform: translateY(-1px); }

/* Launcher icon
   Use an embedded SVG mask so we always get a proper "chat" glyph.
   This avoids relying on icon fonts (and avoids LiteSpeed/CSS conflicts). */
.sbai-launcher-icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--sbai-accent-rgb), .95);
  box-shadow: 0 0 0 3px rgba(var(--sbai-accent-rgb),.18);
  position: relative;
  flex: 0 0 auto;
}
.sbai-launcher-icon::before{
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h10a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H11l-4.2 2.8A1 1 0 0 1 5 20.97V18a4 4 0 0 1-2-3.5V8a4 4 0 0 1 4-4Zm1 6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Zm0 4a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2H8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 4h10a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H11l-4.2 2.8A1 1 0 0 1 5 20.97V18a4 4 0 0 1-2-3.5V8a4 4 0 0 1 4-4Zm1 6a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Zm0 4a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2H8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sbai-launcher-text{ font-weight: 700; letter-spacing: .2px; }

/* ---------- Panel: positioned ABOVE launcher (mobile-friendly) ---------- */
.sbai-panel{
  width: 360px;
  max-width: calc(100vw - 36px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,14,18,.86);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 65px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;

  position: absolute;
  right: 0;
  bottom: 58px; /* sits above launcher */
  z-index: 3;

  max-height: calc(100vh - 90px - env(safe-area-inset-bottom));
}

/* open state */
.sbai-open .sbai-panel{
  display: flex;
  flex-direction: column;
}

/* Light theme */
.sbai-theme-light .sbai-launcher{
  background: rgba(255,255,255,.94);
  color: rgba(20,20,20,.90);
  border-color: rgba(0,0,0,.10);
}
.sbai-theme-light .sbai-panel{
  background: rgba(255,255,255,.96);
  color: rgba(20,20,20,.92);
  border-color: rgba(0,0,0,.10);
}

/* Header */
.sbai-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(var(--sbai-accent-rgb),.18), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sbai-theme-light .sbai-header{ border-bottom-color: rgba(0,0,0,.08); }

.sbai-title{ font-weight: 800; letter-spacing:.2px; }
.sbai-close{
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}
.sbai-close:hover{ opacity: 1; }

/* Body: flex to fit panel height */
.sbai-body{
  flex: 1 1 auto;
  min-height: 180px;
  overflow:auto;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

/* Bubbles */
.sbai-row{ display:flex; }
.sbai-user{ justify-content:flex-end; }
.sbai-bot{ justify-content:flex-start; }

.sbai-bubble{
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  line-height: 1.35;
}
.sbai-theme-light .sbai-bubble{
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.sbai-user .sbai-bubble{
  border-color: rgba(var(--sbai-accent-rgb),.35);
  background: rgba(var(--sbai-accent-rgb),.20);
}

/* Input row */
.sbai-form{
  display:flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.sbai-theme-light .sbai-form{
  background: rgba(0,0,0,.02);
  border-top-color: rgba(0,0,0,.08);
}

.sbai-input{
  flex:1;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  outline: none;
}
.sbai-theme-light .sbai-input{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,1);
}

.sbai-send{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--sbai-accent-rgb),.50);
  background: rgba(var(--sbai-accent-rgb),.22);
  color: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sbai-send:hover{ background: rgba(var(--sbai-accent-rgb),.32); }

/* Lead section: scroll if needed on small screens */
.sbai-lead{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  max-height: 38vh;
  overflow: auto;
}
.sbai-theme-light .sbai-lead{ border-top-color: rgba(0,0,0,.08); }

.sbai-lead-title{ font-weight: 700; margin-bottom: 10px; }

.sbai-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sbai-grid input{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  outline: none;
}
.sbai-theme-light .sbai-grid input{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,1);
}

.sbai-lead-submit{
  margin-top: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sbai-theme-light .sbai-lead-submit{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.sbai-lead-status{
  margin-top: 8px;
  font-size: 12px;
  opacity: .75;
  min-height: 16px;
}

.sbai-lead-status.sbai-success{
  opacity: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-top: 10px;
}

.sbai-lead-status.sbai-error{
  opacity: 1;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
}

.sbai-footnote{
  padding: 0 12px 12px;
  font-size: 12px;
  opacity: .55;
}

/* Mobile layout tweaks */
@media (max-width: 520px){
  .sbai-float{
  font-family: var(--sbai-font, inherit);
  font-size: var(--sbai-font-size, 14px);
  font-weight: var(--sbai-font-weight, 400);
  color: var(--sbai-text, #000);
 right: 12px; left: 12px; bottom: 12px; }
  .sbai-panel{ width: auto; max-width: none; right: 0; left: 0; }
  .sbai-grid{ grid-template-columns: 1fr; }
}


.sbai-float input,
.sbai-float button,
.sbai-float textarea{
  font-family: var(--sbai-font, inherit);
  font-size: var(--sbai-font-size, 14px);
  font-weight: var(--sbai-font-weight, 400);
  color: var(--sbai-text, #000);
}


/* ---- v0.3.9 readability fixes ---- */
/* Ensure action buttons are readable */
.sbai-send,
.sbai-lead-submit{
  color: #fff !important;
}

/* Dark theme: keep close button readable */
.sbai-theme-dark .sbai-close{
  color: rgba(255,255,255,.92) !important;
}

/* Light theme: make lead button accent colored with white text */
.sbai-theme-light .sbai-lead-submit{
  background: rgba(var(--sbai-accent-rgb), .92) !important;
  border-color: rgba(var(--sbai-accent-rgb), .92) !important;
  color: #fff !important;
}
.sbai-theme-light .sbai-lead-submit:hover{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
}

/* Light theme: Send button should also be accent with white text */
.sbai-theme-light .sbai-send{
  background: rgba(var(--sbai-accent-rgb), .92) !important;
  border-color: rgba(var(--sbai-accent-rgb), .92) !important;
  color: #fff !important;
}
.sbai-theme-light .sbai-send:hover{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
}

/* Dark theme: ensure Send buttons stay readable even if text color var is dark */
.sbai-theme-dark .sbai-send,
.sbai-theme-dark .sbai-lead-submit{
  color: #fff !important;
}


/* ---- v0.4.0 close button improvements ---- */
.sbai-close{
  color: rgba(var(--sbai-accent-rgb), .92) !important;
  font-size: 20px;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}

/* Hover effect: slightly larger and brighter */
.sbai-close:hover{
  color: rgba(var(--sbai-accent-rgb), 1) !important;
  transform: scale(1.25);
}

/* Optional: use thicker × symbol for better visibility */
.sbai-close::before{
  content: "×";
  font-weight: 700;
}

/* Remove duplicate content if already present */
.sbai-close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ---- v0.4.1 fixes ---- */

/* Remove duplicate X by removing pseudo-element */
.sbai-close::before{
  content: none !important;
}

/* Ensure only one X shows and is accent color */
.sbai-close{
  color: rgba(var(--sbai-accent-rgb), 1) !important;
  font-weight: 700;
}

/* Dark theme launcher text must be white */
.sbai-theme-dark .sbai-launcher,
.sbai-theme-dark .sbai-launcher span{
  color: #fff !important;
}

/* Dark theme launcher icon/text contrast fix */
.sbai-theme-dark .sbai-launcher-text{
  color: #fff !important;
}

/* Ensure hover scaling still works */
.sbai-close:hover{
  transform: scale(1.25);
}


/* ---- v0.4.2 accent color fixes ---- */

/* Send My Info button uses accent color always */
.sbai-lead-submit{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
  border-color: rgba(var(--sbai-accent-rgb), 1) !important;
  color: #fff !important;
}

/* Hover state must also use accent color (not blue default) */
.sbai-lead-submit:hover{
  background: rgba(var(--sbai-accent-rgb), .85) !important;
  border-color: rgba(var(--sbai-accent-rgb), .85) !important;
  color: #fff !important;
}

/* Close button hover must remain accent color */
.sbai-close:hover{
  color: rgba(var(--sbai-accent-rgb), 1) !important;
}

/* Prevent theme or browser from injecting blue focus/hover colors */
.sbai-close:focus,
.sbai-close:active{
  color: rgba(var(--sbai-accent-rgb), 1) !important;
}

/* Send button in chat input must use accent color */
.sbai-send{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
  border-color: rgba(var(--sbai-accent-rgb), 1) !important;
  color: #fff !important;
}

.sbai-send:hover{
  background: rgba(var(--sbai-accent-rgb), .85) !important;
}


/* ---- v0.4.3 launcher accent hover + focus fixes ---- */
.sbai-launcher:focus,
.sbai-launcher:focus-visible{
  outline: none !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.30), 0 0 0 3px rgba(var(--sbai-accent-rgb), .22) !important;
}

.sbai-launcher:hover .sbai-launcher-icon{
  box-shadow: 0 0 0 3px rgba(var(--sbai-accent-rgb), .28) !important;
}

/* Ensure icon gradient uses accent rgb */
.sbai-launcher-icon{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(var(--sbai-accent-rgb),.85), rgba(var(--sbai-accent-rgb),.25)) !important;
}

/* Close icon sizing */
.sbai-close-icon{
  display:inline-flex;
  width: 20px;
  height: 20px;
}
.sbai-close-icon svg{ width:100%; height:100%; display:block; }

/* Make close hover feel a bit bigger without changing layout */
.sbai-close:hover .sbai-close-icon{
  transform: scale(1.15);
}

/* Use accent color for close icon in both themes */
.sbai-close{
  color: rgba(var(--sbai-accent-rgb), 1) !important;
}


/* ---- v0.4.4 close button circle + no-shift hover ---- */
/* Make close button a fixed-size circle so hover can't shift header layout */
.sbai-close{
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid rgba(var(--sbai-accent-rgb), .45) !important;
  color: rgba(var(--sbai-accent-rgb), 1) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Keep icon steady; no scale on the button itself */
.sbai-close,
.sbai-close:hover,
.sbai-close:focus,
.sbai-close:active{
  transform: none !important;
  outline: none !important;
}

/* SVG transition: color only (no background blue) */
.sbai-close .sbai-close-icon{
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sbai-close .sbai-close-icon svg{
  width: 18px !important;
  height: 18px !important;
  display:block !important;
  transition: color .18s ease, opacity .18s ease, filter .18s ease;
}

/* Hover: fill circle with accent and make icon white (premium look) */
.sbai-close:hover{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
  border-color: rgba(var(--sbai-accent-rgb), 1) !important;
  color: #fff !important;
}

/* Focus-visible: subtle ring using accent (no default blue) */
.sbai-close:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--sbai-accent-rgb), .20) !important;
}


/* ---- v0.4.5 launcher button accent + white icon ---- */
/* Make the launcher BUTTON use the chosen accent color (not blue) */
.sbai-launcher{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
  border-color: rgba(var(--sbai-accent-rgb), .65) !important;
  color: #fff !important;
}

/* Hover: subtle darken (still accent) */
.sbai-launcher:hover{
  background: rgba(var(--sbai-accent-rgb), .90) !important;
}

/* Focus ring: use accent, not default blue */
.sbai-launcher:focus,
.sbai-launcher:focus-visible{
  outline: none !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.30), 0 0 0 3px rgba(var(--sbai-accent-rgb), .22) !important;
}

/* Keep the bubble ICON simple/white (no accent gradient) */
.sbai-launcher-icon{
  background: rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18) !important;
}

/* Ensure launcher text is always white */
.sbai-launcher-text{
  color: #fff !important;
}


/* ---- v0.4.6 launcher hover + light theme launcher style ---- */
/* Prevent icon scaling/jumps on hover */
.sbai-launcher-icon,
.sbai-launcher:hover .sbai-launcher-icon{
  transform: none !important;
}

/* LIGHT THEME: white button, accent border + accent text */
.sbai-theme-light .sbai-launcher{
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(var(--sbai-accent-rgb), .60) !important;
  color: rgba(var(--sbai-accent-rgb), 1) !important;
}

/* Light theme hover: subtle tint */
.sbai-theme-light .sbai-launcher:hover{
  background: rgba(var(--sbai-accent-rgb), .06) !important;
}

/* Light theme text */
.sbai-theme-light .sbai-launcher-text{
  color: rgba(var(--sbai-accent-rgb), 1) !important;
}

/* Light theme icon: accent chip */
.sbai-theme-light .sbai-launcher-icon{
  background: rgba(var(--sbai-accent-rgb), 1) !important;
  box-shadow: 0 0 0 3px rgba(var(--sbai-accent-rgb), .18) !important;
}

/* Light theme icon highlight */
.sbai-theme-light .sbai-launcher:hover .sbai-launcher-icon{
  box-shadow: 0 0 0 3px rgba(var(--sbai-accent-rgb), .28) !important;
}

/* Powered-by link styling */
.sbai-powered-link{
  color: rgba(var(--sbai-accent-rgb), 1);
  text-decoration: none;
  font-weight: 700;
}
.sbai-powered-link:hover{ text-decoration: underline; }


/* ---- v0.4.7 powered-by prominence ---- */
.sbai-footnote{
  font-size: 13px;
}
.sbai-theme-dark .sbai-footnote{
  color: rgba(255,255,255,.85);
}
.sbai-theme-dark .sbai-powered-link{
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.sbai-theme-dark .sbai-powered-link:hover{
  text-decoration: underline;
}


/* ---- v0.5.0 Teaser Bubble (Option A: glass) ---- */
.sbai-teaser{
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  max-width: 260px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(var(--sbai-accent-rgb), .28);
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(20,20,20,.92);
  cursor: pointer;
  user-select: none;
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.sbai-theme-dark .sbai-teaser{
  background: rgba(15,18,24,.72);
  border-color: rgba(var(--sbai-accent-rgb), .35);
  color: rgba(255,255,255,.92);
  box-shadow: 0 16px 44px rgba(0,0,0,.38);
}

.sbai-teaser.sbai-teaser-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sbai-teaser-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.sbai-teaser-msg{
  font-weight: 500;
  font-size: 13px;
  line-height: 1.25;
  opacity: .85;
}

/* little pointer */
.sbai-teaser:after{
  content:"";
  position:absolute;
  right: 20px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-left: 1px solid rgba(var(--sbai-accent-rgb), .22);
  border-bottom: 1px solid rgba(var(--sbai-accent-rgb), .22);
  transform: rotate(45deg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sbai-theme-dark .sbai-teaser:after{
  border-left-color: rgba(var(--sbai-accent-rgb), .30);
  border-bottom-color: rgba(var(--sbai-accent-rgb), .30);
}

@media (max-width: 480px){
  .sbai-teaser{ max-width: 220px; }
}

/* ==============================
   Teaser / floating bubble style
   ============================== */

/* When teaser is enabled, the launcher becomes an icon-only circle button. */
.sbai-float.sbai-has-teaser .sbai-launcher{
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.sbai-float.sbai-has-teaser .sbai-launcher-text{
  display: none !important;
}

/* Prevent the icon from scaling on hover (no weird "jump"). */
.sbai-float .sbai-launcher-icon,
.sbai-float .sbai-launcher-icon svg{
  transform: none !important;
}

.sbai-float.sbai-has-teaser .sbai-launcher:hover,
.sbai-float.sbai-has-teaser .sbai-launcher:focus{
  transform: translateY(-1px);
}

/* Teaser bubble (Zoho-style) */
.sbai-teaser{
  /* Keep it in the layout so JS can fade it in.
     Visibility is controlled via opacity + pointer-events. */
  display: block;
  position: absolute;
  right: 70px;
  bottom: 8px;
  min-width: 240px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.sbai-teaser.sbai-teaser-show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.sbai-theme-dark .sbai-teaser{
  background: rgba(18,14,18,.86);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.sbai-teaser::after{
  content: "";
  position: absolute;
  right: -8px;
  bottom: 16px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-right: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  transform: rotate(-45deg);
}

.sbai-theme-dark .sbai-teaser::after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:10px solid rgba(255,255,255,.96);
  box-shadow:none;
}


.sbai-teaser-title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.sbai-teaser-msg{
  font-size: 13px;
  opacity: .85;
}

.sbai-theme-dark .sbai-teaser-title,
.sbai-theme-dark .sbai-teaser-msg{
  color: rgba(255,255,255,.95);
}



/* --- v0.5.10: remove teaser pointer/tail completely (no diamond) --- */
.sbai-teaser::before,
.sbai-teaser::after{
  content: none !important;
  display: none !important;
}