/* =========================================================
   BLSX Chat Widget — responsive, 4-position (left/right/top/bottom)
   ========================================================= */

#blsx-bot,
#blsx-bot *{ box-sizing:border-box; margin:0; padding:0; }

#blsx-bot{
  --bn:#13205c; --bn2:#1c2f7c; --bb:#3457e0; --bo:#ff7a1a;
  --bp:#f4f6fb; --bl:#e4e9f5; --bk:#0c1430; --bm:#697094;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:clamp(13px,1.4vw,15px);
  position:fixed;
  z-index:99999;
}

/* ---------- Edge anchoring for the whole widget root ----------
   Each position keeps the launcher pinned to a screen edge.
   Left/Right -> vertical strip near bottom of that side.
   Top/Bottom -> horizontal strip near that side, centered-ish. */

#blsx-bot.blsx-pos-left{
  left:clamp(12px,3vw,24px);
  bottom:clamp(12px,3vw,24px);
  right:auto; top:auto;
}
#blsx-bot.blsx-pos-right{
  right:clamp(12px,3vw,24px);
  bottom:clamp(12px,3vw,24px);
  left:auto; top:auto;
}
#blsx-bot.blsx-pos-top{
  top:clamp(12px,3vw,24px);
  right:clamp(12px,3vw,24px);
  left:auto; bottom:auto;
}
#blsx-bot.blsx-pos-bottom{
  bottom:clamp(12px,3vw,24px);
  right:clamp(12px,3vw,24px);
  left:auto; top:auto;
}

/* ---------- Launcher ---------- */

#blsx-launcher{
  width:clamp(52px,8vw,64px);
  height:clamp(52px,8vw,64px);
  border-radius:50%; background:var(--bn);
  border:none; cursor:pointer; padding:0;
  box-shadow:0 .6rem 1.8rem rgba(19,32,92,.35), 0 .1rem .4rem rgba(19,32,92,.2);
  display:flex; align-items:center; justify-content:center; position:relative;
  animation:blsx-float 4.5s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease;
}
#blsx-launcher:hover{ transform:scale(1.07) rotate(-3deg); }
#blsx-launcher > img{
  width:74%; height:74%; object-fit:contain; border-radius:50%;
  pointer-events:none; display:block;
}
#blsx-bot.open #blsx-launcher{ display:none; }

.blsx-think-bubble{
  position:absolute;
  top:-.3em;
  font-size:clamp(20px,3.5vw,28px);
  line-height:1; pointer-events:none; user-select:none;
  animation:blsx-think 2.8s ease-in-out infinite;
}
/* Thought bubble sits on the outward side, away from screen edge */
#blsx-bot.blsx-pos-left .blsx-think-bubble,
#blsx-bot.blsx-pos-bottom .blsx-think-bubble{ right:-.8em; }
#blsx-bot.blsx-pos-right .blsx-think-bubble,
#blsx-bot.blsx-pos-top .blsx-think-bubble{ left:-.8em; }

@keyframes blsx-think{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-.3em) scale(1.12); }
}
@keyframes blsx-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-.4em); }
}

/* ---------- Tooltip ----------
   Tooltip must point AWAY from the screen edge the bubble is anchored to,
   so it never gets clipped off-screen. */

#blsx-tip{
  position:absolute;
  white-space:nowrap; background:#fff; color:var(--bn);
  font-size:.875rem; font-weight:600;
  padding:.625rem .875rem; border-radius:.625rem;
  box-shadow:0 .5rem 1.4rem rgba(19,32,92,.18);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
#blsx-tip::after{
  content:''; position:absolute; top:50%;
  width:.625rem; height:.625rem; background:#fff;
}
#blsx-tip.show{ opacity:1; }
#blsx-bot.open #blsx-tip{ display:none; }

/* Left-anchored widget -> tooltip opens to the right of the launcher */
#blsx-bot.blsx-pos-left #blsx-tip{
  left:calc(100% + .75rem); bottom:.9rem;
  transform:translateX(-.4rem);
}
#blsx-bot.blsx-pos-left #blsx-tip.show{ transform:translateX(0); }
#blsx-bot.blsx-pos-left #blsx-tip::after{ left:-.3rem; transform:translateY(-50%) rotate(45deg); }

/* Right-anchored widget -> tooltip opens to the left of the launcher */
#blsx-bot.blsx-pos-right #blsx-tip{
  right:calc(100% + .75rem); bottom:.9rem;
  transform:translateX(.4rem);
}
#blsx-bot.blsx-pos-right #blsx-tip.show{ transform:translateX(0); }
#blsx-bot.blsx-pos-right #blsx-tip::after{ right:-.3rem; transform:translateY(-50%) rotate(45deg); }

