/*
    Effect Weaver shader editor (editor.html / editor.js). Uses the Effect Weaver UI library (../ew/ew-ui.css, ew-code.js).
    Desktop first: denser controls than the touch pages (--ew-touch).
*/

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body.ed {
    --ew-touch: 34px;
    --ew-size: 14px;
    display: flex;
    flex-direction: column;
}

/* ---------- Top bar ---------- */

.ed-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 42px;
    padding: 0 6px 0 10px;
    border-bottom: 1px solid var(--ew-line);
    background: var(--ew-bg-1);
    white-space: nowrap;
}

.ed-mark {
    width: 26px;
    height: 26px;
    flex: none;
}

.ed-name {
    font-family: var(--ew-head);
    font-weight: var(--ew-head-weight);
    font-size: 1.1em;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30vw;
}

.ed-name .dirty {
    color: var(--ew-accent1);
    margin-left: 4px;
}

.ed-where {
    color: var(--ew-faint);
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20vw;
}

.ed-stats {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ew-muted);
    font-family: var(--ew-mono);
    font-size: 12px;
    text-align: center;
}

.ed-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ew-bg-3);
    color: var(--ew-muted);
    font-size: 0.85em;
    cursor: default;
}

.ed-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ew-faint);
}

.ed-status.ok::before {
    background: #3ecf8e;
}

.ed-status.error {
    background: var(--ew-danger-soft);
    color: var(--ew-fg);
    cursor: pointer;
}

.ed-status.error::before {
    background: var(--ew-danger);
}

.ed-status.busy::before {
    background: var(--ew-accent2);
    animation: ed-pulse 0.8s infinite alternate;
}

@keyframes ed-pulse {
    to {
        opacity: 0.2;
    }
}

/* ---------- Layout ---------- */

.ed-main {
    flex: 1;
    min-height: 0;
    display: flex;
}

.ed-main > .ew-split {
    flex: 1;
}

.ew-split-pane > .ew-split, .ew-split-pane > .ew-tabs, .ew-split-pane > .ed-view, .ew-split-pane > .ed-code {
    flex: 1;
}

/* The rendered effect */
.ed-view {
    position: relative;
    min-height: 0;
    background: #000;
    overflow: hidden;
}

.ed-view canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ed-view.drag-mouse canvas {
    cursor: crosshair;
}

.ed-view-msg {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    max-height: 40%;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, black 72%, transparent);
    color: #ff8080;
    font-family: var(--ew-mono);
    font-size: 12px;
    white-space: pre-wrap;
    cursor: pointer;
}

.ed-view-msg[hidden] {
    display: none;
}

.ed-view-detached {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ew-muted);
}

/* A hint in the top right corner (tap: full screen), only visible while hovering it */
.ed-corner {
    position: absolute;
    right: 0;
    top: 0;
    width: 20%;
    height: 20%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px;
    color: #fff;
    opacity: 0;
    transition: opacity var(--ew-speed);
    pointer-events: none;
}

.ed-view:hover .ed-corner {
    opacity: 0.35;
}

.ed-view:fullscreen .ed-corner {
    display: none;
}

/* ---------- Tool panes ---------- */

.ed-pane {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 10px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--ew-line) transparent;
}

