.messages-container{
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    display:flex;
    flex-flow:column nowrap;
    gap:10px;
    width: min(360px, 90vw);
    pointer-events: none;
}

.message{
    padding:1rem;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    font-weight:500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    pointer-events: auto; 
    opacity: 0;
    transform: translateX(20px);
    animation: message-in .3s ease forwards;
}

.message-error{
    border:1px solid #f6c9cb;
    background:#fdecec;
    color:var(--red);
}

.message-success{
    border:1px solid #b7ecc9;
    background:#e8f8ee;
    color:var(--green);
}

.message-warning{
    border:1px solid #f5dba3;
    background:#fef6e7;
    color:var(--amber);
}

.message-info{
    border:1px solid #c7d9f7;
    background:#eaf1ff;
    color:var(--blue-600);
}

.message-debug{
    border:1px solid var(--border);
    background:#f1f1f1;
    color:var(--text-muted);
}

.message-fading{
    animation: message-out .3s ease forwards;
}

@keyframes message-in{
    from{ opacity:0; transform: translateX(-20px); }
    to{ opacity:1; transform: translateX(0); }
}

@keyframes message-out{
    from{ opacity:1; transform: translateX(0); }
    to{ opacity:0; transform: translateX(-20px); }
}