#message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1055;
    width: min(450px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    opacity: 0.85;
    box-sizing: border-box;
}

.message-toast {
    margin-bottom: 10px;
    transform: translateX(120%);
    transition: all 0.4s ease;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.message-toast.showing {
    transform: translateX(0);
    opacity: 1;
}

@media (max-width: 576px) {
    #message-container {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
    }
}