/* ═══════════════════════════════════════════════════════════════
   NOTIFICATIONS · sino do header + dropdown universal
   Prefixo .nf-*  ·  Reusa tokens globais  ·  Light + dark
   ═══════════════════════════════════════════════════════════════ */

.nf-bell-wrap {
  position: relative;
  display: inline-flex;
  /* Accent FIXO de notificações (vermelho do badge) — padroniza o painel
     em todas as seções do site, independente do --accent da seção. */
  --nf-accent: oklch(0.58 0.22 25);
}

/* Scrim — escurece o fundo quando o painel de notificações abre.
   Escolhido em vez de blur: muito mais leve (não recalcula sobre vídeo/scroll). */
.nf-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: oklch(0 0 0 / 0.66);
  border: 0; cursor: default;
  animation: nf-scrim-in 0.18s ease forwards;
}
/* dentro de um device frame do canvas: ancora no aparelho, não no viewport */
.mobile-device-inner > .nf-scrim {
  position: absolute; inset: 0;
}
@keyframes nf-scrim-in { from { opacity: 0; } to { opacity: 1; } }

/* Bell button — extende o .site-header-icon existente */
.nf-bell {
  position: relative;
  overflow: visible !important; /* badge precisa ultrapassar */
}
.nf-bell.is-open {
  background: var(--bg-elev);
  color: var(--text);
}

/* Badge contador — dopamine: vermelho com número */
.nf-bell-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: oklch(0.58 0.22 25);
  color: oklch(1 0 0);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--bg-base);
  box-shadow: 0 4px 8px -2px oklch(0.45 0.20 25 / 0.4);
  line-height: 1;
}

/* Pulse animation quando há unread — puxa atenção do leitor */
/* Sino balança em LOOP enquanto houver notificação não lida — uma
   "balançadinha" curta a cada ~3s (não contínua, pra chamar atenção sem
   cansar). Para quando o dropdown abre e em prefers-reduced-motion. */
.nf-bell.has-unread {
  transform-origin: top center;
  animation: nfBellRing 5s ease-in-out infinite;
}
.nf-bell.has-unread.is-open { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .nf-bell.has-unread { animation: none; }
}
@keyframes nfBellRing {
  0%        { transform: rotate(0); }
  4%        { transform: rotate(-13deg); }
  8%        { transform: rotate(11deg); }
  12%       { transform: rotate(-9deg); }
  16%       { transform: rotate(7deg); }
  20%       { transform: rotate(-5deg); }
  24%       { transform: rotate(3deg); }
  28%, 100% { transform: rotate(0); }
}


/* ═══════════════════════════════════════════════════════════════
   GAVETA LATERAL — mesmo padrão do menu sanduíche (backdrop + painel
   à direita). O nó continua .nf-dropdown por compat, mas é um drawer.
   ═══════════════════════════════════════════════════════════════ */

.nf-dropdown {
  position: fixed;
  --nf-accent: oklch(0.58 0.22 25);
  top: 0; right: 0; bottom: 0;
  z-index: 1000;
  width: min(380px, calc(100vw - 44px));
  background: var(--bg-base);
  border-left: 1px solid var(--border);
  box-shadow: -30px 0 70px -20px oklch(0 0 0 / 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: nfDrawerIn 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
/* dentro de um device frame do canvas: ancora no aparelho */
.mobile-device-inner > .nf-dropdown { position: absolute; }
@keyframes nfDrawerIn {
  from { transform: translateX(calc(100% + 24px)); }
  to   { transform: translateX(0); }
}


.nf-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.nf-dropdown-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.nf-head-actions { display: flex; align-items: center; gap: 4px; }
.nf-drawer-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.nf-drawer-close:hover { background: var(--bg-elev); color: var(--text); border-color: var(--border-soft); }
.nf-dropdown-markall {
  background: transparent;
  border: 0;
  color: var(--nf-accent);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  letter-spacing: -0.005em;
  transition: background 0.12s ease;
}
.nf-dropdown-markall:hover { background: var(--bg-elev); }


.nf-dropdown-list {
  flex: 1;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.nf-dropdown-list::-webkit-scrollbar { width: 6px; }
.nf-dropdown-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}


.nf-dropdown-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elev);
}
.nf-dropdown-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-mute);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 0.12s ease;
}
.nf-dropdown-all:hover { color: var(--nf-accent); }

