/* This host can live in the fullscreen game container or the browser top layer. */
.dm-toast-stack {
  position: fixed;
  z-index: 2147483600;
  inset: max(16px, env(safe-area-inset-top)) auto auto 50%;
  display: grid;
  gap: 9px;
  width: min(420px, calc(100vw - 28px));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text, #20222a);
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.dm-toast-stack[popover]:not(:popover-open) { display: none; }
.dm-toast-stack::backdrop { background: transparent; pointer-events: none; }
.dm-toast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 3px;
  align-items: start;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line, #e0e3ed);
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 36px rgba(8, 14, 30, .2), 0 2px 7px rgba(8, 14, 30, .08);
  opacity: 0;
  transform: translateY(calc(-100% - 28px)) scale(.98);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
  pointer-events: auto;
}
.dm-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.dm-toast.is-leaving { opacity: 0; transform: translateY(calc(-100% - 28px)) scale(.98); pointer-events: none; }
.dm-toast-open {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dm-toast-open:hover { background: var(--surface-hover, #f4f5fa); }
.dm-toast-open:focus-visible, .dm-toast-close:focus-visible { outline: 2px solid var(--accent, #8557e8); outline-offset: 2px; }
.dm-toast-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  overflow: hidden;
  border: 1px solid var(--line, #e0e3ed);
  border-radius: 14px;
  background: var(--surface-soft, #f4f5fa);
  font-size: 1rem;
  font-weight: 800;
}
.dm-toast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-toast-copy { display: grid; min-width: 0; gap: 4px; }
.dm-toast-copy strong { overflow: hidden; font-size: .83rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.dm-toast-preview { display: -webkit-box; overflow: hidden; color: var(--text-soft, #6d7383); font-size: .77rem; line-height: 1.4; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dm-toast-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--text-soft, #6d7383); cursor: pointer; }
.dm-toast-close:hover { background: var(--surface-hover, #f4f5fa); color: var(--text, #20222a); }
.dm-toast-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.social-message-row.dm-notification-highlight .social-message { outline: 2px solid var(--accent, #8557e8); outline-offset: 4px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent, #8557e8) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .dm-toast { transition: opacity 120ms ease; transform: none; } .dm-toast.is-visible, .dm-toast.is-leaving { transform: none; } }