トースト通知 Toast Notification

.demo-toast-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.demo-toast-trigger {
  padding: 8px 16px; border: none; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: #fff; font-weight: 600;
}
.demo-toast-trigger[data-type="success"] { background: var(--ui-primary); }
.demo-toast-trigger[data-type="error"] { background: #ef4444; }
.demo-toast-trigger[data-type="info"] { background: #6b7280; }
.demo-toast-container {
  position: relative; min-height: 60px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.demo-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px; color: #fff;
  font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: demo-toast-in 0.3s ease-out;
  min-width: 200px;
}
.demo-toast.success { background: var(--ui-primary); }
.demo-toast.error { background: #ef4444; }
.demo-toast.info { background: #6b7280; }
.demo-toast.removing { animation: demo-toast-out 0.3s ease-in forwards; }
@keyframes demo-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes demo-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }

(function(){
  const messages = { success: '保存しました', error: 'エラーが発生しました', info: '新しいお知らせがあります' };
  const icons = { success: '✓', error: '✕', info: 'ℹ' };
  document.querySelectorAll('.demo-toast-trigger').forEach(btn => {
    btn.addEventListener('click', function() {
      const type = this.dataset.type;
      const toast = document.createElement('div');
      toast.className = 'demo-toast ' + type;
      toast.innerHTML = '<span>' + icons[type] + '</span><span>' + messages[type] + '</span>';
      document.querySelector('.demo-toast-container').appendChild(toast);
      setTimeout(() => { toast.classList.add('removing'); setTimeout(() => toast.remove(), 300); }, 2500);
    });
  });
})();