/* ============================================================================
   Actions —— 通用「长按 / 右键 → 选项」组件样式
   被 index.html（主应用）与 community.html（社区页，常以 iframe 嵌入应用）共用。

   形态两种，由 JS 按视口/指针能力选择，此处只负责外观：
     · .act-pop   宽屏或有鼠标：在指针位置弹出浮层（桌面右键 / 长按）
     · .act-sheet 窄屏或触屏：从底部升起的操作面板（贴合 iOS 习惯，拇指可达）

   依赖变量：只使用 style.css 与 community.css **都定义**了的那批
   （--panel / --border / --text / --muted / --primary / --red / --red-bg /
     --hover / --radius / --shadow），因此两处主题与深色模式自动一致，
   缺失的（--mask / --icon-dim）给硬编码兜底。
   ============================================================================ */

/* ---------- 长按目标 ---------- */

/* 触屏按下瞬间由 JS 加上：关掉文字选择，避免 iOS 长按先弹放大镜/选中文字。
   只在触屏按下时加（鼠标端不加），所以桌面仍可正常划选复制卡片文字。 */
.act-lp {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 长按已成立（手指仍按住）：给一点反馈，否则用户不知道手势是否被识别。
   用 filter 而非 background —— <tr> / .card / <button> 三种目标都能可靠生效，
   且不需要 !important 去压各自的背景色。深色模式反向提亮。 */
.act-armed {
  filter: brightness(.93);
  transition: filter .12s ease;
}
html[data-theme="dark"] .act-armed {
  filter: brightness(1.28);
}

/* ---------- 遮罩 ---------- */

.act-mask {
  position: fixed;
  inset: 0;
  z-index: 99980;
  background: var(--mask, rgba(15, 20, 35, .45));
  animation: actFade .14s ease;
}
/* 浮层形态用「透明遮罩」承接点击外部关闭，避免再用时间戳去防「刚打开就自关」 */
.act-mask.clear { background: transparent; animation: none; }

@keyframes actFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 底部操作面板（窄屏 / 触屏） ---------- */

.act-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  background: var(--panel);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 32px rgba(15, 20, 35, .18);
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
  animation: actUp .18s cubic-bezier(.2, .7, .3, 1);
  /* 横屏手机 / 很矮的 iframe 里选项多于 5 条时仍然完整可达 */
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@keyframes actUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.act-grip {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--icon-dim, rgba(140, 150, 175, .55));
  margin: 4px auto 8px;
}

.act-title {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  padding: 2px 12px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 选项按钮（两种形态共用） ---------- */

.act-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font-size: 15px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  padding: 13px 12px;
}

.act-item:active { background: var(--hover); }
.act-item.danger { color: var(--red); }
.act-item.danger:active { background: var(--red-bg); }

/* 分隔线 + 取消（仅面板形态有，浮层形态点外部即可关） */
.act-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 6px;
}
.act-cancel { font-weight: 600; color: var(--muted); }

/* ---------- 指针位置浮层（宽屏 / 鼠标） ---------- */

.act-pop {
  position: fixed;
  z-index: 99990;
  min-width: 168px;
  max-width: 280px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(35, 39, 47, .16);
  padding: 5px;
}
.act-pop .act-title {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.act-pop .act-item {
  text-align: left;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
}

/* ---------- 确认对话框（替代 window.confirm） ---------- */

/* iOS 端是 WKWebView 壳，原生层没有实现 runJavaScriptConfirmPanelWithMessage，
   window.confirm() **不会弹窗**，而是直接按「取消」返回 false。
   于是「屏蔽作者 / 取消分享 / 删除卡片」这类需要二次确认的操作会静默失效
   —— 用户以为点过了，其实请求根本没发出去。这里自建一个两端一致的确认框。 */

.act-confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 99995;
  background: var(--mask, rgba(15, 20, 35, .45));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: actFade .14s ease;
}

.act-confirm {
  width: 100%;
  max-width: 320px;
  background: var(--panel);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 20px 60px rgba(15, 20, 35, .28));
  padding: 20px 20px 16px;
  animation: actConfirmIn .16s cubic-bezier(.2, .7, .3, 1);
}

@keyframes actConfirmIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

.act-confirm-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.act-confirm-msg {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  word-break: break-word;
}

.act-confirm-ops {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.act-confirm-ops button {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.act-confirm-ops button:active { background: var(--hover); }

.act-confirm-ops button.ok {
  border-color: transparent;
  background: var(--primary, #4f7cff);
  color: #fff;
}
.act-confirm-ops button.ok.danger { background: var(--red, #d9534f); }

/* ---------- 弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .act-sheet,
  .act-mask,
  .act-confirm,
  .act-confirm-mask { animation: none; }
}