/**
 * =====================================================
 * XPZone Notification Media — Fixed 1:1
 * =====================================================
 *
 * ألصق هذا الملف بعد header.css،
 * أو انسخ محتواه إلى نهاية css/header.css.
 */

.notification-item-media,
.notification-ui-toast-media {
    position: relative;

    width: 44px;
    height: 44px;
    aspect-ratio: 1 / 1;

    flex: 0 0 44px;

    overflow: hidden;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(0, 229, 255, 0.2);

    border-radius: 12px;

    background:
        rgba(0, 229, 255, 0.07);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035);
}


.notification-item-media-image,
.notification-ui-toast-media-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;

    display: block;

    object-fit: contain;
    object-position: center;

    padding: 3px;
}


.notification-item-media[
    data-media-kind="avatar"
]
.notification-item-media-image,
.notification-item-media[
    data-media-kind="profileBackground"
]
.notification-item-media-image,
.notification-ui-toast-media[
    data-media-kind="avatar"
]
.notification-ui-toast-media-image,
.notification-ui-toast-media[
    data-media-kind="profileBackground"
]
.notification-ui-toast-media-image {
    padding: 0;

    object-fit: cover;
}


.notification-item-media[
    data-media-kind="avatarFrame"
]
.notification-item-media-image,
.notification-item-media[
    data-media-kind="achievement"
]
.notification-item-media-image,
.notification-ui-toast-media[
    data-media-kind="avatarFrame"
]
.notification-ui-toast-media-image,
.notification-ui-toast-media[
    data-media-kind="achievement"
]
.notification-ui-toast-media-image {
    object-fit: contain;
}


.notification-item-media-fallback,
.notification-ui-toast-media-fallback {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    font-size: 18px;
    line-height: 1;
}


.notification-item-media-image[hidden],
.notification-ui-toast-media-image[hidden],
.notification-item-media-fallback[hidden],
.notification-ui-toast-media-fallback[hidden] {
    display: none !important;
}


.notification-item {
    align-items: center;
}


.notification-ui-toast-media {
    width: 42px;
    height: 42px;
    flex-basis: 42px;

    border-color:
        rgba(var(--toast-accent), 0.42);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.18),
            rgba(var(--toast-accent), 0.10) 48%,
            rgba(3, 10, 26, 0.52)
        );

    box-shadow:
        0 0 0 4px rgba(var(--toast-accent), 0.06),
        0 7px 18px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}


@media (max-width: 620px) {

    .notification-item-media {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }


    .notification-ui-toast-media {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

}


/* =====================================================
 * XPZone Notification Toast v1.2
 * تثبيت الإشعارات داخل نافذة المتصفح
 * ===================================================== */

#notification-ui-toast-container,
.notification-ui-toast-container {
    position:
        fixed !important;

    z-index:
        100000 !important;

    top:
        auto !important;

    right:
        max(
            16px,
            env(safe-area-inset-right)
        ) !important;

    bottom:
        max(
            16px,
            env(safe-area-inset-bottom)
        ) !important;

    left:
        auto !important;

    width:
        min(
            430px,
            calc(100vw - 32px)
        );

    max-height:
        calc(100dvh - 32px);

    margin:
        0 !important;

    padding:
        0 !important;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    align-items:
        stretch;

    direction:
        rtl;

    pointer-events:
        none;

    overscroll-behavior:
        contain;
}


.notification-ui-toast {
    --toast-accent: 0, 229, 255;

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    max-height:
        104px;

    margin:
        0;

    padding:
        12px;

    display:
        grid;

    grid-template-columns:
        42px minmax(0, 1fr) 28px;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid transparent;

    border-radius:
        22px;

    color:
        #f8fafc;

    background:
        linear-gradient(
            145deg,
            rgba(12, 27, 55, 0.97),
            rgba(5, 12, 30, 0.985)
        ) padding-box,
        linear-gradient(
            120deg,
            rgba(var(--toast-accent), 0.70),
            rgba(255, 255, 255, 0.12) 44%,
            rgba(var(--toast-accent), 0.18)
        ) border-box;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(var(--toast-accent), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    pointer-events:
        auto;

    overflow:
        hidden;

    isolation:
        isolate;

    animation:
        xpzone-toast-enter 0.42s
        cubic-bezier(0.2, 0.9, 0.24, 1.18)
        both;
}


.notification-ui-toast.success {
    --toast-accent: 74, 222, 128;
}


.notification-ui-toast.error {
    --toast-accent: 248, 113, 113;
}


.notification-ui-toast.warning {
    --toast-accent: 250, 204, 21;
}


.notification-ui-toast::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset-block: 13px;
    inset-inline-start: 0;

    width: 3px;

    border-radius: 999px;

    background:
        rgb(var(--toast-accent));

    box-shadow:
        0 0 14px rgba(var(--toast-accent), 0.75);
}


.notification-ui-toast::after {
    content: "";

    position: absolute;
    inset: -80% -35%;

    background:
        linear-gradient(
            105deg,
            transparent 42%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 58%
        );

    transform: translateX(-38%);
    pointer-events: none;
    animation: xpzone-toast-sheen 0.85s 0.08s ease-out both;
}


.notification-ui-toast-content {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    text-align:
        right;
}


.notification-ui-toast-title {
    overflow:
        hidden;

    color:
        #ffffff;

    font-size:
        0.86rem;

    font-weight:
        900;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.notification-ui-toast-message {
    overflow:
        hidden;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow-wrap:
        anywhere;

    color:
        #dbeafe;

    font-size:
        0.79rem;

    line-height:
        1.65;
}


.notification-ui-toast-close {
    width:
        30px;

    height:
        30px;

    margin:
        0;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    align-self:
        start;

    border:
        1px solid rgba(148, 163, 184, 0.18);

    border-radius:
        50%;

    color:
        #cbd5e1;

    background:
        rgba(30, 41, 59, 0.60);

    font-size:
        18px;

    line-height:
        1;

    cursor:
        pointer;
}


.notification-ui-toast-progress {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 0;
    left: 18px;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(var(--toast-accent), 0.28),
            rgb(var(--toast-accent))
        );

    box-shadow:
        0 0 10px rgba(var(--toast-accent), 0.62);

    transform-origin: right center;
    animation:
        xpzone-toast-progress
        var(--toast-duration, 4200ms)
        linear both;
}


.notification-ui-toast.is-leaving {
    animation:
        xpzone-toast-exit 0.22s ease-in both;
}


.notification-ui-toast-close:hover {
    border-color:
        rgba(248, 113, 113, 0.42);

    color:
        #fecaca;

    background:
        rgba(127, 29, 29, 0.32);
}


@keyframes xpzone-toast-enter {

    from {
        opacity:
            0;

        transform:
            translateY(-16px)
            scale(0.94);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes xpzone-toast-exit {

    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }

}


@keyframes xpzone-toast-progress {

    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }

}


@keyframes xpzone-toast-sheen {

    to {
        transform: translateX(38%);
    }

}


@media (max-width: 620px) {

    #notification-ui-toast-container,
    .notification-ui-toast-container {
        right:
            max(
                10px,
                env(safe-area-inset-right)
            ) !important;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            ) !important;

        width:
            calc(100vw - 20px);

        max-height:
            calc(100dvh - 20px);
    }


    .notification-ui-toast {
        grid-template-columns:
            38px minmax(0, 1fr) 26px;

        padding:
            10px;

        border-radius:
            19px;
    }


    .notification-ui-toast-close {
        width:
            28px;

        height:
            28px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .notification-ui-toast,
    .notification-ui-toast::after,
    .notification-ui-toast-progress {
        animation:
            none;
    }

}