/* ── Notification sheet — full-screen dim + bottom sheet (portaled to body) ── */

body.notification-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.notification-sheet-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1280;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.notification-sheet-layer .notification-panel,
.notification-sheet-layer .notification-panel-pro {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    min-height: min(320px, 52dvh);
}

.notification-sheet-layer .notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: notificationBackdropIn 0.26s ease forwards;
}

.notification-sheet-layer .notification-backdrop.is-guarded {
    pointer-events: none;
}

@keyframes notificationBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.notification-sheet-layer .notification-panel {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.92) inset,
        0 -12px 48px rgba(15, 23, 42, 0.22),
        0 32px 80px rgba(15, 23, 42, 0.28);
    animation: notificationSheetUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes notificationSheetUp {
    from {
        opacity: 0.85;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop: لوحة منبثقة أعلى اليمين */
@media (min-width: 1025px) and (pointer: fine) {
    .notification-sheet-layer {
        align-items: flex-start;
        justify-content: flex-start;
        padding: calc(var(--mobile-header-h, 56px) + 8px) 16px 16px;
    }

    .notification-sheet-layer .notification-panel,
    .notification-sheet-layer .notification-panel-pro {
        position: fixed !important;
        top: calc(var(--mobile-header-h, 56px) + 8px) !important;
        left: 16px !important;
        right: auto !important;
        bottom: auto !important;
        width: min(520px, calc(100vw - 32px));
        max-height: min(78vh, 640px);
        min-height: 280px;
        border-radius: 18px;
        animation: notificationDropIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes notificationDropIn {
        from {
            opacity: 0;
            transform: translateY(-12px) scale(0.97);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* Tablet / mobile: bottom sheet */
@media (max-width: 1024px), (pointer: coarse) {
    .notification-sheet-layer .notification-panel,
    .notification-sheet-layer .notification-panel-pro {
        width: 100%;
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: min(82dvh, 680px);
        margin-bottom: calc(var(--mobile-bottom-nav-h, 62px) + var(--safe-bottom, 0px));
    }

    .notification-sheet-layer .notification-panel-pro::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.5);
        flex-shrink: 0;
    }
}

@media (max-width: 767px) {
    .notification-sheet-layer .notification-panel,
    .notification-sheet-layer .notification-panel-pro {
        border-radius: 18px 18px 0 0;
        max-height: min(85dvh, 720px);
    }
}

.notification-btn.is-open {
    background: linear-gradient(135deg, #ecfeff 0%, #ccfbf1 100%) !important;
    border-color: rgba(13, 148, 136, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18) !important;
}

.notification-panel-header {
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}

.notification-item:active {
    background: #f0fdfa;
}