/*
 * Otomate editor layout (generate.html + generate-board.js).
 * body[data-editor-mode="simple"|"advanced"], body[data-editor-kind="edit"|"create"].
 * generate-redesign.css still styles the controls re-homed in here (preview
 * stage, video cards, strip cards); this file lays the page out around them.
 */

.editor-page {
    --ed-ink: #18202c;
    --ed-muted: #5f6a7d;
    --ed-line: #dce6eb;
    --ed-line-strong: #cfdde4;
    --ed-soft: #f3f8fa;
    --ed-softer: #fbfdfd;
    --ed-sky: #eaf7fc;
    --ed-blue: #1779a6;
    --ed-blue-dark: #0c638e;
    --ed-good-bg: #e7f7f0;
    --ed-good: #087e59;
    --ed-good-ink: #0b5e43;
    --ed-warn-bg: #fff9ec;
    --ed-warn-line: #f0cd91;
    --ed-warn: #7a5200;
    --ed-danger: #b03a3a;
    --ed-danger-bg: #fdf1f1;
    --ed-danger-line: #edbcbc;
    --ed-radius: 20px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--ed-ink);
}

body[data-editor-mode="advanced"] .editor-page {
    max-width: 1440px;
}

/* ── Mode visibility ───────────────────────────────────────────── */

body[data-editor-mode="simple"] .editor-advanced-only,
body[data-editor-mode="simple"] #admin-skin-section {
    display: none !important;
}

body[data-editor-kind="create"] .editor-mode-switch,
body[data-editor-kind="create"] #editor-mode-help,
body[data-editor-kind="create"] #editor-home-link,
body[data-editor-kind="create"] .editor-queue {
    display: none !important;
}

@media (max-width: 980px) {
    body[data-editor-mode="advanced"][data-editor-kind="edit"] .editor-advanced-only,
    body[data-editor-mode="advanced"][data-editor-kind="edit"] #admin-skin-section {
        display: none !important;
    }
}

body.editor-load-failed .editor-page > :not(.editor-load-error) {
    display: none !important;
}

.editor-retired {
    display: none !important;
}

/* ── Shared bits ───────────────────────────────────────────────── */

.editor-card {
    background: #ffffff;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    padding: clamp(18px, 2.4vw, 28px);
    min-width: 0;
}

.editor-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-blue);
}

.editor-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ed-muted);
}

.editor-field-help {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ed-muted);
}

.editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ed-line-strong);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ed-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.editor-btn:hover:not(:disabled) {
    background: var(--ed-soft);
    border-color: #b9cbd3;
}

.editor-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.editor-btn-small {
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 10px;
}

.editor-btn-primary {
    border-color: transparent;
    background: var(--ed-blue);
    color: #ffffff;
}

.editor-btn-primary:hover:not(:disabled) {
    background: var(--ed-blue-dark);
    border-color: transparent;
}

.editor-btn-dark {
    border-color: transparent;
    background: var(--ed-ink);
    color: #ffffff;
}

.editor-btn-dark:hover:not(:disabled) {
    background: #2a3445;
    border-color: transparent;
}

.editor-btn-danger {
    border-color: transparent;
    background: var(--ed-danger);
    color: #ffffff;
}

.editor-btn-danger:hover:not(:disabled) {
    background: #8f2c2c;
    border-color: transparent;
}

.editor-btn-danger-outline {
    align-self: flex-start;
    border-color: var(--ed-danger-line);
    color: var(--ed-danger);
}

.editor-btn-danger-outline:hover:not(:disabled) {
    background: var(--ed-danger-bg);
    border-color: var(--ed-danger-line);
}

.editor-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ed-ink);
    cursor: pointer;
}

.editor-icon-btn:hover {
    background: var(--ed-soft);
}

.editor-link-btn {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--ed-blue-dark);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.editor-link-btn:hover {
    text-decoration: underline;
}

.editor-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    background: var(--ed-soft);
}

