/* ══════════════════════════════════════════════════════════════════════════
   Animations panel (js/tools/AnimationStudio.js) — one simple screen:
   AI card · selected object (effects + Hide it) · steps · play bar.
   Own palette on purpose: no h1–h6 (themes force heading colours).
   ══════════════════════════════════════════════════════════════════════════ */
#anim-studio {
    --as-bg: #ffffff; --as-bg2: #f5f6fa; --as-ink: #0f172a; --as-ink2: #475569; --as-ink3: #94a3b8;
    --as-line: rgba(15, 23, 42, 0.08); --as-acc: #6d5efc; --as-acc2: #a855f7; --as-acc-soft: rgba(109, 94, 252, 0.10);
    --as-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.05);
    position: fixed; top: 72px; right: 16px; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 160px);
    display: flex; flex-direction: column; background: var(--as-bg); color: var(--as-ink); border-radius: 22px;
    box-shadow: var(--as-shadow); z-index: 20020; font-family: 'Outfit', 'Inter', 'Cairo', system-ui, sans-serif;
    opacity: 0; pointer-events: none; transform: translateX(20px) scale(0.98); transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.25,1.15);
    overflow: hidden;
}
#anim-studio.show { opacity: 1; pointer-events: auto; transform: none; }
[data-theme="dark"] #anim-studio {
    --as-bg: #141a2b; --as-bg2: #1d2439; --as-ink: #f1f5f9; --as-ink2: #cbd5e1; --as-ink3: #7c8aa5;
    --as-line: rgba(255, 255, 255, 0.08); --as-acc-soft: rgba(139, 125, 255, 0.16);
    --as-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
#anim-studio * { box-sizing: border-box; }
#anim-studio button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.as-head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 8px; }
.as-logo { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--as-acc), var(--as-acc2)); }
.as-title { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.as-title b { font-size: 16px; font-weight: 800; color: var(--as-ink); }
.as-title small { font-size: 12px; color: var(--as-ink3); }
.as-x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--as-bg2); color: var(--as-ink2); }

.as-body { flex: 1; overflow-y: auto; padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }

/* cards */
.as-card { border-radius: 16px; background: var(--as-bg2); border: 1px solid var(--as-line); padding: 12px; }
.as-card-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--as-ink); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-card-h i { color: var(--as-acc); }
.as-tip { font-size: 13px; color: var(--as-ink3); padding: 4px 4px 0; display: flex; gap: 8px; align-items: center; }

/* AI card */
.as-ai { background: linear-gradient(140deg, color-mix(in srgb, var(--as-acc) 9%, var(--as-bg)), color-mix(in srgb, #ec4899 7%, var(--as-bg))); }
.as-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-toggles label { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--as-line); background: var(--as-bg); font-size: 12.5px; font-weight: 700; color: var(--as-ink2); cursor: pointer; min-height: 44px; }
.as-toggles label input { position: absolute; opacity: 0; pointer-events: none; }
.as-toggles label i { color: var(--as-ink3); }
.as-toggles label.on { border-color: var(--as-acc); color: var(--as-ink); }
.as-toggles label.on i { color: var(--as-acc); }
.as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 0; font-weight: 800; font-size: 14px; }
.as-btn.wide { width: 100%; margin-top: 10px; min-height: 48px; font-size: 15px; }
.as-btn.primary { background: var(--as-acc); color: #fff; }
.as-btn.magic { color: #fff; background: linear-gradient(120deg, #6d5efc, #a855f7 45%, #ec4899); background-size: 200% 100%; animation: as-sheen 4s ease-in-out infinite; box-shadow: 0 12px 24px -12px rgba(168, 85, 247, .8); }
.as-btn:disabled { opacity: .6; cursor: progress; animation: none; }
@keyframes as-sheen { 50% { background-position: 100% 0; } }
.as-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: as-rot .8s linear infinite; }
@keyframes as-rot { to { transform: rotate(360deg); } }
.as-done { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--as-ink2); }
.as-done i { color: #10b981; } .as-done.warn i { color: #f59e0b; }
.as-done span { flex: 1; }
.as-done button { border: 0; background: none; color: var(--as-acc); font-weight: 800; font-size: 12.5px; padding: 6px; }

/* selected object */
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chips.small { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--as-line); }
.as-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--as-line); background: var(--as-bg); color: var(--as-ink); font-size: 12.5px; font-weight: 700; }
.as-chip i { color: var(--c, var(--as-ink3)); font-size: 12px; }
.as-chip:hover { border-color: var(--c, var(--as-acc)); }
.as-chips.small .as-chip { min-height: 32px; font-size: 12px; padding: 0 9px; }
.as-chip.more { color: var(--as-ink2); }
.as-hide-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.as-hide-row .as-btn { flex: none; }
.as-dots { display: flex; gap: 5px; flex-wrap: nowrap; }
.as-dots button { width: 22px; height: 22px; border-radius: 7px; flex: none; border: 0; box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); }
.as-dots button.on { box-shadow: 0 0 0 2px var(--as-bg), 0 0 0 4px var(--as-acc); }

