/* ================= Toasts =================
   White cards stacked under the top bar (they never cover the bell or the user menu). Each has a
   top edge and a hexagon in its type's colour, a title naming the type, the message, a close
   button, and a bar along the foot that runs down the time left; pointing at a toast pauses it.
   Built by showToast() in /js/toast.js. Shared by every page, the login and first-login pages too,
   so colours are written out rather than taken from shared.css. */
.toast-container {
    position: fixed; z-index: 9999; top: calc(var(--nav-h, 8px) + 12px); right: 18px;
    width: 360px; max-width: calc(100vw - 24px);
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
    position: relative; overflow: hidden; pointer-events: auto;
    display: flex; align-items: flex-start; gap: 12px; padding: 15px 12px 15px 14px;
    border-radius: 14px; background: #ffffff;
    box-shadow: 0 18px 36px -16px rgba(16, 39, 59, 0.45), 0 0 0 1px rgba(16, 39, 59, 0.06);
    font-family: 'IBM Plex Sans Thai', 'Segoe UI', Tahoma, sans-serif;
    animation: dtcToastIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.toast::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.toast.hide { animation: dtcToastOut 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.tst-ic {
    flex-shrink: 0; width: 30px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.tst-ic i { font-size: 13px; }
.tst-body { flex: 1; min-width: 0; padding-top: 1px; }
.tst-title { display: block; font-family: 'Anuphan', 'IBM Plex Sans Thai', sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #10273b; }
.tst-msg { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.5; color: #4f5d6c; overflow-wrap: anywhere; }
.tst-x {
    flex-shrink: 0; width: 26px; height: 26px; margin: -3px -2px 0 0; border: 0; border-radius: 8px;
    background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.2s ease;
}
.tst-x i { font-size: 12px; color: #9aa7b4; }
.tst-x:hover { background: #f1f4f7; }
.tst-x:hover i { color: #4f5d6c; }
.tst-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; opacity: 0.35; transform-origin: left; animation: dtcToastBar linear forwards; }
.toast.paused .tst-bar { animation-play-state: paused; }

.toast-info::before, .toast-info .tst-bar { background: #187ec9; }
.toast-success::before, .toast-success .tst-bar { background: #16a06c; }
.toast-warning::before, .toast-warning .tst-bar { background: #e3a008; }
.toast-error::before, .toast-error .tst-bar { background: #dc3b3b; }
.toast-info .tst-ic { background: #e6f2fc; } .toast-info .tst-ic i { color: #1567ad; }
.toast-success .tst-ic { background: #e3f6ee; } .toast-success .tst-ic i { color: #0b7a53; }
.toast-warning .tst-ic { background: #fff3d6; } .toast-warning .tst-ic i { color: #97690a; }
.toast-error .tst-ic { background: #fdecec; } .toast-error .tst-ic i { color: #c62828; }

@keyframes dtcToastIn { from { opacity: 0; transform: translateX(40px) scale(0.96); } }
@keyframes dtcToastOut { to { opacity: 0; transform: translateX(110%); } }
@keyframes dtcToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Phone: full width under the top bar. */
@media (max-width: 768px) {
    .toast-container { top: calc(var(--nav-h, 0px) + 8px); left: 10px; right: 10px; width: auto; max-width: none; }
}