/* =========================================================
   BPP / REAL PROPERTY GURU — M21 HEADER COMMUNICATION CENTER
   Desktop: Messenger + Notifications + enhanced Logout.
   Requires/extends M20 account panel but degrades safely.
   ========================================================= */

@media (min-width:1101px){
    .bpp-m21-header-tools{
        display:inline-flex!important;
        align-items:center!important;
        gap:7px!important;
        margin:0 6px!important;
        vertical-align:middle!important;
    }

    .bpp-m21-tool{
        position:relative!important;
        width:36px!important;
        height:36px!important;
        min-width:36px!important;
        display:inline-grid!important;
        place-items:center!important;
        padding:0!important;
        margin:0!important;
        border:1px solid rgba(218,232,224,.78)!important;
        border-radius:11px!important;
        background:rgba(255,255,255,.10)!important;
        color:inherit!important;
        cursor:pointer!important;
        text-decoration:none!important;
        box-shadow:none!important;
        transition:
            transform .14s ease,
            background-color .14s ease,
            border-color .14s ease,
            box-shadow .14s ease!important;
    }

    .rpg-market-topbar .bpp-m21-tool,
    .rpgx-topbar .bpp-m21-tool{
        border-color:rgba(255,255,255,.20)!important;
        background:rgba(255,255,255,.07)!important;
        color:#e8f5ef!important;
    }

    .bpp-m21-tool:hover,
    .bpp-m21-tool:focus-visible,
    .bpp-m21-tool[aria-expanded="true"]{
        transform:translateY(-1px)!important;
        border-color:rgba(78,197,130,.55)!important;
        background:rgba(25,181,103,.17)!important;
        box-shadow:0 8px 20px rgba(3,58,42,.13)!important;
        outline:none!important;
    }

    .bpp-m21-tool svg{
        width:19px!important;
        height:19px!important;
        display:block!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.9!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }

    .bpp-m21-count{
        position:absolute!important;
        top:-6px!important;
        right:-6px!important;
        min-width:19px!important;
        height:19px!important;
        display:none!important;
        place-items:center!important;
        padding:0 5px!important;
        border:2px solid #fff!important;
        border-radius:999px!important;
        background:#e33f3f!important;
        color:#fff!important;
        font-size:12px!important;
        line-height:1!important;
        font-weight:800!important;
        box-shadow:0 3px 10px rgba(126,25,25,.20)!important;
    }

    .rpg-market-topbar .bpp-m21-count,
    .rpgx-topbar .bpp-m21-count{
        border-color:#034b37!important;
    }

    .bpp-m21-count.is-visible{
        display:grid!important;
    }

    .bpp-m21-popover{
        --m21-green:#078e48;
        --m21-dark:#034b37;
        --m21-ink:#1b2721;
        --m21-muted:#708078;
        --m21-line:#dfe9e3;

        position:fixed!important;
        z-index:15120!important;
        display:none!important;
        width:328px!important;
        max-width:calc(100vw - 24px)!important;
        overflow:hidden!important;
        border:1px solid var(--m21-line)!important;
        border-radius:17px!important;
        background:#fff!important;
        color:var(--m21-ink)!important;
        box-shadow:0 24px 70px rgba(3,58,42,.24)!important;
        font-family:"Inter",Arial,sans-serif!important;
        font-size:13px!important;
        line-height:1.4!important;
        transform-origin:top right!important;
    }

    .bpp-m21-popover.is-open{
        display:block!important;
        animation:bppM21Pop .14s ease-out both!important;
    }

    @keyframes bppM21Pop{
        from{opacity:0;transform:translateY(-5px) scale(.985)}
        to{opacity:1;transform:translateY(0) scale(1)}
    }

    .bpp-m21-pop-head{
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:12px!important;
        padding:14px 15px!important;
        color:#fff!important;
        background:
            radial-gradient(circle at 95% 0,rgba(63,207,126,.28),transparent 37%),
            linear-gradient(135deg,#034b37,#08734b)!important;
    }

    .bpp-m21-pop-head strong{
        color:#fff!important;
        font-size:15px!important;
        line-height:1.2!important;
        font-weight:800!important;
    }

    .bpp-m21-pop-head span{
        color:#d1eadf!important;
        font-size:12px!important;
        font-weight:600!important;
    }

    .bpp-m21-pop-body{
        padding:8px!important;
        background:#fff!important;
    }

    .bpp-m21-summary{
        display:flex!important;
        align-items:center!important;
        gap:11px!important;
        min-height:58px!important;
        padding:10px!important;
        border-radius:11px!important;
        color:#223029!important;
        text-decoration:none!important;
        transition:background-color .13s ease,transform .13s ease!important;
    }

    .bpp-m21-summary:hover,
    .bpp-m21-summary:focus-visible{
        background:#f1f8f4!important;
        transform:translateX(2px)!important;
        outline:none!important;
    }

    .bpp-m21-summary + .bpp-m21-summary{
        border-top:1px solid #edf2ef!important;
        border-radius:0 0 11px 11px!important;
    }

    .bpp-m21-summary-icon{
        width:39px!important;
        height:39px!important;
        flex:0 0 39px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:11px!important;
        background:#edf8f2!important;
        color:#078e48!important;
    }

    .bpp-m21-summary-icon.is-amber{
        background:#fff5df!important;
        color:#b87a06!important;
    }

    .bpp-m21-summary-icon.is-blue{
        background:#edf5ff!important;
        color:#2673c8!important;
    }

    .bpp-m21-summary-icon.is-purple{
        background:#f4efff!important;
        color:#7655c5!important;
    }

    .bpp-m21-summary-icon svg{
        width:19px!important;
        height:19px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.9!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }

    .bpp-m21-summary-copy{
        min-width:0!important;
        flex:1 1 auto!important;
    }

    .bpp-m21-summary-copy strong{
        display:block!important;
        margin:0 0 2px!important;
        color:#1e2b25!important;
        font-size:13px!important;
        line-height:1.3!important;
        font-weight:750!important;
    }

    .bpp-m21-summary-copy small{
        display:block!important;
        overflow:hidden!important;
        color:#77857e!important;
        font-size:12px!important;
        line-height:1.35!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }

    .bpp-m21-summary-number{
        min-width:27px!important;
        height:27px!important;
        display:grid!important;
        place-items:center!important;
        padding:0 6px!important;
        border-radius:999px!important;
        background:#eaf7ef!important;
        color:#087b45!important;
        font-size:12px!important;
        font-weight:800!important;
    }

    .bpp-m21-empty{
        padding:27px 16px!important;
        text-align:center!important;
        color:#738179!important;
        font-size:13px!important;
    }

    .bpp-m21-pop-footer{
        padding:9px!important;
        border-top:1px solid #e6eee9!important;
        background:#f8fbf9!important;
    }

    .bpp-m21-pop-footer a{
        min-height:39px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        border-radius:10px!important;
        background:#078e48!important;
        color:#fff!important;
        text-decoration:none!important;
        font-size:12px!important;
        font-weight:800!important;
    }

    /* Replace the old dashboard bell shortcut with the M21 communication center. */
    #modern-green-app .top .actions > a.icon[href*="/account/messages"],
    #modern-green-app .top-actions > a.icon[href*="/account/messages"]{
        display:none!important;
    }

    /* M20 Account Panel — make Logout a full stylish tab. */
    .bpp-m20-panel-footer{
        grid-template-columns:1fr!important;
        gap:8px!important;
    }

    .bpp-m20-panel-footer form,
    .bpp-m20-logout{
        width:100%!important;
    }

    .bpp-m20-logout{
        min-height:41px!important;
        justify-content:flex-start!important;
        padding:0 14px!important;
        border:1px solid #edd5d1!important;
        background:#fff8f7!important;
        color:#b53c34!important;
        box-shadow:none!important;
        transition:
            transform .14s ease,
            background-color .14s ease,
            border-color .14s ease,
            box-shadow .14s ease,
            color .14s ease!important;
    }

    .bpp-m20-logout:hover,
    .bpp-m20-logout:focus-visible{
        transform:translateX(3px)!important;
        border-color:#eaa9a1!important;
        background:#ffebe8!important;
        color:#a72e26!important;
        box-shadow:0 7px 18px rgba(181,60,52,.10)!important;
        outline:none!important;
    }

    /* Existing dashboard sidebar logout receives matching hover treatment. */
    #modern-green-app .rpg69-logout-button{
        transition:
            transform .14s ease,
            background-color .14s ease,
            border-color .14s ease,
            color .14s ease!important;
    }

    #modern-green-app .rpg69-logout-button:hover,
    #modern-green-app .rpg69-logout-button:focus-visible{
        transform:translateX(3px)!important;
        background:#ffe9e6!important;
        border-color:#ebb0a9!important;
        color:#a82f27!important;
        outline:none!important;
    }
}

/* M21 does not alter the mobile/tablet header work. */
@media (max-width:1100px){
    .bpp-m21-header-tools,
    .bpp-m21-popover{
        display:none!important;
    }
}