.ed-pane.flush {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ed-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ed-row + .ed-row, .ed-row + .ew-props, .ew-props + .ed-row, .ed-section + .ed-section {
    margin-top: 10px;
}

.ed-section-title {
    margin: 4px 0 6px;
    color: var(--ew-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ed-empty {
    padding: 24px 12px;
    color: var(--ew-faint);
    text-align: center;
}

.ed-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 4px 6px;
    border-bottom: 1px solid var(--ew-line);
    background: var(--ew-bg-1);
    flex-wrap: wrap;
}

.ed-toolbar .grow {
    flex: 1;
}

.ed-time {
    font-family: var(--ew-mono);
    font-size: 13px;
    min-width: 7em;
}

.ed-uniforms {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    font-family: var(--ew-mono);
    font-size: 12px;
    color: var(--ew-muted);
}

.ed-uniforms b {
    color: var(--ew-code-v, #ffb454);
    font-weight: 400;
}

/* Log */
.ed-log {
    flex: 1;
    overflow: auto;
    font-family: var(--ew-mono);
    font-size: 12px;
    scrollbar-width: thin;
}

.ed-log-item {
    display: flex;
    gap: 8px;
    padding: 3px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--ew-line) 50%, transparent);
    white-space: pre-wrap;
    word-break: break-word;
}

.ed-log-item .time {
    flex: none;
    color: var(--ew-faint);
}

.ed-log-item.error {
    color: #ff8080;
}

.ed-log-item.warning {
    color: #e0a030;
}

.ed-log-item.ok {
    color: #3ecf8e;
}

.ed-log-item.link {
    cursor: pointer;
}

.ed-log-item.link:hover {
    background: var(--ew-bg-2);
}

/* Description (markdown) */
.ed-md {
    flex: 1;
    min-height: 0;
    display: flex;
}

.ed-md > * {
    flex: 1;
    min-width: 0;
}

.ed-md .ew-code {
    border-right: 1px solid var(--ew-line);
}

.ed-md-host {
    display: flex;
    flex: 1;
    min-width: 0;
}

.ed-md-host > .ew-code {
    flex: 1;
}

.ed-md[data-mode="edit"] .ed-md-preview, .ed-md[data-mode="preview"] .ed-md-host {
    display: none;
}

.ed-markdown {
    overflow: auto;
    padding: 4px 16px 24px;
    line-height: 1.5;
    scrollbar-width: thin;
}

.ed-markdown h1, .ed-markdown h2, .ed-markdown h3 {
    font-family: var(--ew-head);
    font-weight: var(--ew-head-weight);
    margin: 1em 0 0.4em;
}

.ed-markdown h1 {
    font-size: 1.4em;
}

.ed-markdown h2 {
    font-size: 1.15em;
    color: var(--ew-accent2);
}

.ed-markdown h3 {
    font-size: 1em;
}

.ed-markdown table {
    border-collapse: collapse;
    font-size: 0.9em;
    margin: 6px 0;
}

.ed-markdown th, .ed-markdown td {
    border: 1px solid var(--ew-line);
    padding: 3px 6px;
    vertical-align: top;
}

.ed-markdown code {
    font-family: var(--ew-mono);
    font-size: 0.92em;
    background: var(--ew-bg-inset);
    padding: 1px 4px;
    border-radius: 4px;
}

.ed-markdown pre {
    background: var(--ew-bg-inset);
    padding: 8px 10px;
    border-radius: 6px;
    overflow: auto;
}

.ed-markdown pre code {
    background: none;
    padding: 0;
}

.ed-markdown a {
    color: var(--ew-accent2);
}

/* Snippets */
.ed-snip {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ed-snip-list {
    overflow: auto;
    scrollbar-width: thin;
}

.ed-snip-item {
    padding: 5px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--ew-line) 50%, transparent);
    cursor: pointer;
}

.ed-snip-item:hover {
    background: var(--ew-bg-2);
}

.ed-snip-item.active {
    background: var(--ew-accent2-soft);
}

