/* ============================================================ v6 Toasts — success / error / warning notifications ============================================================ Toast.js has always built this markup, but its only rules lived in the legacy style.css that v6 removed from index.html. With nothing loaded the container was `position: static` and every toast was transparent, so it rendered as an invisible strip at the bottom of : every "Song saved", every export error, every validation warning was silently invisible. Note .toast-icon is an EMPTY div — Toast.js sets no content, so the glyph has to come from CSS per type. */ /* NOT wrapped in @layer, deliberately. style-v2.css is entirely unlayered and opens with `*, *::before, *::after { margin: 0; padding: 0 }`. Unlayered CSS beats LAYERED css regardless of specificity, so every padding declared inside @layer v6-components computes to 0 — verified in the browser against this file and against the pre-existing .v6-versions__menu-header. Staying unlayered lets normal specificity apply (.toast 0,1,0 > * 0,0,0). None of the selectors below appear anywhere in style-v2.css, so nothing else competes for them. */ .toast-container { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast, 1200); display: flex; flex-direction: column; gap: 10px; pointer-events: none; /* the strip itself must never eat clicks */ } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; min-width: 280px; max-width: 380px; padding: 12px 14px; background: var(--v6-panel-raised, var(--surface-400, #1f1f23)); border: 1px solid var(--v6-border-strong, rgba(255, 255, 255, 0.14)); border-left: 3px solid var(--accent-primary, #8b5cf6); border-radius: var(--radius-lg, 8px); box-shadow: var(--shadow-4, 0 24px 64px rgba(0, 0, 0, 0.7)); animation: v6-toast-in var(--duration-normal, 180ms) var(--ease-out-quart, ease); } .toast.success { border-left-color: #10b981; } .toast.error { border-left-color: #ef4444; } .toast.warning { border-left-color: #f59e0b; } /* `notification:show` carries type 'info' (AuthService's "Logged out", UIManager.showToast) — nothing rendered these until item 2.8 gave the event a listener, so the type had no rule and no glyph. */ .toast.info { border-left-color: var(--accent-info, #06b6d4); } .toast-icon { flex: 0 0 16px; width: 16px; font-size: 14px; line-height: 1.4; text-align: center; } .toast.success .toast-icon::before { content: '\2713'; color: #10b981; } .toast.error .toast-icon::before { content: '\2715'; color: #ef4444; } .toast.warning .toast-icon::before { content: '\26A0'; color: #f59e0b; } .toast.info .toast-icon::before { content: '\2139'; color: var(--accent-info, #06b6d4); } .toast-content { flex: 1; min-width: 0; } .toast-title { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text-primary, #fafafa); overflow-wrap: anywhere; } .toast-message { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-secondary, #a1a1aa); overflow-wrap: anywhere; } .toast-close { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--radius-sm, 4px); background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-secondary, #a1a1aa); transition: background var(--duration-fast, 120ms) ease, color var(--duration-fast, 120ms) ease; } .toast-close:hover { background: var(--v6-panel-hover, rgba(255, 255, 255, 0.07)); color: var(--text-primary, #fafafa); } .toast.hiding { animation: v6-toast-out 300ms ease forwards; } @keyframes v6-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes v6-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.hiding { animation: none; opacity: 0; } } @media (max-width: 640px) { .toast-container { left: 16px; right: 16px; bottom: 16px; } .toast { min-width: 0; max-width: none; } }