/* =====================================================================
 * UniDoc 演示层样式（PPT 兼容能力）—— app-present.css
 * ---------------------------------------------------------------------
 * 与 css/app.css（传统 UniDoc 编辑器核心）拆分：放映模式 / 放映音乐
 * 控制条 / 背景音乐面板 / 放映态文本框拖拽。配套 js/app-present.js。
 * ===================================================================== */

/* ---- 背景音乐面板（插入组 ♪ 下拉，与模板库同一套极简视觉）---- */
#music-panel {
  position: fixed;
  z-index: 71;
  width: 336px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #b8bfc9;
  border-radius: 3px;
  box-shadow: 0 10px 32px rgba(15, 25, 40, .22);
  font: 12px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #1f2429;
}
#music-panel.hidden { display: none; }
#music-panel .bgm-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 4px 7px;
  font-weight: 600;
}
#music-panel .bgm-close {
  border: 0; background: transparent; color: #5a6270;
  cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 2px;
}
#music-panel .bgm-close:hover { background: #e3e6ea; }
#music-panel .bgm-empty { margin: 6px 4px; color: #6b7480; }
#music-panel .bgm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px;
  border-radius: 2px;
}
#music-panel .bgm-row:hover { background: #f3f7fd; }
#music-panel .bgm-note { color: var(--accent); }
#music-panel .bgm-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#music-panel .bgm-pages { color: #6b7480; white-space: nowrap; }
#music-panel .bgm-row button {
  border: 0; background: transparent; color: #5a6270;
  cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 2px;
}
#music-panel .bgm-row button:hover { background: #e3e6ea; }
#music-panel .bgm-row .bgm-del:hover { background: #fbe9e9; color: #c00000; }
#music-panel .bgm-addrow {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 2px 4px;
  padding-top: 8px;
  border-top: 1px solid #e6e9ee;
}
#music-panel .bgm-addrow input {
  width: 44px;
  height: 22px;
  padding: 0 4px;
  border: 1px solid #d7dce4;
  border-radius: 2px;
  font: inherit;
}
#music-panel .bgm-addrow button {
  padding: 3px 8px;
  border: 1px solid #d7dce4;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
#music-panel .bgm-addrow button:hover { border-color: var(--accent); background: #f3f7fd; }
#music-panel .bgm-tip { margin: 6px 4px 2px; color: #8b93a3; font-size: 11px; }

/* ---- ▶ 放映模式（PPT 式按页全屏）---- */
#present-mode {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  background: #101014;
  /* 放映页文本可选可复制（用户明确要求） */
  user-select: text;
}
#present-mode .pm-close {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #cfd6e2;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#present-mode .pm-close:hover { background: rgba(255,255,255,.22); color: #fff; }
/* 放映中沙箱直接可交互（编辑器的单击选中/双击交互点击盾不适用于放映） */
#present-mode .html-embed iframe { pointer-events: auto !important; }

#present-mode .pm-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* 单页完整网页：iframe 就是放映视口，不再把长网页当“纸张”整体适高缩小。
 * 页面在其原生响应式宽度内滚动，脚本/动画/字体均由 iframe 直接绘制。 */
#present-mode .pm-stage.pm-web {
  display: block;
  overflow: hidden;
  background: #000;
}
#present-mode .pm-web-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 0;
}
#present-mode .pm-web-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
#present-mode .pm-web-overlay > .udoc-textbox {
  position: absolute !important;
  margin: 0 !important;
}
#present-mode .pm-web-overlay .html-edit-island iframe,
#present-mode .pm-web-overlay video,
#present-mode .pm-web-overlay audio,
#present-mode .pm-web-overlay a,
#present-mode .pm-web-overlay button { pointer-events: auto !important; }
#present-mode .pm-web-pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#present-mode .pm-close { z-index: 3; }
#present-mode:fullscreen,
#present-mode:-webkit-full-screen { width: 100vw; height: 100vh; }
/* 缩放大于适屏：开纵向滚动，横向裁切不平移（用户：只允许上下滑动）。
 * scaler margin:auto 在 flex 里居中且内容超高时仍可滚到顶（align-items:center 会剪）。 */
#present-mode .pm-stage.pm-zoomed {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}
#present-mode .pm-scaler { margin: auto; }
#present-mode .pm-stage.pm-zoomed .pm-scaler { display: inline-block; margin: 0 auto; text-align: initial; }
#present-mode .pm-stage::-webkit-scrollbar { width: 10px; }
#present-mode .pm-stage::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .28); border-radius: 5px;
}
#present-mode .pm-stage .page {
  /* 编辑器里 .page 是绝对定位（虚拟化逐页摆放）；放映克隆页必须回到
   * 普通流内盒才能被 flex 居中（否则按未缩放尺寸飘到屏外 —— 黑屏根因） */
  position: static !important;
  flex: none;
  margin: 0;
  box-shadow: 0 12px 60px rgba(0, 0, 0, .6);
}
#present-mode .pm-hud {
  position: absolute;
  right: 18px;
  bottom: 30px;
  color: #8b93a3;
  font: 13px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
/* 底栏提示：全宽两端对齐（分段 space-between），默认隐藏，鼠标移动才浮现 */
#present-mode .pm-tip {
  position: absolute;
  left: 0; right: 0;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 26px;
  color: #6a7280;
  font: 12px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
#present-mode .pm-tip span { white-space: nowrap; }
#present-mode .pm-tip .pm-page { color: #aab2c0; font-weight: 600; letter-spacing: 1px; }
/* 鼠标移到底部时浮现底栏（tip / 页码 / 音乐），静止或离开底部自动隐去；关闭 ✕ 常驻 */
#present-mode.pm-show .pm-tip,
#present-mode.pm-show .pm-hud,
#present-mode.pm-show .pm-music { opacity: 1; }
/* 放映音乐控制：并入底部栏一线（可交互），默认隐藏随底栏浮现 */
#present-mode .pm-music { bottom: 40px; opacity: 0; transition: opacity .3s ease; }
/* 放映背景音乐控制条（HUD 上方：曲名 + 暂停/静音） */
#present-mode .pm-music {
  position: absolute;
  right: 18px;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  color: #c9cfda;
  font: 12px/1 "Segoe UI", "Microsoft YaHei", sans-serif;
}
#present-mode .pm-music.hidden { display: none; }
#present-mode .pm-music .pm-m-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#present-mode .pm-music button {
  border: 0;
  background: transparent;
  color: #c9cfda;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 10px;
}
#present-mode .pm-music button:hover { background: rgba(255, 255, 255, .14); }
/* 放映态文本框：展示专用，彻底清除悬浮/选中/拖拽手柄等一切编辑装饰
 * （用户：鼠标移动就显边框交互不友好）。 */
#present-mode .udoc-textbox {
  cursor: default;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
#present-mode .udoc-textbox:hover { border-color: transparent !important; box-shadow: none !important; }
#present-mode .udoc-textbox .tbox-resize,
#present-mode .udoc-textbox .tbox-h,
#present-mode .udoc-textbox .tbox-html-toggle,
body.presenting #html-edit-mode-float { display: none !important; }
#present-mode .udoc-textbox a { cursor: pointer; }
/* 放映页内内部跳转链接直接可点（编辑态才需 Ctrl） */
#present-mode a[href] { cursor: pointer; }
/* 放映中隐藏全局浮层（表格 UI/锚点等都不该出现在黑幕上） */
body.presenting #table-ui,
body.presenting #ctx-menu,
body.presenting #num-panel,
body.presenting #para-drop,
body.presenting #music-panel,
body.presenting #tpl-panel { display: none !important; }