/* Snackbar restyled to the redesign toast look (tinttune_redesign.html .toast).
   CSS-only: snackbar.js keeps the same element (#snackbar) and classes
   (.snackbar, .success/.fail/.warning, .show/.hide, .icon). */
#snackbar-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    left: auto;
    transform: none;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

.snackbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 380px;
    margin-bottom: 8px;
    padding: 12px 16px;
    text-align: left;
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(12px) scale(.97);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
}

.snackbar.success { border-left-color: var(--success); }
.snackbar.fail    { border-left-color: var(--danger); }
.snackbar.warning { border-left-color: var(--warning); }

.snackbar .icon { font-size: 1em; display: inline-flex; color: var(--success); }
.snackbar.fail .icon    { color: var(--danger); }
.snackbar.warning .icon { color: var(--warning); }

.show { opacity: 1; transform: none; }
.hide { opacity: 0; transform: translateY(8px) scale(.97); }