/* ─── Notification Toast ─── */ /* Fixed wrapper injected by JS outside normal flow */ .bkbg-ntst-fixed { position: fixed; z-index: 99999; pointer-events: none; } .bkbg-ntst-fixed.pos-bottom-left { bottom: 24px; left: 24px; } .bkbg-ntst-fixed.pos-bottom-right { bottom: 24px; right: 24px; } .bkbg-ntst-fixed.pos-top-left { top: 24px; left: 24px; } .bkbg-ntst-fixed.pos-top-right { top: 24px; right: 24px; } /* Toast card */ .bkbg-ntst-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; opacity: 0; transition: opacity 0.35s, transform 0.35s; } /* Slide in from left */ .bkbg-ntst-toast.anim-slide.pos-left { transform: translateX(-120%); } .bkbg-ntst-toast.anim-slide.pos-right { transform: translateX(120%); } /* Fade in */ .bkbg-ntst-toast.anim-fade { transform: none; } /* Pop in */ .bkbg-ntst-toast.anim-pop { transform: scale(0.8); } /* Visible state */ .bkbg-ntst-toast.is-visible { opacity: 1; transform: translateX(0) scale(1); } /* Avatar */ .bkbg-ntst-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 13px; } /* Content */ .bkbg-ntst-content { flex: 1; min-width: 0; } .bkbg-ntst-name-row { display: flex; align-items: center; gap: 4px; } .bkbg-ntst-name { font-family: var(--bkbg-ntst-nm-font-family, inherit); font-size: var(--bkbg-ntst-nm-font-size-d, 13px); font-weight: var(--bkbg-ntst-nm-font-weight, 700); font-style: var(--bkbg-ntst-nm-font-style, normal); text-decoration: var(--bkbg-ntst-nm-text-decoration, none); text-transform: var(--bkbg-ntst-nm-text-transform, none); line-height: var(--bkbg-ntst-nm-line-height-d, 1.3); letter-spacing: var(--bkbg-ntst-nm-letter-spacing-d, normal); word-spacing: var(--bkbg-ntst-nm-word-spacing-d, normal); } .bkbg-ntst-msg { font-family: var(--bkbg-ntst-tx-font-family, inherit); font-size: var(--bkbg-ntst-tx-font-size-d, 12px); font-weight: var(--bkbg-ntst-tx-font-weight, 400); font-style: var(--bkbg-ntst-tx-font-style, normal); text-decoration: var(--bkbg-ntst-tx-text-decoration, none); text-transform: var(--bkbg-ntst-tx-text-transform, none); line-height: var(--bkbg-ntst-tx-line-height-d, 1.4); letter-spacing: var(--bkbg-ntst-tx-letter-spacing-d, normal); word-spacing: var(--bkbg-ntst-tx-word-spacing-d, normal); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bkbg-ntst-time { margin-top: 2px; } .bkbg-ntst-icon svg { width: 1em; height: 1em; fill: currentColor; } .bkbg-ntst-icon .dashicons { font-size: inherit; width: 1em; height: 1em; line-height: 1; } .bkbg-ntst-icon .bkbg-icon-img { width: 1em; height: 1em; object-fit: contain; } @media (max-width: 1024px) { .bkbg-ntst-name { font-size: var(--bkbg-ntst-nm-font-size-t, var(--bkbg-ntst-nm-font-size-d, 13px)); line-height: var(--bkbg-ntst-nm-line-height-t, var(--bkbg-ntst-nm-line-height-d, 1.3)); letter-spacing: var(--bkbg-ntst-nm-letter-spacing-t, var(--bkbg-ntst-nm-letter-spacing-d, normal)); word-spacing: var(--bkbg-ntst-nm-word-spacing-t, var(--bkbg-ntst-nm-word-spacing-d, normal)); } .bkbg-ntst-msg { font-size: var(--bkbg-ntst-tx-font-size-t, var(--bkbg-ntst-tx-font-size-d, 12px)); line-height: var(--bkbg-ntst-tx-line-height-t, var(--bkbg-ntst-tx-line-height-d, 1.4)); letter-spacing: var(--bkbg-ntst-tx-letter-spacing-t, var(--bkbg-ntst-tx-letter-spacing-d, normal)); word-spacing: var(--bkbg-ntst-tx-word-spacing-t, var(--bkbg-ntst-tx-word-spacing-d, normal)); } } @media (max-width: 767px) { .bkbg-ntst-name { font-size: var(--bkbg-ntst-nm-font-size-m, var(--bkbg-ntst-nm-font-size-t, var(--bkbg-ntst-nm-font-size-d, 13px))); line-height: var(--bkbg-ntst-nm-line-height-m, var(--bkbg-ntst-nm-line-height-t, var(--bkbg-ntst-nm-line-height-d, 1.3))); letter-spacing: var(--bkbg-ntst-nm-letter-spacing-m, var(--bkbg-ntst-nm-letter-spacing-t, var(--bkbg-ntst-nm-letter-spacing-d, normal))); word-spacing: var(--bkbg-ntst-nm-word-spacing-m, var(--bkbg-ntst-nm-word-spacing-t, var(--bkbg-ntst-nm-word-spacing-d, normal))); } .bkbg-ntst-msg { font-size: var(--bkbg-ntst-tx-font-size-m, var(--bkbg-ntst-tx-font-size-t, var(--bkbg-ntst-tx-font-size-d, 12px))); line-height: var(--bkbg-ntst-tx-line-height-m, var(--bkbg-ntst-tx-line-height-t, var(--bkbg-ntst-tx-line-height-d, 1.4))); letter-spacing: var(--bkbg-ntst-tx-letter-spacing-m, var(--bkbg-ntst-tx-letter-spacing-t, var(--bkbg-ntst-tx-letter-spacing-d, normal))); word-spacing: var(--bkbg-ntst-tx-word-spacing-m, var(--bkbg-ntst-tx-word-spacing-t, var(--bkbg-ntst-tx-word-spacing-d, normal))); } }