/* Match the compact employee account drawer without changing notification behavior. */
@media screen and (max-width: 900px) {
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer {
        width: min(82vw, 336px) !important;
        max-width: 100% !important;
        border-radius: 22px 0 0 0 !important;
        animation-duration: 180ms;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer > header {
        min-height: 0 !important;
        padding: 16px 18px 12px !important;
        gap: 10px !important;
        align-items: start !important;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-drawer-title { grid-column: 1; grid-row: 1; gap: 4px; }
    html body .page:has(.employee-mobile-tabbar) .notification-panel .notification-drawer-title strong { font-size: 16px !important; line-height: 1.35 !important; }
    html body .page:has(.employee-mobile-tabbar) .notification-drawer-title > span { font-size: 11px !important; line-height: 1.45 !important; }
    html body .page:has(.employee-mobile-tabbar) .notification-drawer-actions { display: contents !important; }
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-mark-all {
        grid-column: 1; grid-row: 2; justify-self: start;
        min-height: 34px !important; padding: 6px 10px !important;
        font-size: 11px !important; border-radius: 8px !important;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-drawer-close {
        grid-column: 2; grid-row: 1;
        width: 34px !important; height: 34px !important;
        min-width: 34px !important; min-height: 34px !important;
        border-radius: 10px !important;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-list {
        gap: 6px !important;
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom)) !important;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-list .notification-item {
        min-height: 0 !important; padding: 11px 12px !important;
        gap: 4px !important; border-radius: 10px !important;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-panel .notification-list .notification-item strong { font-size: 12px !important; line-height: 1.4 !important; }
    html body .page:has(.employee-mobile-tabbar) .notification-panel .notification-list .notification-item span { font-size: 11px !important; line-height: 1.5 !important; }
    html body .page:has(.employee-mobile-tabbar) .notification-panel .notification-list .notification-item small { font-size: 10px !important; line-height: 1.4 !important; margin-top: 2px; }
    html body .page:has(.employee-mobile-tabbar) .notification-panel.notification-drawer .notification-empty {
        margin: 12px !important; padding: 16px 12px !important; gap: 5px;
        border-radius: 10px; font-size: 11px !important;
    }
    html body .page:has(.employee-mobile-tabbar) .notification-panel .notification-empty strong { font-size: 12px !important; }
    html body .page:has(.employee-mobile-tabbar) .notification-panel .notification-empty span { font-size: 11px !important; line-height: 1.5; }
}