/* Vickram Buttar — public chat widget, matching the ink/gold site aesthetic */
/* pointer-events:none here is load-bearing: the closed .panel still reserves
   its full flex height (opacity:0, not display:none, so its transitions work),
   which left an invisible ~600px hit-area over this fixed container that
   swallowed clicks meant for whatever page content sat underneath it. Only
   the bubble (always) and the panel (when open) re-enable pointer-events. */
#vbchat{position:fixed;right:22px;bottom:22px;z-index:9970;font-family:var(--fB);display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}

#vbchat .bubble{width:58px;height:58px;border-radius:50%;border:none;background:var(--gold);color:var(--ink);
  font-size:24px;cursor:pointer;box-shadow:0 10px 30px rgba(11,11,11,.28);display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .3s;flex:none;pointer-events:auto}
#vbchat .bubble:hover{transform:scale(1.06);background:var(--gold-l)}
#vbchat .bubble svg{width:24px;height:24px}
#vbchat.open .bubble .ic-chat{display:none}
#vbchat:not(.open) .bubble .ic-close{display:none}
@media(prefers-reduced-motion:no-preference){
  #vbchat:not(.open) .bubble{animation:vbchatPulse 2.6s ease-in-out infinite}
}
@keyframes vbchatPulse{0%,100%{box-shadow:0 10px 30px rgba(11,11,11,.28),0 0 0 0 rgba(184,153,91,.45)}50%{box-shadow:0 10px 30px rgba(11,11,11,.28),0 0 0 10px rgba(184,153,91,0)}}

#vbchat .panel{width:min(360px,calc(100vw - 44px));height:min(500px,calc(100vh - 120px));background:var(--paper);
  border-radius:20px;box-shadow:0 30px 80px rgba(11,11,11,.35);border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;margin-bottom:14px;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;transition:opacity .32s var(--ease),transform .32s var(--ease)}
#vbchat.open .panel{opacity:1;transform:none;pointer-events:auto}

#vbchat .head{background:var(--ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:10px;flex:none}
#vbchat .head .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-l);flex:none}
#vbchat .head b{font-family:var(--fD);font-weight:800;font-size:13px;letter-spacing:.02em;display:block}
#vbchat .head span{display:block;font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}

#vbchat .thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
#vbchat .msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5}
#vbchat .msg.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
#vbchat .msg.bot{align-self:flex-start;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
#vbchat .typing{align-self:flex-start;color:var(--mut);font-size:12px;padding:2px 8px}

#vbchat .cta{align-self:stretch;background:var(--paper);border:1.5px solid var(--gold);border-radius:14px;padding:14px;margin-top:2px}
#vbchat .cta .ct{font-family:var(--fD);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
#vbchat .cta p{margin:6px 0 10px;font-size:12.5px;color:var(--mut);line-height:1.5}
#vbchat .cta button{width:100%;border:none;border-radius:999px;background:var(--gold);color:var(--ink);
  font-family:var(--fD);font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
#vbchat .cta button:hover{background:var(--gold-l);transform:translateY(-1px)}

#vbchat .composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--paper);flex:none}
#vbchat .composer input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;
  font-family:inherit;outline:none;background:var(--cream);color:var(--ink)}
#vbchat .composer input:focus{border-color:var(--gold)}
#vbchat .composer button{border:none;border-radius:10px;background:var(--ink);color:#fff;width:40px;flex:none;
  cursor:pointer;font-size:16px;transition:background .3s}
#vbchat .composer button:disabled{opacity:.45;cursor:default}
#vbchat .composer button:not(:disabled):hover{background:var(--gold);color:var(--ink)}

@media(max-width:480px){
  #vbchat{right:14px;bottom:14px}
  #vbchat .panel{width:calc(100vw - 28px);height:min(70vh,560px)}
}