/* Notifications (see notify.js): bell + badge in the top bar, side sheet, snackbar. */
.bell { margin-left: auto; position: relative }
.badge-n { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 500; background: var(--error); color: var(--on-error) }
.scrim { position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s }
.scrim.open { opacity: 1; pointer-events: auto }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(100%, 360px); display: flex; flex-direction: column; background: var(--surface-container-low); box-shadow: var(--e2); transform: translateX(100%); transition: transform .25s }
.sheet.open { transform: none }
.sheet-head { display: flex; align-items: center; gap: 4px; padding: 12px 8px 8px 20px } .sheet-head h2 { flex: 1 }
.sheet-list { overflow-y: auto; padding: 0 8px 16px }
.sheet-list .label { padding: 12px 12px 4px; color: var(--on-surface-variant) }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px 10px 12px; border-radius: 12px }
.notif.unread { background: var(--secondary-container); color: var(--on-secondary-container) }
.notif.unread .muted { color: inherit; opacity: .8 }
.notif .app-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-size: 20px; background: var(--surface-container-highest); color: var(--primary); font-variation-settings: 'FILL' 1 }
.notif-body { flex: 1; min-width: 0; font-size: 13px } .notif-title { font-weight: 500; font-size: 14px }
.sheet-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px } .sheet-empty .ms { font-size: 40px }
.snack { position: fixed; left: 50%; bottom: 24px; z-index: 21; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(90vw, 480px); padding: 6px 8px 6px 16px; border-radius: 4px; background: var(--inverse-surface); color: var(--inverse-on-surface); box-shadow: var(--e2) }
.snack .btn.text { color: var(--inverse-primary) }
@media (min-width: 1200px) { /* standard (docked) side sheet: pushes the page instead of covering it */
  .scrim { display: none }
  .sheet { top: 64px; box-shadow: none; border-left: 1px solid var(--outline-variant); transition: none }
  main { transition: margin-right .25s }
  body.sheet-open main { margin-right: 360px }
}