.notification-popover{
  position:fixed;
  z-index:40;
  width:339px;
  height:653px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden;
  direction:rtl;
  color:#0a1f44;
  background:#fff;
  border-radius:16px;
  box-shadow:0 0 30px rgba(0,0,0,.07);
}
.notification-popover[hidden]{display:none}
.notification-popover.is-empty{height:225px;padding-bottom:32px;gap:32px}
.notification-header{height:25px;flex:none;display:flex;align-items:center;justify-content:space-between;line-height:normal;white-space:nowrap}
.notification-title{margin:0;font-size:16px;font-weight:600;color:#0a1f44}
.notification-read-all{padding:0;border:0;background:transparent;color:#635bff;font-size:14px;font-weight:500;line-height:normal}
.notification-read-all:disabled{visibility:hidden}
.notification-divider{height:1px;flex:none;background:#f1f2f4}
.notification-list{width:100%;height:564px;flex:none;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.notification-list::-webkit-scrollbar{display:none}
.notification-item{position:relative;width:100%;border-bottom:1px solid #f1f2f4;background:#fff}
.notification-item:last-child{border-bottom:0}
.notification-item.is-unread{background:#f8f9fb;border-radius:8px 8px 0 0}
.notification-item.is-collapsed{height:60px;padding:20px 8px}
.notification-item.is-collapsed.is-unread{height:52px;padding:16px 8px}
.notification-item.is-expanded{height:176px;padding:20px 8px;display:flex;flex-direction:column;gap:8px;align-items:stretch;justify-content:center}
.notification-item.is-invite{height:156px}
.notification-summary{width:100%;height:20px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.notification-main-button{min-width:0;padding:0;border:0;background:transparent;display:flex;align-items:center;gap:4px;direction:rtl;text-align:right;color:#0a1f44}
.notification-main-button strong{font-size:12px;font-weight:600;line-height:normal;white-space:nowrap}
.notification-item.is-expanded .notification-main-button strong{font-weight:700}
.notification-state-icon{width:20px;height:20px;flex:none;object-fit:contain}
.notification-meta{display:flex;align-items:center;gap:0;direction:ltr;flex:none}
.notification-item.is-invite .notification-meta{gap:4px}
.notification-more{width:20px;height:20px;padding:0;border:0;background:transparent;display:grid;place-items:center;flex:none}
.notification-more img{width:20px;height:20px;object-fit:contain}
.notification-time{font-size:12px;font-weight:500;line-height:normal;color:#8a94a6;white-space:nowrap;direction:rtl}
.notification-item.is-unread .notification-time{font-size:11px;font-weight:700}
.notification-description{margin:0;font-size:12px;font-weight:500;line-height:20px;color:#53627c;text-align:justify}
.notification-action{height:40px;flex:none;border:1px solid #635bff;border-radius:12px;background:#fff;color:#635bff;font-size:14px;font-weight:500;line-height:28px;padding:6px 16px;display:flex;align-items:center;justify-content:center}
.notification-invite-actions{display:flex;gap:8px;direction:ltr}
.notification-invite-actions .notification-action{flex:1}
.notification-action.is-accept{border-color:#4db757;color:#4db757}
.notification-action.is-reject{border-color:#f05b55;color:#f05b55}
.notification-menu{position:absolute;z-index:2;top:48px;left:8px;width:81px;height:34px;padding:8px;border:0;border-radius:8px;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:4px;color:#53627c;font-size:12px;font-weight:500;line-height:normal;white-space:nowrap}
.notification-menu img{width:16px;height:16px;object-fit:contain}
.notification-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.notification-empty img{width:75px;height:75px;object-fit:contain}
.notification-empty p{margin:0;color:#53627c;font-size:14px;font-weight:500;line-height:24px}
@media(max-width:420px){
  .toolbar #notificationButton{display:flex}
  .notification-popover{width:calc(100vw - 24px);max-width:339px;max-height:calc(100vh - 80px)}
  .notification-list{height:auto;min-height:0;flex:1}
}