/* ═══════════════════════════════════════════════════════
   PNOTIFY — Frosted Light Toasts / EVRP 2026
   ═══════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes _pn-slide-in {
  0%   { transform: translateX(120px) scale(.86); opacity: 0; }
  52%  { transform: translateX(-9px)  scale(1.025); opacity: 1; }
  74%  { transform: translateX(4px)   scale(.988); }
  100% { transform: translateX(0)     scale(1); }
}
@keyframes _pn-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes _pn-icon-pop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  65%  { transform: scale(1.18) rotate(5deg); opacity: 1; }
  85%  { transform: scale(.94) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes _pn-closer-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Wrapper ── */
.ui-pnotify {
  top: 24px;
  right: 24px;
  position: absolute;
  height: auto;
  z-index: 9999;
  min-width: 290px;
  max-width: 380px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: _pn-slide-in .5s cubic-bezier(.34,1.46,.64,1) both;
  filter: drop-shadow(0 16px 40px rgba(15,23,42,.16)) drop-shadow(0 4px 12px rgba(15,23,42,.10));
}
html > body > .ui-pnotify { position: fixed; }

/* ── Card ── */
.ui-pnotify-container {
  margin: 0;
  height: 100%;
  padding: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.92) !important;
  background-image: none !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  overflow: hidden;
  position: relative;
  /* Fallback si pas de backdrop-filter */
  box-shadow: 0 0 0 1px rgba(15,23,42,.06) inset;
}

/* ── Top gradient accent ── */
.ui-pnotify-container::before {
  content: '';
  display: block;
  height: 3.5px;
  width: 100%;
  background: linear-gradient(90deg, #94a3b8, #cbd5e1, transparent);
}

/* ── Bottom countdown progress ── */
.ui-pnotify-container::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #94a3b8, transparent);
  transform-origin: left center;
  animation: _pn-progress var(--pn-delay, 3s) linear forwards;
  border-radius: 0 0 16px 16px;
  opacity: .6;
}

