.toast-container {
    position: fixed;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: var(--z-toast, 50);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-sm);
    pointer-events: auto;
    min-inline-size: 280px;
    max-inline-size: 420px;
    animation: toast-in 200ms ease-out;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast--success {
    background: linear-gradient(to right, var(--color-entered-bg), var(--color-surface-raised) 24px);
}

.toast--error {
    background: linear-gradient(to right, var(--color-error-bg), var(--color-surface-raised) 24px);
}

.toast--warning {
    background: linear-gradient(to right, var(--color-no-activity-bg), var(--color-surface-raised) 24px);
}

[dir="rtl"] .toast--success {
    background: linear-gradient(to left, var(--color-entered-bg), var(--color-surface-raised) 24px);
}

[dir="rtl"] .toast--error {
    background: linear-gradient(to left, var(--color-error-bg), var(--color-surface-raised) 24px);
}

[dir="rtl"] .toast--warning {
    background: linear-gradient(to left, var(--color-no-activity-bg), var(--color-surface-raised) 24px);
}

.toast__icon {
    flex-shrink: 0;
    inline-size: 20px;
    block-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
}

.toast--success .toast__icon { color: var(--color-entered); }
.toast--error .toast__icon { color: var(--color-error); }
.toast--warning .toast__icon { color: var(--color-warning); }

.toast__message {
    flex: 1;
    line-height: var(--line-height-base);
}

.toast__dismiss {
    flex-shrink: 0;
    inline-size: 24px;
    block-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.toast__dismiss:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
}