/* Toast — barra de papel com fio colorido na borda esquerda. */

#toast-container {
    position: fixed;
    top: var(--s-4);
    right: var(--s-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-width: 24rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-left: 2px solid var(--toast-color, var(--ink-soft));
    box-shadow: var(--shadow-lift);
    font-size: var(--t-sm);
    color: var(--ink);
    pointer-events: auto;
    animation: toast-enter 0.35s var(--ease);
}

.toast-success { --toast-color: var(--ok); }
.toast-error   { --toast-color: var(--danger); }
.toast-info    { --toast-color: var(--terracotta); }
.toast-warn    { --toast-color: var(--warn); }

/* Losango no lugar do emoji que vinha do JS */
.toast-icon {
    width: 6px;
    height: 6px;
    margin-top: 0.55em;
    flex: none;
    background: var(--toast-color, var(--ink-soft));
    transform: rotate(45deg);
    font-size: 0;
    overflow: hidden;
}

.toast-message { flex: 1; word-break: break-word; }

.toast-close {
    flex: none;
    padding: 0 var(--s-1);
    border: 0;
    background: none;
    color: var(--ink-faint);
    font-size: var(--t-md);
    line-height: 1;
    cursor: pointer;
}

.toast-close:hover { color: var(--ink); }

.toast-leaving { animation: toast-leave 0.25s var(--ease) forwards; }

@keyframes toast-enter {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@keyframes toast-leave {
    from { transform: none; opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}

@media (max-width: 600px) {
    #toast-container {
        left: var(--s-3);
        right: var(--s-3);
        top: var(--s-3);
        max-width: none;
    }
}