/* ============================================================================
   ameng-ppt-design · toolbar.css
   Always-visible, low-key text toolbar (top-right) — no handle, no hover reveal.
   Lives inside .deck so it inherits the dark-mode token scope. Plus: in-place
   edit affordance, editable speaker-notes overlay, version-history drawer w/ diff,
   toast, and the background/decoration capture helpers for editable-PPTX export.
   ============================================================================ */

/* ---- always-visible dock (subtle text actions) -------------------------- */
.ppt-dock { position: fixed; top: 10px; right: 12px; z-index: 1000; font-family: var(--font-body); }
.ppt-dock__panel {
  display: flex; gap: 2px; align-items: center; white-space: nowrap;
  opacity: .72; transition: opacity .15s;
}
.ppt-dock:hover .ppt-dock__panel { opacity: 1; }

.ppt-act {
  appearance: none; -webkit-appearance: none; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 9px; border-radius: var(--r-1);
  font: var(--w-med, 500) 12px/1 var(--font-body);
  color: var(--ink-3); background: transparent; border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.ppt-act:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); }
.ppt-act--primary { color: var(--accent); }
.ppt-act__ico { font-size: 12px; opacity: .8; }
.ppt-act[hidden] { display: none; }
.ppt-badge {
  display: inline-block; margin-left: 4px; min-width: 15px; height: 14px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  font: var(--w-semi, 600) 9px/14px var(--font-mono); text-align: center; vertical-align: top;
}
.ppt-badge[hidden] { display: none; }
/* narrow screens: tighten the dock so it doesn't crowd the scaled stage corner;
   confirm-dialog buttons may wrap instead of overflowing */
@media (max-width: 520px) {
  .ppt-dock { top: 6px; right: 6px; }
  .ppt-act { padding: 0 6px; font-size: 11px; }
  .ppt-confirm__row { flex-wrap: wrap; }
}

/* export sub-menu (click to open) */
.ppt-sub { position: relative; }
.ppt-sub__list {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2);
}
.ppt-sub.is-open .ppt-sub__list { display: block; }
.ppt-sub__item {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-1); font: var(--w-med, 500) 12.5px/1.25 var(--font-body);
}
.ppt-sub__item:hover { background: var(--surface-2); color: var(--accent); }
.ppt-sub__item small { color: var(--ink-3); font: 400 10.5px/1 var(--font-mono); white-space: nowrap; }
.ppt-sub__sep { height: 1px; margin: 5px 6px; background: var(--line); }

/* ---- in-place editable affordance --------------------------------------- */
.deck.is-editing [data-ppt-edit] { outline: 1px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 3px; border-radius: 3px; cursor: text; }
.deck.is-editing [data-ppt-edit]:hover { outline-style: solid; background: color-mix(in oklab, var(--accent) 7%, transparent); }
.deck.is-editing [data-ppt-edit]:focus { outline: 2px solid var(--accent); background: color-mix(in oklab, var(--accent) 9%, transparent); }

/* ---- editable speaker-notes overlay (S) ----------------------------------
   .ppt-notes-edit sits on the overlay BODY (grip stays non-editable). */
.ppt-notes-edit { cursor: text; }
.ppt-notes-edit:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.ppt-notes-edit::before {
  content: "讲者备注 · 演讲者视图同款提词（不计入版本）"; display: block;
  font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px;
}

