/**
 * Family Office console toast — macOS glass notification stack (INT-0052 / FEAT-066).
 * Default: top-RIGHT (trailing). Opt out with placement "leading"/"left" in FoToast.show.
 *
 * Z-index law: FO rails / footer / proto chrome sit at ~2147483000. Toast must sit ABOVE
 * them or top-right notifications look "missing" (behind the right rail). Operator
 * 2026-07-17: "missing the toast notifications on the top right".
 */

.fo-toast-stack {
  position: fixed;
  /* Fixed under titlebar/safe-area only — do NOT track --bc-top-rail-h
     (operator: toast stays put when the top rail opens/closes). */
  top: calc(
    max(12px, env(safe-area-inset-top, 0px)) + var(--fo-titlebar-inset, 0px) + 8px
  );
  /* Default top-RIGHT (macOS style) — never bottom (covers floor + left-rail footer) */
  bottom: auto;
  /* Default top-RIGHT (macOS style) — not top-left */
  left: auto;
  right: calc(
    max(14px, env(safe-area-inset-right, 0px)) + var(--bc-right-rail-width, 0px) + 10px
  );
  /* Above FO rails (3002), floor (3010), modals (3100) so toasts are always visible */
  z-index: 2147483200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(320px, calc(100vw - 28px));
  pointer-events: none;
}

/* Explicit trailing class (FoToast default) — same as base; kept for callers */
.fo-toast-stack--trailing {
  left: auto;
  right: calc(
    max(14px, env(safe-area-inset-right, 0px)) + var(--bc-right-rail-width, 0px) + 10px
  );
  align-items: flex-end;
}

/* Opt-out: top-LEFT only when FoToast placement is leading/left */
.fo-toast-stack--leading {
  left: calc(
    max(14px, env(safe-area-inset-left, 0px)) + var(--bc-rail-width, 0px) + 10px
  );
  right: auto;
  align-items: flex-start;
}

/* When rails collapsed, width vars are 0 — toast hugs the edge cleanly */
body.bc-left-collapsed .fo-toast-stack--leading {
  left: max(14px, env(safe-area-inset-left, 0px));
}
body.bc-right-collapsed .fo-toast-stack,
body.bc-right-collapsed .fo-toast-stack--trailing {
  right: max(14px, env(safe-area-inset-right, 0px));
}

/* Framework Missionary badge — top-right with toasts. NEVER bottom-left
   (that column is left-rail footer: theme · settings · search · account). */
.fo-missionary-badge {
  position: fixed !important;
  z-index: 2147483200 !important;
  /* Same fixed top as toasts — ignore top-rail height */
  top: calc(
    max(12px, env(safe-area-inset-top, 0px)) + var(--fo-titlebar-inset, 0px) + 8px
  ) !important;
  right: calc(
    max(14px, env(safe-area-inset-right, 0px)) + var(--bc-right-rail-width, 0px) + 10px
  ) !important;
  left: auto !important;
  bottom: auto !important;
}
body.bc-right-collapsed .fo-missionary-badge {
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
}

.fo-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 10px 11px 10px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--fo-toast-fg, #fff) 18%, transparent);
  background: color-mix(in srgb, var(--fo-toast-bg, rgba(255, 255, 255, 0.78)) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.16),
    0 1px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 color-mix(in srgb, var(--fo-toast-fg, #fff) 28%, transparent);
  color: var(--fo-toast-fg, #111);
  text-align: left;
  cursor: default;
  animation: fo-toast-in 0.38s var(--comet-ease-back, cubic-bezier(0.12, 0.4, 0.29, 1.46)) both;
}

.fo-toast-stack--trailing .fo-toast {
  animation-name: fo-toast-in-trailing;
}

.fo-toast.is-leaving {
  animation: fo-toast-out 0.24s var(--comet-ease-out, cubic-bezier(0.23, 1, 0.32, 1)) forwards;
}

.fo-toast-stack--trailing .fo-toast.is-leaving {
  animation-name: fo-toast-out-trailing;
}

@keyframes fo-toast-in {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fo-toast-out {
  to {
    opacity: 0;
    transform: translateX(-12px) scale(0.98);
    filter: blur(2px);
  }
}

@keyframes fo-toast-in-trailing {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes fo-toast-out-trailing {
  to {
    opacity: 0;
    transform: translateX(12px) scale(0.98);
    filter: blur(2px);
  }
}

.fo-toast__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.fo-toast__icon img,
.fo-toast__icon svg {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 7px;
  object-fit: cover;
}

/* Emoji / text glyph when no image URL is available */
.fo-toast__glyph {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fo-toast-fg, #111) 8%, transparent);
}

/* Broken remote icons: hide empty alt box until onerror swaps to SVG */
.fo-toast__icon img.fo-toast__img:not([src]),
.fo-toast__icon img.fo-toast__img[src=""] {
  display: none;
}

.fo-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 1px;
}

.fo-toast__title {
  font: 600 13px/1.25 system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

.fo-toast__body {
  font: 400 12px/1.35 system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  color: color-mix(in srgb, var(--fo-toast-fg, #111) 78%, transparent);
}

.fo-toast__close {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 0;
  border-radius: var(--ak-radius-pill, 50%);
  background: color-mix(in srgb, var(--fo-toast-fg, #111) 8%, transparent);
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
}

.fo-toast__close:hover {
  opacity: 1;
}

.fo-toast--success {
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
}

.fo-toast--error {
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
}

.fo-toast--loading {
  border-color: color-mix(in srgb, #3b82f6 35%, transparent);
}

.fo-toast--info {
  border-color: color-mix(in srgb, #3b82f6 28%, transparent);
}

[data-theme="dark"] .fo-toast,
body:not([data-theme="light"]) .fo-toast {
  --fo-toast-bg: rgba(36, 40, 48, 0.82);
  --fo-toast-fg: #f5f7fb;
}

@media (prefers-reduced-motion: reduce) {
  .fo-toast {
    animation: none;
  }
  .fo-toast.is-leaving {
    animation: none;
    opacity: 0;
  }
}