/* ============================================================
 * deck.css —— 幻灯片容器样式（PPT 式分页静态 HTML）
 * 类名前缀 deck-。与 palette 同范式：stdModal 沉浸弹窗。
 * 画布固定比例（作者声明 W:H），居中自适应，永不拉伸变形。
 * ============================================================ */

/* 沉浸弹窗：深色观演舞台 */
.std-modal.deck-immersive { background: #101216; }
.std-modal-overlay.active:has(.deck-immersive) { background: transparent; }
.std-modal.deck-immersive .std-modal-header {
  position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); right: 8px;
  padding: 0; z-index: 9; background: transparent; }
.std-modal.deck-immersive .std-modal-header h3 { display: none; }
.std-modal.deck-immersive .std-modal-close {
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center; }
.std-modal.deck-immersive .std-modal-body { padding: 0; overflow: hidden; position: relative; display: block; }

/* 观演视口：头部 / 舞台 / 底部导航 三栏纵向排布 */
.deck-viewport {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(107,70,193,.16), transparent 58%),
    #101216; }

/* 头部标题 */
.deck-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 72px 10px 18px;
  min-height: 0; }
.deck-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(233,236,244,.92); font-size: 15px; font-weight: 600; letter-spacing: .3px;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
.deck-head-spacer { flex: none; width: 1px; }

/* 舞台：画布在此按比例居中 */
.deck-stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px; box-sizing: border-box; }

/* 固定比例画布：JS 按可用区域算出具体 width/height，这里只做居中收尾。
   画布本身保持 light（作者脚本层经 api.stage 直接挂 overlay）；页内容在
   其内部 .deck-frame 的影子树里（作者样式隔离）。设计稿缩放层 .deck-scaler
   也在影子树内，其定位/transform-origin/container-type 规则在 deck.js 的
   DECK_PAGE_BASE 里随影子树注入（light 样式表穿不进影子树，此处不再放）。 */
.deck-canvas {
  position: relative; flex: none;
  background: #fff; color: #1a202c;
  box-shadow: 0 10px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  border-radius: 6px; overflow: hidden; }

/* 页影子宿主：作者样式与页内容全部在其影子树内，与宿主页面 CSS 隔离；
   border-radius: inherit 让页内容裁进画布圆角。 */
.deck-frame {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; }

/* （.deck-scaler 在影子树内，规则随 DECK_PAGE_BASE 注入，见上注释） */

/* 加载 / 错误态 */
.deck-loading { color: rgba(233,236,244,.5); font-size: 14px;
  font-family: -apple-system, 'PingFang SC', sans-serif; }
.deck-error { max-width: 420px; padding: 48px 24px; text-align: center; line-height: 1.7;
  color: #fca5a5; font-size: 15px; font-family: -apple-system, 'PingFang SC', sans-serif; }

/* 底部导航条 */
.deck-nav {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }

.deck-btn {
  flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.1); color: rgba(233,236,244,.86);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, color .18s, transform .12s; }
.deck-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.deck-btn:hover { background: rgba(255,255,255,.18); }
.deck-btn:active { transform: scale(.9); }
.deck-btn:disabled { opacity: .35; cursor: default; }
.deck-btn:disabled:hover { background: rgba(255,255,255,.1); }
.deck-btn:disabled:active { transform: none; }

.deck-indicator {
  flex: none; min-width: 72px; text-align: center;
  color: rgba(233,236,244,.75); font-size: 13px; font-variant-numeric: tabular-nums;
  font-family: -apple-system, 'PingFang SC', sans-serif; }

/* 全屏按钮：常规态稍淡，与翻页区分 */
.deck-fs { background: rgba(255,255,255,.06); }
.deck-fs:hover { background: rgba(255,255,255,.14); }

/* 全屏态（真全屏）：画布铺满整个屏幕（比例不符时留黑边，绝不变形）；
   顶栏标题完全隐藏（只留画面，无蒙版）；底部控制条为透明悬浮层，
   光标悬停底部按钮区常亮（JS 挂 .deck-fs-controls）、移到画面中间立即隐藏——
   观演时只有干净的画面，翻页 / 退出随时可唤回。 */