.ed-snip-item .name {
    font-family: var(--ew-mono);
    font-size: 13px;
    color: var(--ew-code-s, #ffd866);
}

.ed-snip-item .folder {
    margin-left: 6px;
    color: var(--ew-faint);
    font-size: 0.8em;
}

.ed-snip-item .places {
    float: right;
    color: var(--ew-faint);
    font-size: 0.8em;
}

.ed-snip-item .sum {
    color: var(--ew-muted);
    font-size: 0.88em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ed-snip-item .excerpt {
    color: var(--ew-faint);
    font-size: 0.82em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ed-snip-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ed-snip-detail .ew-tabs {
    flex: 1;
}

.ed-snip-search {
    flex: 1;
    min-width: 120px;
}

/* ---------- Code column ---------- */

.ed-code {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.ed-code > .ew-tabs {
    flex: 1;
}

.ed-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 4px 6px;
    border-top: 1px solid var(--ew-line);
    background: var(--ew-bg-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.ed-bar .sep {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--ew-line);
    flex: none;
}

.ed-bar .grow {
    flex: 1;
}

.ed-cursor {
    color: var(--ew-muted);
    font-family: var(--ew-mono);
    font-size: 12px;
    padding: 0 8px;
    white-space: nowrap;
}

.ed-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--ew-muted);
}

.ed-start img {
    width: 120px;
    opacity: 0.8;
}

/* ---------- Open dialog ---------- */

.ed-open {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.ed-open-grid {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 8px;
    scrollbar-width: thin;
}

.ed-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ew-line);
    border-radius: 6px;
    background: var(--ew-bg-2);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    padding: 0;
}

.ed-card:hover, .ed-card:focus-visible {
    border-color: var(--ew-accent2);
    outline: none;
}

.ed-card .thumb {
    aspect-ratio: 16 / 9;
    background: #000 center / cover no-repeat;
}

.ed-card .thumb.none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ew-faint);
}

.ed-card .info {
    padding: 4px 8px 6px;
    min-width: 0;
}

.ed-card .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ed-card .folder {
    color: var(--ew-faint);
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ed-card.open .name::after {
    content: " ●";
    color: var(--ew-accent2);
}

/* Label / field rows; fills the dialog (a fixed min width overflowed the 480 px dialog: labels cut off, a horizontal scroll bar) */
.ed-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.ed-form > span {
    white-space: nowrap;
}

.ed-form .ew-input, .ed-form .ew-select {
    width: 100%;
    min-width: 0;
}

.ed-form .hint {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ew-faint);
    font-size: 0.85em;
    font-family: var(--ew-mono);
}

.ed-form datalist {
    display: none;
}

.ed-keys {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    font-size: 0.92em;
}

.ed-keys kbd {
    font-family: var(--ew-mono);
    font-size: 0.9em;
    padding: 1px 6px;
    border: 1px solid var(--ew-line);
    border-radius: 4px;
    background: var(--ew-bg-2);
    white-space: nowrap;
}

/* Dropping files on the page */
body.drop-target::after {
    content: "Drop .glsl / .md files to open them";
    position: fixed;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--ew-accent2);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ew-bg) 80%, transparent);
    font-size: 1.4em;
    z-index: 100;
    pointer-events: none;
}

.ed-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--ew-line) transparent;
}

/* ---------- Hover information (code editor) ---------- */

.ed-hover {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 220px;
}

.ed-hover-kind {
    color: var(--ew-faint);
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ed-hover-sig {
    margin: 0;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--ew-code-bg);
    font-family: var(--ew-mono);
    font-size: var(--ew-mono-size);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow: visible;
    display: block;
}

.ed-hover-title {
    font-weight: 500;
}

.ed-hover-desc {
    color: var(--ew-fg);
    white-space: pre-wrap;
}

.ed-hover-note {
    color: var(--ew-muted);
    font-size: 0.88em;
}

.ed-hover-buttons {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

/* ---------- Plot panel (plot.js) ---------- */

.ed-plot {
    position: fixed;
    z-index: 900;
    top: 70px;
    right: 24px;
    width: min(860px, calc(100vw - 48px));
    height: min(520px, calc(100vh - 100px));
    min-width: 420px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ew-line-strong);
    border-radius: 10px;
    background: var(--ew-bg-1);
    box-shadow: var(--ew-shadow);
    resize: both;
    overflow: hidden;
}

.ed-plot[hidden] {
    display: none;
}

.ed-plot-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 4px 6px 4px 12px;
    border-bottom: 1px solid var(--ew-line);
    cursor: move;
    user-select: none;
}

