:root{
  --sf-toast-z: 2147483647;
  --sf-toast-bg: rgba(17,24,39,.96);
  --sf-toast-fg: #fff;
  --sf-toast-success: #16a34a;
  --sf-toast-error: #dc2626;
  --sf-toast-warning: #d97706;
  --sf-toast-info: #2563eb;
}

/* When a popover is open, some browsers blur the page via [popover]::backdrop.
   The toast is outside the popover top-layer so it can look visually blurred.
   We counter by giving the toast its own solid/opaque look and ensuring it
   participates in its own stacking/paint context. */

.sf-toast-container{
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: var(--sf-toast-z);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;

  isolation: isolate;
}

@media (min-width: 480px){
  .sf-toast-container{ left: auto; right: 12px; width: min(360px, calc(100vw - 24px)); }
}

.sf-toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;

  /* Force crisp rendering even when underlying page is blurred */
  background: var(--sf-toast-bg);
  color: var(--sf-toast-fg);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);

  /* Prevent any inherited blur/filter scenarios */
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transform: translateY(-8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  font-size: 14px;
  line-height: 1.35;
}

.sf-toast.show{ transform: translateY(0); opacity: 1; }

.sf-toast .bar{ width: 10px; height: 100%; border-radius: 10px; }
.sf-toast.success .bar{ background: var(--sf-toast-success); }
.sf-toast.error .bar{ background: var(--sf-toast-error); }
.sf-toast.warning .bar{ background: var(--sf-toast-warning); }
.sf-toast.info .bar{ background: var(--sf-toast-info); }

.sf-toast .title{ font-weight: 700; margin-right: 6px; }
.sf-toast .msg{ overflow-wrap: anywhere; }

.sf-toast button{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
}

.sf-toast button:active{ transform: scale(.98); }

.sf-toast button:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 2px;
}