/* =====================================================================
 * canvas-page.css —— PPT/Keynote 风格多 slide 画布 v4 + PowerPoint 风格 ribbon v5
 * 布局：顶栏(3 行 ribbon) + 左侧缩略图(172) + 中间主画布 + 底部状态栏(32)
 * 右侧属性面板已移入顶栏 ribbon
 * ===================================================================== */
.cp-root {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  background: #f0f0f3; color: #0a0a0a; font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 多行 ribbon 顶栏 ---------- */
.cp-topbar {
  display: flex; flex-direction: column; flex: 0 0 auto;
  background: #fff; border-bottom: 1px solid #e5e7eb;
}
.cp-tb-row {
  display: flex; align-items: center; gap: 6px; min-height: 38px;
  padding: 0 10px; border-bottom: 1px solid #f1f1f3;
}
.cp-tb-row:last-child { border-bottom: none; }
.cp-tb-row.cp-tb-menu { background: #fafafa; }
.cp-tb-row.cp-tb-insert { background: #fafafa; }
.cp-tb-spacer { flex: 1; }

/* ---------- ribbon 通用按钮（小尺寸、紧贴） ---------- */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 26px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: #374151;
  font-size: 12.5px; cursor: pointer; transition: .1s; white-space: nowrap;
}
.cp-btn:hover { background: #e5e7eb; }
.cp-btn.primary { background: #3C83F6; color: #fff; }
.cp-btn.primary:hover { background: #2E6BE0; }
.cp-btn.icon { width: 26px; padding: 0; font-size: 14px; }
.cp-btn.toggle.on { background: #EDF4FE; color: #3C83F6; }
.cp-btn.armed { background: #EDF4FE; color: #3C83F6; border-color: #3C83F6; }
.cp-btn.armed:hover { background: #DBE8FE; }
.cp-btn.toggle.on:hover { background: #DBE8FE; }
.cp-btn.danger { color: #DC2626; }
.cp-btn.danger:hover { background: #FEE2E2; }
.cp-btn.wide { flex: 1; }
.cp-btn:disabled, .cp-btn.disabled { opacity: .35; pointer-events: none; }

.cp-sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 2px; }

/* ribbon 分组（带 | 视觉分隔） */
.cp-rb-group {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 6px; border-right: 1px solid #e5e7eb;
}
.cp-rb-group:last-child { border-right: none; }

/* ---------- 格式工具栏（ribbon 第二行） ---------- */
.cp-fmt-font { width: 130px; height: 26px; padding: 0 6px; border: 1px solid #d4d4d8; border-radius: 4px; background: #fff; font-size: 12px; }
.cp-fmt-size {
  width: 46px; height: 26px; padding: 0 6px;
  border: 1px solid #e4e4e7; border-radius: 5px;
  background: #fafafa; color: #1f2937;
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  -moz-appearance: textfield; appearance: textfield;
}
.cp-fmt-size::-webkit-outer-spin-button,
.cp-fmt-size::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-fmt-size:hover { border-color: #d4d4d8; background: #fff; }
.cp-fmt-size:focus {
  outline: none; border-color: #3C83F6; background: #fff;
  box-shadow: 0 0 0 3px rgba(60,131,246, .12);
}
.cp-fmt-size--font { width: 50px; }

.cp-fmt-btn {
  width: 24px; height: 24px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; cursor: pointer; color: #374151; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cp-fmt-btn:hover { background: #e5e7eb; }
.cp-fmt-btn.on { background: #3C83F6; color: #fff; }
.cp-fmt-btn.on:hover { background: #2E6BE0; }
.cp-fmt-sep { width: 1px; height: 18px; background: #e5e7eb; margin: 0 4px; }

.cp-fmt-color {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; border: 1px solid #d4d4d8; border-radius: 4px; position: relative; cursor: pointer;
}
.cp-fmt-color > .ic-svg { width: 12px; height: 12px; pointer-events: none; }
.cp-fmt-color > .cp-fmt-strip {
  position: absolute; left: 4px; right: 4px; bottom: 1px; height: 3px; border-radius: 1px; pointer-events: none;
}
.cp-fmt-color input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.cp-fmt-list {
  display: inline-flex; flex-direction: column; gap: 0; border: 1px solid #d4d4d8; border-radius: 4px; overflow: hidden;
}
.cp-fmt-list button {
  width: 24px; height: 12px; padding: 0; border: 0; background: transparent; font-size: 9px; color: #6b7280; cursor: pointer; line-height: 1;
}
.cp-fmt-list button:hover { background: #e5e7eb; color: #3C83F6; }

.cp-fmt-select { height: 26px; padding: 0 6px; border: 1px solid #d4d4d8; border-radius: 4px; background: #fff; font-size: 12px; min-width: 60px; }

/* ribbon 选中态（无选中时整行置灰） */
.cp-ribbon.cp-disabled .cp-fmt-btn, .cp-ribbon.cp-disabled .cp-fmt-select,
.cp-ribbon.cp-disabled .cp-fmt-color, .cp-ribbon.cp-disabled .cp-fmt-size,
.cp-ribbon.cp-disabled .cp-fmt-font,
.cp-ribbon.cp-disabled .cp-fmt-list { opacity: .4; pointer-events: none; }
/* 多选时文字专属控件弱化 */
.cp-ribbon.cp-multi .cp-fmt-font,
.cp-ribbon.cp-multi .cp-fmt-color,
.cp-ribbon.cp-multi [data-fmt="charSpacing"],
.cp-ribbon.cp-multi [data-fmt="lineHeight"],
.cp-ribbon.cp-multi [data-fmt="fontWeight"],
.cp-ribbon.cp-multi [data-fmt="fontStyle"],
.cp-ribbon.cp-multi [data-fmt="underline"],
.cp-ribbon.cp-multi [data-fmt="linethrough"],
.cp-ribbon.cp-multi [data-fmt="textAlign"] { opacity: .35; pointer-events: none; }
/* 多选对齐分布组（背景高亮） */
.cp-rb-group.cp-multi-align { background: var(--accent-soft, #EDF4FE); border-right-color: transparent; border-radius: 6px; padding: 0 8px; gap: 4px; }
/* status bar 选中尺寸 */
.cp-sel-dim { margin-left: 6px; padding: 1px 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; font-variant-numeric: tabular-nums; }
.cp-sel-chip { margin-left: 6px; }

/* ---------- 主体两栏（sidebar + stage） ---------- */
.cp-body { flex: 1; display: flex; min-height: 0; }

.cp-sidebar {
  flex: 0 0 172px; width: 172px;
  background: #e8eaed; border-right: 1px solid #e5e7eb;
  overflow-y: auto; padding: 10px 8px 12px;
}
.cp-thumbs { display: flex; flex-direction: column; gap: 8px; }
.cp-thumb-card {
  position: relative; background: #fff;
  border: 2px solid transparent; border-radius: 6px;
  padding: 5px 5px 3px; cursor: pointer; transition: .12s;
}
.cp-thumb-card:hover { border-color: #9ca3af; }
.cp-thumb-card.on { border-color: #3C83F6; box-shadow: 0 0 0 2px #DBE8FE; }
.cp-thumb-card.dragging { opacity: 0.5; }
.cp-thumb-num {
  position: absolute; left: 0; top: 0;
  background: #1f2329; color: #fff;
  font-size: 10px; padding: 1px 6px; border-radius: 0 0 4px 0; font-weight: 600;
  z-index: 2;
}
.cp-thumb-card.on .cp-thumb-num { background: #3C83F6; }
.cp-thumb-img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #fafafa; border-radius: 3px; object-fit: cover;
}
.cp-thumb-loading {
  display: grid; place-items: center;
  font-size: 16px; color: #9ca3af; font-weight: 500;
}
.cp-thumb-name {
  font-size: 11.5px; color: #1f2329;
  text-align: center; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-thumb-actions {
  position: absolute; right: 4px; top: 4px; display: none; gap: 2px;
}
.cp-thumb-card:hover .cp-thumb-actions { display: flex; }
.cp-thumb-actions button {
  width: 18px; height: 18px; border: 0;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; border-radius: 3px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cp-thumb-actions button:hover { background: rgba(0,0,0,.75); }
.cp-thumb-add {
  background: transparent; border: 1.5px dashed #9ca3af; border-radius: 6px;
  padding: 16px; text-align: center; font-size: 13px; color: #6b7280;
  cursor: pointer; transition: .12s; width: 100%;
}
.cp-thumb-add:hover { background: #fff; border-color: #3C83F6; color: #3C83F6; }

/* 拖拽图片/文件进入画布时的高亮反馈（提示文字由 JS 动态控制：插入图片 / 插入文件 / 插入图片+文件） */
.cp-stage.cp-dragover { background: rgba(60,131,246, .07); }
.cp-stage.cp-dragover::before {
  content: ''; position: absolute; inset: 8px;
  border: 2px dashed rgba(60,131,246, .6); border-radius: 10px;
  pointer-events: none; z-index: 4;
}
.cp-drop-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 20px; background: rgba(60,131,246, .94); color: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  pointer-events: none; opacity: 0; z-index: 5;
  box-shadow: 0 4px 14px rgba(60,131,246, .3);
  transition: opacity .15s ease;
}
.cp-stage.cp-dragover .cp-drop-hint { opacity: 1; }

/* 中间主画布（撑满剩余空间，移除右侧 panel） */
.cp-stage {
  flex: 1; min-width: 0;
  overflow: auto; display: flex; align-items: center; justify-content: center;
  padding: 30px 30px 18px; background: #f0f0f3; outline: none; position: relative;
}
/* 长图模式：垂直不再居中，让 wrap 顶部与 stage 顶端对齐，避免高过 stage 时顶部被裁切导致无法滚回顶部 */
.cp-stage.cp-stage-long { align-items: flex-start; }
.cp-page-wrap {
  position: relative; flex: 0 0 auto;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
}
.cp-page-wrap .canvas-container { position: relative !important; }
.cp-canvas { display: block; }
/* 长图底部拖把：仅在长图模式下显示，拖动向下扩展画布高度 */
.cp-long-handle {
  display: none; position: absolute; left: 0; right: 0; bottom: -16px;
  height: 16px; cursor: ns-resize; z-index: 5;
}
.cp-long .cp-long-handle { display: block; }
.cp-long-handle::before {
  content: ""; position: absolute; left: 50%; top: 4px;
  width: 46px; height: 5px; transform: translateX(-50%);
  border-radius: 3px; background: rgba(60,131,246, .5);
  transition: background .12s ease;
}
.cp-long-handle:hover::before, .cp-long-handle.dragging::before { background: rgba(60,131,246, .85); }
.cp-ruler { display: none; }
/* 标尺默认隐藏（用户偏整洁，不要"上下留白"的小元素）。drawRulers 仍跑，未来如需加 toggle 恢复 */
.cp-ruler-h { left: 0; top: -24px; height: 22px; }
.cp-ruler-v { left: -24px; top: 0; width: 22px; }
.cp-guides { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* ---------- 状态栏 ---------- */
.cp-statusbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 32px; flex: 0 0 32px;
  background: #f8f9fa; border-top: 1px solid #e5e7eb;
  font-size: 12.5px; color: #4b5563;
}
.cp-page-info { font-weight: 500; color: #0a0a0a; }
.cp-zbtn {
  padding: 2px 8px; cursor: pointer; user-select: none; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
}
.cp-zbtn:hover { background: #e5e7eb; }
.cp-zoom-val { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.cp-save-state { font-size: 12px; color: #6b7280; }
.cp-save-state.dirty { color: #D97706; }
.cp-save-state.ok { color: #059669; }
.cp-save-state.err { color: #DC2626; }
.cp-hint { margin-left: auto; font-size: 11.5px; color: #9ca3af; }

/* ---------- 细线滚动条 ---------- */
.cp-stage { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .20) transparent; }
.cp-stage::-webkit-scrollbar { width: 6px; height: 6px; }
.cp-stage::-webkit-scrollbar-track { background: transparent; }
.cp-stage::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 3px; }
.cp-stage::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .34); }

.cp-sidebar { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .18) transparent; }
.cp-sidebar::-webkit-scrollbar { width: 5px; }
.cp-sidebar::-webkit-scrollbar-track { background: transparent; }
.cp-sidebar::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .16); border-radius: 3px; }
.cp-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .32); }

/* ---------- 只读模式（设计师角色） ---------- */
.cp-root[data-ro="1"] [data-act="new-slide"],
.cp-root[data-ro="1"] [data-act="undo"],
.cp-root[data-ro="1"] [data-act="redo"],
.cp-root[data-ro="1"] [data-act="save"],
.cp-root[data-ro="1"] [data-act-slide="dup"],
.cp-root[data-ro="1"] [data-act-slide="del"] { display: none; }

/* ---------- 右键菜单：粘贴图片（stage contextmenu 触发） ---------- */
.cp-ctx-menu {
  position: fixed; z-index: 50;
  min-width: 180px; padding: 4px;
  background: #fff;
  border: 1px solid var(--border, #E4E4E7);
  border-radius: 8px;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, .22), 0 4px 10px -3px rgba(15, 23, 42, .10);
  display: none;
  user-select: none;
}
.cp-ctx-menu.open { display: block; }
.cp-ctx-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  background: transparent; border: none; border-radius: 5px;
  font-size: 13px; color: #18181B; cursor: pointer; text-align: left;
  transition: background .08s;
}
.cp-ctx-item:hover { background: #EDF4FE; color: #2E6BE0; }
.cp-ctx-item:disabled, .cp-ctx-item.disabled { color: #a1a1aa; cursor: not-allowed; background: transparent; }
.cp-ctx-icon { font-size: 14px; line-height: 1; flex: 0 0 auto; width: 16px; text-align: center; }
.cp-ctx-kbd {
  margin-left: auto; padding: 1px 5px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
  font-size: 10.5px; color: #71717a; background: #f4f4f5; border: 1px solid #e4e4e7;
  border-radius: 4px; line-height: 1;
}
.cp-ctx-sep { height: 1px; background: #f1f5f9; margin: 4px 6px; }
.cp-ctx-head {
  font-size: 11px; color: #6b7280; padding: 6px 10px 4px; letter-spacing: .04em;
  text-transform: uppercase; border-bottom: 1px dashed #f1f5f9; margin-bottom: 4px;
}

/* ---------- 页面设置 popover（从顶栏「页面设置」按钮弹出）---------- */
.cp-page-popover {
  position: absolute;
  right: 16px;
  top: 100px;
  z-index: 30;
  width: 460px;
  background: #fff;
  border: 1px solid var(--border, #E4E4E7);
  border-radius: 12px;
  box-shadow: 0 12px 36px -12px rgba(15, 23, 42, .18), 0 4px 10px -3px rgba(15, 23, 42, .08);
  padding: 14px;
  display: none;
}
.cp-page-popover.open { display: block; }
.cp-pp-head {
  font-size: 13px;
  font-weight: 600;
  color: #18181B;
  margin-bottom: 10px;
}
.cp-pp-only {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2, #3F3F46);
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}
.cp-pp-only input { width: 14px; height: 14px; accent-color: var(--accent, #3C83F6); cursor: pointer; }
.cp-pp-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cp-pp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--border, #E4E4E7);
  border-radius: 999px;
  color: var(--text-2, #3F3F46);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  width: 100%;
  justify-content: flex-start;
}
.cp-pp-tag:hover {
  border-color: var(--accent, #3C83F6);
  color: var(--accent, #3C83F6);
  background: var(--accent-soft, #EDF4FE);
}
.cp-pp-tag.on {
  border-color: var(--accent, #3C83F6);
  background: var(--accent-soft, #EDF4FE);
  color: var(--accent, #3C83F6);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(60,131,246, .1);
}
.cp-pp-rat { flex: 0 0 auto; vertical-align: middle; opacity: .85; transition: opacity .12s; }
.cp-pp-tag:hover .cp-pp-rat, .cp-pp-tag.on .cp-pp-rat { opacity: 1; }
.cp-pp-dim {
  margin-left: auto;
  font-size: 11px;
  opacity: .6;
  font-weight: normal;
}
.cp-pp-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #E4E4E7);
  font-size: 11.5px;
  color: var(--text-3, #71717A);
}

/* ---------- 在线协作：按「页」编辑锁 ----------
   同一页同一时刻只允许一人编辑：他人持锁时本端该页转只读，
   画布覆一层浅色蒙层 + 谁在编辑的提示，缩略图打持有人徽标。 */
.cp-lock-veil {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240, 240, 243, .55);
  backdrop-filter: saturate(.85);
  pointer-events: none;
}
.cp-lock-veil[hidden] { display: none; }
.cp-lock-card {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(24, 24, 27, .88); color: #fff;
  font-size: 12.5px; font-weight: 500; letter-spacing: .2px;
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, .45);
}
.cp-lock-dot { width: 8px; height: 8px; border-radius: 50%; background: #C2553B; flex: none; }
/* 锁定态：格式/插入工具视觉置灰（仍可点击，点击后给出提示说明原因） */
.cp-root[data-locked="1"] .cp-ribbon,
.cp-root[data-locked="1"] .cp-tb-insert { opacity: .5; }
.cp-root[data-locked="1"] .cp-page-wrap { box-shadow: 0 0 0 2px rgba(194, 85, 59, .55), 0 4px 24px rgba(0,0,0,.18); }
/* 缩略图持有人徽标 */
.cp-thumb-card.locked { border-color: rgba(194, 85, 59, .5); }
.cp-thumb-lock {
  position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(24, 24, 27, .8); color: #fff;
  font-size: 10px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-tl-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }