/*
 * 全局吐司浮岛 (pangu-toast)
 * ---------------------------------------------------------------------------
 * 来源：component-spec.html 模块 4「反馈三层」的 pangu-global-hud-toast。
 * 位置按用户 2026-09-06 的要求改成**顶部居中**（原来是右上角 top:92px right:32px）。
 *
 * 全站只有 #copyToast 这一个浮动提示，app.js 的 showMessage() 在后台页里
 * 全部汇进 showCopyToast()，所以改这一个元素 = 改掉所有这类提示。
 * app.js 切换的 .is-error / .is-info 两个类名保持不变。
 *
 * 反馈三层的另外两层（字段级错误贴字段下方、就地成功）是任务三，这里只搬位置。
 */

.pangu-toast {
  position: fixed;
  /* 顶栏高 50px（≤980px 时 48px），浮岛落在顶栏正下方，居中 */
  top: calc(50px + var(--pangu-space-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;

  display: inline-flex;
  align-items: center;
  gap: var(--pangu-space-2);
  min-height: 42px;
  max-width: min(520px, calc(100vw - 2 * var(--pangu-space-4)));
  padding: var(--pangu-space-2) var(--pangu-space-4);

  border: 1px solid var(--pangu-border-strong);
  border-radius: var(--pangu-radius-full);
  background: var(--pangu-material-glass);
  -webkit-backdrop-filter: var(--pangu-material-blur);
  backdrop-filter: var(--pangu-material-blur);
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.08);

  font-size: var(--pangu-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--pangu-text);
  text-align: left;

  animation: pangu-toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.pangu-toast[hidden] {
  display: none;
}

/* 底部微型倒计时进度条：走完就自动收起；鼠标悬停暂停，让人从容读完 */
.pangu-toast::after {
  content: "";
  position: absolute;
  left: var(--pangu-space-4);
  right: var(--pangu-space-4);
  bottom: 4px;
  height: 2px;
  border-radius: var(--pangu-radius-full);
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  animation: pangu-toast-countdown var(--pangu-toast-duration, 4500ms) linear forwards;
}

.pangu-toast.is-paused::after {
  animation-play-state: paused;
}

@keyframes pangu-toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pangu-toast::after { animation: none; opacity: 0; }
}

.pangu-toast .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--pangu-success);
}

/* -- 三种语义 -- */
.pangu-toast.is-error {
  border-color: var(--pangu-danger);
  color: var(--pangu-danger-ink);
  background: var(--pangu-danger-soft);
}

.pangu-toast.is-error .material-symbols-outlined {
  color: var(--pangu-danger);
}

.pangu-toast.is-info {
  border-color: var(--pangu-info-border);
  color: var(--pangu-info-ink);
  background: var(--pangu-info-soft);
}

.pangu-toast.is-info .material-symbols-outlined {
  color: var(--pangu-info);
}

@keyframes pangu-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pangu-toast {
    animation: none;
  }
}

/* 顶栏在 ≤980px 变矮到 48px */
@media (max-width: 1024px) {
  .pangu-toast {
    top: calc(48px + var(--pangu-space-2));
  }
}

/* 手机端：左右留边即可，仍然居中，不改成整条 */
@media (max-width: 540px) {
  .pangu-toast {
    max-width: calc(100vw - 2 * var(--pangu-space-3));
    font-size: var(--pangu-fs-xs);
  }
}