.editor-segmented button {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ed-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.editor-segmented button[aria-pressed="true"],
.editor-segmented button[aria-selected="true"] {
    background: #ffffff;
    color: var(--ed-ink);
    box-shadow: 0 1px 3px rgba(24, 32, 44, 0.14);
}

.editor-mode-switch {
    background: #ffffff;
}

.editor-mode-switch button[aria-pressed="true"] {
    background: var(--ed-ink);
    color: #ffffff;
    box-shadow: none;
}

.editor-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #cfe6f1;
    border-radius: 999px;
    background: var(--ed-sky);
    color: var(--ed-blue-dark);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.editor-chip-ready {
    border-color: transparent;
    background: var(--ed-good-bg);
    color: var(--ed-good);
}

.editor-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ed-muted);
}

.editor-note.is-info {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ed-sky);
    color: var(--ed-blue-dark);
    font-weight: 600;
}

.editor-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ed-good-bg);
    color: var(--ed-good);
    font-size: 13px;
    line-height: 1.4;
}

.editor-done > i {
    flex: 0 0 auto;
    font-size: 16px;
}

.editor-done-text {
    flex: 1 1 0;
    min-width: 0;
}

.editor-done-text > span {
    display: block;
    color: var(--ed-ink);
}

.editor-done .editor-btn {
    flex: 0 0 auto;
}

.editor-done {
    flex-wrap: wrap;
}

/* Under the text, lined up with it: two buttons don't fit beside it. */
.editor-done-actions {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 26px;
}

.editor-done .editor-btn,
.editor-take .editor-btn {
    white-space: nowrap;
}

.editor-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}

.editor-banner {
    flex-wrap: nowrap;
}

.editor-banner > i {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 3px;
}

.editor-banner > span {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-banner > .editor-btn {
    flex: 0 0 auto;
}

.editor-banner.is-good {
    background: var(--ed-good-bg);
    color: var(--ed-good-ink);
}

.editor-banner.is-warn {
    border: 1px solid var(--ed-warn-line);
    background: var(--ed-warn-bg);
    color: var(--ed-warn);
}

.editor-banner.is-info {
    background: var(--ed-sky);
    color: var(--ed-blue-dark);
}

.editor-required {
    display: grid;
    gap: 10px;
}

.editor-required:empty {
    display: none;
}

/* ── Header ────────────────────────────────────────────────────── */

.editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
}

.editor-head h1 {
    margin: 4px 0 0;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.15;
}

.editor-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.editor-mode-help {
    font-size: 13px;
    color: var(--ed-muted);
}

.editor-load-error {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.editor-load-error h2 {
    margin: 0;
    font-size: 22px;
}

.editor-load-error p {
    margin: 0;
    color: var(--ed-muted);
}

/* ── Identity ──────────────────────────────────────────────────── */

.editor-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

.editor-identity-media {
    flex: 0 0 220px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.editor-portrait {
    position: relative;
    width: 220px;
    height: 236px;
    border-radius: 16px;
    background: var(--ed-sky);
    overflow: hidden;
}

.editor-portrait::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 124px;
    height: 16px;
    margin-left: -62px;
    border-radius: 50%;
    background: rgba(23, 121, 166, 0.14);
}

.editor-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--ed-muted);
}

.editor-code-row strong {
    color: var(--ed-ink);
}

/* Advanced: her images get a full-width row under name and personality. */
.editor-images {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background: var(--ed-softer);
}

.editor-images .upload-area {
    min-height: 140px;
}

.editor-images .upload-preview {
    max-height: 200px;
}

.editor-images .image-history-panel {
    margin: 0;
}

@media (max-width: 640px) {
    .editor-images {
        grid-template-columns: minmax(0, 1fr);
    }
}

body[data-editor-kind="create"] .editor-images {
    order: -1;
}

/* A new character has no portrait or code yet; her images lead instead. */
body[data-editor-kind="create"] .editor-identity-media {
    display: none;
}

.editor-identity-fields {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.editor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.editor-chips:not(:has(:not([hidden]))) {
    display: none;
}

.editor-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ed-muted);
}

.editor-field input,
.editor-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    background: var(--ed-softer);
    color: var(--ed-ink);
    font-size: 15px;
    line-height: 1.5;
}

