/* 轻提示：一次操作的结果反馈，不打断当前操作。
   分工口径：要用户点头、填东西、做选择，用弹窗（VZAlert / VZConfirm）；
   只是告知「成了 / 失败了 / 正在处理」，用轻提示。各站不要再自造浮层，也不要用 alert()。
   位置：默认页面上方居中，加 `.vz-toast-layer-bottom` 改下方居中。两处可同时存在，
   互不挤占，由 VZToast 的 position 参数决定挂哪一层。
   结构：<div class="vz-toast-layer" aria-live="polite">
           <div class="vz-toast vz-toast-success">
             <span class="vz-toast-ico">图标</span>
             <span class="vz-toast-msg">文案</span>
             <button class="vz-toast-close" aria-label="关闭提示">图标</button>
           </div>
         </div>
   不引 JS 也能用：给 .vz-toast 手动加 .show 就出现，退出加 .leaving 播完再摘节点。
   显隐同样不能用 display，靠 opacity 配 transform，与弹窗同一套做法。 */

.vz-toast-layer {
  position: fixed;
  left: 50%;
  top: calc(var(--vz-toast-offset) + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: var(--vz-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vz-space-2);
  width: min(420px, calc(100vw - var(--vz-space-6) * 2));
  /* 层本身不吃点击，否则这块区域整片失效；只有提示条自己接收事件 */
  pointer-events: none;
}
.vz-toast-layer-bottom {
  top: auto;
  bottom: calc(var(--vz-toast-offset) + env(safe-area-inset-bottom, 0px));
}

.vz-toast {
  display: flex;
  align-items: center;
  gap: var(--vz-space-3);
  /* 宽度按内容走，短提示不会拉成一条 420 的空条；长文案到层宽为止 */
  max-width: 100%;
  padding: var(--vz-space-3) var(--vz-space-4);
  background: var(--vz-bg-elevated);
  border: 1px solid var(--vz-border-2);
  border-radius: var(--vz-radius-toast);
  box-shadow: var(--vz-shadow-toast);
  font-family: var(--vz-font-ui);
  font-size: var(--vz-fs-14);
  line-height: 1.5;
  color: var(--vz-text);
  opacity: 0;
  /* 上方层从上面落下来 */
  transform: translateY(calc(var(--vz-space-3) * -1)) scale(.96);
  transition: opacity var(--vz-dur) ease, transform var(--vz-dur) cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto;
}
.vz-toast.show { opacity: 1; transform: translateY(0) scale(1); }
/* 下方层反过来，从下面升上来 */
.vz-toast-layer-bottom .vz-toast { transform: translateY(var(--vz-space-3)) scale(.96); }
.vz-toast-layer-bottom .vz-toast.show { transform: translateY(0) scale(1); }
/* 退场朝来的方向缩回去，视觉上比原地消失轻 */
.vz-toast.leaving,
.vz-toast-layer-bottom .vz-toast.leaving {
  opacity: 0;
  transform: translateY(calc(var(--vz-space-3) * -1)) scale(.96);
  transition-timing-function: ease-in;
}
.vz-toast-layer-bottom .vz-toast.leaving { transform: translateY(var(--vz-space-3)) scale(.96); }

.vz-toast-ico {
  flex: none;
  display: inline-flex;
  width: 16px;
  height: 16px;
}
.vz-toast-ico svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.vz-toast-msg {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.vz-toast-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--vz-radius-sm);
  color: var(--vz-text-tertiary);
  cursor: pointer;
  transition: color var(--vz-dur-fast), background var(--vz-dur-fast);
}
.vz-toast-close:hover {
  color: var(--vz-text);
  background: var(--vz-glass-8);
}
.vz-toast-close svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.vz-toast-close:focus-visible {
  outline: 2px solid var(--vz-border-focus);
  outline-offset: 1px;
}

/* 类型色只染图标，正文保持主文字色：四条并排也能一眼分出轻重，又不至于整条发绿发红 */
.vz-toast-info .vz-toast-ico { color: var(--vz-info); }
.vz-toast-success .vz-toast-ico { color: var(--vz-success); }
.vz-toast-warning .vz-toast-ico { color: var(--vz-warning); }
.vz-toast-danger .vz-toast-ico { color: var(--vz-danger); }

/* 移动端只收窄，边距交给 --vz-toast-offset 统一控制，避免两个断点各自写一套 */
@media (max-width: 640px) {
  .vz-toast-layer {
    width: calc(100vw - var(--vz-space-4) * 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vz-toast,
  .vz-toast.leaving {
    transform: none;
    transition-duration: 0.01ms;
  }
}