/* ============================================================================
   SOLI AI · CSS cho Toast social proof (.soli-toast-*)
   COPY NGUYÊN VĂN (byte-for-byte) từ: src/components/ToastNotification.tsx → const TOAST_CSS
   KHÔNG sửa nội dung bên dưới khi migrate — đây là bản gốc production.
   ========================================================================== */
.soli-toast-root{
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9998;
  pointer-events: none;
  font-family: 'Zalando Sans','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.soli-toast-card{
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(340px, calc(100vw - 32px));
  padding: 11px 34px 11px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(16,120,90,0.14);
  box-shadow: 0 12px 32px -12px rgba(11,74,57,0.30), 0 4px 12px -6px rgba(11,74,57,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.soli-toast-badge{
  position: relative;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 14px -6px rgba(16,163,127,0.7);
}
.soli-toast-emoji{ font-size: 18px; line-height: 1; filter: saturate(1.05); }
.soli-toast-dot{
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #34d399; border: 2px solid #ffffff;
}
.soli-toast-dot::after{
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: rgba(52,211,153,0.55);
  animation: soli-toast-pulse 1.8s ease-out infinite;
}
.soli-toast-body{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.soli-toast-brand{
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: #0c6b52;
}
.soli-toast-text{
  font-size: 13px; font-weight: 600; line-height: 1.4; color: #0d2b22;
  text-wrap: pretty;
}
.soli-toast-close{
  position: absolute; top: 7px; right: 7px;
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; cursor: pointer;
  color: #7c8a83; background: transparent;
  transition: background .15s ease, color .15s ease;
}
.soli-toast-close:hover{ background: rgba(16,120,90,0.08); color: #0c6b52; }
.soli-toast-close:focus-visible{ outline: 2px solid rgba(16,185,129,0.6); outline-offset: 1px; }

.soli-toast-in{ animation: soli-toast-in .34s cubic-bezier(.2,.8,.2,1) both; }
.soli-toast-out{ animation: soli-toast-out .30s ease both; }

@keyframes soli-toast-in{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes soli-toast-out{
  from{ opacity: 1; transform: translateY(0); }
  to{ opacity: 0; transform: translateY(14px); }
}
@keyframes soli-toast-pulse{
  0%{ transform: scale(1); opacity: .7; }
  70%{ transform: scale(2.4); opacity: 0; }
  100%{ transform: scale(2.4); opacity: 0; }
}

@media (max-width: 420px){
  .soli-toast-card{ width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce){
  .soli-toast-in, .soli-toast-out{ animation: none; }
  .soli-toast-dot::after{ animation: none; }
}