.editor-field input:focus,
.editor-field textarea:focus {
    outline: 2px solid rgba(23, 121, 166, 0.35);
    outline-offset: 1px;
    border-color: var(--ed-blue);
}

#character-name {
    font-size: 24px;
    font-weight: 800;
}

#character-personality {
    resize: vertical;
    min-height: 104px;
}

.editor-nudge {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ed-warn-line);
    border-radius: 10px;
    background: var(--ed-warn-bg);
    color: var(--ed-warn);
    font-size: 13px;
    line-height: 1.45;
}

.editor-nudge[hidden] {
    display: none;
}

.editor-nudge i {
    margin-top: 2px;
}

/* ── Queue strip ───────────────────────────────────────────────── */

.editor-queue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    font-size: 13px;
}

.editor-queue[hidden] {
    display: none;
}

.editor-queue-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-muted);
}

.editor-queue-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

a.editor-queue-item:hover strong {
    text-decoration: underline;
}

button.editor-queue-item {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    cursor: pointer;
}

.editor-queue-item.is-done {
    background: var(--ed-good-bg);
    color: var(--ed-good);
}

.editor-queue-item.is-done:hover {
    border-color: var(--ed-good);
}

.editor-queue-bar {
    display: inline-block;
    width: 72px;
    height: 6px;
    border-radius: 6px;
    background: var(--ed-line);
    overflow: hidden;
}

.editor-queue-bar > span {
    display: block;
    height: 100%;
    background: var(--ed-blue);
}

.editor-queue-note {
    margin-left: auto;
    color: var(--ed-muted);
}

/* ── Workspace: board (+ Advanced editor column) ───────────────── */

.editor-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

body[data-editor-mode="advanced"] .editor-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
}

@media (max-width: 1180px) {
    body[data-editor-mode="advanced"] .editor-workspace {
        grid-template-columns: minmax(0, 1fr);
    }
}

.editor-board {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.editor-board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.editor-board-heading {
    min-width: 0;
}

.editor-board-head h2,
.editor-library-head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.editor-board-head p,
.editor-library-head p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ed-muted);
}

.editor-add-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    background: var(--ed-softer);
}

.editor-add-action > span {
    flex: 1 1 220px;
    font-size: 14px;
    color: var(--ed-muted);
}

.editor-add-action select {
    min-width: 160px;
}

.editor-add-action select,
.editor-inline select {
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--ed-line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--ed-ink);
    font-size: 14px;
}

.editor-board-groups {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.editor-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.editor-group-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.editor-group-head span {
    font-size: 13px;
    color: var(--ed-muted);
}

.editor-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.editor-empty {
    margin: 0;
    color: var(--ed-muted);
}

/* ── Tiles ─────────────────────────────────────────────────────── */

.editor-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 7px 7px 12px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background: #ffffff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

button.editor-tile:hover {
    border-color: #b9cbd3;
    transform: translateY(-1px);
}

button.editor-tile:focus-visible {
    outline: 3px solid rgba(23, 121, 166, 0.45);
    outline-offset: 2px;
}

.editor-tile.is-open {
    border: 2px solid var(--ed-blue);
    padding: 6px 6px 11px;
    box-shadow: 0 0 0 4px var(--ed-sky);
}

.editor-tile.is-available,
.editor-tile.is-custom,
.editor-tile.is-empty {
    border: 1.5px dashed #b9cbd3;
    background: var(--ed-softer);
}

.editor-tile.is-selected {
    border: 2px solid var(--ed-blue);
    padding: 6px 6px 11px;
    background: var(--ed-sky);
}

.editor-tile.is-generating {
    border: 1.5px solid #9fcde3;
    cursor: default;
}

.editor-tile.is-failed {
    border: 1.5px solid var(--ed-danger-line);
}

.editor-tile.is-required-missing {
    border-color: var(--ed-warn-line);
    background: var(--ed-warn-bg);
}

.editor-tile-stage {
    position: relative;
    display: block;
    height: 128px;
    border-radius: 10px;
    background: var(--ed-soft);
    overflow: hidden;
}

.editor-tile-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 84px;
    height: 12px;
    margin-left: -42px;
    border-radius: 50%;
    background: rgba(23, 121, 166, 0.12);
}

