/* Animation editor (animedit.js) */
.ae { position: fixed; inset: 0; z-index: 900; background: var(--bg-tertiary); color: var(--text); display: flex; flex-direction: column; font-family: var(--font); font-size: 13px; }
.ae-load { margin: auto; color: var(--text-muted); font-size: 15px; }
.ae-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-floating); border-bottom: 1px solid var(--divider); flex: none; flex-wrap: wrap; }
.ae-title { font-size: 15px; color: var(--text-strong); margin-right: 8px; }
.ae-what { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.ae-grow { flex: 1; }
.ae-var { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ae-var select { max-width: 280px; }
.ae-varlbl { color: var(--text-muted); font-size: 12px; }
.ae-vcount { font-style: normal; font-size: 10px; color: var(--text-muted); background: var(--bg-tertiary); border-radius: 8px; padding: 0 5px; }
.ae-block.strike.drag { cursor: grab; }
.ae-block.strike.drag:hover { background: rgba(88,101,242,.8); }
.ae-block.strike.moved { border-color: #ffd36b; }
body.ae-dragging, body.ae-dragging * { cursor: grabbing !important; user-select: none; }
.ae-btn { background: var(--bg-active); color: var(--text-strong); border: 0; border-radius: 4px; padding: 6px 10px; cursor: pointer; font: inherit; line-height: 1; display: inline-flex; align-items: center; gap: 4px; }
.ae-btn:hover:not(:disabled) { background: #4e5058; }
.ae-btn:disabled { opacity: .45; cursor: default; }
.ae-btn.primary { background: var(--blurple); }
.ae-btn.primary:hover:not(:disabled) { background: var(--blurple-hover); }
.ae-btn.danger { color: #ff8f91; }
.ae-btn.icon { padding: 6px 8px; min-width: 32px; justify-content: center; }
.ae-btn svg { fill: currentColor; }
.ae-body { flex: 1; display: grid; grid-template-columns: var(--ae-l, 240px) 5px minmax(0, 1fr) 5px var(--ae-r, 330px); min-height: 0; }
/* splitters between the panels (drag to resize, double-click for the default) */
.ae-split { background: var(--divider); position: relative; z-index: 4; flex: none; transition: background .12s; }
.ae-split.x { width: 5px; cursor: col-resize; }
.ae-split.y { height: 5px; cursor: row-resize; }
.ae-split:hover, .ae-split.on { background: var(--blurple); }
body.ae-resizing, body.ae-resizing * { user-select: none; }
body.ae-resizing.rx, body.ae-resizing.rx * { cursor: col-resize !important; }
body.ae-resizing.ry, body.ae-resizing.ry * { cursor: row-resize !important; }
.ae-dock { display: flex; height: var(--ae-dock, 230px); flex: none; min-height: 0; background: var(--bg-secondary); }
.ae-ec { width: var(--ae-ec, 460px); max-width: calc(100% - 200px); flex: none; overflow: hidden; display: flex; flex-direction: column; min-height: 0; background: var(--bg-secondary); }
.ae.ec-off .ae-ec, .ae.ec-off .s-ec { display: none; }
.ae-ec-title { padding: 5px 8px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--divider); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-ec-title b { color: var(--text-strong); }
.ae-ec-empty { padding: 14px 10px; color: var(--text-muted); line-height: 1.4; }
.ae-ec-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.ae-ec-row { display: flex; align-items: stretch; min-height: 22px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ae-ec-row.graph { min-height: 66px; }
.ae-ec-top { position: sticky; top: 0; z-index: 3; background: var(--bg-floating); }
.ae-ec-name { flex: none; display: flex; align-items: center; gap: 3px; padding: 0 4px; box-sizing: border-box; border-right: 1px solid var(--divider); font-size: 11px; color: var(--text-muted); overflow: hidden; white-space: nowrap; }
.ae-ec-top .ae-ec-name small { margin-left: auto; font-family: var(--mono); color: #ffd666; }
.ae-ec-grp .ae-ec-name { color: var(--text-strong); font-weight: 700; cursor: pointer; }
.ae-ec-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffd666; margin-left: 4px; }
.ae-ec-rows { position: relative; flex: 1; }
.ae-ec-ruler { position: relative; height: 20px; cursor: ew-resize; flex: none; }
.ae-ec-life { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(255,255,255,.35); }
.ae-ec-lane { position: relative; flex: none; background: rgba(0,0,0,.12); }
.ae-ec-lane.graph { height: 64px; }
.ae-ec-svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.ae-ec-gt { fill: var(--text-faint); font-size: 9px; font-family: var(--mono); }
.ae-ec-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #4fa3ff; pointer-events: none; z-index: 4; box-shadow: 0 0 4px #4fa3ff99; }
.ae-ec-foot { flex: none; font-size: 11px; color: var(--text-faint); padding: 4px 8px; border-top: 1px solid var(--divider); }
.ae-ec-tw { background: none; border: 0; color: var(--text-muted); width: 12px; padding: 0; cursor: pointer; font-size: 10px; flex: none; }
.ae-watch { background: none; border: 0; color: var(--text-faint); padding: 0; cursor: pointer; display: inline-flex; flex: none; }
.ae-watch.on { color: #4fa3ff; }
.ae-ec-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; min-width: 30px; }
.ae-ec-lbl.on { color: var(--text-strong); }
.ae-scrubv { color: #4fa3ff; font-family: var(--mono); cursor: ew-resize; border-bottom: 1px dashed #4fa3ff66; min-width: 30px; text-align: right; flex: none; }
.ae-scrubv:hover { color: #8cc4ff; }
.ae-ec-in { width: 56px; flex: none; padding: 1px 3px; }
.ae-ec-nav { display: inline-flex; flex: none; width: 46px; justify-content: flex-end; }
.ae-ec-nav button { background: none; border: 0; color: var(--text-muted); padding: 0 2px; cursor: pointer; font-size: 10px; }
.ae-ec-nav button:hover { color: var(--text-strong); }
.ae-ec-add.on { color: #4fa3ff !important; }
/* keyframes, shaped by interpolation as in Premiere */
.ae-kf2 { position: absolute; top: 6px; width: 10px; height: 10px; margin-left: -5px; background: #c8ccd4; border: 1px solid #1e1f22; transform: rotate(45deg); cursor: ew-resize; z-index: 2; box-sizing: border-box; }
.ae-ec-lane.graph .ae-kf2 { margin-top: -5px; cursor: move; }
.ae-kf2.on { background: #4fa3ff; border-color: #fff; }
.ae-kf2.i-bezier, .ae-kf2.i-ease { border-radius: 50%; }
.ae-kf2.i-easein, .ae-kf2.i-out { border-radius: 0 0 0 60%; }   /* the incoming (left) side rounded */
.ae-kf2.i-easeout, .ae-kf2.i-in { border-radius: 0 60% 0 0; }
.ae-kf2.i-hold { transform: none; border-radius: 0 50% 50% 0; }
.ae-kf2.sum { width: 7px; height: 7px; margin-left: -3px; top: 8px; background: #8e9297; cursor: default; }
.ae-menu { position: fixed; z-index: 1000; background: var(--bg-floating); border: 1px solid var(--divider); border-radius: 6px; padding: 4px; min-width: 220px; box-shadow: 0 8px 24px #0008; display: flex; flex-direction: column; }
.ae-menu-h { font-size: 11px; color: var(--text-faint); padding: 4px 8px; }
.ae-menu button { background: none; border: 0; color: var(--text); text-align: left; padding: 6px 8px; border-radius: 4px; cursor: pointer; font: inherit; }
.ae-menu button:hover { background: var(--blurple); color: #fff; }
.ae-menu button.on::before { content: "✓ "; }
.ae-menu button.danger { color: #ff8f91; }
.ae-menu hr { border: 0; border-top: 1px solid var(--divider); margin: 4px 0; width: 100%; }
.ae-keylist summary { cursor: pointer; color: var(--text-muted); font-size: 12px; margin: 4px 0; }

/* left: actions */
.ae-left { background: var(--bg-secondary); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--divider); }
.ae-search { margin: 8px; padding: 7px 9px; border-radius: 4px; border: 0; background: var(--bg-tertiary); color: var(--text); font: inherit; }
.ae-list { overflow-y: auto; flex: 1; padding: 0 6px 12px; }
.ae-group { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin: 12px 6px 4px; letter-spacing: .02em; }
.ae-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 6px 8px; border-radius: 4px; cursor: pointer; font: inherit; }
.ae-item:hover { background: var(--bg-hover); }
.ae-item.on { background: var(--bg-active); color: var(--text-strong); }
.ae-item.add { color: var(--link); }
.ae-item.sub { padding-left: 18px; }
.ae-sub { color: var(--text-faint); margin-left: -12px; }
.ae-group.fold { display: block; width: calc(100% - 12px); background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; padding: 0; }
.ae-group.fold:hover { color: var(--text-strong); }
.ae-itemhead { font-size: 11px; color: var(--text-faint); margin: 8px 8px 2px; border-top: 1px solid var(--divider); padding-top: 6px; }
.ae-scope { display: flex; gap: 4px; padding: 2px 6px 4px; }
.ae-item small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 1px; }
.ae-item-name { display: flex; align-items: center; gap: 6px; }
.ae-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.ae-empty { color: var(--text-muted); padding: 14px 8px; line-height: 1.4; }

/* middle: preview + bar + timeline */
.ae-mid { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ae-stage { position: relative; flex: 1; min-height: 200px; overflow: hidden; background: #07040f; }
/* the fight screen's backdrop: the scrolling purple grid, darkened at the edges */
.ae-stage::before { content: ""; position: absolute; inset: -80px; pointer-events: none;
  background-image: linear-gradient(rgba(190,60,200,.28) 2px, transparent 2px), linear-gradient(90deg, rgba(190,60,200,.28) 2px, transparent 2px);
  background-size: 64px 64px; animation: aegrid 5s linear infinite; }
.ae-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.65) 100%); }
@keyframes aegrid { to { transform: translate(64px, 64px); } }
@media (prefers-reduced-motion: reduce) { .ae-stage::before { animation: none; } }
.ae-world { position: absolute; inset: 0; will-change: transform; }
.ae-world::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; margin-top: calc(var(--s, 80px) / 2); border-top: 1px dashed rgba(255,255,255,.08); }
.ae-unit { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; }
.ae-unit small { color: var(--text-muted); font-size: 11px; }
.ae-circle { width: var(--s, 80px); height: var(--s, 80px); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: calc(var(--s, 80px) * .38); color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.5); transition: filter .08s; }
.ae-unit.att .ae-circle { background: linear-gradient(135deg, #5865f2, #3b44a8); border: 3px solid #8891ff; }
.ae-unit.tgt .ae-circle { background: linear-gradient(135deg, #c43a3d, #7d1e20); border: 3px solid #ff7b7e; }
.ae-unit.flip .ae-circle span { display: inline-block; transform: scaleX(-1); }
.ae-circle { position: relative; }
.ae-circle::after { content: ""; position: absolute; top: 50%; right: -15px; margin-top: -8px; border: 8px solid transparent; border-left: 10px solid rgba(255,255,255,.75); }
.ae-unit.left .ae-circle::after { right: auto; left: -15px; border-left: 8px solid transparent; border-right: 10px solid rgba(255,255,255,.75); }
.ae-block.move { background: rgba(0,168,252,.55); border: 1px solid #5cc8ff; cursor: grab; }
.ae-block.move.tgt { background: rgba(237,66,69,.55); border-color: #ff8a8c; }
.ae-block.flip { background: rgba(200,120,255,.75); border: 1px solid #d9a6ff; cursor: grab; min-width: 6px; }
.ae-block.num { background: rgba(255,214,102,.85); border: 1px solid #ffe7a3; cursor: grab; min-width: 6px; color: #2a2000; }
.ae-numk { position: absolute; top: 4px; transform: translateX(-50%); font-style: normal; font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 7px; background: #ffd666; color: #2a2000; font-weight: 700; font-family: var(--mono); white-space: nowrap; z-index: 1; }
.ae-numk.auto { background: rgba(255,214,102,.28); color: #ffe7a3; }
.ae-tlrow.drop .ae-tllane { background: rgba(88,101,242,.22); outline: 1px dashed #8ea1ff; outline-offset: -1px; }
.ae-numk.drag, .ae-hit.drag { cursor: grab; }
.ae-hit.drag.on { background: linear-gradient(90deg, transparent 4px, #fff 4px, #fff 8px, transparent 8px); box-shadow: 0 0 6px #ff5c5f; }
.ae-hit.drag { width: 12px; margin-left: -6px; background: linear-gradient(90deg, transparent 5px, #ff5c5f 5px, #ff5c5f 7px, transparent 7px); }
.ae-numk.drag:hover { background: rgba(255,214,102,.5); }
.ae-nums { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
/* the fight's damage numbers (.dmg-pop in app.css), their animations paused and set to --tt seconds in, so the preview can scrub */
.ae-nums .dmg-pop, .ae-nums .dmg-ctag, .ae-nums .dmg-num::after { animation-play-state: paused; }
.ae-nums .dmg-pop { animation-delay: calc(var(--tt, 0) * -1s); }
.ae-nums .dmg-ctag, .ae-nums .dmg-pop.crit .dmg-num::after { animation-delay: calc(.15s - var(--tt, 0) * 1s); }
.ae-grad { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px; }
.ae-gradstrip { flex: 1; height: 18px; border-radius: 4px; border: 1px solid var(--divider); min-width: 150px; }
.ae-gradstops { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ae-gradstop { display: inline-flex; align-items: center; gap: 1px; }
.ae-gradstop input[type=color] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--divider); background: none; }
.ae-grad > .ae-mini-btn { align-self: flex-start; }
.ae-unit.hurt .ae-circle { filter: brightness(2.2) saturate(.3); }
.ae-unit.missed::before { content: "MISS"; position: absolute; top: -22px; font-weight: 800; color: #c8ccd4; letter-spacing: .06em; text-shadow: 0 2px 4px #000; }
.ae-world .dg-fxl { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ae-world .dg-fxs { position: absolute; left: 0; top: 0; }
.ae-world .ae-clone { position: absolute; left: 0; top: 0; pointer-events: none; background: linear-gradient(135deg, #5865f2, #3b44a8); border: 3px solid #8891ff; transition: none; }
.ae-world .ae-clone::after { display: none; }
.ae-block.clone { background: rgba(150,110,255,.6); border: 1px solid #c9b8ff; cursor: grab; color: #1c1236; }
.ae-flash, .ae-flash1 { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }
.ae-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.ae-note { position: absolute; left: 12px; top: 10px; color: var(--text-muted); z-index: 6; pointer-events: none; }
.ae-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-secondary); border-top: 1px solid var(--divider); flex-wrap: wrap; flex: none; }
.ae-scrub { flex: 1; min-width: 120px; accent-color: var(--blurple); }
.ae-time { font-family: var(--mono); color: var(--text-muted); font-size: 12px; min-width: 104px; text-align: right; }
.ae-chip { background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--divider); border-radius: 12px; padding: 3px 9px; cursor: pointer; font: inherit; font-size: 12px; }
.ae-chip.on { background: var(--mention-bg); color: var(--text-strong); border-color: var(--blurple); }
.ae-mini { color: var(--text-muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.ae-mini input { width: 44px; }
.ae-input, .ae-mini input, .ae-num { background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--divider); border-radius: 4px; padding: 4px 6px; font: inherit; font-size: 12px; min-width: 0; }

.ae-tl { flex: 1; min-width: 0; background: var(--bg-secondary); border-top: 1px solid var(--divider); overflow: auto; position: relative; }
.ae-tlwrap { position: relative; padding: 0 0 4px; }
.ae-track { position: relative; }
.ae-ruler { position: sticky; top: 0; height: 20px; background: var(--bg-floating); cursor: ew-resize; z-index: 3; }
.ae-tick { position: absolute; top: 3px; font-size: 10px; color: var(--text-faint); border-left: 1px solid var(--divider); padding-left: 3px; height: 17px; font-family: var(--mono); }
.ae-tlrow { display: flex; height: 24px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ae-tlrow.sel { background: rgba(88,101,242,.12); }
.ae-tllabel { flex: none; position: sticky; left: 0; z-index: 2; background: var(--bg-secondary); color: var(--text-muted); font-size: 11px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; cursor: pointer; border-right: 1px solid var(--divider); }
.ae-tlrow.sel .ae-tllabel { color: var(--text-strong); }
.ae-lname { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; }
.ae-eye { background: none; border: 0; color: var(--text-muted); padding: 0; cursor: pointer; display: inline-flex; }
.ae-eye svg { fill: currentColor; }
.ae-eye.off { opacity: .35; }
.ae-tllane { position: relative; flex: none; }
.ae-block { position: absolute; top: 3px; height: 18px; border-radius: 3px; font-style: normal; font-size: 10px; line-height: 18px; padding: 0 4px; white-space: nowrap; overflow: hidden; color: #fff; box-sizing: border-box; }
.ae-block.strike { background: rgba(88,101,242,.55); border: 1px solid rgba(136,145,255,.6); }
.ae-block.fx { background: rgba(35,165,90,.6); border: 1px solid #3ddc84; cursor: grab; }
.ae-block.flash, .ae-block.screen { background: rgba(240,178,50,.65); border: 1px solid #ffd36b; cursor: grab; color: #222; }
.ae-block.quake { background: rgba(242,63,67,.6); border: 1px solid #ff8f91; cursor: grab; }
.ae-block.camera { background: rgba(64,196,200,.6); border: 1px solid #8eeef0; cursor: grab; color: #10282a; }
.ae-block.on { outline: 2px solid #fff; z-index: 1; }
.ae-block.on.lead { outline-color: #ffd666; }
.ae-block.strike { cursor: pointer; }
.ae-kf { position: absolute; top: 4px; width: 9px; height: 9px; margin-left: -4px; background: #ffd666; border: 1px solid #2a2000; transform: rotate(45deg); cursor: ew-resize; z-index: 2; }
.ae-kf:hover { background: #fff; }
.ae-key { background: none; border: 0; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; opacity: .55; }
.ae-key.keyed { color: #ffd666; opacity: .8; }
.ae-key.on { color: #ffd666; opacity: 1; text-shadow: 0 0 6px #ffd66699; }
.ae-row.keyable:has(.ae-key.keyed) > span { color: #ffd666; }
.ae-row.keyable { grid-template-columns: 96px minmax(0, 1fr) 58px 20px 16px; }
.ae-keyhead .ae-mini-btn { white-space: nowrap; width: auto; padding: 0 6px; }
.ae-keyprop { border: 1px solid var(--divider); border-radius: 6px; padding: 6px; margin: 6px 0; background: var(--bg-tertiary); }
.ae-keyhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ae-keys { display: flex; flex-direction: column; gap: 3px; }
.ae-keyrow { display: flex; gap: 4px; align-items: center; }
.ae-keyrow .ae-num { width: 58px; }
.ae-keyrow select { flex: 1; min-width: 0; }
.ae-keyrow small { color: var(--text-faint); }
.ae-keyend { flex: 1; }
.ae-block.strike.swapped { background: rgba(160,88,242,.6); border-color: #c79bff; }
.ae-swaps { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.ae-swap { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border: 1px solid var(--divider); border-radius: 6px; background: var(--bg-tertiary); }
.ae-swap.on { border-color: #c79bff; }
.ae-swapinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ae-swapinfo small { color: var(--text-faint); }
.ae-swapinfo .ae-addrow { margin: 2px 0 0; }
.ae-swapinfo select { max-width: 150px; }
.ae-thumb.none { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 11px; background: rgba(0,0,0,.25); border-radius: 4px; }
.ae-rows { position: relative; }
.ae-phase.edit { cursor: grab; }
.ae-phase.edit:hover { background: rgba(255,255,255,.2); color: var(--text-strong); }
.ae-endline { position: absolute; top: 0; bottom: 0; width: 10px; margin-left: -10px; cursor: ew-resize; z-index: 5; }
.ae-endline::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: #8ea1ff; opacity: .55; }
.ae-endline:hover::after, .ae-endline.on::after { opacity: 1; box-shadow: 0 0 4px #5865f2; }
.ae-endline b { position: absolute; top: 2px; right: 3px; font-size: 9px; line-height: 14px; padding: 0 4px; border-radius: 3px; background: #5865f2; color: #fff; font-weight: 600; pointer-events: none; }
.ae-lanedrop { position: absolute; right: 0; height: 2px; background: #8ea1ff; box-shadow: 0 0 4px #5865f2; pointer-events: none; z-index: 6; }
.ae-tlrow.dragging { opacity: .45; }
.ae-tlrow.dragging .ae-tllabel { cursor: grabbing; }
.ae-tlrow.addlane { border-bottom: 0; }
.ae-tlrow.addlane .ae-tllabel { cursor: default; }
.ae-addlane { width: 20px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 18px; cursor: pointer; }
.ae-addlane:hover { background: rgba(255,255,255,.08); color: var(--text-strong); }
.ae-edge { position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 2; text-decoration: none; }
.ae-edge.l { left: 0; border-radius: 3px 0 0 3px; }
.ae-edge.r { right: 0; border-radius: 0 3px 3px 0; }
.ae-edge:hover, body.ae-dragging .ae-block.on .ae-edge:hover { background: rgba(255,255,255,.45); }
.ae-ghost { position: absolute; top: 3px; height: 18px; border: 2px dashed #fff; border-radius: 3px; background: rgba(255,255,255,.14); box-sizing: border-box; pointer-events: none; z-index: 3; }
.ae-head-line.snap { background: #ffd666; box-shadow: 0 0 8px #ffd666; width: 3px; }
.ae-marquee { position: absolute; border: 1px dashed #fff; background: rgba(88,101,242,.18); pointer-events: none; z-index: 5; }
.ae-tlrow.group { background: rgba(255,255,255,.035); }
.ae-gbar { position: absolute; top: 3px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); font-style: normal; font-size: 10px; line-height: 16px;
  padding: 0 8px; color: var(--text-strong); white-space: nowrap; overflow: hidden; box-sizing: border-box; cursor: grab; }
.ae-gbar.on { outline: 2px solid #fff; background: rgba(88,101,242,.4); }
.ae-gbar.off { opacity: .35; }
.ae-gname { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.ae-lname.ingroup { padding-left: 14px; }
.ae-selbar { display: flex; flex-direction: column; gap: 0; margin-bottom: 4px; }
.ae-send { flex: 1; min-width: 110px; }
.ae-pickedlist { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; max-height: 220px; overflow: auto; }
.ae-picked { text-align: left; background: var(--bg-tertiary); color: var(--text); border: 1px solid var(--divider); border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.ae-picked.on { border-color: #ffd666; }
.ae-picked small { color: var(--text-faint); }
.ae-block.off { opacity: .3; }
.ae-phase { position: absolute; top: 5px; height: 14px; border-radius: 7px; background: rgba(255,255,255,.12); font-style: normal; font-size: 10px; line-height: 14px; text-align: center; color: var(--text-muted); overflow: hidden; }
.ae-hit { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff5c5f; z-index: 1; }
.ae-head-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; z-index: 4; box-shadow: 0 0 4px rgba(255,255,255,.6); }
.ae-addrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.ae-addrow.tl { padding: 6px 10px; position: sticky; left: 0; }
.ae-hint { color: var(--text-faint); font-size: 11px; margin: 4px 0; line-height: 1.35; }

/* right: properties */
.ae-right { background: var(--bg-secondary); border-left: 1px solid var(--divider); display: flex; flex-direction: column; min-height: 0; }
.ae-tabs { display: flex; border-bottom: 1px solid var(--divider); flex: none; }
.ae-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 9px 4px; cursor: pointer; font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-tab.on { color: var(--text-strong); border-bottom-color: var(--blurple); }
.ae-props { overflow-y: auto; padding: 8px 12px 30px; flex: 1; }
.ae-sec { border-bottom: 1px solid var(--divider); padding: 4px 0 8px; }
.ae-sec > summary { cursor: pointer; font-weight: 700; color: var(--text-strong); padding: 6px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.ae-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 58px 20px; align-items: center; gap: 6px; margin: 4px 0; }
.ae-row > span:first-child { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-row > select, .ae-row > input.ae-input { grid-column: 2 / 5; }
.ae-row input[type=range] { width: 100%; accent-color: var(--blurple); }
.ae-row input[type=color] { width: 40px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }
.ae-row.check { grid-template-columns: 18px 1fr; }
.ae-row.check span { color: var(--text) !important; }
.ae-hex { font-family: var(--mono); color: var(--text-faint); font-size: 11px; grid-column: 3 / 5; }
.ae-num { width: 100%; box-sizing: border-box; }
.ae-reset { background: none; border: 0; color: var(--text-faint); cursor: pointer; padding: 0; font-size: 13px; }
.ae-reset:hover { color: var(--text-strong); }
.ae-strikes { margin: 4px 0; }
.ae-strike { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.ae-strike span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-mini-btn { background: var(--bg-tertiary); border: 0; color: var(--text-muted); border-radius: 3px; cursor: pointer; width: 22px; height: 20px; }
.ae-mini-btn:hover { color: var(--text-strong); }
.ae-pick { display: flex; gap: 10px; align-items: center; }
.ae-pick small { display: block; color: var(--text-muted); margin: 2px 0 6px; }
.ae-thumb { background-color: #111214; border-radius: 4px; flex: none; }
.ae-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.ae-card { background: var(--bg-tertiary); border: 1px solid transparent; border-radius: 4px; padding: 2px; cursor: pointer; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; }
.ae-card:hover { border-color: var(--divider); color: var(--text-strong); }
.ae-card.on { border-color: var(--blurple); }
.ae-card small { font-size: 10px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-props > .ae-search { margin: 6px 0; width: 100%; box-sizing: border-box; }
.ae-props > select { width: 100%; }

@media (max-width: 1000px) {
  .ae-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(300px, 1fr) auto; overflow-y: auto; }
  .ae-body { grid-template-rows: max-content max-content max-content; }   /* stacked: each panel its full height, the editor scrolls */
  .ae-stage { flex: none; height: 320px; }
  .ae-body > .ae-split, .ae-mid > .ae-split, .ae-dock > .ae-split { display: none; }
  .ae-dock { flex-direction: column; height: auto; }
  .ae-ec { width: auto; max-height: 320px; border-bottom: 1px solid var(--divider); }
  .ae-tl { height: 220px; flex: none; }
  .ae-left { max-height: 160px; border-right: 0; }
  .ae-right { border-left: 0; border-top: 1px solid var(--divider); max-height: none; }
  .ae-props { overflow: visible; }
}
.ae-block.dialogue { background: rgba(233,231,227,.75); border: 1px solid #fff; cursor: grab; color: #1a1a1a; font-family: "Liberation Sans", Arial, sans-serif; }
.ae-saytext { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font-family: "Liberation Sans", Arial, sans-serif; font-size: 14px; line-height: 1.3; }
.ae-saybar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.ae-saybar input[type=color] { width: 28px; height: 24px; padding: 0; border: none; background: none; }