.notifications-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgb(15 23 42 / 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.notifications-overlay[data-open] {
    opacity: 1;
    pointer-events: auto;
}

.notifications-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    width: min(22rem, 92vw);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.3s ease;
}

.notifications-drawer[data-open] {
    transform: translateX(0);
    pointer-events: auto;
}

.notifications-drawer [data-notifications-list] {
    -webkit-overflow-scrolling: touch;
}

.notifications-item {
    display: flex;
    gap: 0.75rem;
    border-radius: 1rem;
    padding: 0.75rem;
    transition: background-color 0.2s ease;
}

.notifications-item--unread {
    background: color-mix(in srgb, var(--color-brand, #059669) 12%, transparent);
}

.notifications-item__icon {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.notifications-item__icon--info {
    background: color-mix(in srgb, var(--color-brand, #059669) 15%, transparent);
    color: var(--color-brand-dark, #047857);
}

.notifications-item__icon--success {
    background: rgb(16 185 129 / 0.15);
    color: rgb(4 120 87);
}

.notifications-item__icon--warning {
    background: rgb(245 158 11 / 0.15);
    color: rgb(180 83 9);
}

.notifications-item__icon--tip {
    background: rgb(14 165 233 / 0.15);
    color: rgb(3 105 161);
}

.notifications-item__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink, #0f172a);
}

.notifications-item__meta {
    margin-top: 0.125rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--color-muted, #64748b);
}

.notifications-item__body {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-muted, #64748b);
}

.notifications-item__actions {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.notifications-drawer-open {
    overflow: hidden;
}

body.notifications-drawer-open main {
    filter: blur(2px);
    transition: filter 0.25s ease;
}