/* ═══════════════════════════════════════════════════════════════════
   INFINITY X — TOAST กลางของเว็บ (การ์ด + แถบเวลา · มุมขวาบน)

   ใช้คู่กับ assets/toast.js →  toast(ข้อความ, 'ok'|'err'|'info')
   สี: เขียว = สำเร็จ · ฟ้า = แจ้งให้ทราบ · แดง = ผิดพลาด

   นโยบาย: การแจ้งเตือนทุกอย่างใช้ toast เท่านั้น
           ห้ามมีข้อความ inline ในป็อปอัป/ใต้ฟอร์ม

   ใส่ 2 บรรทัดนี้ในหน้าใหม่ แล้วเรียก toast() ได้เลย:
     <link rel="stylesheet" href="assets/toast.css">
     <script src="assets/toast.js" defer></script>
   ═══════════════════════════════════════════════════════════════════ */

.tstack{position:fixed;right:24px;top:24px;z-index:9000;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}

.t{pointer-events:auto;display:flex;align-items:center;gap:11px;
  max-width:min(420px,calc(100vw - 48px));
  background:var(--card,#fff);color:var(--ink,#0F1E3D);border:1px solid var(--line,#DCE6F5);border-radius:11px;
  padding:13px 18px 15px;box-shadow:0 12px 30px -14px var(--shadow,rgba(15,30,61,.45));
  font-family:var(--font-ui,"Prompt","Segoe UI",sans-serif);
  font-size:.86rem;font-weight:500;line-height:1.5;
  position:relative;overflow:hidden;
  animation:t-in .22s cubic-bezier(.2,.9,.3,1.2) both}
.t.out{animation:t-out .18s ease-in both}
@keyframes t-in {from{opacity:0;transform:translateX(18px) scale(.97)}}
@keyframes t-out{to  {opacity:0;transform:translateX(14px) scale(.98)}}

.t b{font-weight:700}
.t .msg{white-space:pre-line}   /* ใส่ \n ในข้อความแล้วขึ้นบรรทัดใหม่ได้ */
.t .ico{flex:none;width:22px;height:22px;border-radius:7px;rotate:45deg;display:grid;place-items:center}
.t .ico svg{rotate:-45deg}
.t .x{margin-left:4px;background:none;border:0;cursor:pointer;padding:2px 4px;
  font-size:1rem;line-height:1;opacity:.4;color:inherit;font-family:inherit}
.t .x:hover{opacity:1}

/* แถบเวลาที่เหลือ */
.t::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;
  transform-origin:left;animation:t-bar var(--t-life,2.8s) linear forwards}
@keyframes t-bar{to{transform:scaleX(0)}}

.t.ok   .ico{background:var(--t-green,#DCFCE7);color:var(--c-green,#15803D)} .t.ok::after  {background:var(--green,#15803D)}
.t.info .ico{background:var(--t-blue,#DBEAFE);color:var(--blue,#1D4ED8)} .t.info::after{background:var(--blue,#1D4ED8)}
.t.err  .ico{background:var(--t-red,#FEE2E2);color:var(--c-red,#D92638)} .t.err::after {background:var(--red,#D92638)}

@media (prefers-reduced-motion: reduce){
  .t,.t.out{animation:none}
  .t::after{animation:none;width:0}
}
@media (max-width:600px){
  .tstack{right:12px;left:12px;top:12px;align-items:stretch}
  .t{max-width:none}
}