/* static/shared/mascot.css */
:root{
  --mascot-size: 56px;
  --mascot-bg: rgba(11,17,32,0.88);
  --mascot-border: rgba(148,163,184,0.28);
  --mascot-shadow: 0 18px 45px rgba(15,23,42,0.65);
}

.mascot-launcher{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mascot-bubble{
  display:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--mascot-border);
  background: var(--mascot-bg);
  color: rgba(229,231,235,0.92);
  box-shadow: var(--mascot-shadow);
  font-size: 0.85rem;
  max-width: 260px;
}

@media (min-width: 980px){
  .mascot-bubble{ display:block; }
}

.mascot-btn{
  width: var(--mascot-size);
  height: var(--mascot-size);
  border-radius: 18px;
  border: 1px solid var(--mascot-border);
  background: var(--mascot-bg);
  box-shadow: var(--mascot-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}

.mascot-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,0.22), var(--mascot-shadow); }

.mascot-robot{
  width: 42px;
  height: 42px;
  animation: mascot-float 3.2s ease-in-out infinite;
}

@keyframes mascot-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

.mascot-eye{
  transform-origin: center;
  animation: mascot-blink 5.8s infinite;
}

@keyframes mascot-blink{
  0%, 93%, 100%{ transform: scaleY(1); }
  94%, 96%{ transform: scaleY(0.12); }
}