/* ============ Notificações (sino do topo) ============ */
.notif { position: relative; display: inline-flex; }
.notif-toggle { position: relative; }
.notif-toggle.has-unread { color: var(--text); border-color: var(--line-strong); }

/* O número tem de cair no centro exato do círculo. Centrar por line-height
   igual à altura só funciona quando a borda não entra na conta — e aqui
   box-sizing é border-box, então os 2px de borda encolhiam a caixa de
   conteúdo e empurravam o dígito para baixo. Flex centra nos dois eixos
   sem depender disso; o dígito tabular mantém o 1 do mesmo tamanho do 8. */
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 7px rgba(229, 72, 77, .45);
}

.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 60; overflow: hidden;
  animation: notif-pop .16s ease;
}
@keyframes notif-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
:root[data-motion="reduzida"] .notif-panel { animation: none; }

.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
}
.notif-panel-head strong { font-size: 15px; color: var(--text); }
.notif-panel-actions { display: flex; align-items: center; gap: 10px; }
.notif-readall {
  border: 0; background: transparent; color: var(--accent-strong);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.notif-readall:hover { text-decoration: underline; }

.notif-settings {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.notif-settings .icon { width: 17px; height: 17px; }
.notif-settings:hover { color: var(--text); background: var(--surface-3); border-color: var(--line-2); }
.notif-settings:focus-visible { outline: 2px solid var(--personal-accent); outline-offset: 2px; }

.notif-list {
  list-style: none; margin: 0; padding: 6px;
  max-height: min(70vh, 460px); overflow-y: auto;
}
.notif-status { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.notif-item {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; border-radius: 14px; cursor: default;
  transition: background .16s ease;
}
.notif-item[role="link"] { cursor: pointer; }
.notif-item:hover { background: var(--surface-3); }
.notif-item + .notif-item { margin-top: 2px; }

.notif-item-icon {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--personal-accent-rgb), .12); color: var(--accent-strong);
}
.notif-type-reaction, .notif-type-birthday { background: rgba(229, 72, 77, .12); color: #e5484d; }
.notif-type-recognition { background: rgba(232, 168, 40, .16); color: #c2870f; }

.notif-item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; }
.notif-item-text {
  font-size: 12px; color: var(--muted); line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-item-time { font-size: 12px; color: var(--muted-2); margin-top: 1px; }

.notif-item-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--personal-accent); margin-top: 6px; opacity: 0;
}
.notif-item.is-unread { background: rgba(var(--personal-accent-rgb), .06); }
.notif-item.is-unread .notif-item-dot { opacity: 1; }

/* ---- Popup de preferências (o "settings" do sino) ---------------------------
   Mesma linguagem do .confirm-dialog: caixa sóbria na camada de topo. O
   interruptor é um checkbox de verdade por baixo (role="switch"), então teclado
   e leitor de tela continuam funcionando sem código extra. */
.notif-prefs {
  width: min(440px, calc(100vw - 32px)); padding: 20px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.notif-prefs::backdrop { background: rgba(30, 24, 45, .44); backdrop-filter: blur(3px); }

.notif-prefs-head { display: flex; align-items: flex-start; gap: 12px; }
.notif-prefs-mark {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 12px;
  color: var(--personal-accent-ink); background: rgba(var(--personal-accent-rgb), .13);
}
.notif-prefs-head h2 { margin: 1px 0 0; font-size: 16px; }
.notif-prefs-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* A lista rola: sem a linha embaixo, a linha cortada na dobra parece defeito de
   recorte em vez de "tem mais aqui". */
.notif-prefs-body {
  display: grid; gap: 6px; margin: 16px 0 0; padding-bottom: 14px;
  max-height: min(56vh, 386px); overflow-y: auto;
  border-bottom: 1px solid var(--line-2);
}
.notif-prefs-body .notif-status { padding: 20px 8px; }

.notif-pref {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 13px;
  background: var(--surface-2); cursor: pointer;
  transition: border-color .16s ease;
}
.notif-pref:hover { border-color: var(--line-strong); }
.notif-pref-copy { display: grid; gap: 3px; min-width: 0; }
.notif-pref-copy b { font-size: 12.5px; font-weight: 700; color: var(--text); }
.notif-pref-copy small { font-size: 12px; color: var(--muted); line-height: 1.4; }

.notif-pref-switch {
  flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  position: relative; width: 40px; height: 22px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-3);
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.notif-pref-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 45, .3);
  transition: transform .18s ease;
}
/* No tema escuro a superfície do botão desligado quase encosta na do trilho: o
   pino desligado passa a usar o cinza de texto secundário para continuar visível.
   Ligado, o pino segue branco sobre o accent (mesmo par do .confirm-accept). */
:root[data-theme="dark"] .notif-pref-switch::after { background: var(--muted); }
.notif-pref-switch:checked {
  background: var(--personal-accent-ink); border-color: transparent;
}
.notif-pref-switch:checked::after { transform: translateX(18px); }
:root[data-theme="dark"] .notif-pref-switch:checked::after { background: #fff; }
.notif-pref-switch:focus-visible { outline: 2px solid var(--personal-accent); outline-offset: 2px; }
.notif-pref-switch:disabled { opacity: .55; cursor: progress; }
:root[data-motion="reduzida"] .notif-pref-switch,
:root[data-motion="reduzida"] .notif-pref-switch::after { transition: none; }

.notif-prefs-error {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 10px;
  color: #c93254; background: rgba(220, 60, 91, .08); font-size: 12px;
}
.notif-prefs-error[hidden] { display: none; }

.notif-prefs-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.notif-prefs-close {
  min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.notif-prefs-close:hover { border-color: var(--line-strong); background: var(--surface-2); }

@media (max-width: 720px) {
  .notif-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
}