/* =====================================================================
   Vibrant Innovations — toasts on the website
   Confirmations ("Code copied") and quiet activity notices. Follows the
   site's light and dark colours, and always clears the chat button.
   ===================================================================== */

.vi-toasts {
  position: fixed; z-index: 99991; display: grid; gap: 10px; justify-items: end;
  top: calc(var(--vi-header-h, 92px) + 14px); right: 16px; width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.vi-toast {
  pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  width: 100%; padding: 11px 12px 11px 14px; border-radius: 14px;
  background: var(--vi-surface, #fff); color: var(--vi-text, #3d4a42);
  border: 1px solid var(--vi-line, rgba(16, 24, 20, .1)); box-shadow: var(--vi-shadow-lg, 0 12px 32px rgba(16, 24, 20, .14));
  font-family: var(--default-font, system-ui, sans-serif); font-size: .9rem; line-height: 1.4;
  animation: vi-toast-in .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
.vi-toast.is-leaving { animation: vi-toast-out .3s cubic-bezier(.4, 0, .2, 1) both; }
.vi-toast > i { font-size: 1.05rem; color: var(--vi-accent-strong, #7fb28b); }
.vi-toast.is-error > i { color: #d64553; }
.vi-toast.is-info > i { color: var(--vi-muted, #6b7a71); }
.vi-toast-text { min-width: 0; display: grid; gap: 1px; }
.vi-toast-text small { color: var(--vi-muted, #6b7a71); font-size: .76rem; }
.vi-toast-x {
  border: 0; background: none; cursor: pointer; color: var(--vi-muted, #6b7a71);
  font-size: 1.2rem; line-height: 1; padding: 2px 4px; border-radius: 8px;
}
.vi-toast-x:hover { color: var(--vi-heading, #1c2620); }
.vi-toast-x:focus-visible { outline: 2px solid var(--vi-accent-strong, #7fb28b); outline-offset: 2px; }
.vi-toast.is-success { border-left: 3px solid var(--vi-accent-strong, #7fb28b); }
.vi-toast.is-error { border-left: 3px solid #d64553; }
.vi-toast.is-activity { background: color-mix(in srgb, var(--vi-surface, #fff) 94%, var(--vi-accent, #a0cba9)); }

/* On phones they drop in at the top: the bottom belongs to the chat button,
   the scroll-to-top button and any promotion banner. */
@media (max-width: 767px) {
  .vi-toasts {
    top: calc(var(--vi-header-h, 78px) + 10px); bottom: auto;
    left: 12px; right: 12px; width: auto; justify-items: stretch;
  }
  .vi-toast { font-size: .86rem; animation-name: vi-toast-drop; }
  .vi-toast.is-leaving { animation-name: vi-toast-lift; }
}

@keyframes vi-toast-in { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vi-toast-out { to { opacity: 0; transform: translateX(30px) scale(.97); } }
@keyframes vi-toast-drop { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes vi-toast-lift { to { opacity: 0; transform: translateY(-16px); } }

@media (prefers-reduced-motion: reduce) {
  .vi-toast, .vi-toast.is-leaving { animation-duration: .01ms !important; }
}