/* sheets.css — Bottom sheets and modals: .announce-sheet, .popup-glass, #popup-overlay */


.announce-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2200;
  background: var(--glass-bg);
  /* [Perf v4] blur 28→18, 视觉差异极小但 GPU 成本大幅下降; 公告 sheet 仅短暂出现 */
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 0.5px solid var(--glass-border);
  border-radius: 22px 22px 0 0;
  max-height: 52vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  /* [Perf v4] 不再永久 will-change: transform; 改由打开时 .show 触发即可
     永久 will-change 会强制持有 GPU 层, 长期运行占内存且阻止合成器优化 */
  overflow: visible;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.announce-sheet.show { transform: translateY(0); }
/* 动画进行时才申请 GPU 层, 结束后浏览器自动回收 */
.announce-sheet.is-animating { will-change: transform; }
.announce-sheet-inner {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}
.announce-sheet-pull-area {
  width: 100%; padding: 10px 0 4px 0;
  display: flex; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  touch-action: none; user-select: none;
  -webkit-user-select: none; min-height: 28px; align-items: center;
}
.announce-sheet-pull-bar {
  width: 36px; height: 4px;
  background: rgba(128,128,128,0.35);
  border-radius: 10px;
  transition: background 0.2s;
  pointer-events: none;
}
.announce-sheet-pull-area:active .announce-sheet-pull-bar { background: rgba(128,128,128,0.6); }
.announce-sheet-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 2px 20px 12px 20px;
  flex-shrink: 0;
  border-bottom: 0.5px solid var(--glass-border);
}
.announce-sheet-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.2px;
}
.announce-sheet-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--action-btn-bg);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--action-btn-color);
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.announce-sheet-close svg { width: 14px; height: 14px; }
.announce-sheet-close:active { opacity: 0.6; }
.announce-sheet-body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px 20px 20px;
  font-size: 14px; line-height: 1.7;
  color: var(--text-dark);
  white-space: pre-wrap;
  word-break: break-word;
}
.announce-backdrop {
  position: fixed; inset: 0; z-index: 2199;
  background: rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.announce-backdrop.show { opacity: 1; visibility: visible; }

/* ============================================================
   弹窗动画 — 性能优化版
   ────────────────────────────────────────────────────────────
   原先用 cubic-bezier(0.34, 1.56, 0.64, 1) 带 overshoot 的弹簧曲线，
   配合大量列表项一起入场，会强制浏览器在每一中间状态都重新合成图层、
   触发 paint，列表越长越卡。

   优化：
   - 曲线改为不带 overshoot 的 ease-out，仍保留"轻盈感"但不让浏览器
     反复合成"超出 scale=1 再回弹"的位置
   - 动画时长缩短到 0.22s（人眼几乎察觉不到的速度）
   - contain: layout paint —— 把弹窗的 layout/paint 跟外部世界隔离
   - pointer-events 仅在显示后开启，避免动画过程中误触命中测试
   - 列表内容由 App.UI.openGroup 在 .show 添加前就 innerHTML 完毕，
     第一帧合成的就是"已布局"的弹窗
   ============================================================ */
.popup-glass {
  position: fixed; top: 50%; left: 50%;
  width: calc(100% - 32px); max-width: 600px;
  height: 65vh; max-height: 600px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow); z-index: 1002;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  /* [Perf v4] 移除永久 will-change: transform, opacity — popup 极少打开,
     永久 will-change 会让浏览器长期为它保留一个独立 GPU 层, 累积内存浪费.
     popup 内部已经 translate3d, 打开瞬间浏览器会自动合成, 不需要 will-change 提示. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease-out;
  /* paint 隔离：列表项重绘不再影响 body 与 tab-view */
  contain: layout paint style;
}
.popup-glass.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

/* [Perf v7] popup 性能分档 */
body.perf-lite .popup-glass {
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.14s ease-out;
}
body.perf-min .popup-glass {
  transform: translate3d(-50%, -50%, 0) scale(1);  /* 取消 scale 入场，纯 opacity */
  transition: opacity 0.12s ease-out;
}
body.perf-min .popup-glass.show {
  transform: translate3d(-50%, -50%, 0) scale(1);
}

#popup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden;
  transition: opacity 0.22s ease-out;
}
#popup-overlay.show { opacity: 1; visibility: visible; }