.notif-menu { position: relative; display: flex; }
.notif-bell { position: relative; }
.notif-bell.has-unread { color: var(--text-primary); }
.notif-bell.has-unread .ic { transform-origin: 50% 2px; }
.notif-bell.is-open { background: var(--surface-active); color: var(--text-primary); }
@keyframes notif-ring { 0%, 100% { transform: none; } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.notif-bell__count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font: 600 11px/17px var(--font-sans);
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-app);
  pointer-events: none;
}
.notif-bell__count[hidden] { display: none; }

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  width: 400px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - var(--topbar-h) - 24px));
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  z-index: 60;
}
.notif-panel[hidden] { display: none; }
.notif-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 14px; background: var(--surface-head); border-bottom: 1px solid var(--border-default); }
.notif-panel__title { font: 600 14px/1.2 var(--font-sans); }
.notif-panel__sub { font: 400 12px/1.3 var(--font-sans); color: var(--text-muted); margin-top: 3px; }
.notif-readall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gold-300);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.notif-readall:hover { background: var(--accent-subtle); }
.notif-readall .ic { width: 14px; height: 14px; }
.notif-panel__list { overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.notif-panel__list .notif__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-panel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  border-top: 1px solid var(--border-subtle);
  font: 500 13px/1 var(--font-sans);
  color: var(--gold-300);
}
.notif-panel__foot:hover { background: var(--surface-hover); text-decoration: none; }
.notif-panel__foot .ic { width: 14px; height: 14px; }

.notif {
  --tone: var(--text-muted);
  --tone-bg: var(--surface-active);
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 30px 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.notif:hover { background: var(--surface-hover); text-decoration: none; color: var(--text-secondary); }
.notif:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--gold-400); }
.notif + .notif { margin-top: 2px; }
.notif--gold { --tone: var(--gold-300); --tone-bg: var(--accent-subtle); }
.notif--success { --tone: var(--success-fg); --tone-bg: var(--success-subtle); }
.notif--danger { --tone: var(--danger-fg); --tone-bg: var(--danger-subtle); }
.notif--warning { --tone: var(--warning-fg); --tone-bg: var(--warning-subtle); }
.notif--info { --tone: var(--info-fg); --tone-bg: var(--info-subtle); }
.notif__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--tone-bg); color: var(--tone); }
.notif__icon .ic { width: 16px; height: 16px; }
.notif__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.notif__title { font: 500 13px/1.35 var(--font-sans); color: var(--text-secondary); overflow-wrap: anywhere; }
.notif.is-unread .notif__title { font-weight: 600; color: var(--text-primary); }
.notif__body { font: 400 12px/1.45 var(--font-sans); color: var(--text-muted); overflow-wrap: anywhere; }
.notif__meta { font: 400 12px/1.3 var(--font-sans); color: var(--text-disabled); }
.notif__dot { position: absolute; top: 50%; right: 12px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 3px var(--accent-subtle); }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; color: var(--text-muted); font-size: 13px; }
.notif-empty .ic { width: 22px; height: 22px; }
.notif-page { padding: 6px; }
.notif-page .notif { padding: 14px 36px 14px 14px; }
.notif-page .notif__title { font-size: 14px; }
.notif-page .notif__body { font-size: 13px; }
.notif-page .notif + .notif { margin-top: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; }

@media (max-width: 900px) {
  .notif-panel { position: fixed; top: calc(var(--topbar-h) + 6px); left: 8px; right: 8px; width: auto; max-width: none; max-height: calc(100dvh - var(--topbar-h) - 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .notif-bell.has-unread .ic, .notif-panel { animation: none; }
}
.notif-panel__actions { display: flex; align-items: center; gap: 2px; }
.notif-panel__actions form { margin: 0; }
[data-notif-sound][aria-pressed="false"] { color: var(--text-disabled); }