/* Чат помощникът на SPECOMBOT (spekomerio.js). Героят стои над балона и се появява само при натискане на бутона —
   не обикаля по екрана. Образът е от data-avatar: worker (Спекомерио, майстор с каска) или broker (брокер с вратовръзка). */
#gb-root{ position:fixed; right:clamp(12px,3vw,40px); bottom:86px; z-index:60; width:min(430px,calc(100vw - 24px)); pointer-events:none; font-family:Manrope,system-ui,sans-serif; }
#gb-root *{ box-sizing:border-box; }

/* героят: лек дъх на място; уста и ръце се движат само докато „говори“ */
#gb-ghost{ position:fixed; left:0; top:0; width:92px; height:175px; pointer-events:none; cursor:pointer; opacity:0; z-index:61;
  transition:opacity .35s; will-change:transform; backface-visibility:hidden; }
#gb-ghost.on{ opacity:1; pointer-events:auto; }
#gb-ghost svg{ width:100%; height:100%; overflow:visible; animation:gb-bob 4.2s ease-in-out infinite; }
@keyframes gb-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
#gb-ghost .arm-l{ transform-origin:35px 72px; }
#gb-ghost .arm-r{ transform-origin:65px 72px; }
#gb-ghost.talk .arm-l{ animation:gb-wl 1.2s ease-in-out infinite; }
#gb-ghost.talk .arm-r{ animation:gb-wr 1.2s ease-in-out infinite .4s; }
@keyframes gb-wl{ 0%,100%{ transform:rotate(6deg) } 50%{ transform:rotate(-12deg) } }
@keyframes gb-wr{ 0%,100%{ transform:rotate(-6deg) } 50%{ transform:rotate(12deg) } }
#gb-ghost .mouth-open{ opacity:0; transform-box:fill-box; transform-origin:center; }
#gb-ghost.talk .mouth-smile{ opacity:0; }
#gb-ghost.talk .mouth-open{ opacity:1; animation:gb-talk .26s ease-in-out infinite alternate; }
@keyframes gb-talk{ from{ transform:scaleY(.3) } to{ transform:scaleY(1.2) } }

/* балонът: почти непрозрачен за четливост, опашката е горе към героя */
#gb-chat{ position:relative; margin-left:auto; padding:16px 22px 14px; border-radius:22px;
  background:linear-gradient(180deg, rgba(250,253,255,.97), rgba(226,241,254,.96));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 40px rgba(2,12,22,.45), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; pointer-events:none; }
#gb-chat::before{ content:""; position:absolute; left:34px; top:-13px; width:26px; height:15px;
  clip-path:polygon(0 100%, 100% 100%, 30% 0); background:rgba(250,253,255,.97); }
#gb-chat.on{ opacity:1; transform:none; pointer-events:auto; }
#gb-log{ max-height:min(40vh,300px); overflow-y:auto; padding:0 26px 4px 0; scrollbar-width:none; }
#gb-log::-webkit-scrollbar{ display:none; }
.gb-m{ margin:0 0 9px; font-size:15.5px; line-height:1.5; max-width:100%; color:#12304a; overflow-wrap:anywhere; }
.gb-me{ color:#1668b8; font-weight:600; text-align:right; }
.gb-m a, .gb-opt{ color:#1668b8; font-weight:600; text-decoration:underline; text-decoration-color:rgba(22,104,184,.45); text-underline-offset:3px; cursor:pointer; font:inherit; }
.gb-opts{ display:flex; gap:14px 18px; flex-wrap:wrap; margin:2px 0 8px; }
.gb-opt{ padding:5px 12px; border:0; border-radius:999px; background:rgba(22,104,184,.10); text-decoration:none; }
.gb-opt:hover{ background:rgba(22,104,184,.2); }
.gb-dots::after{ content:"…"; animation:gb-blink 1s steps(3,end) infinite; }
@keyframes gb-blink{ 0%{ opacity:.2 } 50%{ opacity:1 } 100%{ opacity:.2 } }
#gb-form{ display:flex; gap:10px; align-items:center; padding-top:4px; }
#gb-in{ flex:1; min-width:0; background:none; border:0; border-bottom:1px solid rgba(18,48,74,.35); color:#12304a; font:inherit; font-size:15px; padding:8px 2px; outline:none; }
#gb-in:focus{ border-bottom-color:#1668b8; }
#gb-in::placeholder{ color:rgba(18,48,74,.5); }
#gb-send,#gb-x{ background:none; border:0; font:inherit; font-size:16px; cursor:pointer; padding:4px; }
#gb-send{ color:#1668b8; font-weight:700; }
#gb-x{ color:rgba(18,48,74,.55); position:absolute; top:8px; right:12px; font-size:19px; line-height:1; }

/* бутонът — единственият начин да се появи героят */
#gb-fab{ position:fixed; right:clamp(12px,3vw,40px); bottom:86px; width:62px; height:62px; border-radius:50%; padding:0; z-index:62; cursor:pointer;
  border:2px solid rgba(255,255,255,.9); background:linear-gradient(180deg,#63b5f5,#2679cf); box-shadow:0 8px 22px rgba(2,12,22,.5);
  display:grid; place-items:center; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s; }
#gb-fab:hover{ transform:scale(1.07); }
#gb-fab.off{ opacity:0; transform:scale(.6); pointer-events:none; }
#gb-fab svg{ width:44px; height:44px; }
#gb-fab.broker{ background:linear-gradient(180deg,#2b3a55,#141d2e); border-color:#d9b65c; }

@media (max-width:560px){ #gb-ghost{ width:66px; height:125px } #gb-chat{ padding:14px 16px 12px } }