/**
 * 全站提示条（toast）样式
 *
 * 视觉沿用 Uiverse.io 的 notification 组件（by xerith_8140），改造点：
 *   1) 变量统一加 --ss-toast- 前缀，避免和页面令牌（--ss-* / 主题令牌）撞名
 *   2) 进度条去掉 infinite：走完即移除，由 JS 监听 animationend 控制
 *   3) 进度条改为 scaleX 收缩，语义是「倒计时」而不是「一条线滑过」
 *   4) 定位改顶部居中，和站内既有提示位置一致（原来是示例的左上角）
 *   5) 配色自包含：shopcart / home / clientarea 三端主题令牌不同，
 *      提示条如果依赖 --text-main 这类变量，在购物车会失效
 *   6) 补暗色下的投影与描边
 */

/* ===== 容器：顶部居中堆叠 ===== */
.ss-toast-stack {
  position: fixed;
  /* 顶部偏移抽成变量：入场要从「屏幕最上沿」开始落，关键帧得知道这段距离 */
  --ss-toast-top: 12px;           /* 悬浮在顶栏之上，距窗口上沿 12px */
  top: var(--ss-toast-top);
  /* 用左右 0 + auto margin 居中，不用 left:50% + translateX(-50%)：
     后者会让整条落在半像素上（视口宽奇数时 50% 是 .5），文字和 SVG 描边
     都会被重采样，看着发虚。auto margin 由布局算出整数位置。 */
  left: 0;
  right: 0;
  margin: 0 auto;                 /* auto 左右外边距 = 水平居中，且落在整数像素 */
  z-index: 3000;                  /* 高于顶栏下拉（200）与弹窗（2000+） */
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 0;
  list-style: none;
  font-family: var(--font-main, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif);
  pointer-events: none;           /* 容器不拦点击，避免盖住页面 */
}