/* ---- version-history drawer + diff -------------------------------------- */
.ppt-history {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 90vw); z-index: 1100;
  background: var(--surface-1); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-3);
  padding: 20px 18px; overflow: auto; transform: translateX(100%); transition: transform var(--dur) var(--ease);
}
.ppt-history.is-open { transform: none; }
.ppt-history__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ppt-history__title { font: var(--w-semi, 600) 15px/1.2 var(--font-body); color: var(--ink-1); }
.ppt-history__hint { font: 400 11.5px/1.5 var(--font-body); color: var(--ink-3); margin: 0 0 14px; }
.ppt-history__list { display: flex; flex-direction: column; gap: 10px; }
.ppt-ver { border: 1px solid var(--line); border-radius: var(--r-2); padding: 11px 12px; }
.ppt-ver.is-current { border-color: var(--accent); }
.ppt-ver__when { font: var(--w-med, 500) 13px/1.3 var(--font-body); color: var(--ink-1); display: flex; justify-content: space-between; gap: 8px; }
.ppt-ver__tag { font: 400 10.5px/1 var(--font-mono); color: var(--accent); }
.ppt-ver__diff { margin-top: 8px; font: 400 11.5px/1.55 var(--font-body); color: var(--ink-2); max-height: 150px; overflow: auto; }
.ppt-ver__diff .del { color: oklch(52% 0.16 25); text-decoration: line-through; opacity: .85; }
.ppt-ver__diff .add { color: oklch(52% 0.14 150); }
.ppt-ver__diff .nochg { color: var(--ink-3); font-style: italic; }
.ppt-ver__row { display: flex; gap: 6px; margin-top: 10px; }
.ppt-ver__row .ppt-act { border: 1px solid var(--line-strong); height: 26px; }
.ppt-ver__row .ppt-act--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.ppt-empty { color: var(--ink-3); font: 400 13px/1.6 var(--font-body); padding: 8px 2px; }
.ppt-cur-note { color: var(--ink-3); font: 400 12px/1.8 var(--font-body); }

/* ---- save/discard confirm (leaving a page mid-edit) --------------------- */
.ppt-confirm { position: fixed; inset: 0; z-index: 1400; display: none; place-items: center; background: color-mix(in oklab, var(--ink-1) 32%, transparent); }
.ppt-confirm.is-open { display: grid; }
.ppt-confirm__card { background: var(--surface-1); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-3); padding: 18px 20px; min-width: min(300px, 92vw); max-width: 92vw; }
.ppt-confirm__msg { font: var(--w-semi, 600) 14px/1.5 var(--font-body); color: var(--ink-1); margin-bottom: 16px; }
.ppt-confirm__row { display: flex; gap: 8px; justify-content: flex-end; }
.ppt-confirm__row .ppt-act { border: 1px solid var(--line-strong); height: 30px; padding: 0 12px; }
.ppt-confirm__row .ppt-act--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* ---- toast --------------------------------------------------------------- */
.ppt-toast {
  position: fixed; bottom: 22px; left: 50%; z-index: 1200; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink-1); color: var(--bg); font: var(--w-med, 500) 13px/1 var(--font-body);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.ppt-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- export capture helpers --------------------------------------------- */
/* Pin the LIVE stage to 0,0 / no transform while capturing: the screen stage is
   centered via left/top:50% + translate(-50%,-50%) scale(--fit), and the clone
   inherits those computed styles — without this the snapshot lands half a
   canvas to the bottom-right ("PDF 内容跑到右下角被裁"). The export overlay
   covers the viewport, so the user never sees the jump. */
.deck.ppt-exporting .deck__stage,
.deck.ppt-cap-bg .deck__stage,
.deck.ppt-cap-deco .deck__stage {
  left: 0 !important; top: 0 !important; transform: none !important;
}
/* disable entry animation so the activated slide is settled before snapshot */
.deck.ppt-exporting .slide [data-anim] { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Catch-all: finalize ANY entrance — including bespoke keyframes like .is-active .bar{animation:grow}
   that don't go through [data-anim]. Collapsing duration/delay to 0 (with the keyframes' own
   animation-fill-mode:both/forwards) snaps each element to its END frame instantly, so the per-slide
   snapshot can never catch a chart/bar/ring mid-animation. Decorative infinite loops freeze on a frame. */
