/* ==========================================================
   ARlogs — Toast notifications (theme v4: Wine Red & White)
   ========================================================== */

#toast-container {
    position: fixed;
    top: 84px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(360px, calc(100vw - 40px));
    pointer-events: none;   /* container ignores clicks, toasts re-enable */
}

.toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border, #F0E2E0);
    border-radius: 14px;
    padding: 14px 40px 16px 14px;
    box-shadow: 0 14px 40px rgba(51, 34, 42, 0.18);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #33222A;
    overflow: hidden;
    cursor: grab;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform .3s ease-in, opacity .25s ease;
}

/* type accent bar on the left */
.toast::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}

.toast .toast-icon { flex: none; font-size: 17px; margin-top: 1px; }
.toast .toast-msg { flex: 1; min-width: 0; }

.toast.toast-error::before { background: #9D2235; }
.toast.toast-error .toast-icon { color: #9D2235; }
.toast.toast-success::before { background: #229E54; }
.toast.toast-success .toast-icon { color: #229E54; }
.toast.toast-warning::before { background: #D9A441; }
.toast.toast-warning .toast-icon { color: #B9821F; }
.toast.toast-info::before { background: #229ED9; }
.toast.toast-info .toast-icon { color: #229ED9; }

/* close button */
.toast-close {
    position: absolute;
    top: 8px; right: 8px;
    background: none;
    border: none;
    color: #8A767D;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}
.toast-close:hover { color: #33222A; background: rgba(157, 34, 53, 0.08); }

/* countdown bar */
.toast-bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(157, 34, 53, 0.18);
}
.toast-bar-fill {
    height: 100%;
    width: 100%;
}
.toast.toast-error .toast-bar-fill { background: #9D2235; }
.toast.toast-success .toast-bar-fill { background: #229E54; }
.toast.toast-warning .toast-bar-fill { background: #D9A441; }
.toast.toast-info .toast-bar-fill { background: #229ED9; }

/* while dragging */
.toast.dragging {
    cursor: grabbing;
    transition: none;
    box-shadow: 0 20px 50px rgba(51, 34, 42, 0.28);
}

@media (max-width: 480px) {
    #toast-container { top: 74px; right: 12px; width: calc(100vw - 24px); }
}