/* Container */
.app-messages {
    position: fixed;
    top: 1rem;
    right: 1rem; /* گوشه‌ی بالا-راست در RTL */
    z-index: 3000;
    display: grid;
    gap: .6rem;
    pointer-events: none;
    width: min(92vw, 520px); /* حداکثر عرض: 520px، در صفحات باریک تا 92vw */
}

/* Card */
.msg {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 12px 44px 12px 12px; /* جای ضربدر سمت چپ در RTL */
    color: #fff; /* متن سفید طبق خواسته */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    pointer-events: auto;
    direction: rtl;
}

/* Close button */
.msg-close {
    position: absolute;
    left: 10px;
    top: 8px; /* RTL */
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}

.msg-close:hover {
    opacity: 1;
}

/* Backgrounds per severity — متن سفید می‌ماند */
.msg-error {
    background: #dc2626;
}

/* قرمز */
.msg-warning {
    background: #f59e0b;
}

/* زرد پررنگ */
.msg-success {
    background: #16a34a;
}

/* سبز */
.msg-info {
    background: #2563eb;
}

/* آبی برای اطلاعات عمومی */

/* نوار زمان: باکس طی 5 ثانیه از سمت چپ "جمع" می‌شود */
.msg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .12); /* لایهٔ کم‌رنگ که جمع می‌شود */
    transform-origin: left center; /* جمع‌شدن از سمت چپ */
    animation: msgShrink 5s linear forwards;
}

/* اگر ترجیح داری رنگ نوار متناسب پیام باشد، این‌ها را باز کن: */
/*
.msg-error::before   { background: rgba(255,255,255,.18); }
.msg-warning::before { background: rgba(0,0,0,.08); }
.msg-success::before { background: rgba(255,255,255,.15); }
.msg-info::before    { background: rgba(255,255,255,.14); }
*/
.msg-text {
    overflow-wrap: anywhere;
}

@keyframes msgShrink {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}