.deck.ppt-exporting .slide *,
.deck.ppt-exporting .slide *::before,
.deck.ppt-exporting .slide *::after {
  animation-delay: 0s !important; animation-duration: 0s !important;
  transition-delay: 0s !important; transition-duration: 0s !important;
}
.ppt-export-cover { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; color: var(--ink-3); font: var(--w-med, 500) 13px/1 var(--font-body); }
/* background-only pass: keep stage/slide bg + grain, hide all content + chrome
   (progress bar is cut as its own image, so hide it here too) */
.deck.ppt-cap-bg .slide > *,
.deck.ppt-cap-bg .chrome-top,
.deck.ppt-cap-bg .chrome-foot,
.deck.ppt-cap-bg .slide__num,
.deck.ppt-cap-bg .deck__progress { visibility: hidden !important; }
/* decoration pass: transparent page bg + no grain, so only components remain;
   elements exported individually (progress, .hl color blocks) are excluded */
.deck.ppt-cap-deco .deck__stage { background: transparent !important; }
.deck.ppt-cap-deco .slide { background: transparent !important; }
.deck.ppt-cap-deco .deck__stage::after { display: none !important; }
.deck.ppt-cap-deco [data-ppt-skip-deco] { visibility: hidden !important; }
/* hide just the boxed text (so it stays editable, never baked into an image) */
[data-ppt-hide-text], [data-ppt-hide-text] * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; }
[data-ppt-hide-text]::before, [data-ppt-hide-text]::after, [data-ppt-hide-text] *::before, [data-ppt-hide-text] *::after { color: transparent !important; -webkit-text-fill-color: transparent !important; }

/* ---- overflow sentinel (screen-only safe-zone guard) --------------------- */
/* Lives inside .deck__stage (so it scales with --fit). Drawn in UNSCALED stage
   coordinates by runtime.js. Hidden during export/print/fullscreen so it never
   reaches a deliverable. Two states: is-on (a real overflow on this slide,
   loud red), is-guide (G key: show the safe box on every slide, quiet). */
.ppt-ovf { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; }
.ppt-ovf.is-on, .ppt-ovf.is-guide { display: block; }
.ppt-ovf__box { position: absolute; border: 1.5px dashed color-mix(in oklab, var(--ink-3) 70%, transparent); border-radius: 2px; }
.ppt-ovf.is-on .ppt-ovf__box { border-color: oklch(62% 0.23 28); border-style: dashed; box-shadow: 0 0 0 1px oklch(62% 0.23 28 / .25) inset; }
.ppt-ovf__badge { display: none; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  max-width: 92%; padding: 5px 12px; border-radius: var(--r-pill, 999px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: oklch(62% 0.23 28); color: oklch(99% 0 0); font: 600 12px/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: .02em;
  box-shadow: 0 4px 14px -6px oklch(62% 0.23 28 / .6); }
.ppt-ovf.is-on .ppt-ovf__badge { display: block; }
/* never bake the sentinel into a snapshot / print / fullscreen presentation */
.deck.ppt-exporting .ppt-ovf, .deck.ppt-cap-bg .ppt-ovf, .deck.ppt-cap-deco .ppt-ovf { display: none !important; }
:fullscreen .ppt-ovf, :-webkit-full-screen .ppt-ovf { display: none !important; }
@media print { .ppt-ovf { display: none !important; } }

/* ---- presentation mode (fullscreen): hide ALL authoring chrome + help ----- */
:fullscreen .ppt-dock, :fullscreen .ppt-history, :fullscreen .ppt-toast, :fullscreen .ppt-help { display: none !important; }
:-webkit-full-screen .ppt-dock, :-webkit-full-screen .ppt-history, :-webkit-full-screen .ppt-toast, :-webkit-full-screen .ppt-help { display: none !important; }

@media (prefers-reduced-motion: reduce) { .ppt-history, .ppt-toast { transition: none; } }
@media print { .ppt-dock, .ppt-history, .ppt-toast { display: none !important; } }
