/* =========================================================================
   StatusToast — bottom-right status snackbar component
   ========================================================================= */
.status-toast-stack {
  position: fixed; right: 20px; bottom: 20px;
  z-index: calc(var(--z-popover) + 30);
  display: flex; flex-direction: column-reverse; gap: 10px;
  align-items: flex-end; pointer-events: none;
}
.status-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  width: 340px; max-width: calc(100vw - 40px);
  padding: 13px 12px 13px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transform: translateY(14px); opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.status-toast.show { transform: translateY(0); opacity: 1; }
.status-toast.hide { transform: translateY(8px); opacity: 0; }

/* small FILLED severity dot (Linear-style) — the glyph renders white inside */
.status-toast-ico {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-500); color: #fff;
}
.status-toast-ico svg { width: 11px; height: 11px; stroke-width: 3; }
.status-toast--progress .status-toast-ico,
.status-toast--info .status-toast-ico { background: var(--success-600); }
.status-toast--success .status-toast-ico { background: var(--success-600); }
.status-toast--error .status-toast-ico { background: var(--danger-600); }

.status-toast-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.status-toast-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.4; overflow-wrap: anywhere; }
.status-toast-sub { font-size: var(--text-sm); color: var(--text-soft); line-height: 1.45; overflow-wrap: anywhere; }

.status-toast-bar { margin-top: 6px; height: 4px; border-radius: 999px; background: var(--gray-150); overflow: hidden; }
.status-toast-fill { display: block; height: 100%; width: 6%; border-radius: 999px; background: var(--primary-600); transition: width 1.1s var(--ease); }

/* text-link action under the body (View project / Undo) */
.status-toast-act {
  align-self: flex-start; margin-top: 2px; padding: 0; border: none; background: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--primary-600);
  transition: color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .status-toast-act:hover { color: var(--primary-700); text-decoration: underline; }
}

.status-toast-close {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft); cursor: pointer; background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .status-toast-close:hover { background: var(--gray-100); color: var(--text); }
}
.status-toast-close svg { width: 14px; height: 14px; }