.deck-viewport:fullscreen,
.deck-viewport:-webkit-full-screen { background: #000; }

.deck-viewport:fullscreen .deck-stage,
.deck-viewport:-webkit-full-screen .deck-stage {
  position: absolute; inset: 0; padding: 0; }

.deck-viewport:fullscreen .deck-head,
.deck-viewport:-webkit-full-screen .deck-head { display: none; }

.deck-viewport:fullscreen .deck-nav,
.deck-viewport:-webkit-full-screen .deck-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  background: transparent;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }

.deck-viewport:fullscreen.deck-fs-controls .deck-nav,
.deck-viewport:-webkit-full-screen.deck-fs-controls .deck-nav {
  opacity: 1; pointer-events: auto; }

.deck-viewport:fullscreen .deck-canvas,
.deck-viewport:-webkit-full-screen .deck-canvas { border-radius: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .deck-btn { transition: none; }
}

/* ==================== 编辑模式（登录用户经 Deck.open({edit:{ref,mode}}) 进入，全员可编） ==================== */

/* 编辑态画布保持观演尺寸，底部导航条切换为编辑工具条（JS 隐藏 .deck-nav） */
.deck-viewport.deck-editing .deck-canvas { border-color: rgba(107,70,193,.55); }

/* 编辑工具条：替换导航条位置，页条 + 版本说明 + 动作按钮 */
.deck-edit {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(16,18,22,.86);
  border-top: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap; }

/* 页条：横向滚动，拖动排序页签 */
.deck-edit-pages {
  flex: 1 1 180px; min-width: 120px; display: flex; gap: 6px;
  overflow-x: auto; overflow-y: hidden; padding: 2px; }

.deck-edit-tile {
  flex: none; min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px; cursor: grab;
  background: rgba(255,255,255,.06); color: rgba(233,236,244,.8);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s, transform .12s;
  font-family: -apple-system, 'PingFang SC', sans-serif; }
