/* ============================================================================
   通知层（Toast）—— 统一右下角 / 堆叠队列 / 越界与遮挡兜底
   ----------------------------------------------------------------------------
   为什么单独成文件：
     产物 CSS（index-ui2-*.css）与 detail-v5-*.css 都带「内容哈希文件名」，
     服务端对哈希名返回 1 年 immutable 强缓存，Cloudflare 还会改写 TTL；
     所以改了内容就必须换名（换名即换 URL，绕开所有缓存层）。
   加载顺序：index-ui2-*.css → detail-v5-*.css → 本文件，同名属性覆盖前两者。
   类名 .ns-toaster 由补丁写入 bundle，是本文件唯一的挂钩点。
   ========================================================================= */

:root {
  /* 通知右 / 下边缘与屏幕边界、与底栏之间的距离 */
  --ns-toast-edge: 12px;
  /* 相邻通知之间的竖直间距 */
  --ns-toast-gap: 8px;
  /* 单条通知宽度上限 */
  --ns-toast-w: 336px;
  /* 通知层顶部留白：不侵入顶部标题 / 工具栏（实测工具栏底边 ≈47px，取 64px 留余量） */
  --ns-toast-top: 64px;

  /* 通知区高度上限（占视口比例）——手机端另有一档更严的值，见下方 @media */
  --ns-toast-maxh: 62dvh;

  /* 底部固定操作栏高度（商机列表页的分页栏）。
     实测：390x844 与 1440x900 下均为 45px —— 内容为 text-xs + btn-sm，
     高度由行高与 padding 决定，不随屏宽变化。
     桌面下底栏是 md:left-[264px]，右下角仍被分页栏占据，所以两档都要抬。 */
  --ns-bottombar-h: 45px;

  /* 通知层底边距 = 抬到底栏之上 + 一点间距 + iOS 底部安全区 */
  --ns-toast-bottom: calc(
    var(--ns-bottombar-h) + var(--ns-toast-edge) + env(safe-area-inset-bottom, 0px)
  );

  /* 宽度可用值：窄屏时按屏宽收缩，绝不横向出界 */
  --ns-toast-w-avail: calc(100vw - var(--ns-toast-edge) * 2);

  /* 可用净高 = 视口高 − 底边距 − 顶部留白。
     外面套 max(96px, …) 是为了在极端矮屏下也算出一个正数 ——
     max-height 若算出负数会被钳成 0，通知区会整块消失。 */
  --ns-toast-avail-h: max(
    96px,
    calc(100dvh - var(--ns-toast-bottom) - var(--ns-toast-top))
  );
}

/* ========================== 通知容器（右下角锚定） ========================= */
.ns-toaster {
  position: fixed;
  z-index: 60;
  top: auto;
  left: auto;
  right: var(--ns-toast-edge);
  /* 不支持 env() 的兜底：直接抬到底栏之上 */
  bottom: calc(var(--ns-bottombar-h) + var(--ns-toast-edge));
  /* 关键：抬到底部固定操作栏之上 —— 不遮挡分页 / 上一页 / 下一页等操作按钮 */
  bottom: var(--ns-toast-bottom);

  /* 定宽而不是按文案撑开：长文案不会把通知拉横向出界 */
  width: var(--ns-toast-w);
  max-width: var(--ns-toast-w-avail);

  /* 高度上限：最多占屏高 --ns-toast-maxh（手机端 45%，桌面端 62%），
     且不超过可用净高，绝不越过屏幕上沿 */
  max-height: 62vh;
  max-height: min(var(--ns-toast-maxh), var(--ns-toast-avail-h));

  display: flex;
  /* column-reverse：DOM 里的第 1 条渲染在最底下（最靠近右下角）。
     配合 JS 侧 e.slice().reverse()，最新通知恒在最下方；
     一旦内容高过 max-height，超出部分朝「上」溢出并被裁剪，
     最新那一条始终可见 —— 这正是队列式堆叠该有的行为。 */
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--ns-toast-gap);

  /* 溢出兜底：容器内部滚动，且滚到边界时不把滚动链传给页面 */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* 通知区不显示滚动条，避免视觉噪音 */
  pointer-events: none; /* 容器本身不吃点击，底下的内容照常可点 */
}

.ns-toaster::-webkit-scrollbar {
  display: none;
}

/* 单条通知恢复可点击（右上角的关闭按钮要能按） */
.ns-toaster > * {
  pointer-events: auto;
}

/* 文案最多 4 行，防止单条超长通知把整块区域撑满 */
.ns-toaster > * > span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ======================= 响应式：按屏宽 / 屏高分档 ======================= */

/* 平板与桌面（≥768px）：外边距略放大。
   底栏在桌面是 md:left-[264px]，右下角仍被分页栏占据 → 底边距必须保留。 */
@media (min-width: 768px) {
  :root {
    --ns-toast-edge: 16px;
  }
}

/* 大屏（≥1280px）：加宽单条通知，减少长文案折行 */
@media (min-width: 1280px) {
  :root {
    --ns-toast-edge: 20px;
    --ns-toast-w: 384px;
  }
}

/* 超宽屏（≥1920px）：再放宽一点，并拉开与屏幕边缘的距离 */
@media (min-width: 1920px) {
  :root {
    --ns-toast-edge: 28px;
    --ns-toast-w: 420px;
  }
}

/* 小屏手机（≤360px，如 iPhone SE 320/360）：收紧外边距，避免有效宽度太小 */
@media (max-width: 360px) {
  :root {
    --ns-toast-edge: 8px;
    --ns-toast-gap: 6px;
  }
}

/* 手机竖屏（<768px）：通知区最多占 45% 屏高 —— 手机屏幕矮、列表是卡片流，
   通知盖住的内容更多，因此把上限收紧到不足半屏，保证列表主体仍可见。
   （实测 4 条通知约 196px：390x844 下占 23%、320x568 下占 35%，均远小于上限） */
@media (max-width: 767px) {
  :root {
    --ns-toast-maxh: 45dvh;
  }
}

/* 矮屏 / 横屏（高 ≤500px，如手机横屏、软键盘弹起）：压缩顶部留白与间距，
   并把高度上限收到 50% —— 这类屏本来就矮，4 条通知就可能占掉近半屏。 */
@media (max-height: 500px) {
  :root {
    --ns-toast-top: 40px;
    --ns-toast-gap: 6px;
    --ns-toast-maxh: 50dvh;
  }
}

/* 尊重系统「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .ns-toaster > * {
    animation: none;
  }
}


/* ============================ 窄屏：给浮动「新建」让位 ============================
   手机窄屏（<640px）商机列表页右下角有常驻浮动「新建」按钮（.ns-fab，高 --ns-fab-h），
   与通知层同处右下角。这里把通知层底边距在「抬到底栏之上」的基础上再抬一个
   浮动按钮的高度 + 间距，保证常驻操作按钮永不被通知盖住（本项目硬约束）。
   注：非列表页没有浮动按钮，此处多抬的 64px 只让通知略高一点，无副作用。
   ============================================================================== */
@media (max-width: 639.98px) {
  :root {
    --ns-toast-bottom: calc(
      var(--ns-bottombar-h) + var(--ns-toast-edge) + var(--ns-fab-h, 56px) + 8px +
        env(safe-area-inset-bottom, 0px)
    );
  }
}