.editor-tile.is-selected .editor-tile-stage {
    background: #d8eef8;
}

.editor-tile.is-failed .editor-tile-stage {
    background: var(--ed-danger-bg);
}

.editor-tile-stage.is-ghost .editor-sheet {
    opacity: 0.2;
    filter: grayscale(1);
}

.editor-tile-stage.is-custom-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ed-blue);
    font-size: 12px;
    font-weight: 700;
}

.editor-tile-stage.is-custom-stage::before {
    display: none;
}

.editor-tile-stage.is-custom-stage i {
    font-size: 26px;
}

.editor-tile-chip {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 7px;
    padding: 3px 8px;
    border: 1px solid #cfe6f1;
    border-radius: 999px;
    background: #ffffff;
    color: var(--ed-blue-dark);
    font-size: 11px;
    font-weight: 700;
}

.editor-tile-chip.is-warn {
    border-color: var(--ed-warn-line);
    color: var(--ed-warn);
}

.editor-tile-chip.is-right {
    left: auto;
    right: 7px;
}

/* Under "Required" so the two never collide on a narrow tile. */
.editor-tile-chip.is-second {
    top: 34px;
}

.editor-loop-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ed-warn-line);
    border-radius: 10px;
    background: var(--ed-warn-bg);
    color: var(--ed-warn);
    font-size: 13px;
    line-height: 1.4;
}

.editor-loop-hint > span {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-loop-hint .editor-btn {
    flex: 0 0 auto;
}

.editor-column-trim .editor-loop-hint {
    margin-bottom: 10px;
}

.editor-tile-band {
    position: absolute;
    z-index: 2;
    left: 7px;
    right: 7px;
    bottom: 7px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--ed-ink);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.editor-tile-band.is-done {
    background: var(--ed-good);
}

.editor-tile-badge {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ed-blue);
    box-shadow: 0 2px 8px rgba(24, 32, 44, 0.12);
}

.editor-tile.is-selected .editor-tile-badge {
    background: var(--ed-blue);
    color: #ffffff;
}

.editor-tile-badge.is-danger {
    color: var(--ed-danger);
}

.editor-tile-progress {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 6px;
    border-radius: 6px;
    background: var(--ed-line);
    overflow: hidden;
}

.editor-tile-progress > span {
    display: block;
    height: 100%;
    background: var(--ed-blue);
    transition: width 0.4s;
}

.editor-tile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0 5px;
}

.editor-tile-name {
    font-size: 14px;
    font-weight: 700;
}

.editor-tile-meta {
    font-size: 12px;
    line-height: 1.35;
    color: var(--ed-muted);
}

.editor-tile-meta.is-accent {
    color: var(--ed-blue-dark);
    font-weight: 700;
}

.editor-tile-meta.is-danger {
    color: var(--ed-danger);
    font-weight: 700;
}

.editor-tile-cost {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ed-muted);
}

.editor-tile.is-selected .editor-tile-cost,
.editor-tile.is-failed .editor-tile-cost {
    color: var(--ed-blue-dark);
}

/* Shared sheet player (tiles, portrait, panel, takes) */

.editor-sheet {
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    pointer-events: none;
}

.editor-still {
    position: absolute;
    inset: 4px 4px 2px;
    z-index: 1;
}

.editor-still .animation-preview-visual {
    background-position: center bottom;
}

.editor-live {
    position: absolute;
    inset: 8px 8px 6px;
    z-index: 1;
}

.editor-tile-stage.is-loading::after,
.editor-portrait.is-loading::after,
.editor-drawer-stage.is-loading::after,
.editor-take-thumb.is-loading::after,
.editor-variant-thumb.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: editor-shimmer 1.4s linear infinite;
}

@keyframes editor-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .editor-tile-stage.is-loading::after,
    .editor-portrait.is-loading::after,
    .editor-drawer-stage.is-loading::after,
    .editor-take-thumb.is-loading::after,
    .editor-variant-thumb.is-loading::after {
        animation: none;
    }

    button.editor-tile:hover {
        transform: none;
    }
}