/* Infinite-scroll loader (substitui o "Ver todas") */
.nf-loader {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 16px 18px;
  color: var(--text-mute);
}
.nf-loader-spin {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--nf-accent);
  animation: nf-loader-spin 0.7s linear infinite;
}
@keyframes nf-loader-spin { to { transform: rotate(360deg); } }
.nf-loader-text { font-size: 12.5px; font-weight: 500; }
.nf-end {
  text-align: center; padding: 14px 16px 18px;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-dim);
}


/* Empty state */
.nf-dropdown-empty {
  padding: 32px 20px 36px;
  text-align: center;
}
.nf-dropdown-empty-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-elev);
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.nf-dropdown-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.nf-dropdown-empty-sub {
  font-size: 12px;
  color: var(--text-mute);
}


/* ═══════════════════════════════════════════════════════════════
   ITEM
   ═══════════════════════════════════════════════════════════════ */

.nf-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  transition: background 0.14s ease;
  position: relative;
}
.nf-item:last-child { border-bottom: 0; }
.nf-item:hover { background: var(--bg-elev); }

/* Unread state: bg sutil + barrinha lateral */
.nf-item.is-unread {
  background: oklch(from var(--nf-accent) calc(l + 0.40) calc(c * 0.20) h);
}
.theme-dark .nf-item.is-unread {
  background: oklch(from var(--nf-accent) calc(l - 0.35) calc(c * 0.5) h / 0.4);
}
.nf-item.is-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--nf-accent);
}

/* Face composta: avatar + badge no canto */
.nf-face-wrap {
  position: relative;
  flex-shrink: 0;
}
.nf-face {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(1 0 0);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px oklch(0 0 0 / 0.18);
  border: 1.5px solid oklch(1 0 0 / 0.15);
}
.nf-face-system {
  background: var(--text);
  color: var(--bg-base);
  border-color: transparent;
}
.nf-face-avatar {
  border: 1.5px solid var(--nf-accent);
  box-shadow: 0 0 0 1.5px var(--bg-base);
}

.nf-face-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border: 2px solid var(--bg-base);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
.nf-item.is-unread .nf-face-badge { border-color: oklch(from var(--nf-accent) calc(l + 0.40) calc(c * 0.20) h); }
.theme-dark .nf-item.is-unread .nf-face-badge { border-color: oklch(from var(--nf-accent) calc(l - 0.35) calc(c * 0.5) h / 0.95); }
.nf-face-badge-reaction { background: var(--bg-base); }
.nf-face-badge-icon {
  background: var(--nf-accent);
  color: oklch(0.06 0 0);
  font-family: var(--font-display);
}
.nf-face-badge-mention {
  background: var(--nf-accent);
  color: oklch(0.06 0 0);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
}

/* Item body */
.nf-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nf-item-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
}
.nf-item-actor { font-weight: 600; }
.nf-item-verb { color: var(--text-mute); }
.nf-item-suffix { color: var(--text-mute); }
.nf-item-snippet {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-mute);
  padding: 6px 10px;
  background: var(--bg-base);
  border-left: 2px solid var(--border);
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.nf-item.is-unread .nf-item-snippet { background: var(--bg-base); }
.nf-item-time {
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Dot unread no canto direito */
.nf-item-dot {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nf-accent);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */

.mobile-frame .nf-dropdown {
  width: 320px;
  right: -16px;
}
/* ── tipos do LEILÃO (X-FLOW) ───────────────────────────────── */
/* Raio-X: análise automática — cara própria em ciano FLOW */
.nf-face-raiox {
  background: oklch(0.70 0.15 210);
  color: oklch(0.13 0.02 230);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* apoio com PING: raio âmbar */
.nf-face-badge-bolt {
  background: oklch(0.78 0.16 80);
  color: oklch(0.2 0.05 80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* lance coberto: selo "1º" âmbar */
.nf-face-badge-rank {
  background: oklch(0.78 0.16 80);
  color: oklch(0.2 0.05 80);
  font-size: 8.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-frame .nf-face { width: 34px; height: 34px; font-size: 12px; }
.mobile-frame .nf-face-badge { width: 16px; height: 16px; font-size: 10px; }
.mobile-frame .nf-item-text { font-size: 12.5px; }
.mobile-frame .nf-item-snippet { font-size: 11.5px; }