/* chatbot.css - Cyberpunk Blue-Cyan orb + minimal base styles */

/* orb container */
#chat-orb {
  position: fixed;
  right: 22px;
  bottom: 24px;
  width: 68px;
  height: 68px;
  z-index: 3000;
  cursor: pointer;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 10px 30px rgba(32,120,255,0.18));
  transition: transform .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* inner core */
#chat-orb .orb-core {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #8fe7ff 0%, #3ab7ff 25%, #1e40af 100%);
  box-shadow:
    0 6px 20px rgba(58,183,255,0.18),
    inset 0 2px 10px rgba(255,255,255,0.06);
  position: relative;
  transform-origin: center;
  animation: orb-pulse 2200ms ease-in-out infinite;
}

/* ring */
#chat-orb .orb-ring {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  border: 2px solid rgba(58,183,255,0.14);
  box-shadow: 0 0 30px rgba(58,183,255,0.10), 0 0 6px rgba(124,77,255,0.06);
  transform: rotate(0deg);
  animation: orb-rotate 4200ms linear infinite;
  pointer-events: none;
}

/* soft outer glow */
#chat-orb .orb-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(58,183,255,0.10) 0%, rgba(124,77,255,0.03) 40%, transparent 60%);
  pointer-events: none;
}

/* hover/focus expand */
#chat-orb:hover,
#chat-orb:focus {
  transform: translateY(-6px) scale(1.03);
}

/* click ripple (brief) */
#chat-orb.active .orb-core {
  transform: scale(.95);
  transition: transform .12s;
}

/* animations */
@keyframes orb-pulse {
  0% { box-shadow: 0 6px 20px rgba(58,183,255,0.18), inset 0 2px 6px rgba(255,255,255,0.04); transform: scale(1); }
  50% { box-shadow: 0 12px 36px rgba(58,183,255,0.26), inset 0 2px 6px rgba(255,255,255,0.06); transform: scale(1.04); }
  100% { box-shadow: 0 6px 20px rgba(58,183,255,0.18), inset 0 2px 6px rgba(255,255,255,0.04); transform: scale(1); }
}

@keyframes orb-rotate {
  0% { transform: rotate(0deg) translateZ(0); }
  100% { transform: rotate(360deg) translateZ(0); }
}

/* small responsive adjustment */
@media (max-width:560px) {
  #chat-orb { right: 14px; bottom: 18px; width:60px; height:60px; }
  #chat-orb .orb-ring { width:60px; height:60px; }
  #chat-orb .orb-core { width:40px; height:40px; }
}