/* ============ 十四、通知分层（10-16 第七轮） ============
   白晨问「通知类的你准备怎么搞？弹窗版本一不是把背景都挡住了吗？」——分三层：你点开的才挡背景，系统主动来的不挡。
   1 操作结果＝底部提示条（.toasts／.toast，app.js toast）：自动消失、带撤销，最多叠 3 条，不压暗、不挡点击；
   2 有时效的提醒＝右上横幅（#ntf／.ntf .banner，app.js ntfSync）：从顶栏下沿落下，停到你处理为止，不压暗、不挡页面；
   3 状态变化＝不弹，在对应卡片或「今天要做什么」窄条上原地提示（不在本文件）。
   和弹窗第 1 版（第十三节）同一家族：暖白实底、带褐色的阴影、圆角档位（横幅 20、提示条 16，比弹窗的 24～28 小一档）、
   同一条缓动 cubic-bezier(.32,.72,0,1)；但「轻」——没有遮罩、阴影更短更淡、字号小一号。
   减少动态效果时只淡入淡出（app.js 里判断 reduced()，这里关掉位移过渡）。 */
:root {
  --ntf-surface: #FFFDFA;
  --ntf-ease: cubic-bezier(.32, .72, 0, 1);
  /* 提示条：贴边细线＋近影＋一小片柔影；横幅：比提示条再远一点，仍明显浅于弹窗的 --pv-sh-layer */
  --ntf-sh-toast: 0 0 0 1px rgba(70, 48, 34, .08), 0 1px 2px rgba(70, 48, 34, .06), 0 12px 28px -12px rgba(70, 48, 34, .30);
  --ntf-sh-bn: 0 0 0 1px rgba(70, 48, 34, .07), 0 2px 4px rgba(70, 48, 34, .05), 0 18px 40px -14px rgba(70, 48, 34, .30);
}

/* ---------- 第一层：提示条 ----------
   容器不接点击（pointer-events: none），只有提示条本身接；高度由 app.js toastLayout 写，跟着叠放／展开变 */
