/* assets/css/notifications.css */

.notify-stack{
  position: fixed;
  right: 18px;
  top: 72px; /* tweak to sit below your nav */
  z-index: 5000;

  display: flex;
  flex-direction: column;
  gap: 10px;

  width: 360px;
  max-width: calc(100vw - 32px);
}

.notify{
  border-radius: 14px;
  padding: 12px 12px 10px 12px;

  background: rgba(12, 24, 22, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);

  box-shadow: 0 16px 45px rgba(0,0,0,0.55);
  overflow: hidden;
}

.notify__row{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.notify__icon{
  width: 22px;
  height: 22px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 13px;
  margin-top: 1px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}

.notify__text{ flex: 1; }
.notify__title{ font-weight: 700; font-size: 13px; }
.notify__body{ font-size: 12px; opacity: 0.85; margin-top: 2px; line-height: 1.2; }

.notify__close{
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  font-size: 18px;
  line-height: 18px;
  padding: 0 4px;
}
.notify__close:hover{ color: rgba(255,255,255,0.90); }

.notify__bar{
  height: 3px;
  border-radius: 99px;
  margin-top: 10px;
  background: rgba(255,255,255,0.10);
  position: relative;
  overflow:hidden;
}

/* progress that shrinks to 0 over --ttl */
.notify__bar::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 100%;
  background: rgba(120,220,255,0.85);
  animation: notifybar var(--ttl, 4200ms) linear forwards;
}

@keyframes notifybar{
  from { width: 100%; }
  to   { width: 0%; }
}

/* Kind accents */
.notify--success{
  border-color: rgba(120, 255, 190, 0.18);
}
.notify--success .notify__icon{
  background: rgba(120, 255, 190, 0.12);
  border-color: rgba(120, 255, 190, 0.18);
}
.notify--success .notify__bar::after{
  background: rgba(120, 255, 190, 0.85);
}

.notify--info{
  border-color: rgba(120, 220, 255, 0.16);
}
.notify--info .notify__icon{
  background: rgba(120, 220, 255, 0.12);
  border-color: rgba(120, 220, 255, 0.18);
}

.notify--error{
  border-color: rgba(255, 120, 120, 0.22);
}
.notify--error .notify__icon{
  background: rgba(255, 120, 120, 0.12);
  border-color: rgba(255, 120, 120, 0.22);
}
.notify--error .notify__bar::after{
  background: rgba(255, 120, 120, 0.85);
}