/* =========================================================
   OVERLAY — NOTIFICAÇÕES (GPU SAFE)
========================================================= */
.notifications-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;

  background: rgba(0, 0, 0, 0.55);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.25s ease;
}

/* Overlay ativo */
.notifications-modal-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   MODAL — NOTIFICAÇÕES (GPU SAFE)
========================================================= */
.notifications-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;

  background: var(--cor-fundo);

  /* Estado inicial (fora da tela) */
  transform: translateY(24px);
  opacity: 0;

  /* Performance WebView */
  will-change: transform, opacity;

  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.28s ease;

  pointer-events: none;
}

/* Modal ativo */
.notifications-modal.is-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   FECHAMENTO SUAVE (REVERSE)
========================================================= */
.notifications-modal.is-closing {
  transform: translateY(24px);
  opacity: 0;
}

.notifications-modal-overlay.is-closing {
  opacity: 0;
}


/* Header */
/* ===================================================== */
/* 🔔 HEADER DO MODAL DE NOTIFICAÇÕES                    */
/* ===================================================== */

.notifications-modal-header {
  height: 56px;
  padding-inline: 12px;

  display: flex;
  align-items: center;

  background: var(--cor-fundo);
}

.notifications-close-btn {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: 0;
  padding: 0;

  color: var(--icon-default); /* 🔥 controla a cor do ícone */
  cursor: pointer;

  flex: 0 0 44px;
}


.notifications-title {
  flex: 1;
  text-align: center;

  font-size: 1rem;      /* padrão de header */
  font-weight: 600;
  color: var(--cor-title-header);

  margin: 0;
  white-space: nowrap;
}


/* Conteúdo scroll */
.notifications-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 0;
}

.notifications-header-spacer {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}


/* Conteúdo scroll 
.notifications-scroll-area {
  overflow-y: auto;
  max-height: calc(100vh - 140px);  ajuste conforme header do modal
  position: relative;
}
*/

/* CARD */
.notificacao-wrapper{
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0.75rem 0.75rem;
  min-height: 75px;
}

/* =========================================================
   🔔 RESET DE LISTA — MODAL DE NOTIFICAÇÕES
========================================================= */
.notifications-list li {
  list-style: none;
  /* text-align:center; */
}


.notificacao-card {
    background: #151922;
    border-radius: 15px;
    margin-bottom: 10px;
}

/* AVATAR */
.notificacao-left{
  display: flex;
  align-items: center;
}

.notificacao-avatar{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
}

.notificacao-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TEXTO CENTRAL */
.notificacao-conteudo{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* NOME */
.notificacao-conteudo a{
  font-weight: 600;
  font-size: 15px;
  color: #F9F9F9;
  text-decoration: none;
}

/* MENSAGEM */
.notificacao-mensagem{
  font-size: 15px;
  color: #C9C9C9;
  font-weight: 500;
}

/* TEMPO */
.notificacao-tempo{
  font-size: 14px;
  color: #C9C9C9;
  white-space: nowrap;
}


.notificacao-nome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===============================
   NÃO LIDA — DESTAQUE AZUL
   (MODELO FIGMA)
================================ */
.notificacao-card.notificacao-nao-lida {
  background: #1A2040;
}

.notificacao-badge {
  position: absolute;
  top: -4px;
  right: -4px;

  min-width: 16px;
  height: 16px;
  padding: 0 5px;

  background: #EA646C;
  color: #fff;

  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;

  border-radius: 999px;
}


/* =====================
   NOTIFICAÇÕES
===================== */

.item-icon-bell {
  position: relative;
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-icons-default);
  text-decoration: none;
}





/* ================================
   ♾️ Loader do scroll infinito
================================ */
.notifications-loader {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
}

.loader-dot {
    width: 8px;
    height: 8px;
    background: #00eaff;
    border-radius: 50%;
    animation: loaderBreathe 0.8s infinite alternate;
}

.loader-dot:nth-child(2) { animation-delay: 0.15s; }
.loader-dot:nth-child(3) { animation-delay: 0.3s; }

/* Animação ao fechar */
.fadeOut {
    animation: modalFadeOut 0.22s forwards ease-out;
}




@keyframes modalFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}

/* ================================
   ✨ Animações
================================ */
@keyframes modalFadeIn {
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes loaderBreathe {
    from { opacity: 0.3; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}







/* ===============================
   🔥 SKELETON DE NOTIFICAÇÕES
================================ */
.notifications-skeleton {
    padding: 0px 0px;
}

.notifications-skeleton-scroll {
  padding: 0 0px 0;
}

.notificacao-skeleton-item {
    display: flex;
    gap: 14px;
    padding: 0.75rem 0.75rem;
    align-items: center;
    animation: fadeIn 0.2s ease-in;
    border-radius: 15px;
    margin-bottom: 10px;
    background: var(--skeleton-card);
}

.sk-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
        background: var(--skeleton-line-avatar);

    animation: pulse 1.4s infinite ease-in-out;
}

.sk-lines {
    flex: 1;
}

.sk-line {
    height: 12px;
    width: 70%;
    background: var(--skeleton-line-avatar);

    border-radius: 4px;
    margin-bottom: 6px;
    animation: pulse 1.4s infinite ease-in-out;
}

.sk-line.small {
    width: 40%;
    height: 10px;
}

/* animação */
@keyframes pulse {
    0% { opacity: 0.45; }
    50% { opacity: 1; }
    100% { opacity: 0.45; }
}