dialog.notification-drawer{
  position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;border-left:1px solid var(--approved-line,#35404d);
  width:min(460px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;min-height:0;
  box-sizing:border-box;place-items:normal;align-items:stretch;background:var(--approved-bg,#101419);color:var(--approved-ink,#f0f2f5);
  box-shadow:-16px 0 48px rgba(0,0,0,.25);overflow:hidden;
}
dialog.notification-drawer[open]{display:flex;flex-direction:column;animation:notification-drawer-enter .24s ease-out both}
dialog.notification-drawer.is-closing{animation:notification-drawer-exit .2s ease-in both}
dialog.notification-drawer::backdrop{background:rgba(0,0,0,.48)}
.notification-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 16px 18px;border-bottom:1px solid var(--approved-line,#35404d);flex:0 0 auto}
.notification-drawer-header h2{font-size:22px;line-height:1.3;margin:0;overflow-wrap:anywhere}
.notification-drawer-header .close{flex:0 0 44px;width:44px;height:44px;min-height:44px}
.notification-drawer-scroll{flex:1 1 0%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:16px max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 18px;scrollbar-gutter:stable}
.notification-drawer-tools{display:grid;margin-bottom:16px}
.notification-drawer-tools .btn{white-space:normal;min-width:0}
.notification-drawer-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.notification-drawer-filters .filter{font-size:13px;padding:10px 13px;white-space:normal;min-width:0}
.notification-drawer-list{display:grid;gap:12px}
.notification-drawer-list .notification{display:grid;grid-template-columns:36px minmax(0,1fr)!important;align-items:start!important;width:100%;min-width:0;box-sizing:border-box;padding:16px!important;text-align:left;gap:10px;white-space:normal;cursor:pointer}
.notification-drawer-copy{display:grid;gap:7px;min-width:0;overflow-wrap:anywhere}
.notification-drawer-copy b{font-size:15px;line-height:1.4}
.notification-drawer-copy>span{font-size:14px;line-height:1.5;color:var(--approved-muted,#a1adbb)}
.notification-drawer-copy small{font-size:12px;color:var(--approved-muted,#a1adbb)}
.notification-drawer-note{padding:12px;border:1px solid var(--approved-line,#35404d);border-radius:12px;line-height:1.5;overflow-wrap:anywhere}
.notification-drawer [data-drawer-update]{margin-bottom:14px;white-space:normal}
.notification-drawer-settings{border-top:1px solid var(--approved-line,#35404d);margin-top:22px;padding-top:18px}
.notification-drawer-settings summary{cursor:pointer;font-weight:700;min-height:40px}
.notification-drawer-settings>div{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.notification-drawer-settings .btn{flex:1 1 140px;min-width:0;white-space:normal}
.notification-drawer [hidden]{display:none!important}
@keyframes notification-drawer-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes notification-drawer-exit{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){dialog.notification-drawer[open],dialog.notification-drawer.is-closing{animation:none}}
@media(max-width:380px){.notification-drawer-header h2{font-size:20px}.notification-drawer-scroll{padding-left:12px;padding-right:12px}}