.notif{position:static;display:flex;align-items:center}.shell-bar>.menu-button+.shell-panel+.notif{margin-left:0}.notif-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--touch-target);height:var(--touch-target);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);cursor:pointer}.notif-button:hover{background:var(--color-surface-2)}.notif-button[aria-expanded=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}.notif-badge{position:absolute;top:-6px;right:-6px;min-width:1.35rem;height:1.35rem;padding:0 .3rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-danger);color:var(--color-accent-contrast);border:2px solid var(--color-surface);font-size:var(--text-xs);font-weight:700;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.notif-panel:not([hidden]){position:fixed;top:var(--header-height);left:0;right:0;z-index:110;display:flex;flex-direction:column;max-height:calc(100dvh - var(--header-height));background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-md);overflow:hidden}.notif-panel:focus{outline:none}.notif-foot,.notif-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-4)}.notif-head{border-bottom:1px solid var(--color-border)}.notif-foot{border-top:1px solid var(--color-border);justify-content:center}.notif-title{margin:0;font-size:var(--text-md);font-weight:700}.notif-all,.notif-link-button{display:inline-flex;align-items:center;min-height:var(--touch-target);padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);background:none;color:var(--color-accent);font:inherit;font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer}.notif-all:hover,.notif-link-button:hover:not(:disabled){text-decoration:underline}.notif-link-button:disabled{color:var(--color-text-muted);cursor:default}.notif-list{margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain}.notif-list li+li{border-top:1px solid var(--color-border)}.notif-item{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--touch-target);padding:var(--space-3) var(--space-4);color:var(--color-text);text-decoration:none}.notif-item:hover{background:var(--color-surface-2)}.notif-item[data-unread=true]{background:var(--color-accent-soft)}.notif-item[data-unread=true]:hover{background:var(--color-surface-2)}.notif-dot{flex:none;width:.5rem;height:.5rem;margin-top:.45rem;border-radius:var(--radius-full);background:transparent}.notif-item[data-unread=true] .notif-dot{background:var(--color-accent)}.notif-text{display:flex;flex-direction:column;gap:2px;min-width:0}.notif-item-title{font-weight:600;overflow-wrap:anywhere}.notif-item[data-unread=true] .notif-item-title{font-weight:700}.notif-item-body{font-size:var(--text-sm);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif-item-body,.notif-time{color:var(--color-text-muted)}.notif-time{font-size:var(--text-xs)}.notif-empty{margin:0;padding:var(--space-6) var(--space-4);text-align:center;color:var(--color-text-muted)}@media (min-width:960px){.notif{position:relative}.notif-panel:not([hidden]){position:absolute;top:calc(100% + var(--space-2));left:auto;right:0;width:24rem;max-height:min(32rem,calc(100dvh - var(--header-height) - var(--space-6)));border:1px solid var(--color-border);border-radius:var(--radius-lg)}}