/* Toast và Global Banner (dải hệ thống trên cùng) */
/* ============ Figma: Toast ============
   Hug: co theo chữ (≤300), giữa màn hình — "Đã xóa dự án", "Đã rời nhóm".
   Full: hết bề ngang, ngay trên Expense composer (hoặc trên hàng nút của
   sheet đang mở), có thể kèm một nút. Mất kết nối không dùng toast nữa mà
   dùng Global Banner bên dưới. */
.toast{
  font:var(--text-body); letter-spacing:var(--tracking-body);
  position:absolute; z-index:50;
  display:flex; align-items:center; gap:var(--spacing-12);
  min-height:56px; padding:var(--spacing-12) var(--spacing-16);
  background:var(--neutral-1000); color:var(--neutral-0);
  border-radius:var(--radius-12); box-shadow:0 16px 20px -8px rgba(3,5,18,.1);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.toast.on{opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s}
.toast.full{left:var(--spacing-16); right:var(--spacing-16); transform:translateY(8px)}
.toast.full.on{transform:translateY(0)}
.toast.hug{left:50%; top:50%; min-height:48px; max-width:300px; width:max-content; text-align:center; justify-content:center;
  transform:translate(-50%,-50%) scale(.96)}
.toast.hug.on{transform:translate(-50%,-50%) scale(1)}
.toast #snackMsg{flex:1 1 auto; min-width:0}
/* Figma: Button / Borderless trên nền tối — Other/Button, blue/400 */
.toast button{
  font:var(--text-button); letter-spacing:var(--tracking-button);
  flex:0 0 auto; color:var(--blue-400); white-space:nowrap;
  min-height:44px; margin:-12px 0; padding:0 var(--spacing-2);
}
.toast button[hidden]{display:none}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }

/* Figma: Global Banner — dải hệ thống chạy hết bề ngang trên cùng, ĐẨY header
   xuống (không đè nội dung). Biến thể theo data-type:
     info · lost (mất mạng) → nền status/info-surface
     error → status/error-surface · warning → status/warning-surface
   Cao ≥56, đệm 12/16, icon 24 trong ô 32, chữ Body/Default; "Thử lại" là
   Button/Borderless chữ accent (Other/Button); ✕ 24. Banner đứng trên cùng
   thì nó nhận phần tai thỏ (safe-area) thay cho header. */
.global-banner{
  flex:0 0 auto; position:relative; z-index:21;
  display:flex; align-items:center; gap:var(--spacing-12);
  min-height:56px; padding:calc(var(--spacing-12) + env(safe-area-inset-top)) var(--spacing-16) var(--spacing-12);
  font:var(--text-body); letter-spacing:var(--tracking-body); color:var(--color-text-primary);
  background:var(--color-status-info-surface);
}
.global-banner[hidden]{display:none}
.global-banner[data-type="error"]{background:var(--color-status-error-surface)}
.global-banner[data-type="warning"]{background:var(--color-status-warning-surface)}
.global-banner:not([hidden]) + header{padding-top:var(--spacing-8)}
.global-banner__leading{flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; margin-right:calc(var(--spacing-4) - var(--spacing-12))}
.global-banner__leading img{display:block; width:24px; height:24px}
.global-banner__message{flex:1 1 auto; min-width:0}
.global-banner__action{
  font:var(--text-button); letter-spacing:var(--tracking-button);
  flex:0 0 auto; color:var(--color-accent-primary); white-space:nowrap;
  min-height:44px; margin:-12px 0; padding:0 var(--spacing-2); border-radius:var(--radius-16);
}
.global-banner__action[hidden], .global-banner__close[hidden]{display:none}
.global-banner__close{margin:-4px; color:var(--color-text-primary)}
@media (prefers-reduced-motion: no-preference){
  .global-banner:not([hidden]){animation:bannerIn var(--motion-base, 250ms) var(--ease-out, ease-out)}
}
@keyframes bannerIn{from{opacity:0; transform:translateY(-8px)}}