/* =====================================================================
   AprovAKI — Reforço de visibilidade do SINO de notificações
   ---------------------------------------------------------------------
   Motivo: em algumas páginas o sininho não aparecia porque:
     1) CSS legado escondia .aki-notif ou o container do header;
     2) O ícone Phosphor (CDN) demorava/falhava carregar;
     3) A largura fixa (width:140px) do bloco da direita cortava o botão.
   Este arquivo força o botão a ficar visível, dá tamanho ao SVG inline
   e mantém o fallback tipográfico invisível quando o SVG renderiza.
   ===================================================================== */

/* Container do sino: SEMPRE visível */
.aki-notif {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 20;
}

/* Botão: aparente por padrão */
.aki-notif__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #4B3CB8;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
  position: relative;
}

.aki-notif__btn:hover,
.aki-notif__btn:focus-visible {
  background: rgba(75, 60, 184, 0.10);
  outline: none;
}
.aki-notif__btn:active { transform: scale(.94); }

/* SVG do sino */
.aki-notif__svg {
  display: block;
  width: 22px;
  height: 22px;
  color: #4B3CB8;         /* combina com a cor primária AprovAKI */
  fill: currentColor;
  pointer-events: none;
}

/* Remove qualquer fallback tipografico/emoji herdado de versoes antigas */
.aki-notif__fallback,
.aki-notif__btn > i,
.aki-notif__btn .ph-bell,
.aki-notif__btn .ph-bell-fill {
  display: none !important;
}

/* IMPORTANTISSIMO:
   O aki_ui_extra.css (v6) injeta um sino PRETO via ::after do botao
   (background-image data-URI com fill #111827). Aquilo era um workaround
   antigo para o CDN do Phosphor falhar. Agora que temos <svg> inline
   no HTML, aquele ::after fica desenhando um sininho preto por cima do
   nosso — e aparece feio no hover. Neutralizamos aqui: */
.aki-notif__btn::after,
.aki-notif__btn::before {
  content: none !important;
  background-image: none !important;
  display: none !important;
  animation: none !important;
}

/* Estado "tem não lidas" — leve balanço */
.aki-notif.has-unread .aki-notif__svg {
  transform-origin: 50% 20%;
  animation: aki-bell-shake 1.4s ease-in-out .4s 1 both;
}

/* Sem duplicidade: se algum CSS legado escondia o botão */
.nav-actions .aki-notif,
.navbar    .aki-notif {
  display: inline-flex !important;
}

/* Garante que o container à direita tenha espaço p/ sino + userchip */
.nav-actions--right {
  min-width: 140px;
  gap: 10px;
}

@media (max-width: 480px) {
  .nav-actions--right { min-width: 92px; }
  .aki-notif__btn { width: 36px; height: 36px; }
  .aki-notif__svg { width: 20px; height: 20px; }
}