/* Top-anchored widget -> tooltip opens below-left of the launcher */
#blsx-bot.blsx-pos-top #blsx-tip{
  right:0; top:calc(100% + .75rem);
  transform:translateY(-.4rem);
}
#blsx-bot.blsx-pos-top #blsx-tip.show{ transform:translateY(0); }
#blsx-bot.blsx-pos-top #blsx-tip::after{ top:-.3rem; right:1.2rem; transform:rotate(45deg); }

/* Bottom-anchored widget -> tooltip opens above-right of the launcher */
#blsx-bot.blsx-pos-bottom #blsx-tip{
  right:0; bottom:calc(100% + .75rem);
  transform:translateY(.4rem);
}
#blsx-bot.blsx-pos-bottom #blsx-tip.show{ transform:translateY(0); }
#blsx-bot.blsx-pos-bottom #blsx-tip::after{ bottom:-.3rem; right:1.2rem; transform:rotate(45deg); }

/* ---------- Chat panel ----------
   Anchored to the same corner-ish area as the launcher, per position. */

#blsx-panel{
  position:fixed;
  width:min(90vw,380px);
  height:min(85vh,600px);
  background:#fff; border-radius:clamp(0px,2vw,18px); overflow:hidden;
  box-shadow:0 1.5rem 3.75rem rgba(12,20,48,.28), 0 .25rem .875rem rgba(12,20,48,.12);
  display:flex; flex-direction:column;
  opacity:0; transform:scale(.92) translateY(.875rem); pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.8,.3,1), transform .28s cubic-bezier(.2,.8,.3,1);
}
#blsx-bot.open #blsx-panel{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }

#blsx-bot.blsx-pos-left #blsx-panel{
  left:clamp(0px,3vw,24px); bottom:clamp(0px,3vw,24px);
  transform-origin:bottom left;
}
#blsx-bot.blsx-pos-right #blsx-panel{
  right:clamp(0px,3vw,24px); bottom:clamp(0px,3vw,24px);
  transform-origin:bottom right;
}
#blsx-bot.blsx-pos-top #blsx-panel{
  right:clamp(0px,3vw,24px); top:clamp(0px,3vw,24px);
  transform-origin:top right;
}
#blsx-bot.blsx-pos-bottom #blsx-panel{
  right:clamp(0px,3vw,24px); bottom:clamp(0px,3vw,24px);
  transform-origin:bottom right;
}

/* ---------- Header ---------- */

#blsx-head{
  background:linear-gradient(135deg,var(--bn) 0%,var(--bn2) 100%);
  padding:1rem; display:flex; align-items:center; gap:.7rem; flex-shrink:0;
}
#blsx-head > img{
  width:2.4rem; height:2.4rem; border-radius:50%; background:#fff;
  object-fit:contain; border:.125rem solid rgba(255,255,255,.25); flex-shrink:0;
}
#blsx-head-text{ flex:1; min-width:0; }
#blsx-head-text .name{ font-weight:600; font-size:clamp(13px,1.5vw,15px); color:#fff; }
#blsx-head-text .status{
  font-size:.75rem; color:#b9c4f0; display:flex; align-items:center; gap:.3rem; margin-top:.1rem;
}
#blsx-head-text .status::before{
  content:''; width:.4rem; height:.4rem; border-radius:50%; background:#3ddc84; display:inline-block;
}
#blsx-close{
  width:1.875rem; height:1.875rem; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .2s;
}
#blsx-close:hover{ background:rgba(255,255,255,.22); }

/* ---------- Body / messages ---------- */

#blsx-body{
  flex:1; overflow-y:auto;
  padding:1.125rem 1rem .625rem;
  background:var(--bp); display:flex; flex-direction:column; gap:.875rem;
}
#blsx-body::-webkit-scrollbar{ width:.3rem; }
#blsx-body::-webkit-scrollbar-thumb{ background:#c9d2ec; border-radius:.5rem; }

.blsx-row{ display:flex; gap:.56rem; align-items:flex-end; }
.blsx-row.user{ justify-content:flex-end; }

.blsx-avatar{
  width:2rem; height:2rem; border-radius:50%; flex-shrink:0;
  background:#fff; border:.09rem solid var(--bl); object-fit:contain;
  animation:blsx-pop .35s cubic-bezier(.2,.8,.3,1);
}
.blsx-bubble{
  font-size:clamp(12px,1.3vw,14px); line-height:1.5;
  padding:.625rem .8rem; border-radius:.875rem;
  max-width:78%; animation:blsx-pop .3s cubic-bezier(.2,.8,.3,1);
}
.blsx-row.bot .blsx-bubble{
  background:#fff; color:var(--bk); border:.06rem solid var(--bl); border-bottom-left-radius:.25rem;
}
.blsx-row.user .blsx-bubble{
  background:var(--bn); color:#fff; border-bottom-right-radius:.25rem;
}