.ed-plot-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ew-mono);
    font-size: var(--ew-mono-size);
}

.ed-plot-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.ed-plot-view {
    position: relative;
    flex: 1;
    min-width: 0;
    background: var(--ew-bg-inset);
}

.ed-plot-gl, .ed-plot-over {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ed-plot-over {
    cursor: crosshair;
    touch-action: none;
}

.ed-plot-readout {
    position: absolute;
    right: 8px;
    bottom: 22px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ew-bg) 80%, transparent);
    font-family: var(--ew-mono);
    font-size: 12px;
    pointer-events: none;
}

.ed-plot-readout:empty {
    display: none;
}

.ed-plot-msg {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, black 75%, transparent);
    color: #ff8080;
    font-family: var(--ew-mono);
    font-size: 12px;
    white-space: pre-wrap;
}

.ed-plot-msg[hidden] {
    display: none;
}

.ed-plot-props {
    flex: none;
    width: 330px;
    padding: 8px 10px;
    border-left: 1px solid var(--ew-line);
    overflow: auto;
    --ew-touch: 30px;
}

.ed-plot-props .ew-props {
    grid-template-columns: 90px 1fr;
}

/* ---------- AI panel (ai.js) ---------- */

.ed-ai-setup {
    flex: 1;
    overflow: auto;
    padding: 10px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
}

.ed-ai-intro {
    margin: 0;
    color: var(--ew-muted);
    line-height: 1.45;
}

.ed-ai-field {
    display: grid;
    grid-template-columns: 6em 1fr;
    align-items: center;
    gap: 8px;
}

.ed-ai-field > span {
    color: var(--ew-muted);
}

.ed-ai-key {
    font-family: var(--ew-mono);
    min-width: 0;
}

.ed-ai-note {
    font-size: 0.85em;
    line-height: 1.4;
}

.ed-ai-error, .ed-ai-msg.error {
    color: var(--ew-danger);
}

.ed-ai-error:empty {
    display: none;
}

.ed-ai-chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ed-ai-chat[hidden], .ed-ai-setup[hidden] {
    display: none;
}

.ed-ai-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--ew-line) transparent;
}

.ed-ai-hello {
    margin: auto 0;
    padding: 16px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.45;
}

.ed-ai-msg {
    border-radius: var(--ew-radius);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ed-ai-msg.user {
    align-self: flex-end;
    max-width: 88%;
    padding: 6px 10px;
    background: var(--ew-accent2-soft);
    white-space: pre-wrap;
}

.ed-ai-msg.ai {
    padding: 2px 4px;
    overflow: visible;
}

.ed-ai-msg.ai > :first-child {
    margin-top: 0;
}

.ed-ai-msg.ai > :last-child {
    margin-bottom: 0;
}

.ed-ai-msg.ai p, .ed-ai-msg.ai ul, .ed-ai-msg.ai ol {
    margin: 0.4em 0;
}

.ed-ai-msg.error {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 0.9em;
}

.ed-ai-chip {
    display: inline-block;
    margin-right: 6px;
    padding: 0 7px;
    border-radius: 99px;
    background: var(--ew-accent1);
    color: var(--ew-on-accent);
    font-size: 0.85em;
    font-weight: 600;
}

.ed-ai-tool, .ed-ai-shader, .ed-ai-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.85em;
    color: var(--ew-muted);
}

.ed-ai-tool svg, .ed-ai-shader svg, .ed-ai-msg.error svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.ed-ai-shader {
    color: var(--ew-accent2);
    padding: 5px 8px;
    border: 1px solid var(--ew-accent2-soft);
    border-radius: var(--ew-radius);
}

.ed-ai-shot {
    flex-basis: 100%;
    max-width: 240px;
    border-radius: 4px;
    border: 1px solid var(--ew-line);
    cursor: zoom-in;
}

.ed-ai-big {
    display: block;
    max-width: 100%;
    max-height: 75vh;
}