.toasts { position: fixed; z-index: 80; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom)); width: min(520px, calc(100vw - 24px)); height: 0; margin: 0 auto; pointer-events: none; transition: height 280ms var(--ntf-ease); }
.toast {
  --k: var(--done-dot); --k-bg: var(--done-bg); --k-ink: var(--done-ink);
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: 100%; min-width: min(320px, 100%); min-height: 48px; margin: 0 auto; padding: 7px 7px 7px 9px;
  border-radius: 16px; background: var(--ntf-surface); color: var(--ink); font-size: 14px; box-shadow: var(--ntf-sh-toast);
  overflow: hidden; pointer-events: auto; transform-origin: 50% 100%; transition: transform 320ms var(--ntf-ease), opacity 240ms, background-color 240ms;
}
.toast.k-cal, .toast.k-bell { --k: var(--today-dot); --k-bg: var(--today-bg); --k-ink: var(--today-ink); }
.toast.k-wait { --k: var(--wait-dot); --k-bg: var(--wait-bg); --k-ink: var(--wait-ink); }
.toast.k-undo, .toast.k-info { --k: var(--quiet-dot); --k-bg: var(--fc-plate); --k-ink: var(--ink-2); }
.toast.k-copy, .toast.k-file { --k: #C98A4E; --k-bg: var(--pv-tint, #FBEBDC); --k-ink: var(--ink-2); }
.toast-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--k-bg); color: var(--k-ink); }
.toast-ic .ico { width: 16px; height: 16px; }
.toast-t { flex: 1; min-width: 0; padding: 4px 6px 4px 0; line-height: 1.45; }
.toast-btn { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fc-plate); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 140ms; }
.toast-btn:hover { background: rgba(31, 30, 27, .11); }
.toast-btn:active { transform: scale(.97); }
.toast-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* 底边的剩余时间：一道 2 像素的细线，颜色跟图标块；整叠展开（暂停）时淡一点 */
.toast-bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--k); opacity: .35; transform-origin: 0 50%; pointer-events: none; }
.toasts.is-open .toast-bar { opacity: .15; }
/* 叠在后面的只露一道边，字和按钮藏起来 */
.toast.behind > * { opacity: 0; transition: opacity 160ms; }
/* 暖白叠暖白看不出层次：后面的一张比一张深一点（像纸叠在一起的阴面） */
.toast[data-d="1"], .ntf .banner[data-d="1"] { background: #F7F1EA; }
.toast[data-d="2"], .ntf .banner[data-d="2"] { background: #F0E7DD; }

/* ---------- 第二层：横幅 ----------
   #ntf 固定在顶栏下沿 12 像素、右边对齐桌面卡片的右缘（.desk 最宽 1440、左右各留 32）；高度由 app.js ntfLayout 写 */
.ntf { position: fixed; z-index: 29; top: calc(var(--rb-h) + var(--hdr-h) + 12px); right: max(32px, calc((100vw - 1440px) / 2 + 32px)); width: min(400px, calc(100vw - 64px)); height: 0; pointer-events: none; transition: height 280ms var(--ntf-ease); }
.ntf .banner {
  position: absolute; top: 0; left: 0; right: 0; display: block; width: auto; margin: 0; padding: 14px 14px 14px 14px;
  border-radius: 20px; background: var(--ntf-surface); box-shadow: var(--ntf-sh-bn);
  pointer-events: auto; transform-origin: 50% 0; transition: transform 320ms var(--ntf-ease), opacity 240ms, background-color 240ms; animation: none;
}
/* 顶栏胶囊长大成记录面时（你正在记一句、或正把文件拖进来），横幅先往上收起让开，免得压住记录面右半边；胶囊缩回就落回来 */
body:has(#isl.is-open) .ntf { opacity: 0; transform: translateY(-8px); pointer-events: none; }
body:has(#isl.is-open) .ntf .banner { pointer-events: none; }
.ntf { transition: height 280ms var(--ntf-ease), opacity 200ms, transform 280ms var(--ntf-ease); }
.ntf .banner.behind { cursor: pointer; }
.ntf .banner.behind > * { opacity: 0; transition: opacity 160ms; }
.ntf-h { display: flex; align-items: flex-start; gap: 12px; }
.ntf-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--today-bg); box-shadow: inset 0 0 0 1px rgba(44, 100, 160, .08); color: var(--today-ink); transform-origin: 50% 20%; }
.ntf-ic .ico { width: 19px; height: 19px; }
.ntf .k-late .ntf-ic { background: var(--wait-bg); box-shadow: inset 0 0 0 1px rgba(154, 90, 18, .10); color: var(--wait-ink); }
.ntf .bn-txt { flex: 1; min-width: 0; padding-top: 1px; }
.ntf .bn-txt small { display: block; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.ntf .bn-txt b { display: block; margin-top: 1px; font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.005em; }
.ntf .bn-txt span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ntf .bn-txt span b { display: inline; margin: 0; font-size: inherit; font-weight: 600; color: var(--ink-2); }
.ntf-x { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -3px -3px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; transition: background 140ms, color 140ms, transform 140ms; }
.ntf-x:hover { background: var(--fc-plate); color: var(--ink); }
.ntf-x:active { transform: scale(.92); }
.ntf-x .ico { width: 15px; height: 15px; }
.ntf .bn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0 50px; }
.ntf .bn-acts .btn.sm { height: 32px; }
.ntf .bn-acts .btn .ico { width: 15px; height: 15px; }

/* 宽屏上草案单子居中浮起、右上又落下横幅时：单子往下让出横幅的高度（app.js ntfPush 写 --ntf-push），横幅处理掉就回原位 */
@media (min-width: 761px) {
  .brief.bn.is-draft { margin-top: var(--ntf-push, 0px); transition: box-shadow var(--dur) var(--ease), margin-top 360ms var(--ntf-ease); }
}
/* 手机：横幅贴顶、左右各留 8 像素，底下一道把手提示「可上滑关掉」；提示条占满宽，在底部安全区上方 */
@media (max-width: 760px) {
  .toasts { bottom: calc(14px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); }
  .toast { width: 100%; min-height: 46px; font-size: 13px; }
  .toast-btn { height: 30px; padding: 0 10px; }
  /* 吸底采用条（高约 78）在、左下又有「播放演示」小钮时（采用条抬到 56），提示条再往上让，不压住采用条那行说明 */
  html.pl-pill:has(.ab-sticky) body .toasts { bottom: calc(56px + 78px + 10px); }
  .ntf { top: calc(var(--rb-h) + var(--hdr-h) + 6px); left: 8px; right: 8px; width: auto; }
  .ntf .banner { padding: 12px 12px 8px; border-radius: 18px; touch-action: none; user-select: none; -webkit-user-select: none; }
  .ntf .banner::after { content: ""; display: block; width: 34px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: rgba(31, 30, 27, .14); }
  .ntf-ic { width: 34px; height: 34px; border-radius: 11px; }
  .ntf .bn-txt b { font-size: 14px; }
  .ntf .bn-acts { margin: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toasts, .toast, .ntf, .ntf .banner { transition: opacity 140ms linear; }
  .brief.bn.is-draft { transition: none; }
}

/* 第八轮：宽屏上草案单子还在时，横幅收成一行（app.js ntfMode 给 html 加 ntf-cmp），落在问候语右侧的空白里，单子不让位 */
@media (min-width: 1200px) {
  html.ntf-cmp .ntf { top: calc(var(--rb-h) + var(--hdr-h) + 14px); width: min(820px, calc(100vw - 560px)); }
  html.ntf-cmp .ntf .banner { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 16px; }
  html.ntf-cmp .ntf-h { display: contents; }
  html.ntf-cmp .ntf-ic { width: 30px; height: 30px; border-radius: 10px; }
  html.ntf-cmp .ntf-ic .ico { width: 16px; height: 16px; }
  html.ntf-cmp .ntf .bn-txt { order: 1; display: flex; flex: 1; flex-direction: row; align-items: baseline; gap: 8px; padding: 0; overflow: hidden; white-space: nowrap; }
  html.ntf-cmp .ntf .bn-txt small { display: none; }
  html.ntf-cmp .ntf .bn-txt b { flex: none; margin: 0; font-size: 14px; }
  html.ntf-cmp .ntf .bn-txt span { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; }
  html.ntf-cmp .ntf .bn-acts { order: 2; flex-wrap: nowrap; margin: 0; }
  html.ntf-cmp .ntf-x { order: 3; margin: 0; }
}