/* Free.ai Slides editor (templates/tools/slides/editor.html). Same frame as
 * static/css/sheets.css. Text uses --brand-ink, fills use --primary
 * (templates/CLAUDE.md: two greens). */
.slides-root { --slides-border: #e5e7eb; --slides-panel: #ffffff; --slides-muted: #4b5563; --slides-canvas: #f3f4f6; background: var(--slides-panel); }
html.dark .slides-root { --slides-border: #2a2a2a; --slides-panel: #111111; --slides-muted: #b5b5b5; --slides-canvas: #0a0a0a; }

.slides-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--slides-border); }
.slides-brand { font-weight: 700; color: var(--brand-ink, #15803D); white-space: nowrap; }
.slides-title { max-width: 260px; min-width: 140px; flex: 1 1 180px; }
.slides-theme { width: auto; }
.slides-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.slides-status { color: var(--slides-muted); min-height: 1.2em; }
.slides-status a { color: var(--brand-ink, #15803D); }

.slides-main { display: flex; min-height: 600px; height: calc(100vh - 140px); }
.slides-side { flex: 0 0 200px; border-right: 1px solid var(--slides-border); display: flex; flex-direction: column; min-height: 0; }
.slides-side-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--slides-border); }
.slides-side-tools .btn { min-width: 32px; min-height: 30px; }
.slides-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1 1 auto; counter-reset: none; }
.slides-list li { margin-bottom: 8px; }
.slides-thumb { display: flex; gap: 6px; width: 100%; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: transparent; color: inherit; text-align: left; align-items: flex-start; }
.slides-thumb[aria-current="true"] { border-color: var(--brand-ink, #15803D); }
.slides-thumb .num { font-size: .75rem; color: var(--slides-muted); width: 1.4em; flex: 0 0 auto; }
.slides-thumb .sl-frame { flex: 1 1 auto; border: 1px solid var(--slides-border); }

.slides-center { flex: 1 1 auto; min-width: 0; overflow-y: auto; background: var(--slides-canvas); padding: 16px; }
.slides-stage { max-width: 880px; margin: 0 auto 16px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.slides-form { max-width: 880px; margin: 0 auto; background: var(--slides-panel); border: 1px solid var(--slides-border); border-radius: 8px; padding: 12px; }
.slides-form .text-muted { color: var(--slides-muted) !important; }

.slides-ai { flex: 0 0 320px; display: flex; flex-direction: column; border-left: 1px solid var(--slides-border); background: var(--slides-panel); min-height: 0; }
.slides-ai-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--slides-border); }
.slides-ai-log { flex: 1 1 auto; overflow-y: auto; padding: 12px; font-size: .9rem; }
.slides-ai-form { padding: 10px 12px; border-top: 1px solid var(--slides-border); }
.slides-ai .text-muted { color: var(--slides-muted) !important; }
.slides-msg { margin: 8px 0; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.slides-msg-user { background: rgba(21, 128, 61, .08); }
.slides-msg-ai { border: 1px solid var(--slides-border); }
.slides-msg-err { border: 1px solid #b91c1c; color: #b91c1c; }
html.dark .slides-msg-err { border-color: #f87171; color: #fca5a5; }
.slides-msg ul { margin: 4px 0 0; padding-left: 1.1em; font-size: .82rem; color: var(--slides-muted); }

/* ---- the slide itself: a 16:9 box whose type scales with its width ---- */
.sl-frame { container-type: inline-size; aspect-ratio: 16 / 9; width: 100%; position: relative; overflow: hidden; }
.sl { background: var(--sl-bg); color: var(--sl-body); position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5cqw 5.5cqw; font-family: Calibri, Carlito, Arial, sans-serif; line-height: 1.2; }
.sl-title { color: var(--sl-title); font-weight: 700; font-size: 4.2cqw; overflow-wrap: anywhere; }
.sl-top { min-height: 5cqw; margin-bottom: 2.4cqw; }
.sl-center { margin: auto 0; text-align: center; }
.sl-title .sl-center, .sl-center .sl-title { font-size: 5.4cqw; }
.sl-sub { color: var(--sl-accent); font-size: 2.6cqw; margin-top: 1.6cqw; }
.sl-section .sl-title { font-size: 5cqw; }
.sl-body { flex: 1 1 auto; min-height: 0; font-size: 2.3cqw; }
.sl-body-split { width: 56%; }
.sl-lead { color: var(--sl-accent); margin-bottom: 1.2cqw; }
.sl-bullets { margin: 0; padding-left: 3cqw; }
.sl-bullets li { margin-bottom: .9cqw; }
.sl-bullets li.sl-l1 { margin-left: 3cqw; font-size: .85em; list-style-type: circle; }
.sl-imgwrap { position: absolute; display: flex; align-items: center; justify-content: center; }
.sl-imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .6cqw; }
.sl-imgwrap-side { right: 5.5cqw; top: 14cqw; bottom: 5cqw; width: 34%; }
.sl-imgwrap-full { left: 12cqw; right: 12cqw; top: 13cqw; bottom: 8cqw; }
.sl-caption { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 2.5cqw; text-align: center; font-size: 1.9cqw; }

/* ---- present mode ---- */
.slides-present { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; align-items: center; justify-content: center; }
.slides-present[hidden] { display: none; }
.slides-present > .sl-frame { width: min(100vw, calc(100vh * 16 / 9)); }
.slides-present-bar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; color: #fff; background: rgba(0, 0, 0, .55); padding: 6px 10px; border-radius: 8px; }

@media (max-width: 991.98px) {
    .slides-main { flex-direction: column; height: auto; }
    .slides-side { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--slides-border); }
    .slides-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; }
    .slides-list li { flex: 0 0 140px; margin: 0; }
    .slides-ai { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--slides-border); display: none; }
    .slides-ai.is-open { display: flex; }
    .slides-title { max-width: none; }
}