/* <x-toast>: a short message at the bottom right, above the footer of x-detail (so it never covers its buttons). */
x-toast {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fg);
  color: var(--bg);
  padding: 11px 16px;
  border-radius: 6px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  max-width: min(420px, calc(100% - 40px));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;

  &.show { opacity: 1; transform: none; }
  & .ic { width: 18px; height: 18px; color: var(--nav-accent); }
  &.error .ic { color: #ef6b62; }
}

@media (max-width: 767px) {
  x-toast { left: 16px; right: 16px; max-width: none; }
}