/* ═══════════════════════════════════════════════════════════════
   AgencyOS — toast-v5.css
   V5 Blue toast (reference .toast / .toastIcon / .toastText): a surface
   card with a gradient accent rail, a gradient icon disc and a timer bar
   at the bottom. It restyles the existing NotificationService items
   (.toast-item--{success|error|warning|info|loading}) — markup and
   behaviour (stacking, dedupe, auto-dismiss, hover pause) are unchanged.
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
  --tv5-a: var(--st-primary, #167da0);
  --tv5-b: var(--st-primary-2, #24aa9f);
  font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif);
}
.toast-container .toast-item {
  --tv5-a: var(--st-primary, #167da0);
  --tv5-b: var(--st-primary-2, #24aa9f);
  --tv5-ms: 6000ms;
  display: flex; align-items: center; gap: 12px;
  min-width: 280px; max-width: min(380px, calc(100vw - 32px));
  padding: 14px 14px 16px 18px;
  border: 1px solid color-mix(in srgb, var(--tv5-a) 22%, var(--st-line, #cddfe4));
  border-left: 0; border-radius: 14px;
  background: var(--st-surface, #fff); color: var(--st-ink, #17252b);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--tv5-a) 22%, transparent), 0 4px 10px rgba(15, 30, 40, .1);
  font-size: 13.5px; font-weight: 600; line-height: 1.45; overflow: hidden;
}
.toast-container .toast-item::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(180deg, var(--tv5-a), var(--tv5-b));
}
/* timer bar — runs for the toast's own auto-dismiss window; manual-dismiss toasts (error / loading) have none */
.toast-container .toast-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--tv5-a), var(--tv5-b));
  transform-origin: left; transform: scaleX(0); opacity: 0;
}
.toast-container .toast-item.show.ntf-run::after { opacity: 1; animation: tv5Timer var(--tv5-ms) linear forwards; }
.toast-container .toast-item:hover::after { animation-play-state: paused; }
@keyframes tv5Timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast-container .toast-item--success { --tv5-ms: 4500ms; --tv5-a: var(--st-teal, #08796f); --tv5-b: #3fb950; }
.toast-container .toast-item--info    { --tv5-ms: 6000ms; }
.toast-container .toast-item--warning { --tv5-ms: 7000ms; --tv5-a: #d99a1f; --tv5-b: #f0b84a; }
.toast-container .toast-item--error   { --tv5-a: #d64545; --tv5-b: #ef7d7d; border-color: color-mix(in srgb, #d64545 35%, var(--st-line, #cddfe4)); }
.toast-container .toast-item--loading { --tv5-a: var(--st-primary, #167da0); --tv5-b: var(--st-primary-2, #24aa9f); }
.toast-container .toast-item--error::after, .toast-container .toast-item--loading::after { display: none; }

.toast-container .toast-item-icon {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; margin: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--tv5-a), var(--tv5-b)); color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--tv5-a) 35%, transparent);
}
.toast-container .toast-item--success .toast-item-icon,
.toast-container .toast-item--error .toast-item-icon,
.toast-container .toast-item--warning .toast-item-icon,
.toast-container .toast-item--info .toast-item-icon,
.toast-container .toast-item--loading .toast-item-icon { color: #fff; }
.toast-container .toast-item-icon .ntf-icon { width: 18px; height: 18px; }
.toast-container .toast-item-text { flex: 1; min-width: 0; color: var(--st-ink, #17252b); }
.toast-container .toast-item-close {
  display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--st-muted, #566a73); opacity: 1;
}
.toast-container .toast-item-close svg { width: 14px; height: 14px; }
.toast-container .toast-item-close:hover { background: var(--st-surface-2, #e3f0f3); color: var(--st-ink, #17252b); opacity: 1; }
.toast-container .toast-item-close:focus-visible { outline: 2px solid var(--st-primary, #167da0); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .toast-container .toast-item.show.ntf-run::after { animation: none; transform: scaleX(1); } }

/* Bottom-right corner, flush 24px from the viewport edge — V5 has no right telemetry panel to clear. */
.toast-container { position: fixed; right: 24px; bottom: 24px; left: auto; top: auto; align-items: flex-end; z-index: 10050; }
@media (max-width: 560px) { .toast-container { right: 16px; left: 16px; bottom: 16px; align-items: stretch; } }