/* ── Close ── */
.ui-pnotify-closer,
.ui-pnotify-sticker {
  position: absolute;
  top: 12px;
  right: 12px;
  float: none !important;
  margin: 0;
  cursor: pointer;
  color: #94a3b8;
  font-size: .7rem;
  line-height: 1;
  transition: color .18s, transform .18s;
  z-index: 10;
  animation: _pn-closer-in .3s .3s both;
}
.ui-pnotify-sticker { right: 27px; }
.ui-pnotify-closer:hover {
  color: #0f172a;
  transform: scale(1.2) rotate(90deg);
}
.ui-pnotify-sticker:hover { color: #0f172a; }

/* ── Icon ── */
.ui-pnotify-icon {
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin: 15px 0 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  flex-shrink: 0;
}
.ui-pnotify-icon span {
  display: block;
  float: none !important;
  font-size: .95rem;
  color: #64748b !important;
  margin: 0;
  line-height: 1;
  animation: _pn-icon-pop .4s cubic-bezier(.34,1.56,.64,1) .06s both;
}

/* ── Title ── */
.ui-pnotify-title {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 15px 38px 2px 66px;
  letter-spacing: .01em;
}

/* ── Message ── */
.ui-pnotify-text {
  display: block;
  font-size: .775rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 14px 15px 66px;
  word-break: break-word;
}

/* Pas de titre → remonter le texte */
.ui-pnotify-title:empty + .ui-pnotify-text {
  margin-top: 15px;
}

/* ── Stacks ── */
.ui-pnotify.stack-topleft,
.ui-pnotify.stack-bottomleft  { left: 24px; right: auto; }
.ui-pnotify.stack-bottomleft,
.ui-pnotify.stack-bottomright { bottom: 24px; top: auto; }


/* ════════════════════════════════════
   VARIANTS
   ════════════════════════════════════ */

/* ─── SUCCESS ─── */
.ui-pnotify-container.alert-success::before {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 40%, #34d399 80%, transparent 100%);
}
.ui-pnotify-container.alert-success::after {
  background: linear-gradient(90deg, #16a34a, #22c55e 50%, transparent);
}
.ui-pnotify-container.alert-success {
  border-color: rgba(34,197,94,.25) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.1) inset !important;
}
.ui-pnotify-container.alert-success .ui-pnotify-icon {
  background: #dcfce7;
}
.ui-pnotify-container.alert-success .ui-pnotify-icon span { color: #16a34a !important; }
.ui-pnotify-container.alert-success .ui-pnotify-title { color: #14532d; }
.ui-pnotify-container.alert-success .ui-pnotify-text  { color: #166534; }

/* ─── ERROR ─── */
.ui-pnotify-container.alert-danger::before,
.ui-pnotify-container.alert-error::before,
.ui-pnotify-container.ui-state-error::before {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 40%, #f87171 80%, transparent 100%);
}
.ui-pnotify-container.alert-danger::after,
.ui-pnotify-container.alert-error::after,
.ui-pnotify-container.ui-state-error::after {
  background: linear-gradient(90deg, #dc2626, #ef4444 50%, transparent);
}
.ui-pnotify-container.alert-danger,
.ui-pnotify-container.alert-error {
  border-color: rgba(239,68,68,.22) !important;
  box-shadow: 0 0 0 1px rgba(239,68,68,.08) inset !important;
}
.ui-pnotify-container.alert-danger .ui-pnotify-icon,
.ui-pnotify-container.alert-error  .ui-pnotify-icon { background: #fee2e2; }
.ui-pnotify-container.alert-danger .ui-pnotify-icon span,
.ui-pnotify-container.alert-error  .ui-pnotify-icon span { color: #dc2626 !important; }
.ui-pnotify-container.alert-danger .ui-pnotify-title,
.ui-pnotify-container.alert-error  .ui-pnotify-title { color: #7f1d1d; }
.ui-pnotify-container.alert-danger .ui-pnotify-text,
.ui-pnotify-container.alert-error  .ui-pnotify-text  { color: #991b1b; }

/* ─── INFO ─── */
.ui-pnotify-container.alert-info::before {
  background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 40%, #818cf8 80%, transparent 100%);
}
.ui-pnotify-container.alert-info::after {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6 50%, transparent);
}
.ui-pnotify-container.alert-info {
  border-color: rgba(59,130,246,.22) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.08) inset !important;
}
.ui-pnotify-container.alert-info .ui-pnotify-icon { background: #dbeafe; }
.ui-pnotify-container.alert-info .ui-pnotify-icon span { color: #1d4ed8 !important; }
.ui-pnotify-container.alert-info .ui-pnotify-title { color: #1e3a8a; }
.ui-pnotify-container.alert-info .ui-pnotify-text  { color: #1e40af; }

/* ─── WARNING ─── */
.ui-pnotify-container.alert-warning::before,
.ui-pnotify-container.alert-notice::before {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 40%, #fb923c 80%, transparent 100%);
}
.ui-pnotify-container.alert-warning::after,
.ui-pnotify-container.alert-notice::after {
  background: linear-gradient(90deg, #d97706, #f59e0b 50%, transparent);
}
.ui-pnotify-container.alert-warning,
.ui-pnotify-container.alert-notice {
  border-color: rgba(245,158,11,.22) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,.08) inset !important;
}
.ui-pnotify-container.alert-warning .ui-pnotify-icon,
.ui-pnotify-container.alert-notice  .ui-pnotify-icon { background: #fef3c7; }
.ui-pnotify-container.alert-warning .ui-pnotify-icon span,
.ui-pnotify-container.alert-notice  .ui-pnotify-icon span { color: #d97706 !important; }
.ui-pnotify-container.alert-warning .ui-pnotify-title,
.ui-pnotify-container.alert-notice  .ui-pnotify-title { color: #78350f; }
.ui-pnotify-container.alert-warning .ui-pnotify-text,
.ui-pnotify-container.alert-notice  .ui-pnotify-text  { color: #92400e; }

/* ── History container ── */
.ui-pnotify-history-container {
  position: absolute;
  top: 0; right: 18px;
  width: 70px;
  border-top: none;
  padding: 0;
  z-index: 10000;
}
.ui-pnotify-history-container.ui-pnotify-history-fixed { position: fixed; }
.ui-pnotify-history-container .ui-pnotify-history-header { padding: 2px; text-align: center; }
.ui-pnotify-history-container button { cursor: pointer; display: block; width: 100%; }
.ui-pnotify-history-container .ui-pnotify-history-pulldown { display: block; margin: 0 auto; }