/* ── Advanced editor column ────────────────────────────────────── */

.editor-column {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    /* The last rows (Takes, Remove) can scroll clear of the Messages button. */
    padding-bottom: 72px;
}

@media (max-width: 1180px) {
    .editor-column {
        position: static;
        max-height: none;
        padding-bottom: 0;
    }
}

.editor-column-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.editor-column-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-column-head h2 {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 800;
}

.editor-size-match {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #9fcde3;
    border-radius: 14px;
    background: var(--ed-sky);
}

.editor-size-match p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.editor-size-match.is-done {
    border-color: transparent;
    background: var(--ed-good-bg);
    color: var(--ed-good-ink);
}

.editor-size-match > .editor-btn {
    justify-self: start;
}

.editor-size-match-pick {
    display: flex;
    gap: 8px;
}

.editor-size-match-pick input {
    width: 170px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ed-line-strong);
    border-radius: 10px;
    font: inherit;
    text-transform: uppercase;
}

/* The main, see-through over her in the stage (generate-board.js paintSizeGhost):
   anchored like .preview-sprite in generate-redesign.css, on her collider;
   above her art, below the handles, and click-through. */
.editor-size-ghost {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 2;
    transform-origin: center bottom;
    transform: translate(-50%, 50%)
        translate(var(--ghost-shift-x, 0px), var(--ghost-shift-y, 0px))
        scale(var(--ghost-scale, 1));
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0.45;
    pointer-events: none;
}

.editor-size-ghost[hidden] {
    display: none;
}

.editor-size-match-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.editor-size-match .editor-size-ghost-toggle {
    justify-self: start;
    min-height: 0;
    padding: 0;
    font-size: 13px;
}

.editor-scope-note {
    margin: 6px 0 0;
}

.editor-scope-note .editor-link-btn {
    min-height: 0;
    padding: 0;
    font-size: inherit;
}

.editor-column-head .editor-chip {
    margin-top: 22px;
}

.editor-column-tools,
.editor-column-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor-column-tools:empty,
.editor-column-actions:empty {
    display: none;
}

.editor-column[data-scope="animation"] .editor-column-chroma,
.editor-column[data-scope="empty"] .editor-column-chroma,
.editor-column[data-scope="empty"] .editor-preview {
    display: none;
}

.editor-column[data-scope="character"] #preview-animation-visuals {
    display: none;
}

/* The board picks the animation and the scope; hide the old pickers. */
.editor-column .preview-anim-tabs,
.editor-column .preview-toolbar > .preview-group-label,
.editor-column #preview-variant-select {
    display: none !important;
}

.editor-column .preview-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* In the column: toolbar, then her sprite pinned while you scroll the
   W/H/X/Y inputs under it, then the room (Room Size is a whole-character
   setting, so the room only shows with nothing picked). */
.editor-column .preview-stage-panel {
    display: contents;
}

.editor-column .preview-toolbar { order: 1; }
.editor-column .preview-stage-wrap { order: 2; }
.editor-column .editor-column-trim { order: 3; }
.editor-column #preview-scope-hint { order: 4; }
.editor-column .preview-controls { order: 5; }
.editor-column .room-scale-preview { order: 6; margin-top: 0; }

.editor-column-trim:empty,
.editor-column[data-scope="character"] .editor-column-trim {
    display: none;
}

.editor-column .preview-stage-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 280px;
    padding: 16px 16px 0;
    box-shadow: 0 6px 16px rgba(24, 32, 44, 0.12);
}

.editor-column .preview-stage {
    min-height: 260px;
}

.editor-column[data-scope="animation"] .room-scale-preview {
    display: none;
}

.editor-column .preview-controls {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px 18px;
}

.editor-column .preview-control-group {
    padding-top: 12px;
}

.editor-column-chroma {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--ed-line);
}

.editor-column-chroma h3,
.editor-section-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.editor-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 10px;
}

.editor-section-head span {
    font-size: 12px;
    color: var(--ed-muted);
}

