.notification-trigger { position:relative; display:grid; place-items:center; flex-shrink:0; }
.notification-trigger svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notification-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:#ef4444; top:4px; right:4px; box-shadow:0 0 0 2px var(--surface); }
.notification-dot[hidden] { display:none; }
.notification-dialog { position:fixed; inset:76px 16px auto auto; margin:0; width:min(360px,calc(100vw - 24px)); max-height:calc(100dvh - 100px); padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); box-shadow:0 16px 50px #0005; }
.notification-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.notification-dialog::backdrop { background:#0003; }
.notification-dialog header { display:flex; align-items:center; justify-content:space-between; }
.notification-dialog h2 { font-size:16px; margin:0; }
.notification-dialog button { font:inherit; cursor:pointer; color:var(--text); }
.notification-close { border:1px solid var(--border); background:transparent; border-radius:7px; width:28px; height:28px; }
.notification-actions { display:flex; justify-content:space-between; gap:8px; }
.notification-actions button { border:0; background:transparent; padding:0; font-size:11px; }
.notification-actions button:disabled { opacity:.4; cursor:default; }
.notification-list { min-height:0; overflow:auto; display:grid; gap:7px; }
.notification-row { text-align:left; display:grid; gap:5px; padding:12px; border:1px solid var(--border); background:var(--surface-2); border-radius:9px; overflow-wrap:anywhere; }
.notification-row.unread { border-left:3px solid #ef4444; }
.notification-row strong { font-size:12px; }
.notification-row span { font-size:11px; line-height:1.5; }
.notification-row small,.notification-status,.notification-empty,.notification-device { font-size:10px; color:var(--muted); margin:0; }
.notification-status:empty { display:none; }
@media(max-width:600px) { .notification-dialog { inset:70px 12px auto auto; } }