/* ===== 单条 ===== */
.ss-toast-item {
  --ss-toast-fg: #18191c;
  --ss-toast-bg: #f3f3f3;
  --ss-toast-grid: rgba(225, 225, 225, .7);
  --ss-toast-icon-size: 18px;
  --ss-toast-font-size: 12px;

  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: var(--ss-toast-bg);
  color: var(--ss-toast-fg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  /* 网格纹理：55px 一格，只在 24%–26% / 74%–76% 两条带上着色 */
  background-image:
    linear-gradient(0deg,
      transparent 23%, var(--ss-toast-grid) 24%, var(--ss-toast-grid) 25%, transparent 26%,
      transparent 73%, var(--ss-toast-grid) 74%, var(--ss-toast-grid) 75%, transparent 76%),
    linear-gradient(90deg,
      transparent 23%, var(--ss-toast-grid) 24%, var(--ss-toast-grid) 25%, transparent 26%,
      transparent 73%, var(--ss-toast-grid) 74%, var(--ss-toast-grid) 75%, transparent 76%);
  background-size: 55px 55px;
  /* backwards 而不是 both：动画结束后交还给基础样式，不占着 transform
     （both 会把最后一帧一直黏住，之后任何 hover 效果都失效）。
     不写 will-change：它会把卡片长期提升为独立合成层，静止时文字和矢量
     图标会跟着层的精度走。transform 动画本身就会触发提升，够用了。 */
  animation: ss-toast-in .30s cubic-bezier(.22, .61, .36, 1) backwards;
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* 悬停/按下不再缩放：transform 缩放会让层内的文字重新栅格化，
   鼠标一移上去整条字就发虚。反馈改由背景色（见下方各状态的 :hover）承担。 */

/* ===== 入场：从屏幕最上沿落下来，落地时轻轻一沉 =====
   位移 = 自身高度 + 容器偏移，起点整条待在视口之上（下沿贴 y=0），
   所以是从页面顶端「进场」，而不是在顶栏下方凭空淡出来。

   落位不是一条曲线直接刹死，而是分三段，且大部分时间留给「落」这一下：
     0% → 72%  加速下落，冲过落点 2px
     72% → 86% 回弹 0.5px
     86% → 100% 归位
   回弹只有 2px / 0.5px——再大就成「弹跳」，这个量级只是让卡片有点重量，
   像被放在桌面上而不是被贴上去。尾段只占 14%，所以整体是「一下到位」，
   不会拖着一串小尾巴。
   每段各自给出 timing-function：第一段收尾要「慢下来」，不能匀速撞上去。

   opacity 只在前 9% 走完：卡片一出顶边就是实的，其余时间全交给位移，
   否则「淡入 + 下移」同时进行，第一感知仍然是渐显。
   全程只动 translateY，不再缩放。缩放会让层里的文字重新栅格化——
   一旦不是 1:1，笔画就被重采样，动画过程中看字就是糊的。
   位移不改变缩放比例，文字一次栅格化后用到底，移动中也保持锐利。 */
@keyframes ss-toast-in {
  0% {
    opacity: 0;
    transform: translateY(calc(-100% - var(--ss-toast-top, 12px)));
    animation-timing-function: cubic-bezier(.4, 0, .3, 1);
  }
  9% { opacity: 1; }
  72% {
    transform: translateY(2px);
    animation-timing-function: cubic-bezier(.3, .6, .3, 1);
  }
  86% { transform: translateY(-.5px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== 退场：轻轻抬起、化掉 =====
   不再一路飞回视口顶端。飞出去要走完整段行程（56px 起步），时长压不下来，
   而且「飞走」这个动作本身很抢注意力——对一条已经读完的提示是多余的。
   改成 12px 的上浮 + 缩到 .978 + 淡出，140ms，读起来是「被收走」而不是
   「弹飞」。因为不再需要知道自己在第几位，JS 里的 --ss-toast-exit 也一并
   删掉了。 */
.ss-toast-item.is-leaving {
  animation: ss-toast-out .14s cubic-bezier(.3, 0, .75, .4) both;
}
@keyframes ss-toast-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* ===== 内容 ===== */
.ss-toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ss-toast-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.ss-toast-text {
  font-size: var(--ss-toast-font-size);
  line-height: 1.5;
  color: var(--ss-toast-fg);
  user-select: none;
  word-break: break-word;
}
.ss-toast-close {
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .25s ease;
}
.ss-toast-item svg {
  width: var(--ss-toast-icon-size);
  height: var(--ss-toast-icon-size);
  color: var(--ss-toast-fg);
  transition: transform .25s ease;
}
.ss-toast-close:hover { background-color: rgba(0, 0, 0, .08); }
.ss-toast-close:active svg { opacity: .7; }

/* ===== 进度条：走完即移除 ===== */
.ss-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ss-toast-fg);
  transform-origin: left center;
  animation: ss-toast-progress var(--ss-toast-duration, 4000ms) linear forwards;
}
@keyframes ss-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
/* 悬停暂停：进度条停住，animationend 就不会触发，提示条也就不会消失 */
.ss-toast-item:hover .ss-toast-progress {
  animation-play-state: paused;
}

/* ===== 状态配色 ===== */
.ss-toast-item.is-success {
  --ss-toast-fg: #047857;
  --ss-toast-bg: #7dffbc;
  --ss-toast-grid: rgba(16, 185, 129, .25);
}
.ss-toast-item.is-success:hover { background-color: #5bffaa; }

.ss-toast-item.is-info {
  --ss-toast-fg: #1e3a8a;
  --ss-toast-bg: #7eb8ff;
  --ss-toast-grid: rgba(59, 131, 246, .25);
}
.ss-toast-item.is-info:hover { background-color: #5ba5ff; }

.ss-toast-item.is-warning {
  --ss-toast-fg: #78350f;
  --ss-toast-bg: #ffe57e;
  --ss-toast-grid: rgba(245, 159, 11, .25);
}
.ss-toast-item.is-warning:hover { background-color: #ffde59; }

.ss-toast-item.is-error {
  --ss-toast-fg: #7f1d1d;
  --ss-toast-bg: #ff7e7e;
  --ss-toast-grid: rgba(239, 68, 68, .25);
}
.ss-toast-item.is-error:hover { background-color: #ff5f5f; }

/* ===== 暗色：亮底 + 深字本身可读，只需加重投影和一圈描边 ===== */
[data-theme="dark"] .ss-toast-item {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ===== 小屏：贴边、去掉固定宽度 ===== */
@media (max-width: 480px) {
  .ss-toast-stack {
    width: calc(100vw - 24px);
    --ss-toast-top: 10px;
  }
}

/* ===== 降低动效偏好 =====
   reduce 不是「什么都不动」——WCAG 的要求是去掉大幅位移和缩放，
   淡入淡出属于透明度变化，不算 motion，应该保留。
   否则提示条会变成「凭空出现、凭空消失」，反而更难察觉。 */
/* 降低动效偏好下不再缩短位移，只去掉 hover 的缩放。
   原因：这里唯一要表达的信息就是「从页面顶端落下来」。把行程压到 6px，
   方向和来源全部丢失，提示条变成凭空出现——比有动画更难被察觉。
   116px / 540ms 与页面自然滚动同量级，不构成前庭负担。
   只保留「悬停不缩放」，避免鼠标扫过时卡片跟着抖。 */
@media (prefers-reduced-motion: reduce) {
  .ss-toast-item {
    transition: none;
  }
}