/* ------------------------------------------------------------------
   Toast — mesej flash gaya timbul di ATAS-KANAN, beranimasi.

   Menggantikan banner .pageintro bagi mesej *flash* (jawapan satu kali
   kepada tindakan pengguna) supaya tidak terlepas pandang. Panel .alert
   yang kekal (maklumat berdiri) tidak diubah.

   Server-rendered: markup dibina oleh PHP (susunatur/_toast.php); skrip
   hanya menambah butang tutup dan auto-hilang. Tiada jQuery, tiada CDN.
   Warna mengikut token FSK (--ada / --tiada). Masa mengikut rujukan HPPK:
   300ms masuk, 5s di skrin, 1s keluar, tahan semasa tetikus di atasnya.
   ------------------------------------------------------------------ */

.toaster{
  position:fixed; top:16px; right:16px; z-index:4000;
  width:min(360px, calc(100vw - 32px));
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;                 /* hanya toast sendiri boleh diklik */
}

.toast{
  pointer-events:auto; position:relative; overflow:hidden;
  display:flex; gap:11px; align-items:flex-start;
  background:var(--panel,#fff); color:var(--ink,#1d2733);
  border:1px solid var(--line,#e2e8f2);
  border-left:4px solid var(--_ac,#2f9e6b);
  border-radius:var(--radius,12px);
  box-shadow:0 6px 24px rgba(20,40,80,.16);
  padding:13px 40px 13px 14px;
  animation:toastIn .3s cubic-bezier(.2,.7,.3,1) both;
}
.toast--ok { --_ac:var(--ada,#2f9e6b); }
.toast--err{ --_ac:var(--tiada,#e2574c); }

.toast__icon { font-size:19px; line-height:1.2; flex-shrink:0; }
.toast__body { flex:1; min-width:0; }
.toast__title{ font-weight:700; font-size:13.5px; margin:0 0 2px; color:var(--_ac); }
.toast__msg  { font-size:13px; line-height:1.45; color:var(--ink,#1d2733); overflow-wrap:anywhere; }
.toast__msg > div      { margin-top:3px; }
.toast__msg > div:first-child{ margin-top:0; }

.toast__close{
  position:absolute; top:6px; right:8px; border:0; background:transparent;
  font-size:19px; line-height:1; color:var(--faint,#8a98ad); cursor:pointer;
  padding:2px 5px; border-radius:6px;
}
.toast__close:hover{ background:var(--panel2,#f7f9fc); color:var(--muted,#5d6b80); }

/* bar kemajuan susut selari dengan kiraan 5s */
.toast__bar{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--_ac,#2f9e6b); opacity:.5; transform-origin:left center;
  animation:toastBar 5s linear forwards;
}
.toast.is-held  .toast__bar{ animation-play-state:paused; }   /* tahan bila hover */
.toast.is-hiding{ animation:toastOut 1s cubic-bezier(.4,0,.7,.2) both; }

@keyframes toastIn { from{opacity:0; transform:translateX(120%);} to{opacity:1; transform:translateX(0);} }
@keyframes toastOut{ from{opacity:1; transform:translateX(0);}  to{opacity:0; transform:translateX(120%);} }
@keyframes toastBar{ from{transform:scaleX(1);} to{transform:scaleX(0);} }

@media (max-width:520px){
  .toaster{ top:12px; right:12px; left:12px; width:auto; }
}
@media (prefers-reduced-motion:reduce){
  .toast{ animation:none; }
  .toast.is-hiding{ animation:none; opacity:0; }
  .toast__bar{ animation:none; }
}