/* assets/css/toast.css */ /* Works whether the root is in or inside a (top layer) */ .toast-root, #toast-root { position: fixed; /* relative to viewport even inside dialog's top layer */ inset: 0; pointer-events: none; z-index: 2147483647; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } .toast { pointer-events: auto; position: fixed; right: 16px; top: 16px; min-width: 240px; max-width: 420px; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(2, 6, 23, .25), 0 2px 8px rgba(2,6,23,.12); color: #0f172a; background: #ffffff; border: 1px solid rgba(148,163,184,.35); display: flex; align-items: flex-start; gap: 10px; animation: toast-slide-in .18s ease-out; } .toast + .toast { margin-top: 12px; } .toast .icon { font-size: 18px; line-height: 1; margin-top: 2px; } .toast .content { flex: 1; font-size: 14px; line-height: 1.35; } .toast .close { appearance: none; border: 0; background: transparent; font-size: 16px; color: #475569; cursor: pointer; padding: 2px 4px; } /* success (green) by default */ .toast.success { border-color: #86efac; background: #ecfdf5; color: #065f46; } .toast.success .icon { color: #10b981; } /* error (red) */ .toast.error { border-color: #fecaca; background: #fff1f2; color: #7f1d1d; } .toast.error .icon { color: #ef4444; } @keyframes toast-slide-in { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }