/* =========================================================
   BSOURIA V65 — MOBILE NOTIFICATION PANEL FIX
   Keeps the notification dropdown fully inside the phone viewport.
   ========================================================= */
@media (max-width: 700px) {
    .user-notification-dropdown {
        position: static !important;
    }

    .user-notification-panel {
        position: fixed !important;
        inset-inline: auto !important;
        top: var(--mobile-notification-top, 74px) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - var(--mobile-notification-top, 74px) - 10px) !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        z-index: 5000 !important;
        overscroll-behavior: contain;
    }

    .user-notification-head {
        gap: 10px !important;
        padding: 13px 14px 12px !important;
    }

    .user-notification-head > div,
    .user-notification-item > div {
        min-width: 0 !important;
    }

    .user-notification-head a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .user-notification-list {
        max-height: calc(100dvh - var(--mobile-notification-top, 74px) - 126px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .user-notification-item {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 10px !important;
        padding: 12px 13px !important;
    }

    .user-notification-item > span {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .user-notification-item strong,
    .user-notification-item p {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    html.notification-panel-open,
    html.notification-panel-open body {
        overflow-x: hidden !important;
    }
}