.ed-ai-spin {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ew-line);
    border-top-color: var(--ew-accent1);
    animation: ed-ai-spin 0.8s linear infinite;
}

@keyframes ed-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

.ed-ai-chat > .ew-split {
    flex: 1;
}

/* Below the split bar: presets + the prompt (fills the pane, the bar sets its height) */
.ed-ai-bottom {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ed-ai-presets {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px 0;
}

.ed-ai-input {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px 8px;
}

/* Attach (top) and send (bottom) next to the prompt */
.ed-ai-side {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

/* The attached reference images (above the prompt) */
.ed-ai-thumbs {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px 0;
}

.ed-ai-thumbs[hidden] {
    display: none;
}

.ed-ai-thumb {
    position: relative;
    width: 64px;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--ew-line);
}

.ed-ai-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ed-ai-thumb > .ew-button {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 0;
    min-height: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.ed-ai-preset.image {
    border-color: var(--ew-accent2);
}

/* Reference images in the user's message */
.ed-ai-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ed-ai-ref {
    height: 64px;
    max-width: 120px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
}

.ed-ai-usage {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.72em;
    line-height: 1.25;
    color: var(--ew-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: default;
}

.ed-ai-usage[hidden] {
    display: none;
}

.ed-ai-usage-k {
    display: inline-block;
    min-width: 2.6em;
    font-weight: 600;
}

.ed-ai-usage-c {
    color: var(--ew-accent2);
}

.ed-ai-text {
    flex: 1;
    min-width: 0;
    resize: none;
    min-height: 40px;
    padding: 8px 10px;
    font: inherit;
    color: var(--ew-fg);
    background: var(--ew-bg-inset);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    outline: none;
    scrollbar-width: thin;
}

.ed-ai-text:focus {
    border-color: var(--ew-accent2);
}

/* ---------- Export progress pop-up (App.ExportProgress) ---------- */

.ed-export {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: min(420px, 80vw);
}

.ed-export-anim {
    width: 56px;
    height: 56px;
    flex: none;
}

.ed-export-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.45;
}

/* ---------- Video export (video.js) ---------- */

.ed-vid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: min(560px, 85vw);
}

.ed-vid-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ed-vid-field > span:first-child {
    width: 7.5em;
    flex: none;
    color: var(--ew-muted);
}

.ed-vid-wh {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ed-vid-slider {
    flex: 1;
    min-width: 160px;
}

.ed-vid-q {
    min-width: 2em;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ed-vid-off {
    opacity: 0.4;
}

.ed-vid-hint {
    margin-top: -6px;
    font-size: 0.85em;
}

.ed-vid-summary {
    margin-top: 6px;
    font-size: 0.85em;
}

.ed-vid-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: min(420px, 80vw);
}

.ed-vid-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--ew-bg-inset);
    overflow: hidden;
}

.ed-vid-bar > div {
    width: 0;
    height: 100%;
    background: var(--ew-accent1);
    transition: width 0.3s;
}

/* "Recreate image" instructions (ai.js AskInstructions) */
.ed-ai-askbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: min(520px, 85vw);
}

.ed-ai-ask {
    min-height: 90px;
}

.ed-ai-ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ---------- Account (login) ---------- */

/* Save buttons without a login: they look disabled, a click asks to log in */
.ed-locked {
    opacity: 0.45;
}

.ed-login {
    min-width: min(360px, 85vw);
}

.ed-login-reason {
    grid-column: 1 / -1;
    color: var(--ew-muted);
    line-height: 1.45;
}

.ed-login > .ed-ai-error, .ed-login > .ed-row {
    grid-column: 1 / -1;
}

/* Delete button on the user's own effects (open dialog) */
.ed-card {
    position: relative;
}

.ed-card-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.ed-card-del svg {
    width: 16px;
    height: 16px;
}

.ed-card:hover > .ed-card-del, .ed-card:focus-within > .ed-card-del {
    display: flex;
}

.ed-card-del:hover {
    background: var(--ew-danger);
}