/* ---- Global toast notifications - see toast.ts. Same light-pill,
   auto-dismiss visual language as views/player/Player.css's own
   .requestBanner, generalized to work from any page (position: fixed
   against the viewport, not the player specifically) since this is
   used well beyond it now (host handoff, every "couldn't start/join a
   party" error that used to be a blocking alert()). ---- */
.toastContainer {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  pointer-events: none;
}

.toast {
  max-width: 100%;
  background: var(--bg-header);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.toastIn { opacity: 1; transform: translateY(0); }
.toast.toastOut { opacity: 0; }

/* Only variant beyond the default light/neutral pill above - a plain
   left accent, not a loud red fill: still meant to be noticed without
   the app suddenly shouting at you (see toast.ts's own comment on why
   this stays this restrained even for errors). */
.toast--error { border-left: 3px solid var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none; }
}