/* =================================================================
   VTCore.toast — cặp với js/vt-core/vt-toast.js. Không phụ thuộc CSS DevExtreme.

   Màu mặc định lấy từ biến --vt-toast-* (khai ở :root bên dưới). Theme đè bằng sổ theme
   vtui-theme.css (--vtui-toast-*, do VTUI áp lúc mở) hoặc đè thẳng các biến --vt-toast-*.

   ⚠ z-index cao hơn mọi thứ đang có (thang đo 23/09/2026: modal 9999 · chat AI 1.000.000 ·
     bảng cảm xúc 1.000.010) — thông báo là dải nhỏ tự tắt, nằm trên cùng không che gì lâu,
     còn bị che thì mất hẳn.
   ================================================================= */
:root {
    --vt-toast-success-bg: var(--dx-color-success, #2e7d32);
    --vt-toast-success-fg: #fff;
    --vt-toast-error-bg:   var(--dx-color-danger,  #c62828);
    --vt-toast-error-fg:   #fff;
    --vt-toast-warning-bg: var(--dx-color-warning, #f9a825);
    --vt-toast-warning-fg: var(--dx-color-text, #242424);
    /* theme Fluent: toast «thông tin» nền TRẮNG chữ tối (đo trên app thật), không phải xanh */
    --vt-toast-info-bg:    var(--dx-color-bg, #fff);
    --vt-toast-info-fg:    var(--dx-color-text, #242424);
    /* Số đo lấy từ DevExtreme 25.2 (đo trên trang thật): chữ 12px, bo 4px, padding 8×12, rộng 344–568px, cách đáy 20px. */
    --vt-toast-radius: 4px;
    --vt-toast-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14);
    --vt-toast-font-size: 12px;
    --vt-toast-border: 0 none;
    --vt-toast-weight: 400;
}

.vt-toast-host {
    position: fixed;
    z-index: 1000100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
    max-width: 100vw;
    box-sizing: border-box;
    pointer-events: none;          /* vùng trống không chặn chuột; từng dải bật lại */
    --vt-toast-dx: 0px;
    --vt-toast-dy: 0px;
}
.vt-toast-host[data-pos^="bottom"] { bottom: calc(20px - var(--vt-toast-dy)); }
.vt-toast-host[data-pos^="top"]    { top: var(--vt-toast-dy); }
/* Cũ nhất ở trên, mới nhất sát mép (xếp theo thứ tự thêm vào). */
/* Căn giữa bằng left/right = 0 (không dùng left:50% — host sẽ co về nửa bề ngang màn hình, toast bị bóp trên điện thoại). */
.vt-toast-host[data-pos$="center"] { left: 0; right: 0; margin-left: var(--vt-toast-dx); align-items: center; }
.vt-toast-host[data-pos$="left"]   { left: var(--vt-toast-dx); align-items: flex-start; }
.vt-toast-host[data-pos$="right"]  { right: calc(0px - var(--vt-toast-dx)); align-items: flex-end; }

.vt-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    /* DevExtreme vẽ toast LUÔN rộng 568px (kể cả chữ ngắn), tối thiểu 344px khi nơi gọi khai width nhỏ hơn (đo 14/10/2026). */
    width: min(568px, calc(100vw - 32px));
    min-width: min(344px, calc(100vw - 32px));
    max-width: min(568px, calc(100vw - 32px));
    min-height: 36px;
    align-items: center;
    padding: 8px 12px;
    border: var(--vt-toast-border);
    border-radius: var(--vt-toast-radius);
    box-shadow: var(--vt-toast-shadow);
    font-size: var(--vt-toast-font-size);
    font-weight: var(--vt-toast-weight);
    line-height: 16px;
    word-break: break-word;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}
.vt-toast-host[data-pos^="top"] .vt-toast { transform: translateY(-8px); }
.vt-toast--in      { opacity: 1; transform: none !important; }
.vt-toast--leaving { opacity: 0; transform: none; }

.vt-toast--success { background: var(--vt-toast-success-bg); color: var(--vt-toast-success-fg); }
.vt-toast--error   { background: var(--vt-toast-error-bg);   color: var(--vt-toast-error-fg); }
.vt-toast--warning { background: var(--vt-toast-warning-bg); color: var(--vt-toast-warning-fg); }
.vt-toast--info    { background: var(--vt-toast-info-bg);    color: var(--vt-toast-info-fg); }

/* Icon: DevExtreme (theme Fluent) KHÔNG hiện icon nên mặc định ẩn; theme nào muốn thì bật lại
   bằng `.vt-toast__icon { display: inline-block }`. */
.vt-toast__icon { display: none; flex: none; width: 1.2em; text-align: center; font-weight: 700; }
.vt-toast--success .vt-toast__icon::before { content: "\2713"; }
.vt-toast--error   .vt-toast__icon::before { content: "\2715"; }
.vt-toast--warning .vt-toast__icon::before { content: "!"; }
.vt-toast--info    .vt-toast__icon::before { content: "i"; }
.vt-toast__msg { flex: 1 1 auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .vt-toast { transition: none; transform: none; }
}