/* ============================================================
   BPI · website chat widget — Baumann navy x white x glass.
   Custom skin over the shared /api/chat bridge (GHL Conversation AI).
   Spanish-first: copy follows the site's ES/EN toggle (body.lang-en).
   ============================================================ */

.bpc-fab{
  position:fixed; right:22px; bottom:22px; z-index:130;
  width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(160deg,#16334a,#0a2334);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s;
  -webkit-tap-highlight-color:transparent;
}
.bpc-fab:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 24px 56px -14px rgba(0,0,0,.9)}
.bpc-fab svg{width:25px; height:25px}
.bpc-fab .bpc-x{display:none}
.bpc-fab.open .bpc-x{display:block}
.bpc-fab.open .bpc-bub{display:none}
/* one-time attention pulse so the bubble is noticed without nagging */
.bpc-fab::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); opacity:0; pointer-events:none;
}
.bpc-fab.ping::after{animation:bpcPing 2.6s ease-out 3}
@keyframes bpcPing{0%{opacity:.55;transform:scale(.86)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0}}

.bpc-panel{
  position:fixed; right:22px; bottom:92px; z-index:131;
  width:min(376px, calc(100vw - 32px)); height:min(560px, calc(100vh - 130px));
  display:none; flex-direction:column; overflow:hidden;
  border-radius:20px; border:1px solid rgba(255,255,255,.14);
  background:rgba(9,32,48,.94);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
  font-family:"Helvetica Now Text","Helvetica Neue",'Inter',-apple-system,system-ui,Arial,sans-serif;
  color:#fff;
}
.bpc-panel.open{display:flex; animation:bpcIn .26s cubic-bezier(.2,.9,.3,1.05)}
@keyframes bpcIn{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}

.bpc-head{display:flex; align-items:center; gap:11px; padding:15px 16px;
  border-bottom:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.04)}
.bpc-head .bpc-av{width:38px; height:38px; border-radius:12px; flex:none;
  background:linear-gradient(150deg,#22415b,#0d2739); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center}
.bpc-head .bpc-av img{width:22px; height:22px; object-fit:contain; display:block}
.bpc-head .bpc-mark{font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif;
  font-size:1.08rem; font-weight:700; letter-spacing:.02em; color:#fff; line-height:1}
.bpc-head .bpc-who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.bpc-head .bpc-who b{font-size:.94rem; font-weight:600; letter-spacing:.01em}
.bpc-head .bpc-who span{font-size:.74rem; color:rgba(255,255,255,.58); display:flex; align-items:center; gap:6px}
.bpc-head .bpc-dot{width:7px; height:7px; border-radius:50%; background:#34C759; flex:none}
.bpc-head .bpc-close{margin-left:auto; width:32px; height:32px; border-radius:9px; flex:none;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center}
.bpc-head .bpc-close svg{width:15px; height:15px}

.bpc-log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent}
.bpc-log::-webkit-scrollbar{width:6px}
.bpc-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:3px}

.bpc-msg{max-width:86%; padding:10px 13px; border-radius:15px; font-size:.9rem; line-height:1.5;
  white-space:pre-wrap; word-wrap:break-word; animation:bpcMsg .22s ease}
@keyframes bpcMsg{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.bpc-msg.bot{align-self:flex-start; background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10); border-bottom-left-radius:5px}
.bpc-msg.me{align-self:flex-end; background:#fff; color:#0A2131; font-weight:500;
  border-bottom-right-radius:5px}
.bpc-msg a{color:inherit; text-decoration:underline; text-underline-offset:2px}

.bpc-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; border-radius:15px;
  background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.10)}
.bpc-typing i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6);
  animation:bpcBounce 1.25s infinite ease-in-out}
.bpc-typing i:nth-child(2){animation-delay:.16s}
.bpc-typing i:nth-child(3){animation-delay:.32s}
@keyframes bpcBounce{0%,60%,100%{transform:translateY(0); opacity:.45}30%{transform:translateY(-5px); opacity:1}}

/* quick-question chips */
.bpc-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px}
.bpc-chips button{appearance:none; cursor:pointer; font:500 .79rem/1.3 inherit; color:rgba(255,255,255,.86);
  padding:.44rem .74rem; border-radius:999px; border:1px solid rgba(255,255,255,.17);
  background:rgba(255,255,255,.05); transition:background .16s, color .16s, transform .16s}
.bpc-chips button:hover{background:rgba(255,255,255,.13); color:#fff; transform:translateY(-1px)}

.bpc-input{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.03)}
.bpc-input input{flex:1; min-width:0; appearance:none; font:400 .9rem inherit; color:#fff;
  padding:.68rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); outline:none; transition:border-color .18s}
.bpc-input input::placeholder{color:rgba(255,255,255,.42)}
.bpc-input input:focus{border-color:rgba(255,255,255,.42)}
.bpc-input button{flex:none; width:41px; height:41px; border-radius:50%; cursor:pointer;
  border:0; background:#fff; color:#0A2131; display:flex; align-items:center; justify-content:center;
  transition:transform .18s, opacity .18s}
.bpc-input button:hover{transform:scale(1.07)}
.bpc-input button:disabled{opacity:.4; cursor:default; transform:none}
.bpc-input button svg{width:17px; height:17px}

.bpc-foot{padding:0 16px 11px; font-size:.68rem; color:rgba(255,255,255,.34); text-align:center}

@media(max-width:520px){
  .bpc-fab{right:16px; bottom:16px; width:54px; height:54px}
  .bpc-panel{right:12px; left:12px; bottom:80px; width:auto;
    height:min(72vh, calc(100vh - 110px))}
}
@media(prefers-reduced-motion:reduce){
  .bpc-panel.open,.bpc-msg{animation:none}
  .bpc-fab.ping::after{animation:none}
  .bpc-typing i{animation-duration:0s}
}