/* Single, illustrated speech-cloud shape, with an integrated organic tail.
   Its position is fixed over the third (shield) Guardian for every event. */
#loginPage .guardian-gossip-bubble{
  position:absolute;
  z-index:24;
  top:14.5%;
  left:65.5%;
  right:auto;
  width:31%;
  max-width:31%;
  height:auto;
  aspect-ratio:320 / 164;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:block;
  box-sizing:border-box;
  pointer-events:none;
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,12px,0) scale(.93);
  transform-origin:50% 82%;
  transition:opacity .38s ease,visibility .38s ease,
    transform .48s cubic-bezier(.16,.85,.24,1.05);
}
#loginPage .guardian-gossip-bubble .guardian-cloud-outline{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 11px 14px rgba(35,87,157,.19))
         drop-shadow(0 2px 3px rgba(46,129,209,.08));
  pointer-events:none;
}
#loginPage .guardian-gossip-bubble .guardian-cloud-text{
  position:absolute;
  top:13%;
  left:8%;
  width:84%;
  height:53%;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  text-wrap:balance;
  overflow-wrap:break-word;
  color:#142753;
  font-family:inherit;
  font-size:clamp(10px,1.78cqw,15px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.29;
}
#loginPage .guardian-gossip-bubble::before,
#loginPage .guardian-gossip-bubble::after{content:none!important;display:none!important}
#loginPage .guardian-gossip-bubble.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1);
}
#loginPage .guardian-gossip-bubble[hidden]{display:none!important}
#loginPage .guardian-speech:not(#guardianGossipBubble){display:none!important}
/* A healthy artwork uses composition-relative coordinates; the permanent
   fallback uses the same zone relative to the left panel. */
#loginPage .guardian-use-backup > .guardian-gossip-bubble{
  top:14.5%;
  left:65.5%;
  width:31%;
  max-width:31%;
  aspect-ratio:320 / 164;
}
@media(max-width:900px){
  #loginPage .guardian-gossip-bubble .guardian-cloud-text{
    font-size:clamp(9px,1.72cqw,12px);
  }
}
@media(max-width:640px){
  #loginPage .guardian-gossip-bubble{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  #loginPage .guardian-gossip-bubble{
    transition:none!important;
    transform:none!important;
  }
}

/* Reference polish: softer blue under the lettering, richer rounder cloud.
   Its accent belongs to the bubble DOM, so fade/scale affects both at once. */
#loginPage .guardian-gossip-bubble .guardian-cloud-text{
  color:#17365f;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 1px 5px rgba(116,184,239,.30);
  top:12%;
  height:56%;
}
#loginPage .guardian-gossip-bubble .guardian-cloud-accent{
  position:absolute;
  z-index:3;
  left:86%;
  top:-12%;
  width:26%;
  height:37%;
  overflow:visible;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(19,97,218,.13));
}