.editor-variants {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.editor-variant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
}

.editor-variant.is-active {
    border: 2px solid var(--ed-blue);
    padding: 5px;
}

.editor-variant-pick {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.editor-variant-thumb,
.editor-take-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 9px;
    background: var(--ed-sky);
    overflow: hidden;
}

.editor-variant-text,
.editor-take-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    color: var(--ed-muted);
}

.editor-variant-text strong,
.editor-take-text strong {
    font-size: 14px;
    color: var(--ed-ink);
}

.editor-inline {
    display: flex;
    gap: 8px;
}

.editor-inline select {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-takes-details {
    border: 1px solid var(--ed-line);
    border-radius: 12px;
    padding: 10px 12px;
}

.editor-takes-details summary {
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.editor-takes-details[open] summary {
    margin-bottom: 10px;
}

/* ── Panel blocks (drawer + column) ────────────────────────────── */

.editor-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.editor-facts > div {
    padding: 12px;
    border-radius: 12px;
    background: var(--ed-soft);
}

.editor-facts dt {
    font-size: 12px;
    font-weight: 700;
    color: var(--ed-muted);
}

.editor-facts dd {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 700;
}

.editor-redo,
.editor-direction {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
}

.editor-redo p,
.editor-direction p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ed-muted);
}

.editor-direction-actions,
.editor-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.editor-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid #9fcde3;
    border-radius: 14px;
    background: var(--ed-sky);
}

.editor-confirm p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.editor-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

/* Drawn here: the native box came out as a dark filled square that read as ticked. */
.editor-check input {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border: 1.5px solid var(--ed-line-strong);
    border-radius: 5px;
    background: #ffffff center / 12px 12px no-repeat;
    cursor: pointer;
}

.editor-check input:checked {
    border-color: var(--ed-blue);
    background-color: var(--ed-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.editor-check input:focus-visible {
    outline: 2px solid var(--ed-blue);
    outline-offset: 2px;
}

.editor-check strong {
    display: block;
}

.editor-confirm.is-danger {
    border-color: var(--ed-danger-line);
    background: var(--ed-danger-bg);
    color: #6b2a2a;
}

.editor-confirm.is-danger strong {
    color: #8f2c2c;
}

.editor-takes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.editor-take {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--ed-line);
    border-radius: 12px;
}

.editor-take.is-current {
    border: 2px solid var(--ed-blue);
    padding: 7px;
}

.editor-take .editor-btn {
    margin-left: auto;
}

.editor-take-empty {
    margin: 0;
    padding: 14px;
    border: 1.5px dashed var(--ed-line-strong);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ed-muted);
}

.editor-usage {
    margin: 10px 22px 0;
    font-size: 13px;
    color: var(--ed-muted);
}

.editor-tune {
    display: grid;
    gap: 14px;
}

/* ── Simple panel (drawer) ─────────────────────────────────────── */

.editor-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.editor-drawer[hidden] {
    display: none;
}

.editor-drawer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(24, 32, 44, 0.32);
    cursor: pointer;
}

.editor-drawer-panel {
    --ed-ink: #18202c;
    --ed-muted: #5f6a7d;
    --ed-line: #dce6eb;
    --ed-line-strong: #cfdde4;
    --ed-soft: #f3f8fa;
    --ed-sky: #eaf7fc;
    --ed-blue: #1779a6;
    --ed-blue-dark: #0c638e;
    --ed-danger: #b03a3a;
    --ed-danger-bg: #fdf1f1;
    --ed-danger-line: #edbcbc;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: min(460px, 100%);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--ed-ink);
    box-shadow: -12px 0 40px rgba(24, 32, 44, 0.16);
    overflow-y: auto;
}

body.editor-drawer-open {
    overflow: hidden;
}

body.editor-drawer-open .oto-messages-launcher {
    display: none;
}

.editor-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 22px 0;
}

