/* Goverisek – kontener i canvas */
#kb-agent-wrap{
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  z-index: 9998;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#kb-agent{
  width: 150px;
  height: 150px;
  display: block;
}


/* Dymek „?” przypięty nad głową (pozycjonowany przez JS) */
.kb-bubble{
  position:absolute;
  left:0; top:0;
  transform: translate(-50%, -100%);
  width:45px; height:45px;
  border-radius:50%;
  background:#fff;
  color:#d62240;
  border:2px solid #d62240;
  font-weight:700;
  font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 14px rgba(0,0,0,.15);
  user-select:none;
  pointer-events:none;
  animation: kb-bubble-pop 180ms ease-out 1, kb-bubble-float 2.4s ease-in-out infinite 180ms;
}
.kb-bubble::after{
  content:"";
  position:absolute;
  bottom:-8px; left:50%;
  transform: translateX(-50%) translateY(-1px);
  border:8px solid transparent;
  border-top-color:#d62240;
}
.kb-bubble::before{
  content:"";
  position:absolute;
  bottom:-6px; left:50%;
  transform: translateX(-50%);
  border:6px solid transparent;
  border-top-color:#fff;
}
.kb-bubble.hidden{ display:none; }

@keyframes kb-bubble-pop{
  from{transform:translate(-50%,-100%) scale(.6);opacity:0}
  to{transform:translate(-50%,-100%) scale(1);opacity:1}
}
@keyframes kb-bubble-float{
  0%,100%{transform:translate(-50%,-100%) translateY(0)}
  50%{transform:translate(-50%,-100%) translateY(-8px)}
}

/* Panel – animacja z Goveriska do centrum */
#kb-panel{
  position: fixed;
  width: min(640px, 92vw);
  max-height: 75vh;
  overflow: auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  z-index: 9999;
  opacity: 0;
  transform: translate(0,0) scale(.98);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
  display:none;
}
#kb-panel.anim-from-agent{
  transform: translate(var(--fromX,0px), var(--fromY,0px)) scale(.92);
}
#kb-panel.open{
  opacity:1;
  transform: translate(0,0) scale(1);
}

/* Nagłówek i X */
#kb-head { position: relative; padding-right: 40px; }
.kb-close{
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: 0; border-radius: 6px;
  background: transparent;
  font-size: 20px; line-height: 1;
  color: #555; cursor: pointer;
}
.kb-close:hover{ background: rgba(0,0,0,.06); }
.kb-close:focus{ outline: 2px solid #d62240; outline-offset: 2px; }