/* Copyright (c) 2026 DeepBeepMeep - part of WanGP, WanGP Community License 2.0 (see LICENSE.txt) */
/* Gradio sets overflow:auto inline on HTML blocks. */
.gradio-container .wangp-progress-with-action { position: relative; border: 0; background: transparent; }
.gradio-container .wangp-progress-with-action:not(:has(.block.wangp-progress-container:not(.hidden) .prose:not(.hide) .wangp-progress)) { display: none; }
.gradio-container .wangp-progress-container .html-container { opacity: 1; transition: none; }
.wangp-progress-with-action .wangp-progress.status-only { padding-right: calc(96px * var(--progress-scale)); }
.wangp-progress-with-action .progress-track { max-width: calc(100% - 160px); }
.gradio-container .wangp-progress-with-action .wangp-progress-stop {
    position: absolute !important; right: 12px; top: 50%; transform: translateY(-50%);
    width: auto; min-width: 62px; min-height: 34px; margin: 0; padding: 0 12px;
    border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px;
    background: rgb(179 58 58 / 90%); color: white; font-size: var(--text-sm); font-weight: 800;
    box-shadow: 0 10px 18px rgb(6 18 28 / 16%); cursor: pointer;
}
.gradio-container .wangp-progress-with-action .wangp-progress-stop:hover { background: rgb(197 72 72 / 96%); }
.gradio-container .block.wangp-progress-container { overflow: hidden !important; border-radius: 12px; }
.wangp-progress {
    --progress-scale: var(--wangp-ui-scale, 1);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) calc(24px * var(--progress-scale)) minmax(0, 1fr);
    gap: calc(4px * var(--progress-scale));
    align-items: center;
    box-sizing: border-box;
    height: calc(88px * var(--progress-scale));
    padding: calc(8px * var(--progress-scale)) calc(12px * var(--progress-scale));
    overflow: hidden;
    border: var(--block-border-width) solid var(--block-border-color);
    border-radius: var(--block-radius);
    box-shadow: var(--block-shadow);
    background: var(--block-background-fill);
    color: var(--body-text-color);
    font-family: var(--font, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--text-md);
    line-height: 1.3;
}
/* The actual Gradio Block owns the frame; the web renderer uses the same tokens. */
.gradio-container .block.wangp-progress-container .wangp-progress { border: 0; border-radius: inherit; box-shadow: none; background: transparent; }
.wangp-progress span { font-size: inherit; line-height: inherit; }
.wangp-progress .progress-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.wangp-progress .progress-caption { grid-column: 2; display: flex; justify-content: center; min-width: 0; }
.wangp-progress .progress-timing { grid-column: 3; overflow: hidden; text-overflow: ellipsis; text-align: right; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.wangp-progress .progress-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wangp-progress .progress-model { grid-column: 1; width: max-content; min-width: 0; height: 1.3em; overflow: hidden; white-space: normal; font-size: .9em; font-weight: 700; }
/* Hide whole words beyond the first line; only an oversized word needs ellipsis. */
.wangp-progress .progress-model > span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
/* Equal side tracks center short captions; label widths constrain longer ones. */
.wangp-progress.has-model .progress-heading { container-type: inline-size; grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content) minmax(min-content, 1fr); column-gap: 8px; }
.wangp-progress.has-model .progress-model { max-width: 25cqw; }
.wangp-progress .progress-percent { flex-shrink: 0; white-space: pre; }
.wangp-progress .progress-details {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
}
.wangp-progress .progress-track {
    position: relative;
    justify-self: center;
    box-sizing: border-box;
    width: 72%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color-primary);
    border-radius: 7px;
    background: color-mix(in srgb, var(--color-accent) 7%, var(--block-background-fill));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 7%);
}
.wangp-progress .progress-fill {
    position: absolute;
    inset: 0;
    width: var(--progress);
    border-radius: inherit;
    background: linear-gradient(180deg, rgb(255 255 255 / 17%), transparent 55%, rgb(0 0 0 / 6%)), linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 90%, white), var(--color-accent));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
}
.wangp-progress .progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: var(--text-sm);
    line-height: 1;
}
.wangp-progress .progress-label > span { display: block; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wangp-progress .progress-covered { color: var(--block-background-fill); clip-path: inset(0 calc(100% - var(--progress)) 0 0); }
.wangp-progress.status-only .progress-heading { grid-area: 1 / 1 / -1 / -1; justify-content: flex-start; }
.wangp-progress.status-only .progress-caption { grid-column: 1 / -1; justify-content: flex-start; }
.wangp-progress.status-only .progress-timing { display: none; }
.wangp-progress.status-only .progress-track, .wangp-progress.status-only .progress-details { display: none; }
.wangp-progress.has-model.status-only .progress-heading { grid-area: 1 / 1 / 2 / -1; }
.wangp-progress.has-model.status-only .progress-caption { grid-column: 2; justify-content: center; }
.wangp-progress .indeterminate .progress-fill {
    width: 35%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 65%, transparent), transparent);
    box-shadow: none;
    animation: wangp-progress-pulse 6s linear infinite;
}
.wangp-progress.compact { --progress-scale: 1; height: 72px; grid-template-rows: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 3px; padding: 6px 8px; }
.wangp-progress.compact .progress-track { width: 100%; }
@media (max-width: 550px) {
    .wangp-progress .progress-track { width: 100%; }
    .wangp-progress .progress-heading:has(.progress-timing:not(:empty)) { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .wangp-progress .progress-heading:has(.progress-timing:not(:empty)) .progress-caption { grid-column: 1; }
    .wangp-progress .progress-heading:has(.progress-timing:not(:empty)) .progress-timing { grid-column: 2; }
    .wangp-progress.has-model { height: calc(108px * var(--progress-scale)); grid-template-rows: minmax(0, 2fr) calc(24px * var(--progress-scale)) minmax(0, 1fr); }
    .wangp-progress.has-model .progress-heading { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .wangp-progress.has-model .progress-model { grid-area: 1 / 1 / 2 / -1; max-width: 100%; }
    .wangp-progress.has-model .progress-caption, .wangp-progress.has-model.status-only .progress-caption { grid-row: 2; grid-column: 1 / -1; }
    .wangp-progress.has-model .progress-heading:has(.progress-timing:not(:empty)) .progress-caption { grid-column: 1; }
    .wangp-progress.has-model .progress-timing { grid-row: 2; grid-column: 2; }
}
@keyframes wangp-progress-pulse { from { transform: translateX(-100%); } to { transform: translateX(286%); } }
.wangp-progress.token-progress .progress-heading:has(.progress-timing) { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.wangp-progress.token-progress .progress-caption { grid-column: 1; }
.wangp-progress.token-progress .progress-timing { grid-column: 2; }
.wangp-progress.has-model.finished .progress-heading { grid-area: 1 / 1 / 3 / -1; align-self: stretch; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) calc(24px * var(--progress-scale)); row-gap: calc(4px * var(--progress-scale)); }
.wangp-progress.has-model.finished .progress-model { grid-area: 1 / 1; max-width: 100%; }
.wangp-progress.has-model.finished .progress-caption { grid-area: 2 / 1; justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .wangp-progress .indeterminate .progress-fill { animation: none; transform: translateX(90%); } }