/* ═══════════════════════════════════════════════════════════════
   toast.css — Shared pill toasts (Apple-style)
   Based on the Desktop "toast" design: dark #131316 pill, layered
   shadows, white text, iOS spinner, colored status variants.

   Usage: window.showToast(msg, type) from js/toast.js
   Types:  info (dark, default) | success (green) | warning (amber)
           error (red) | loading (dark + iOS spinner)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base pill ── */
.sd-toast {
  box-sizing: border-box;
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: min(92vw, 480px);
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #131316;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transition:
    opacity 0.25s cubic-bezier(.25,.1,.25,1),
    transform 0.35s cubic-bezier(.34,1.56,.64,1),
    visibility 0.25s;
  /* Layered shadows from the reference design */
  box-shadow:
    0px 32px 64px -16px rgba(0,0,0,0.30),
    0px 16px 32px -8px rgba(0,0,0,0.30),
    0px 8px 16px -4px rgba(0,0,0,0.24),
    0px 4px 8px -2px rgba(0,0,0,0.24),
    0px -8px 16px -1px rgba(0,0,0,0.16),
    0px 2px 4px -1px rgba(0,0,0,0.24),
    0px 0px 0px 1px rgba(0,0,0,1),
    inset 0px 0px 0px 1px rgba(255,255,255,0.08),
    inset 0px 1px 0px 0px rgba(255,255,255,0.20);
}

.sd-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ── Positions ── */
.sd-toast--bottom {
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.96);
}
.sd-toast--bottom.show {
  transform: translateX(-50%) translateY(0) scale(1);
}
.sd-toast--top-right {
  top: 20px;
  right: 20px;
  transform: translateX(120%);
}
.sd-toast--top-right.show {
  transform: translateX(0);
}

/* ── Status colors (kept colored backgrounds) ── */
.sd-toast--success { background: #059669; }
.sd-toast--warning { background: #d97706; }
.sd-toast--error   { background: #dc2626; }

/* ── Text nodes ── */
.sd-toast strong { font-weight: 600; }
.sd-toast .sd-toast__msg { opacity: 0.72; font-weight: 400; }

/* ── Success check chip ── */
.sd-toast__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.16), 0px 1px 2px -0.5px rgba(0,0,0,0.06);
}
.sd-toast__check svg {
  width: 12px;
  height: 12px;
  display: block;
  color: #fff;
}

/* ── Emoji icon chip (notifications) ── */
.sd-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 13px;
  line-height: 1;
}

/* ── Info icon (bare, like the reference design) ── */
.sd-toast__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #fff;
}
.sd-toast__info svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ═══ iOS spinner (from Desktop toast spinner.css) ═══ */
@keyframes iSpinnerBlade {
  0%   { opacity: 0.85; }
  50%  { opacity: 0.25; }
  100% { opacity: 0.25; }
}

.ispinner {
  position: relative;
  width: 15px;
  height: 15px;
  display: inline-block;
  flex: 0 0 auto;
}
.ispinner-blade {
  position: absolute;
  top: 37%;
  left: 44%;
  width: 2px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 1px;
  animation: iSpinnerBlade 1s linear infinite;
  will-change: opacity;
}
.ispinner-blade:nth-child(1)  { transform: rotate(0deg)    translateY(-130%); animation-delay: -1.667s; }
.ispinner-blade:nth-child(2)  { transform: rotate(30deg)   translateY(-130%); animation-delay: -1.583s; }
.ispinner-blade:nth-child(3)  { transform: rotate(60deg)   translateY(-130%); animation-delay: -1.5s; }
.ispinner-blade:nth-child(4)  { transform: rotate(90deg)   translateY(-130%); animation-delay: -1.417s; }
.ispinner-blade:nth-child(5)  { transform: rotate(120deg)  translateY(-130%); animation-delay: -1.333s; }
.ispinner-blade:nth-child(6)  { transform: rotate(150deg)  translateY(-130%); animation-delay: -1.25s; }
.ispinner-blade:nth-child(7)  { transform: rotate(180deg)  translateY(-130%); animation-delay: -1.167s; }
.ispinner-blade:nth-child(8)  { transform: rotate(210deg)  translateY(-130%); animation-delay: -1.083s; }
.ispinner-blade:nth-child(9)  { transform: rotate(240deg)  translateY(-130%); animation-delay: -1s; }
.ispinner-blade:nth-child(10) { transform: rotate(270deg)  translateY(-130%); animation-delay: -0.917s; }
.ispinner-blade:nth-child(11) { transform: rotate(300deg)  translateY(-130%); animation-delay: -0.833s; }
.ispinner-blade:nth-child(12) { transform: rotate(330deg)  translateY(-130%); animation-delay: -0.75s; }