.notification-bell{position:relative}.notification-bell-trigger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #ddd;border-radius:10px;background:#fff;cursor:pointer;position:relative}.notification-bell-trigger svg{width:21px;height:21px}.notification-count{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#7a287d;color:#fff;font-size:11px;line-height:20px;font-weight:700}.notification-dropdown{position:absolute;right:0;top:calc(100% + 9px);width:min(390px,calc(100vw - 24px));max-height:min(570px,calc(100vh - 90px));overflow:auto;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.16);z-index:1000}.notification-dropdown[hidden]{display:none}.notification-dropdown-head,.notification-dropdown-foot{padding:12px 14px;border-bottom:1px solid #eee}.notification-dropdown-foot{border-top:1px solid #eee;border-bottom:0;text-align:center}.notification-dropdown-list{display:flex;flex-direction:column}.notification-dropdown-item{display:block;padding:12px 14px;border-bottom:1px solid #eee;color:inherit;text-decoration:none}.notification-dropdown-item.is-unread{background:#faf5fb}.notification-dropdown-item strong{display:block;margin-bottom:4px}.notification-dropdown-item small{display:block;color:#666}.notification-dropdown-empty{padding:18px 14px;color:#666}
.notification-card-main{min-width:0}.notification-warning{margin-bottom:14px}
@media(max-width:700px){.notification-dropdown{position:fixed;right:12px;left:12px;top:64px;width:auto;max-height:calc(100vh - 82px)}}

/* AICS mobile notification badge visibility fix — 2026-08-19.
 * Legacy app.css hides .top-actions span:not(.badge) below 820px, which also
 * catches the notification-count span. Keep the real unread count visible
 * on the shared authenticated header for every role/account type. */
@media (max-width: 820px) {
  .top-actions .notification-bell .notification-bell-trigger .notification-count {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}