/* Neutral inbox surfaces in the member header and legacy/admin navigation. */
body :is(.p2d-notification-panel, .p2d-legacy-notifications, .p2d-legacy-notifications .p2d-dropdown-panel) {
    --notification-surface: #090909;
    --notification-divider: #292929;
}
body .p2d-notification-panel,
body .p2d-legacy-notifications .p2d-dropdown-panel,
body .p2d-notification-panel .ep-popover-heading,
body .p2d-legacy-notifications .p2d-dropdown-panel > div:first-child {
    background: #090909 !important;
}
body :is(.p2d-notification-panel, .p2d-legacy-notifications) .ep-notification-date { background: #181818; }
body :is(.p2d-notification-panel, .p2d-legacy-notifications) .ep-notification-item.is-unread { background: #111111; }
body :is(.p2d-notification-panel, .p2d-legacy-notifications) a.ep-notification-item:hover { background: #1b1b1b; }
/* The details content box can be only the bell's width on mobile. Size the
   fixed inbox against the viewport instead of that shrink-wrapped box. */
body.earn-page #ep-notification-panel {
    width: min(420px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}
body.earn-page .ep-disclosure.ep-notifications::details-content,
body.earn-page .ep-disclosure.ep-notifications[open]::details-content {
    transform: none !important;
    translate: none !important;
    transition: none !important;
}

/* Keep mobile drawer geometry stable throughout enter, exit, and reversal. */
body.earn-page .ep-sidebar-backdrop { display: none; }
@media (max-width: 768px) {
    body.earn-page #ep-notification-panel {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
    body.earn-page .ep-app-sidebar {
        width: 260px !important;
        max-width: calc(100vw - 48px);
        transform: translate3d(-100%, 0, 0);
        visibility: hidden;
        transition: transform 210ms cubic-bezier(.2, .75, .2, 1), visibility 0s linear 210ms;
        will-change: transform;
        contain: layout paint;
        backface-visibility: hidden;
    }
    body.earn-page .ep-app-sidebar.ep-drawer--open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        transition-delay: 0s;
    }
    body.earn-page .ep-sidebar-backdrop {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: rgb(0 0 0 / 70%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: opacity 180ms ease, visibility 0s linear 180ms;
    }
    body.earn-page .ep-sidebar-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }
    body.earn-page .ep-app-main { transition: none; }
    body.earn-page :is(.ep-header-mobile-toggle, .ep-sidebar-close-btn) { touch-action: manipulation; }
    body.earn-page .ep-sidebar-nav { overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) {
    body.earn-page :is(.ep-app-sidebar, .ep-sidebar-backdrop) { transition: none !important; }
}