@keyframes blsx-pop{
  from{ opacity:0; transform:translateY(.5rem) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.blsx-typing{
  display:flex; gap:.25rem; padding:.75rem .875rem; background:#fff;
  border:.06rem solid var(--bl); border-radius:.875rem; border-bottom-left-radius:.25rem; width:fit-content;
}
.blsx-typing span{
  width:.375rem; height:.375rem; border-radius:50%; background:#aab3d6;
  animation:blsx-bounce 1.1s infinite ease-in-out;
}
.blsx-typing span:nth-child(2){ animation-delay:.15s; }
.blsx-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes blsx-bounce{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-.25rem); opacity:1; }
}

.blsx-chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding-left:2.56rem; animation:blsx-pop .3s ease; }
.blsx-chip{
  font-family:inherit; font-size:clamp(11px,1.2vw,13.5px); font-weight:600; color:var(--bn);
  background:#fff; border:.09rem solid var(--bn); border-radius:6.25rem;
  padding:.5rem .94rem; cursor:pointer; transition:all .18s ease;
}
.blsx-chip:hover{ background:var(--bn); color:#fff; }
.blsx-chip.alt{ border-color:var(--bl); color:var(--bm); }
.blsx-chip.alt:hover{ background:var(--bp); color:var(--bn); border-color:var(--bn); }

.blsx-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(38%,130px),1fr));
  gap:.5rem; padding-left:2.56rem; animation:blsx-pop .35s ease;
}
.blsx-card{
  background:#fff; border:.09rem solid var(--bl); border-radius:.75rem;
  overflow:hidden; cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.blsx-card:hover{ border-color:var(--bn); box-shadow:0 .375rem 1.125rem rgba(19,32,92,.15); transform:translateY(-.125rem); }
.blsx-card.selected{ border-color:var(--bb); box-shadow:0 .375rem 1.125rem rgba(52,87,224,.2); }
.blsx-card-img{ width:100%; aspect-ratio:5/3; object-fit:cover; display:block; background:#e8ecf8; }
.blsx-card-body{ padding:.44rem .56rem .56rem; }
.blsx-card .pname{ font-size:clamp(10px,1.1vw,11.5px); font-weight:700; color:var(--bk); line-height:1.35; }
.blsx-card .ptap{ font-size:clamp(9px,1vw,10px); color:var(--bm); margin-top:.15rem; }

.blsx-composer{
  margin-left:2.56rem; background:#fff; border:.06rem solid var(--bl); border-radius:.875rem;
  padding:.625rem; display:flex; gap:.5rem; animation:blsx-pop .3s ease;
}
.blsx-composer input{
  flex:1; border:none; outline:none; font-family:inherit;
  font-size:clamp(12px,1.3vw,13.5px); color:var(--bk); min-width:0; background:transparent;
}
.blsx-composer input::placeholder{ color:#a6adc9; }
.blsx-composer button{
  background:var(--bn); color:#fff; border:none; border-radius:.56rem;
  width:2.125rem; height:2.125rem; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.blsx-composer button:hover{ background:var(--bn2); }
.blsx-composer.error{ animation:blsx-shake .35s ease; border-color:#e0506a; }
.blsx-err-msg{ margin-left:2.56rem; font-size:.75rem; color:#e0506a; font-weight:600; margin-top:-.375rem; }
@keyframes blsx-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-.3rem); }
  75%{ transform:translateX(.3rem); }
}

#blsx-foot{ text-align:center; font-size:.66rem; color:#a6adc9; padding:.5rem 0 .75rem; flex-shrink:0; letter-spacing:.02em; }

/* ---------- Responsive: small screens ---------- */

@media (max-width: 480px){
  #blsx-panel{
    width:100vw; height:100vh;
    border-radius:0;
    left:0 !important; right:0 !important; top:0 !important; bottom:0 !important;
  }
  #blsx-bot.blsx-pos-left,
  #blsx-bot.blsx-pos-right,
  #blsx-bot.blsx-pos-top,
  #blsx-bot.blsx-pos-bottom{
    left:auto;
  }
}

@media (prefers-reduced-motion: reduce){
  #blsx-launcher, .blsx-think-bubble{ animation:none; }
  .blsx-bubble, .blsx-avatar, .blsx-chips, .blsx-cards, .blsx-composer{ animation:none; }
}