.editor-drawer-head > div {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-drawer-head h2 {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 800;
}

.editor-drawer-head .editor-chip {
    margin-top: 22px;
}

.editor-drawer-stage {
    position: relative;
    flex: 0 0 auto;
    height: 300px;
    margin: 16px 22px 0;
    border-radius: 16px;
    background: var(--ed-sky);
    overflow: hidden;
}

.editor-drawer-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 150px;
    height: 18px;
    margin-left: -75px;
    border-radius: 50%;
    background: rgba(23, 121, 166, 0.14);
}

.editor-drawer-tabs {
    display: flex;
    margin: 18px 22px 0;
}

.editor-drawer-tabs button {
    flex: 1 1 0;
}

.editor-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 22px 24px;
}

.editor-drawer-foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--ed-line);
    background: #ffffff;
}

/* The bank card's tools, reused in the drawer's Fine-tune tab. */
.editor-tune .anim-bank-visual-controls,
.editor-tune .anim-bank-frame-trim,
.editor-column-trim .anim-bank-frame-trim {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ed-line);
    border-radius: 14px;
    background: #ffffff;
    color: var(--ed-ink);
}

.editor-tune .anim-bank-visual-header,
.editor-column-trim .anim-bank-visual-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 800;
}

.editor-tune .anim-bank-visual-grid,
.editor-column-trim .anim-bank-visual-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.editor-tune .anim-bank-visual-field,
.editor-column-trim .anim-bank-visual-field {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ed-muted);
}

.editor-tune input[type="number"],
.editor-column-trim input[type="number"] {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--ed-line);
    border-radius: 10px;
    color: var(--ed-ink);
    background: #ffffff;
}

.editor-tune input[type="range"],
.editor-column-trim input[type="range"] {
    width: 100%;
    accent-color: var(--ed-blue);
}

.editor-tune .anim-bank-frame-trim p,
.editor-column-trim .anim-bank-frame-trim p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ed-muted);
}

.editor-tune button,
.editor-column-trim button {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ed-line-strong);
    border-radius: 10px;
    background: #ffffff;
    color: var(--ed-ink);
    font-weight: 700;
    cursor: pointer;
}

.editor-tune .anim-bank-frame-trim-actions,
.editor-column-trim .anim-bank-frame-trim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Speed and frame-step presets: pills, like the create page's review trim. */
.anim-bank-frame-trim-presets {
    display: grid;
    gap: 8px;
}

.anim-bank-frame-trim-preset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.anim-bank-frame-trim-preset > span {
    min-width: 56px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ed-muted);
}

.editor-tune .anim-bank-frame-trim-preset button,
.editor-column-trim .anim-bank-frame-trim-preset button {
    min-height: 32px;
    padding: 0 12px;
    border-color: var(--ed-line);
    border-radius: 999px;
    color: var(--ed-blue-dark);
    font-size: 13px;
}

.editor-tune .anim-bank-frame-trim-preset button[aria-pressed="true"],
.editor-column-trim .anim-bank-frame-trim-preset button[aria-pressed="true"] {
    border-color: var(--ed-blue);
    background: var(--ed-blue);
    color: #ffffff;
}

.editor-tune .anim-bank-frame-trim .anim-bank-frame-trim-note,
.editor-column-trim .anim-bank-frame-trim .anim-bank-frame-trim-note {
    font-size: 12px;
    font-weight: 700;
}

.editor-tune [data-find-loop],
.editor-column-trim [data-find-loop] {
    border-color: var(--ed-blue);
    background: var(--ed-sky);
    color: var(--ed-blue-dark);
}

