/*
 * Site-wide toast (feedback popup) styles.
 *
 * One rule set shared by every page via window.showToast(message, type) —
 * see /assets/toast.js. Success and failure are deliberately styled very
 * differently (see toast.js for why they also *behave* differently):
 * success is a quick, quiet confirmation; failure is visually heavier
 * (thicker border, tinted background, darker overlay) because it usually
 * needs to be read carefully, not just glanced at.
 */

#globalToastOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Not a modal — never intercept clicks. This also lets "click anywhere
     to dismiss" (for error toasts) reuse a plain document-level click
     listener instead of needing its own hit target. */
  pointer-events: none;
  background: rgba(5, 7, 20, 0);
  transition: background 0.25s ease;
}
#globalToastOverlay.toast-show { background: rgba(5, 7, 20, 0.45); }
#globalToastOverlay.toast-overlay-err.toast-show { background: rgba(5, 7, 20, 0.6); }

#globalToastOverlay .toast-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 16px 26px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  max-width: min(440px, 82vw);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#globalToastOverlay.toast-show .toast-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#globalToastOverlay .toast-icon { font-size: 17px; line-height: 1; flex: none; }

#globalToastOverlay .toast-card.toast-ok {
  border-color: rgba(26, 156, 110, 0.4);
}
#globalToastOverlay .toast-card.toast-ok .toast-icon { color: #1a9c6e; }

#globalToastOverlay .toast-card.toast-err {
  border: 2px solid #e0577a;
  background: rgba(224, 87, 122, 0.1);
  text-align: left;
}
#globalToastOverlay .toast-card.toast-err .toast-icon { color: #e0577a; }

#globalToastOverlay .toast-body { display: flex; flex-direction: column; gap: 4px; }
#globalToastOverlay .toast-hint {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
}