/* V19.8 - Live realtime UI */
.live-toast-stack{
    position:fixed;
    top:92px;
    left:18px;
    z-index:2147483646;
    display:grid;
    gap:10px;
    width:min(360px, calc(100vw - 30px));
    pointer-events:none;
}
.live-toast{
    pointer-events:auto;
    border-radius:18px;
    padding:14px 14px;
    background:linear-gradient(180deg,rgba(11,24,39,.98),rgba(4,10,17,.98));
    border:1px solid rgba(255,215,106,.28);
    box-shadow:0 18px 36px rgba(0,0,0,.35),0 0 20px rgba(255,215,106,.08);
    color:#fff;
    transform:translateX(-20px);
    opacity:0;
    animation:liveToastIn .28s ease forwards;
    direction:rtl;
}
.live-toast.success{border-color:rgba(32,240,96,.34);box-shadow:0 18px 36px rgba(0,0,0,.35),0 0 24px rgba(32,240,96,.12)}
.live-toast.warning{border-color:rgba(255,185,56,.38)}
.live-toast.event{border-color:rgba(96,178,255,.35)}
.live-toast strong{
    display:block;
    color:#ffd76a;
    font-size:16px;
    margin-bottom:5px;
}
.live-toast p{
    margin:0;
    color:rgba(255,255,255,.72);
    line-height:1.55;
    font-size:13px;
}
.live-toast .live-toast-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}
.live-toast a,
.live-toast button{
    min-height:34px;
    border-radius:11px;
    padding:0 12px;
    border:0;
    font-weight:900;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.live-toast a{background:linear-gradient(180deg,#ffd76a,#c58a1b);color:#111}
.live-toast button{background:rgba(255,255,255,.08);color:#fff}
.live-toast.out{animation:liveToastOut .22s ease forwards}
@keyframes liveToastIn{to{transform:translateX(0);opacity:1}}
@keyframes liveToastOut{to{transform:translateX(-20px);opacity:0}}

.notification-bell.live-pulse,
#notificationBell.live-pulse{
    animation:bellLivePulse .85s ease 3;
}
@keyframes bellLivePulse{
    0%,100%{transform:scale(1)}
    45%{transform:scale(1.12);box-shadow:0 0 24px rgba(255,215,106,.42)}
}

.live-money-float{
    position:fixed;
    z-index:2147483645;
    right:50%;
    top:46%;
    transform:translate(50%,0);
    color:#20f060;
    font-size:42px;
    font-weight:1000;
    text-shadow:0 0 18px rgba(32,240,96,.45),0 8px 20px rgba(0,0,0,.6);
    animation:moneyFloat 1.25s ease forwards;
    pointer-events:none;
}
@keyframes moneyFloat{
    0%{opacity:0;transform:translate(50%,20px) scale(.8)}
    18%{opacity:1;transform:translate(50%,0) scale(1)}
    100%{opacity:0;transform:translate(50%,-70px) scale(1.08)}
}

@media(max-width:700px){
    .live-toast-stack{
        top:78px;
        left:10px;
        right:10px;
        width:auto;
    }
    .live-toast strong{font-size:15px}
    .live-money-float{font-size:32px}
}