/* steps */
.as-steps-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink3); padding: 2px 2px 0; }
.as-steps-h span { flex: 1; }
.as-steps-h button { border: 0; background: none; color: var(--as-ink3); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 4px 6px; border-radius: 8px; }
.as-steps-h button:hover { color: #ef4444; background: rgba(239, 68, 68, .08); }
.as-click { display: flex; gap: 10px; align-items: flex-start; }
.as-click.played { opacity: .5; }
.as-num { flex: none; width: 26px; height: 26px; margin-top: 6px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--as-acc); }
.as-click-steps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.as-step { display: flex; align-items: center; gap: 9px; padding: 7px 6px 7px 10px; border-radius: 11px; background: var(--as-bg2); cursor: pointer; min-height: 38px; }
.as-step:hover { background: var(--as-acc-soft); }
.as-step > i { width: 16px; text-align: center; font-size: 13px; }
.as-step span { flex: 1; min-width: 0; font-size: 12.5px; color: var(--as-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-step span b { color: var(--as-ink); font-weight: 700; margin-inline-end: 4px; }
.as-step button { width: 28px; height: 28px; flex: none; border-radius: 8px; border: 0; background: transparent; color: var(--as-ink3); font-size: 11.5px; }
.as-step button:hover { color: var(--as-acc); background: var(--as-bg); }

/* play bar */
.as-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--as-line); }
.as-ic { width: 40px; height: 40px; border-radius: 11px; border: 0; background: var(--as-bg2); color: var(--as-ink2); flex: none; }
.as-ic:hover { color: var(--as-acc); background: var(--as-acc-soft); }
.as-count { flex: 1; text-align: center; font-size: 12.5px; color: var(--as-ink3); }
.as-count b { color: var(--as-ink); font-size: 14px; }
.as-play { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: 11px; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--as-acc), var(--as-acc2)); }
.as-play.on { background: linear-gradient(135deg, #ef4444, #f97316); }

/* side strip: AI button + coloured step chips */
.anim-ai-btn { width: 36px; height: 36px; border-radius: 12px; border: 0; color: #fff; display: grid; place-items: center; background: linear-gradient(135deg, #6d5efc, #a855f7 55%, #ec4899); box-shadow: 0 8px 16px -8px rgba(168, 85, 247, .9); cursor: pointer; margin: 2px auto; }
.anim-step-item.cat-entrance .anim-step-num { background: #10b981 !important; color: #fff !important; }
.anim-step-item.cat-emphasis .anim-step-num { background: #f59e0b !important; color: #fff !important; }
.anim-step-item.cat-exit .anim-step-num { background: #ef4444 !important; color: #fff !important; }
.anim-step-item.with-prev { margin-top: -3px !important; opacity: .85; }
.anim-step-item.with-prev .anim-step-num { transform: scale(.82); }

@media (max-width: 760px) {
    #anim-studio { top: auto; right: 8px; left: 8px; bottom: 70px; width: auto; max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { #anim-studio .as-btn.magic { animation: none !important; } }