.conn-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transform: translateY(-100%);
    transition: transform .25s ease, opacity .2s;
}

.conn-status.show {
    transform: translateY(0);
}

.conn-status.is-offline {
    background: #dc3545;
}

/* danger */
.conn-status.is-online {
    background: #198754;
}

#hint-portal-root{
  position:fixed; inset:0; pointer-events:none; z-index:99999;
}
#enable_hint{
  position:fixed; /* fica solto na página */
  pointer-events:auto; 
  max-width:320px;
  background:#fff; color:#222;
  border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:12px 14px;
  opacity:0; transform:translateY(4px);
}
/* precisa existir no seu CSS global */
#enable_hint{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;  /* <-- ADICIONE ISTO */
}
#enable_hint.is-visible{
  opacity: 1;
  transform: translateY(0);
}