/* Jelly helper */
#jellyHelper{
  position:fixed;
  right:3%;
  top:50%;
  transform:translateY(-50%);
  z-index:90;
  display:flex;
  align-items:center;
  gap:10px;
  animation:jellyBob 3.4s ease-in-out infinite;
  transition:right .35s ease, top .35s ease, bottom .35s ease, transform .35s ease;
}
#jellyHelper.docked{
  right:16px;
  top:auto;
  bottom:16px;
  transform:none;
  animation:jellyBobSmall 3.4s ease-in-out infinite;
}
@keyframes jellyBob{
  0%,100%{transform:translateY(-50%);}
  50%{transform:translateY(calc(-50% - 16px));}
}
@keyframes jellyBobSmall{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
#jellyBody{
  position:relative;
  cursor:pointer;
  filter:drop-shadow(0 10px 20px rgba(18,49,77,0.25));
}
#jellyDock{
  position:absolute;
  top:-6px;
  left:-6px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#f9f5ef;
  border:1px solid rgba(18,49,77,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  cursor:pointer;
  z-index:2;
}
#jellyBubble{
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%) scale(.92);
  background:#faf8f4;
  border:1px solid rgba(18,49,77,0.12);
  border-radius:16px;
  padding:14px 32px 14px 16px;
  width:max-content;
  max-width:260px;
  font-family:'Space Grotesk',sans-serif;
  font-size:0.85rem;
  line-height:1.45;
  color:#12314d;
  box-shadow:0 12px 30px rgba(18,49,77,0.18);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#jellyBubble.show{
  opacity:1;
  transform:translateY(-50%) scale(1);
  pointer-events:auto;
}
#jellyHelper.docked #jellyBubble{
  right:auto;
  left:calc(100% + 14px);
  bottom:0;
  top:auto;
  transform:translateY(0) scale(.92);
}
#jellyHelper.docked #jellyBubble.show{
  transform:translateY(0) scale(1);
}
#jellyBubble::after{
  content:"";
  position:absolute;
  top:50%;
  right:-7px;
  width:12px;
  height:12px;
  margin-top:-6px;
  background:#faf8f4;
  border-top:1px solid rgba(18,49,77,0.12);
  border-right:1px solid rgba(18,49,77,0.12);
  transform:rotate(45deg);
}
#jellyHelper.docked #jellyBubble::after{
  top:auto;
  bottom:22px;
  right:auto;
  left:-7px;
  transform:rotate(-135deg);
}
#jellyBubble b{display:block;margin-bottom:4px;font-family:'Unbounded',sans-serif;font-size:0.78rem;}
#jellyClose{
  position:absolute;
  top:6px;
  right:8px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  color:#58718a;
  background:none;
  border:none;
}
@media (max-width:900px){
  #jellyHelper{right:10px;}
  #jellyBubble{max-width:220px;font-size:0.8rem;}
}

/* Phones: Jelly sits in the bottom-right corner, tip opens as a card above her. */
@media (max-width:640px){
  #jellyHelper,
  #jellyHelper.docked{
    right:12px;
    top:auto;
    bottom:14px;
    transform:none;
    animation:jellyBobSmall 3.4s ease-in-out infinite;
  }
  #jellyBody svg{width:50px;height:60px;}
  #jellyDock{display:none;}
  #jellyBubble,
  #jellyHelper.docked #jellyBubble{
    left:auto;
    right:0;
    top:auto;
    bottom:calc(100% + 12px);
    width:min(300px, calc(100vw - 24px));
    max-width:none;
    padding:12px 30px 12px 14px;
    font-size:0.82rem;
    line-height:1.5;
    transform:translateY(8px) scale(.96);
    transform-origin:bottom right;
  }
  #jellyBubble.show,
  #jellyHelper.docked #jellyBubble.show{
    transform:translateY(0) scale(1);
  }
  #jellyBubble::after,
  #jellyHelper.docked #jellyBubble::after{
    content:"";
    position:absolute;
    top:auto;
    left:auto;
    margin-top:0;
    border-top:0;
    right:20px;
    bottom:-7px;
    width:12px;
    height:12px;
    background:#faf8f4;
    border-right:1px solid rgba(18,49,77,0.12);
    border-bottom:1px solid rgba(18,49,77,0.12);
    transform:rotate(45deg);
  }
  #jellyClose{top:8px;right:10px;font-size:16px;padding:2px;}
}