/* Toasted — universal styles */
.toast-container{
  position:fixed; top:1rem; right:1rem;
  display:flex; flex-direction:column; gap:1rem;
  z-index:9999; perspective:1000px; /* enables 3D flip depth */
}

/* toast base */
.toast{
  --cut:12px; --b:2px; --glass:#151515; --dur:5000ms;
  --rim:#00ff66;      /* overridden per state */
  --text:#e9f0ee;     /* content text color */

  position:relative; display:flex; flex-direction:column;
  min-width:280px; max-width:420px; padding:1rem; overflow:hidden;
  animation:toast-explode-in .35s ease-out;
  transition:margin .3s, transform .3s, opacity .3s;
  border:none; color:#00ff66; /* initial paint */
  transform-origin: 100% 0;   /* nicer hinge for flip */
  will-change: transform, opacity;
}
.toast > *{ position:relative; z-index:3; }

/* rim (slanted) */
.toast::before{
  content:""; position:absolute; inset:0;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background: var(--rim);
  filter: drop-shadow(0 0 12px var(--rim));
  z-index:0;
}

/* inner panel inset to reveal rim */
.toast::after{
  content:""; position:absolute; inset:var(--b);
  --inner:calc(var(--cut) - var(--b));
  clip-path:polygon(var(--inner) 0,100% 0,100% calc(100% - var(--inner)),
                    calc(100% - var(--inner)) 100%,0 100%,0 var(--inner));
  background:var(--glass); backdrop-filter:blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  z-index:1;
}

/* title with rim-colored underline via pseudo (wins over older rules) */
.toast .title-bar{
  position:relative;
  font-weight:700; margin-bottom:.7rem; padding-bottom:.25rem;
  color: var(--text);
  border-bottom:0; /* neutralize any default underline */
  text-transform:uppercase; letter-spacing:1px; opacity:.95;
}
.toast .title-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:3px; background: var(--rim);
  box-shadow: 0 0 8px var(--rim);
  border-radius:2px;
}

.toast .content{ display:flex; align-items:center; gap:.5rem; }
.toast .icon{ font-size:1.5rem; line-height:1; }
.toast .message{ flex:1; color:var(--text); opacity:.95; }

/* close button */
.toast .close{
  position:absolute; top:6px; right:6px; width:24px; height:24px;
  font-size:16px; font-weight:700; line-height:22px; text-align:center;
  border:2px solid var(--rim); border-radius:4px;
  background:rgba(255,255,255,.08); color:var(--rim);
  cursor:pointer; user-select:none; z-index:4;
}

/* countdown bar — thicker + glow */
.toast .countdown-bar{
  position:absolute; left:0; bottom:0; height:6px; width:100%;
  background: var(--rim); opacity:.95; z-index:4;
  box-shadow: 0 0 10px var(--rim), inset 0 -1px 0 rgba(0,0,0,.35);
  animation: toast-countdown var(--dur) linear forwards;
  border-top-right-radius:4px;
}
@keyframes toast-countdown{ from{width:100%} to{width:0%} }

/* enter + exit (original flip) */
.toast.newest{ z-index:10; box-shadow:0 0 30px rgba(255,255,255,.25); }
.toast.removing{ margin-top:-100px; transform:scale(.5); opacity:0; }
.toast.exit-flip{
  animation: toast-explode-in .35s ease-out,
             flipOut .6s ease-in calc(var(--dur) - 600ms) forwards;
}
@keyframes toast-explode-in{
  0%{transform:scale(.5);opacity:0}
  60%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1)}
}
@keyframes flipOut{
  0%  { opacity:1; transform: rotateX(0) scale(1);   filter: blur(0); }
  100%{ opacity:0; transform: rotateX(90deg) scale(.5); filter: blur(4px); }
}

/* themes — explicit --rim to avoid currentColor pitfalls */
.toast.success{ color:#00ff66; --rim:#00ff66; }
.toast.fail   { color:#ff0033; --rim:#ff0033; }
.toast.warning{ color:#ff9900; --rim:#ff9900; }
.toast.info   { color:#3399ff; --rim:#3399ff; }

/* accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.exit-flip,
  .toast.removing {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .toast .countdown-bar { animation-duration: 0.01ms !important; }
}