.editor-tune .anim-bank-frame-trim .anim-bank-frame-trim-seam,
.editor-column-trim .anim-bank-frame-trim .anim-bank-frame-trim-seam {
    justify-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.anim-bank-frame-trim-seam[hidden] {
    display: none;
}

.anim-bank-frame-trim-seam[data-tone="good"] {
    background: var(--ed-good-bg);
    color: var(--ed-good);
}

.anim-bank-frame-trim-seam[data-tone="ok"] {
    background: var(--ed-sky);
    color: var(--ed-blue-dark);
}

.anim-bank-frame-trim-seam[data-tone="bad"] {
    background: var(--ed-warn-bg, #fff4e5);
    color: var(--ed-warn);
}

/* ── Video library ─────────────────────────────────────────────── */

.editor-library {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.editor-library-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.editor-library-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.editor-generate {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--ed-line);
    border-radius: 16px;
    background: var(--ed-softer);
}

.editor-model {
    display: grid;
    gap: 8px;
}

.editor-model select {
    max-width: 360px;
    min-height: 44px;
}

.editor-library .video-bank-grid {
    flex-wrap: wrap;
    overflow: visible;
}

/* Six cards until the creator asks for the rest. */
.editor-library .video-bank-grid.is-capped > .video-bank-card:nth-child(n+7) {
    display: none;
}

.editor-library-more {
    align-self: center;
}

.editor-library-more[hidden] {
    display: none;
}

.editor-strips {
    display: grid;
    gap: 8px;
}

.editor-strips h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.editor-strips > p {
    margin: 0;
    font-size: 13px;
    color: var(--ed-muted);
}

/* ── Save bar ──────────────────────────────────────────────────── */

.editor-savebar {
    position: sticky;
    bottom: 16px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px 12px 18px;
    border-radius: 16px;
    background: var(--ed-ink);
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(24, 32, 44, 0.25);
}

/* Nothing to do: it sits at the end of the page instead of over the board. */
.editor-savebar.is-quiet {
    position: static;
    background: #ffffff;
    color: var(--ed-ink);
    border: 1px solid var(--ed-line);
    box-shadow: none;
}

/* Keep the Messages button clear of the sticky save bar. */
body[data-editor-kind] .oto-messages-launcher {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.editor-savebar-status {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.editor-savebar-status strong {
    font-size: 15px;
    font-weight: 800;
}

.editor-savebar-status > span {
    font-size: 13px;
    color: #c9d3dd;
}

.editor-savebar.is-quiet .editor-savebar-status > span {
    color: var(--ed-muted);
}

.editor-savebar-error {
    color: #ffb4b4 !important;
    font-weight: 700;
}

.editor-savebar.is-quiet .editor-savebar-error {
    color: var(--ed-danger) !important;
}

.editor-savebar-error[hidden] {
    display: none;
}

.editor-savebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.editor-savebar-actions [hidden] {
    display: none !important;
}

.editor-btn-on-dark {
    border-color: #3a4556;
    background: transparent;
    color: #ffffff;
}

.editor-btn-on-dark:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: #55627a;
}

.editor-btn-accent {
    border-color: transparent;
    background: #2a9fd6;
    color: #0b1720;
    font-weight: 800;
}

.editor-btn-accent:hover:not(:disabled) {
    background: #4fb3e0;
    border-color: transparent;
}

.editor-savebar .btn-create-oto.editor-btn-light {
    width: auto;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ed-ink);
    font-size: 14px;
    font-weight: 800;
}

.editor-savebar.is-quiet .btn-create-oto.editor-btn-light {
    background: var(--ed-ink);
    color: #ffffff;
}

.editor-savebar .btn-create-oto:disabled {
    opacity: 0.5;
}

.editor-savebar .character-code-result {
    flex: 1 1 100%;
}

body[data-editor-kind="edit"] .editor-savebar .character-code-result {
    display: none !important;
}

/* ── Phone ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* The shared phone rule narrows .main-content for pages without the app
       shell's own gutter; this page has it, so take the full width. */
    .generate-app-main > #main-content {
        width: 100%;
    }

    .editor-banner {
        flex-wrap: wrap;
    }

    .editor-head {
        align-items: flex-start;
    }

    .editor-head-actions {
        width: 100%;
    }

    .editor-mode-help {
        flex: 1 1 100%;
    }

    .editor-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .editor-tile-stage {
        height: 112px;
    }

    .editor-queue-note {
        margin-left: 0;
    }

    .editor-savebar {
        bottom: 8px;
    }

    .editor-drawer-stage {
        height: 240px;
        margin: 12px 16px 0;
    }

    .editor-drawer-head,
    .editor-drawer-body,
    .editor-drawer-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .editor-drawer-tabs {
        margin: 14px 16px 0;
    }
}