.deck-edit-tile:hover { background: rgba(255,255,255,.14); }
.deck-edit-tile.active {
  background: rgba(107,70,193,.38); border-color: #8b5cf6; color: #fff; }
.deck-edit-tile.dragging { opacity: .45; transform: scale(.94); cursor: grabbing; }
.deck-edit-tile.over { border-color: #8b5cf6; background: rgba(139,92,246,.22); }

/* 版本说明输入 */
.deck-edit-note {
  flex: 1 1 200px; min-width: 140px; height: 34px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  background: rgba(255,255,255,.06); color: rgba(233,236,244,.9);
  font-size: 13px; font-family: -apple-system, 'PingFang SC', sans-serif; }
.deck-edit-note::placeholder { color: rgba(233,236,244,.4); }
.deck-edit-note:focus { border-color: #8b5cf6; outline: none; }

/* 动作按钮组：独占一行、横向滚动（窄屏按钮多时右侧仍可达） */
.deck-edit-actions {
  flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden; padding: 2px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

.deck-edit-btn {
  flex: none; height: 34px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); color: rgba(233,236,244,.88);
  font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, transform .12s;
  font-family: -apple-system, 'PingFang SC', sans-serif; }
.deck-edit-btn:hover { background: rgba(255,255,255,.16); }
.deck-edit-btn:active { transform: scale(.96); }
.deck-edit-btn:disabled { opacity: .4; cursor: default; }
.deck-edit-save { background: #6b46c1; border-color: #8b5cf6; color: #fff; }
.deck-edit-save:hover { background: #7c56d0; }
.deck-edit-save:disabled { background: #6b46c1; }

/* 导航条里的「编辑」入口：文字 pill，与圆形 SVG 按钮区分 */
.deck-btn.deck-edit-toggle {
  width: auto; height: 36px; border-radius: 18px; padding: 0 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  font-family: -apple-system, 'PingFang SC', sans-serif; }

/* 选中元素：虚线描边提示可编辑；文本块可 focus 后直接改。
   注意：此规则作用于影子树内的页内容，已随 DECK_PAGE_BASE 注入页影子树
   （deck.js），light 样式表无法穿透影子树，这里不留副本。 */

/* 检查器浮层：锚定视口右上，浮动卡片（图表 JSON / 大数字字段） */
.deck-edit-inspector {
  position: absolute; top: calc(56px + env(safe-area-inset-top, 0px)); right: 16px;
  z-index: 20; width: 320px; max-width: calc(100% - 32px);
  background: #1c1f27; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.5);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  color: rgba(233,236,244,.92);
  font-family: -apple-system, 'PingFang SC', sans-serif; }

.deck-edit-inspector-title { font-size: 13px; font-weight: 600; color: #c4b5fd; }
.deck-edit-inspector-body { flex: 1 1 auto; min-height: 0; }
.deck-edit-inspector-actions { display: flex; gap: 8px; justify-content: flex-end; }
.deck-edit-inspector-actions .deck-edit-btn { height: 32px; }

/* 图表 JSON 文本域 */
.deck-edit-chart-json {
  width: 100%; height: 220px; box-sizing: border-box; resize: vertical;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  background: rgba(0,0,0,.35); color: rgba(233,236,244,.9);
  font: 12px/1.5 ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  padding: 10px; }
.deck-edit-chart-json:focus { border-color: #8b5cf6; outline: none; }

/* 大数字字段行 */
.deck-edit-count-fields { display: flex; flex-direction: column; gap: 8px; }
.deck-edit-field { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.deck-edit-field span { flex: none; width: 52px; color: rgba(233,236,244,.6); }
.deck-edit-field input {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  background: rgba(0,0,0,.35); color: rgba(233,236,244,.9); font-size: 13px; }
.deck-edit-field input:focus { border-color: #8b5cf6; outline: none; }

/* 他人作品编辑提示条：工具条首行，琥珀色弱提示 */
.deck-edit-banner {
  flex: 1 1 100%; padding: 6px 12px; border-radius: 8px;
  background: rgba(217,119,6,.14); border: 1px solid rgba(217,119,6,.4);
  color: #fcd9a0; font-size: 12px; line-height: 1.5;
  font-family: -apple-system, 'PingFang SC', sans-serif; }

/* ==================== AI 编辑抽屉（本页 / 选中元素 / 全局） ==================== */
.deck-ai-panel {
  position: absolute; top: calc(52px + env(safe-area-inset-top, 0px)); right: 16px;
  bottom: 120px; z-index: 21; width: 340px; max-width: calc(100% - 32px);
  background: #1c1f27; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.5);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  color: rgba(233,236,244,.92);
  font-family: -apple-system, 'PingFang SC', sans-serif; }

.deck-ai-head { flex: none; display: flex; align-items: center; justify-content: space-between; }
.deck-ai-title { font-size: 13px; font-weight: 600; color: #c4b5fd; }
.deck-ai-close { height: 28px; padding: 0 10px; }

/* 聊天记录：可滚动气泡列表 */
.deck-ai-chat {
  flex: 1 1 auto; min-height: 60px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 2px; }
.deck-ai-empty { font-size: 12px; color: rgba(233,236,244,.45); line-height: 1.6; }
.deck-ai-msg {
  max-width: 92%; padding: 6px 10px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; word-break: break-word; }
.deck-ai-user {
  align-self: flex-end; background: rgba(107,70,193,.35);
  border: 1px solid rgba(139,92,246,.45); color: #ede9fe; }
.deck-ai-bot {
  align-self: flex-start; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1); color: rgba(233,236,244,.85); }
.deck-ai-badge {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px;
  background: rgba(139,92,246,.25); color: #c4b5fd;
  font-size: 11px; line-height: 18px; vertical-align: 1px; }

/* 作用域单选 */
.deck-ai-scopes { flex: none; display: flex; gap: 12px; flex-wrap: wrap; }
.deck-ai-scope {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: rgba(233,236,244,.8); cursor: pointer; }
.deck-ai-scope input { accent-color: #8b5cf6; margin: 0; }

.deck-ai-input {
  flex: none; width: 100%; height: 64px; box-sizing: border-box; resize: none;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  background: rgba(0,0,0,.35); color: rgba(233,236,244,.9);
  font: 13px/1.5 -apple-system, 'PingFang SC', sans-serif; padding: 8px 10px; }
.deck-ai-input:focus { border-color: #8b5cf6; outline: none; }

.deck-ai-foot { flex: none; display: flex; gap: 8px; align-items: center; }
.deck-ai-deep { flex: 1 1 auto; text-align: center; opacity: .85; }