.notif-wrap { position: relative; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(22rem, calc(100vw - 2rem));
  max-height: 70vh; overflow-y: auto; border-radius: 14px; border: 1px solid rgb(var(--c-line, 231 229 228));
  background: rgb(var(--c-card, 255 255 255)); color: rgb(var(--c-ink, 28 25 23)); box-shadow: 0 18px 40px -12px rgba(0,0,0,.25);
  font-size: 14px; text-align: left; }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgb(var(--c-line, 231 229 228)); }
.notif-head a { font-size: 12px; color: #0f766e; text-decoration: none; }
.notif-head a:hover { text-decoration: underline; }
.notif-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; color: inherit; text-decoration: none; border-bottom: 1px solid rgb(var(--c-line, 231 229 228) / .6); }
.notif-item:last-child { border-bottom: 0; }
a.notif-item:hover { background: rgb(var(--c-paper, 250 250 249)); }
.notif-item.is-unread { box-shadow: inset 3px 0 0 #0d9488; }
.notif-msg { line-height: 1.35; }
.notif-time { font-size: 11px; opacity: .6; }
.notif-empty { padding: 20px 16px; text-align: center; opacity: .7; margin: 0; }