/* ---------- Notification Service toasts (js/notification-service.js) ---------- */
#notification-container{
  position:fixed; top:16px; right:16px; z-index:2000;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(360px, calc(100vw - 32px));
  pointer-events:none;
}
.notification-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; box-shadow:0 8px 24px rgba(18,18,18,0.12);
  font-size:var(--fs-base); line-height:1.4;
  opacity:0; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease;
}
.notification-toast.notification-visible{ opacity:1; transform:translateY(0); }
.notification-toast.notification-leaving{ opacity:0; transform:translateY(-8px); }
.notification-icon{
  flex:none; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:700; color:#fff;
}
.notification-message{ flex:1; word-break:break-word; }
.notification-close{
  flex:none; border:none; background:transparent; color:var(--muted);
  font-size:var(--fs-md); line-height:1; cursor:pointer; padding:2px;
  transition:color 150ms ease, transform 120ms ease;
}
.notification-close:hover{ color:var(--ink); }
.notification-close:active{ transform:scale(0.85); }

.notification-success .notification-icon{ background:var(--success); }
.notification-error .notification-icon{ background:var(--coral); }
.notification-warning .notification-icon{ background:var(--yellow-deep); }
.notification-info .notification-icon{ background:var(--blue-deep); }

@media (max-width:480px){
  #notification-container{ left:12px; right:12px; top:12px; max-width:none; }
}