/* Account and notifications share menu placement and readable surfaces. */
#nav-profile-popup, #notif-panel {
  position: fixed; width: min(360px, calc(100vw - 24px)); max-height: min(70dvh, 520px);
  overflow-y: auto; padding: 8px; background: var(--gobbo-surface);
  color: var(--gobbo-text); border: 1px solid var(--gobbo-border); z-index: 13001;
}
#nav-profile-popup { box-sizing: border-box; }
#nav-profile-popup .nppm-item { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: inherit; text-align: left; }
#nav-profile-popup .nppm-item:hover { background: var(--gobbo-surface-raised); color: var(--gobbo-accent); }
#nav-profile-popup .nppm-admin, .account-resources { border-top: 1px solid var(--gobbo-border); }
.account-resources summary { padding: 8px 12px; cursor: pointer; }
.account-resources a { display: block; padding: 8px 12px; }
.notif-overlay { position: fixed; inset: 0; background: #0003; z-index: 13000; }
.notif-panel { display: flex; flex-direction: column; }
.notif-panel-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--gobbo-border); }
.notif-panel-title { flex: 1 0 100%; }
.notif-close-btn { position: absolute; right: 0; top: 0; }
.notif-list { overflow-y: auto; min-height: 0; }
.notif-empty { padding: 24px 12px; text-align: center; color: var(--gobbo-muted); }
.notif-item { display: flex; align-items: start; gap: 12px; padding: 12px; border-bottom: 1px solid var(--gobbo-border); }
.notif-item.notif-clickable { cursor: pointer; }
.notif-item:is(:hover, .notif-unread) { background: var(--gobbo-surface-raised); }
.notif-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notif-msg { font-weight: bold; }
.notif-desc, .notif-time { color: var(--gobbo-muted); }
.notif-icon, .notif-arrow, .notif-dot { flex-shrink: 0; }
.notif-dot { width: 8px; height: 8px; background: var(--gobbo-accent); margin-top: 8px; }
.notif-delete-btn, .notif-delete-all-btn { color: var(--gobbo-danger); }
.notif-badge { position: absolute; top: 0; right: 0; padding: 1px 4px; background: var(--gobbo-accent); color: #111; font-size: .7rem; line-height: 1.2; }
@media (max-width: 768px) {
  #notif-panel {
    inset: auto 12px calc(var(--nav-h) + 8px); width: auto;
    max-height: min(65dvh, calc(100dvh - var(--header-h) - var(--nav-h) - 24px));
  }
}