/* Futuristic jetpack AI bot – inside Xaslarbet chat */
/* Sve scoped na #xasai-chat */

#xasai-chat .xasai-window {
  position: relative;
}

/* Botbar: gore desno, bot desno, bubble levo; krecu se zajedno */
#xasai-chat .xasai-botbar {
  position: absolute;
  top: 8px;
  right: 10px;
  display: flex;
  flex-direction: row-reverse; /* bot desno, bubble levo */
  align-items: center;
  gap: 8px;
  z-index: 20;
  pointer-events: none;
  animation: xasai-botbar-float 4.5s infinite ease-in-out;
}

/* Bot container */
#xasai-chat .xasai-bot {
  position: relative;
  width: 72px;
  height: 56px;
  pointer-events: none;
  animation: xasai-bot-bob 1.9s infinite ease-in-out;
}

#xasai-chat .xasai-bot-core {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Glava – kompaktna, neon visor */
#xasai-chat .bot-head-wrap {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 26px;
  height: 18px;
  transform: translateX(-50%);
}
#xasai-chat .bot-head {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(to bottom, #020817, #05080b);
  border: 1px solid rgba(132,249,184,0.5);
  box-shadow: 0 3px 7px rgba(0,0,0,1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#xasai-chat .bot-eye {
  width: 5px;
  height: 5px;
  margin: 0 2px;
  border-radius: 999px;
  background: #84f9b8;
  box-shadow: 0 0 6px #84f9b8;
  animation: xasai-eye-blink 3s infinite;
}
#xasai-chat .bot-eye.right { animation-delay: 0.25s; }

/* Antena */
#xasai-chat .bot-antenna {
  position: absolute;
  bottom: 48px;
  left: 50%;
  width: 2px;
  height: 8px;
  transform: translateX(-50%);
  background: #84f9b8;
  box-shadow: 0 0 4px #84f9b8;
}
#xasai-chat .bot-antenna-tip {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #84f9b8;
  box-shadow: 0 0 7px #84f9b8;
  animation: xasai-antenna-pulse 1.8s infinite;
}

/* Telo – tanak rocket pod head, nema "debeli" izgled */
#xasai-chat .bot-rocket-body {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 32px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 10px 10px 12px 12px;
  background: radial-gradient(circle at 20% 0, #84f9b8 0, #151515 40%, #050608 100%);
  border: 1px solid rgba(132,249,184,0.45);
  box-shadow: 0 3px 8px rgba(0,0,0,0.9);
}

/* Krilca */
#xasai-chat .bot-wing {
  position: absolute;
  bottom: 11px;
  width: 7px;
  height: 6px;
  background: #020817;
  border-radius: 3px;
  border: 1px solid rgba(132,249,184,0.35);
  box-shadow: 0 2px 3px rgba(0,0,0,0.7);
}
#xasai-chat .bot-wing.left { left: calc(50% - 18px); }
#xasai-chat .bot-wing.right { left: calc(50% + 11px); }

/* Jedan centralni thruster ispod tela */
#xasai-chat .bot-thruster {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 18px;
  height: 5px;
  transform: translateX(-50%);
  background: #05080b;
  border-radius: 3px;
  border: 1px solid rgba(132,249,184,0.4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.9);
}

/* Širok mlaz ka DOLE */
#xasai-chat .bot-thruster-flame {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 14px;
  height: 12px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 0, #ffffff 0, #84f9b8 40%, #1effa5 70%, transparent 100%);
  filter: blur(0.4px);
  opacity: 0.9;
  transform-origin: top center;
  animation: xasai-flame-down 0.22s infinite alternate;
}

/* Bubble – jedan red, levo od bota, izgleda kao da IZLAZI iz njega */
#xasai-chat .xasai-bot-bubble {
  position: relative;
  pointer-events: auto;
  max-width: 400px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.2;
  color: #ffffff;
  background: rgba(3,7,18,0.98);
  border-radius: 999px;
  border: 1px solid rgba(132,249,184,0.4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#xasai-chat .xasai-bot-bubble::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 0 5px 6px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(3,7,18,0.98);
}
#xasai-chat .xasai-bot-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animacije */
@keyframes xasai-botbar-float {
  0%   { transform: translateX(0%); }
  25%  { transform: translateX(-8%); }
  50%  { transform: translateX(-14%); }
  75%  { transform: translateX(-6%); }
  100% { transform: translateX(0%); }
}
@keyframes xasai-bot-bob {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0px); }
}
@keyframes xasai-eye-blink {
  0%, 88%, 100% { transform: scaleY(1); opacity: 1; }
  90%, 92%      { transform: scaleY(0.15); opacity: 0.2; }
}
@keyframes xasai-antenna-pulse {
  0%   { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50%  { transform: translateX(-50%) scale(1.25); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
}
/* mlaz ide na dole: raste i spušta se */
@keyframes xasai-flame-down {
  0%   { height: 10px; opacity: 0.8; transform: translateX(-50%) translateY(0); }
  100% { height: 18px; opacity: 1;   transform: translateX(-50%) translateY(2px); }
}

/* Mobile – bez sečene glave */
@media (max-width: 768px) {
  #xasai-chat .xasai-botbar {
    top: 6px;
    right: 6px;
    gap: 6px;
  }
  #xasai-chat .xasai-bot {
    width: 64px;
    height: 48px;
  }
  #xasai-chat .bot-head-wrap {
    bottom: 26px;
    width: 22px;
    height: 16px;
  }
  #xasai-chat .bot-rocket-body {
    width: 28px;
    height: 14px;
  }
  #xasai-chat .xasai-bot-bubble {
    max-width: 260px;
    font-size: 10px;
  }
}