/* ============================================================================
snaprender-panel-wip.css — WIP-only panel restyle (2026-09-15, "v2").
Higgsfield-style rhythm on the Scheme D field: every control is a soft card
(#f5f6f8, 14px radius) stacked full width with 10px gaps; segmented switches
instead of paired outlined buttons; the render-engine chooser as its own row;
a raised "physical key" generate button (kept blue); result panel tabs
left-aligned with a showcase caption + example carousel at the bottom.
Every rule is scoped to body[data-nav-wip] (the three WIP templates only) and
loaded AFTER snaprender-tool-wip.css, so it wins on source order at equal
specificity; a few !important mirror the originals.
========================================================================== */
/* ── Panels: radius ×1.5, padding ≈ 2/3 ── */
body[data-nav-wip] .wam-op {
border-radius: 21px;
padding: 24px !important;
}
body[data-nav-wip] .wam-result {
border-radius: 21px;
}
body[data-nav-wip] .wamo-1 {
gap: 10px;
padding-bottom: 12px;
/* do not grow: the generate button (.wamo-2) sits right after the last
control instead of being pushed to the panel bottom; when the controls
overflow, this box shrinks and scrolls and the button stays visible */
flex: 0 1 auto !important;
}
body[data-nav-wip] .wamo-2 {
flex: 0 0 auto;
}
/* numbered section titles: the cards carry their own labels now */
body[data-nav-wip] .wamo-1 > .new-panel-title {
display: none !important;
}
/* ── Card primitive ── */
body[data-nav-wip] .new-upload-container,
body[data-nav-wip] .new-style-buttons,
body[data-nav-wip] .wamo-1 > .new-param-row:not(.prompt-row),
body[data-nav-wip] .new-param-row.prompt-row,
body[data-nav-wip] .new-prompt-input,
body[data-nav-wip] #promptInline {
box-sizing: border-box;
width: 100%;
margin: 0 !important;
background: #f5f6f8;
border: 0;
border-radius: 14px;
}
/* ── Upload card ── */
/* specificity must beat `body[data-sidebar-active] #uploadContainer.new-upload-container` (40/27 !important) */
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container {
background: #f5f6f8; /* same fill as every other card; the dashed edge alone says "drop zone" */
border: 1.5px dashed #d1d5db;
padding: 22px 14px 16px;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0;
flex: 0 0 auto;
}
body[data-nav-wip] .new-upload-default {
height: auto;
gap: 0;
}
/* Higgsfield "Add references" simplicity: icon + title + one hint line. The
two buttons and the example thumbnails are hidden (not removed — the page
JS and the showcase carousel still drive them); the whole card is the
upload target (snaprender-panel-wip.js forwards clicks to #uploadBtn). */
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container {
padding: 26px 14px 24px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
/* taller drop zone: ~200px on a 768px-high laptop, up to 300px on tall screens */
min-height: clamp(200px, calc(100vh - 570px), 300px);
display: flex;
flex-direction: column;
justify-content: center;
}
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container:hover {
border-color: #9ca3af;
background: #eef0f3;
}
body[data-nav-wip] #uploadDefault .upload-buttons,
body[data-nav-wip] #uploadDefault .new-examples {
display: none !important;
}
body[data-nav-wip] .dt-up-title {
margin-bottom: 4px;
}
body[data-nav-wip] #uploadDefault .new-upload-tip {
margin: 0;
}
body[data-nav-wip] .dt-up-ico {
width: 44px;
height: 44px;
border-radius: 50%;
background: #e5e7eb;
color: #374151;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
body[data-nav-wip] .dt-up-ico svg {
width: 20px;
height: 20px;
}
body[data-nav-wip] .dt-up-title {
font-size: 14px;
font-weight: 600;
color: #111827;
text-align: center;
margin-bottom: 10px;
}
body[data-nav-wip] .upload-buttons {
gap: 8px;
margin-bottom: 0;
transform: none !important;
}
body[data-nav-wip] .new-upload-btn {
margin-bottom: 0;
height: 32px;
padding: 0 12px;
border-radius: 9px;
border: 1px solid #e5e7eb;
font-size: 12.5px;
gap: 5px;
}
body[data-nav-wip] .new-upload-tip {
font-size: 12px;
line-height: 1.5;
color: #9ca3af;
margin: 10px 0 12px;
}
body[data-nav-wip] .new-examples {
gap: 6px;
}
body[data-nav-wip] .example-img {
width: 54px;
height: 38px;
border-radius: 6px;
opacity: .85;
}
body[data-nav-wip] .new-upload-preview {
inset: 8px;
border-radius: 10px;
}
/* ── Segmented: 室内/建筑 — lives at the very top of the panel (mode switch,
like Higgsfield's Create/Edit tabs); the row wrapper loses its card skin ── */
body[data-nav-wip] .wamo-1 > .new-param-row:has(> .new-style-buttons) {
order: -1;
padding: 0 !important; /* these beat the constraint-row card rule below (equal specificity) */
min-height: 44px !important;
height: 44px !important;
flex: 0 0 44px; /* .wamo-1 is a column flexbox: never let the tab row shrink */
background: transparent;
border-radius: 0;
}
/* Higgsfield-style text tabs with an underline: a 44px row that shares its
top line and height with the result panel's tab row (see .wr-title). */
body[data-nav-wip] .new-style-buttons {
background: transparent;
border-radius: 0;
padding: 0;
gap: 28px;
height: 44px;
align-items: stretch;
justify-content: flex-start;
}
body[data-nav-wip] .new-style-btn {
flex: 1 1 0; /* each tab takes half the panel width */
width: auto !important;
height: 44px;
padding: 0 2px;
border: 0;
border-radius: 0 !important;
background: transparent;
color: #6b7280;
font-size: 18px;
font-weight: 600;
letter-spacing: .01em;
justify-content: center;
overflow: visible;
position: relative;
transition: color .15s ease;
}
body[data-nav-wip] .new-style-btn img {
display: none;
}
body[data-nav-wip] .new-style-btn:hover {
background: transparent;
color: #111827;
}
body[data-nav-wip] .new-style-btn.active {
background: transparent;
color: #111827;
font-weight: 700;
box-shadow: none;
}
body[data-nav-wip] .new-style-btn.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2.5px;
border-radius: 2px;
background: #111827;
}
body[data-nav-wip] .new-style-btn .api-badge,
body[data-nav-wip] .new-style-btn .new-badge {
top: 2px;
left: auto;
right: -16px;
height: 13px;
line-height: 13px;
padding: 0 4px;
font-size: 8px;
border-radius: 7px;
}
body[data-nav-wip] .new-style-buttons {
gap: 8px;
}
body[data-nav-wip] .new-style-btn .api-badge,
body[data-nav-wip] .new-style-btn .new-badge {
right: 8px; /* centred tabs: badge sits in the tab's top-right corner */
}
/* ── Render-engine picker (Higgsfield model list). The menu is appended to
by the page JS, so it is scoped by body[data-nav-wip] alone. The rows
are decorated (tile / name / sub / tag / check) by snaprender-panel-wip.js. ── */
body[data-nav-wip] .space-type-menu {
width: 320px !important;
min-width: 320px !important;
max-height: calc(100vh - 32px);
overflow-y: auto;
background: #ffffff;
border: 1px solid #eef0f3;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
padding: 8px;
z-index: 10010;
}
body[data-nav-wip] .space-type-menu.has-groups {
flex-direction: column;
gap: 2px;
padding: 8px;
}
body[data-nav-wip] .space-type-menu .menu-group {
min-width: 0;
}
body[data-nav-wip] .space-type-menu .menu-group:not(:first-child) {
border-left: 0;
padding-left: 0;
margin-left: 0;
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid #f3f4f6;
}
body[data-nav-wip] .space-type-menu .menu-group-label {
justify-content: flex-start;
padding: 8px 10px 4px;
margin: 0;
font-size: 12px;
font-weight: 600;
color: #6b7280;
gap: 6px;
}
body[data-nav-wip] .space-type-menu .menu-group-label .group-icon {
width: 14px;
height: 14px;
}
body[data-nav-wip] .space-type-menu .menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
margin: 0;
border-radius: 12px;
font-size: 14px;
color: #111827;
white-space: nowrap;
}
body[data-nav-wip] .space-type-menu .menu-item:hover {
background: #f5f6f8;
color: #111827;
}
body[data-nav-wip] .space-type-menu .menu-item.dt-selected {
background: #f5f6f8;
}
body[data-nav-wip] .space-type-menu .dt-mi-ico {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #f3f4f6;
color: #374151;
display: flex;
align-items: center;
justify-content: center;
}
body[data-nav-wip] .space-type-menu .dt-mi-ico svg {
width: 20px;
height: 20px;
}
body[data-nav-wip] .space-type-menu .dt-mi-body {
flex: 1 1 auto;
min-width: 0;
}
body[data-nav-wip] .space-type-menu .dt-mi-name {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
body[data-nav-wip] .space-type-menu .dt-mi-tag {
font-size: 10px;
font-weight: 700;
line-height: 16px;
padding: 0 6px;
border-radius: 6px;
letter-spacing: .02em;
}
body[data-nav-wip] .space-type-menu .dt-mi-tag.top {
background: #dbeafe;
color: #1d4ed8;
}
body[data-nav-wip] .space-type-menu .dt-mi-tag.pro {
background: #111827;
color: #ffffff;
}
body[data-nav-wip] .space-type-menu .dt-mi-sub {
margin-top: 3px;
font-size: 12px;
color: #6b7280;
}
body[data-nav-wip] .space-type-menu .dt-mi-check {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: #2563eb;
visibility: hidden;
}
body[data-nav-wip] .space-type-menu .menu-item.dt-selected .dt-mi-check {
visibility: visible;
}
body.dark-mode[data-nav-wip] .space-type-menu {
background: #161618;
border-color: #1f1f22;
}
body.dark-mode[data-nav-wip] .space-type-menu .menu-item,
body.dark-mode[data-nav-wip] .space-type-menu .dt-mi-name {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .space-type-menu .menu-item:hover,
body.dark-mode[data-nav-wip] .space-type-menu .menu-item.dt-selected,
body.dark-mode[data-nav-wip] .space-type-menu .dt-mi-ico {
background: #1f1f22;
color: #e5e7eb;
}
/* ── Constraint row: label left, segmented right ── */
body[data-nav-wip] .wamo-1 > .new-param-row:not(.prompt-row) {
padding: 8px 8px 8px 14px;
min-height: 48px;
}
body[data-nav-wip] .new-param-label {
font-size: 13px;
font-weight: 500;
color: #374151;
}
body[data-nav-wip] .new-constraint-buttons {
flex: 0 0 auto !important;
margin-left: 12px !important;
gap: 2px !important;
padding: 3px;
background: #e9ebef;
border-radius: 10px;
position: relative;
}
body[data-nav-wip] .constraint-btn-wrapper {
flex: 0 0 auto !important;
}
body[data-nav-wip] .new-constraint-btn {
flex: 0 0 auto !important;
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: #6b7280;
font-size: 12.5px;
font-weight: 500;
overflow: visible !important;
}
body[data-nav-wip] .new-constraint-btn:hover {
background: rgba(255, 255, 255, .6);
}
body[data-nav-wip] .new-constraint-btn.active {
background: #ffffff;
color: #111827;
font-weight: 600;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
/* the "?" help dot: original layout (a dot on the ACTIVE button only — the
page's `.active + .constraint-tooltip` rule decides), moved to the top-RIGHT
corner. Its bubble is rendered by the JS as a fixed .dt-tip beside the
panel — the panel clips overflow, so the legacy ::after bubble is disabled. */
body[data-nav-wip] .constraint-btn-wrapper {
position: relative !important;
}
body[data-nav-wip] .constraint-btn-wrapper .constraint-tooltip {
top: -7px;
left: auto;
right: -6px;
transform: none;
width: 16px;
height: 16px;
font-size: 10px;
background: #dbe4ff;
color: #2563eb;
box-shadow: none;
cursor: help;
z-index: 2;
}
body[data-nav-wip] .constraint-tooltip:hover {
background: #2563eb;
color: #ffffff;
}
body[data-nav-wip] .constraint-tooltip::after {
display: none !important;
content: none !important;
}
body[data-nav-wip] .dt-tip {
position: fixed;
z-index: 10015;
width: 260px;
padding: 12px 14px;
border-radius: 12px;
background: #111827;
color: #f5f5f6;
font-size: 13px;
line-height: 1.55;
box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
pointer-events: none;
opacity: 0;
transform: translateX(-4px);
transition: opacity .12s ease, transform .12s ease;
}
body[data-nav-wip] .dt-tip.on {
opacity: 1;
transform: none;
}
body[data-nav-wip] .dt-tip::before {
content: '';
position: absolute;
left: -6px;
top: var(--dt-tip-arrow, 18px);
border: 6px solid transparent;
border-left: 0;
border-right-color: #111827;
}
/* ── Prompt card: header row + textarea fused ── */
body[data-nav-wip] .new-param-row.prompt-row {
height: auto !important;
min-height: 0 !important;
padding: 12px 14px 0;
border-radius: 14px 14px 0 0;
}
body[data-nav-wip] .new-param-row.prompt-row .new-param-label {
font-weight: 600;
cursor: default !important;
}
/* the prompt switch is forced on + disabled in every mode except
建筑+矫正透视 (where it toggles Reference Image | Prompt) — hide it whenever
it is disabled, keep it as the mode toggle otherwise */
body[data-nav-wip] .new-param-row.prompt-row .new-switch:has(input:disabled) {
display: none;
}
body[data-nav-wip] .new-switch-label {
width: 34px;
height: 20px;
border-radius: 10px;
background: #d1d5db;
}
body[data-nav-wip] .new-switch-label::after {
width: 16px;
height: 16px;
top: 2px;
left: 2px;
border-radius: 50%;
background: #ffffff;
}
body[data-nav-wip] .new-switch input[type="checkbox"]:checked + .new-switch-label {
background: #2563eb;
}
body[data-nav-wip] .new-switch input[type="checkbox"]:checked + .new-switch-label::after {
transform: translateX(14px);
background: #ffffff;
}
body[data-nav-wip] .new-prompt-input,
body[data-nav-wip] .new-prompt-input.with-inline,
body[data-nav-wip] .new-prompt-input.compact-height,
body[data-nav-wip] .new-prompt-input.show {
/* the header row and the textarea are sibling flex items of .wamo-1 (gap 10px):
pull the textarea up onto the header so the two read as one card */
margin-top: -10px !important;
border: 0 !important;
border-radius: 0 0 14px 14px !important;
padding: 10px 14px 12px !important;
/* auto-grows with content (snaprender-panel-wip.js) up to a square — height
= its own width — then scrolls; the height itself is set inline by the JS */
height: 132px; /* 1.5x the old 88px base: room for a placeholder that coaches the prompt */
min-height: 132px;
max-height: none;
overflow-y: hidden;
flex: 0 0 auto !important; /* .wamo-1 is a column flexbox: never squeeze the grown box, let the panel scroll */
font-size: 13px;
line-height: 1.5;
color: #111827;
resize: none;
box-sizing: border-box;
}
body[data-nav-wip] .new-prompt-input::placeholder {
color: #9ca3af;
font-size: 13px;
line-height: 1.5;
white-space: pre-line; /* the coaching placeholder is two lines: instruction + example */
}
/* ── Render-engine row (the old inline sentence, moved below the textarea) ── */
body[data-nav-wip] #promptInline {
order: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
font-size: 13px;
color: #6b7280;
position: relative;
min-height: 52px;
}
/* Higgsfield "Bitrate · [High] ›" layout: label left, value pill + chevron right */
body[data-nav-wip] #promptInline .dt-eng-left {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 12px;
}
body[data-nav-wip] #promptInline .dt-eng-label {
font-size: 14px;
font-weight: 600;
color: #111827;
display: block;
margin: 0;
}
body[data-nav-wip] #promptInline .space-type-chip {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
animation: none;
color: #111827;
font-size: 13px;
font-weight: 600;
gap: 8px;
}
body[data-nav-wip] #promptInline .space-type-chip:hover {
background: transparent;
box-shadow: none;
}
body[data-nav-wip] #promptInline .space-type-chip .space-icon {
display: none;
}
body[data-nav-wip] #promptInline .space-type-chip > span {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 10px;
border-radius: 8px;
background: #e8f0fe;
color: #2563eb;
white-space: nowrap;
}
body[data-nav-wip] #promptInline .space-type-chip > span::before {
content: '';
width: 14px;
height: 14px;
flex: 0 0 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 17l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3C/svg%3E") no-repeat center / contain;
}
body[data-nav-wip] #promptInline .space-type-chip:hover > span {
background: #dbe7fd;
}
body.dark-mode[data-nav-wip] #promptInline .dt-eng-label {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] #promptInline .space-type-chip > span {
background: #1e3a8a;
color: #bfdbfe;
}
body[data-nav-wip] #promptInline .space-type-chip .dropdown-arrow {
width: 12px;
height: 12px;
opacity: .6;
transform: rotate(-90deg);
}
body[data-nav-wip] #promptInline .space-type-chip .dropdown-arrow path {
stroke: #6b7280;
}
body[data-nav-wip] #refImageUpload {
order: 2;
margin-top: 0;
}
body[data-nav-wip] .model-tip-bubble {
left: auto;
right: 14px;
transform: none;
}
/* ── Generate: raised key, blue ── */
body[data-nav-wip] .wamo-2 {
height: auto;
padding: 4px 0 6px;
}
body[data-nav-wip] .wamo2-btn {
margin-top: 8px !important;
height: 48px;
border-radius: 14px;
background: #2563eb;
box-shadow: 0 4px 0 #1e40af, 0 6px 14px rgba(37, 99, 235, .25);
font-size: 14px;
font-weight: 600;
transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
body[data-nav-wip] .wamo2-btn:hover {
background: #2b6cf0;
transform: translateY(1px);
box-shadow: 0 3px 0 #1e40af, 0 5px 12px rgba(37, 99, 235, .25);
}
body[data-nav-wip] .wamo2-btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 #1e40af, 0 2px 6px rgba(37, 99, 235, .2);
}
body[data-nav-wip] .wamo2-btn .gen-btn-icon {
width: 16px !important;
height: 16px !important;
margin-right: 6px !important;
}
/* ── Result panel ── */
/* tab row: same 24px top inset, 44px height and 10px gap as the left panel's
mode tabs, so both panels' content areas start on one horizontal line */
body[data-nav-wip] .wr-title {
justify-content: flex-start;
padding: 0;
margin: 24px 24px 10px;
height: 44px;
line-height: 44px;
}
body[data-nav-wip] .tab-buttons {
gap: 6px;
}
body[data-nav-wip] .gen-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px !important;
border-radius: 8px !important; /* Higgsfield ratio; beats `body[data-sidebar-active] .gen-tab { … !important }` at ~3511 */
font-size: 13px !important;
font-weight: 500;
background: transparent;
color: #6b7280;
}
/* fullscreen button lives on the tab row's right end (moved there by the JS) */
body[data-nav-wip] .wr-title #fullscreenBtn {
position: static;
margin-left: auto;
height: 34px;
padding: 0 12px;
border-radius: 8px;
background: #f5f6f8; /* quiet borderless secondary key, same language as the tabs */
border: 0;
box-shadow: none;
color: #111827;
font-size: 13px;
font-weight: 500;
gap: 6px;
line-height: 1;
}
body[data-nav-wip] .wr-title #fullscreenBtn:hover {
background: #e5e7eb;
box-shadow: none;
}
body[data-nav-wip] .wr-title #fullscreenBtn svg {
width: 15px;
height: 15px;
}
/* dark-theme.css paints #fullscreenBtn slate (#1f2937 @ .9 + #4b5563 border) with !important */
body.dark-mode[data-nav-wip] .wr-title #fullscreenBtn {
background: #1f1f22 !important;
background-color: #1f1f22 !important;
border: 0 !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wr-title #fullscreenBtn:hover {
background: #2a2a2e !important;
background-color: #2a2a2e !important;
}
body[data-nav-wip] .gen-tab .dt-tab-ico {
display: inline-flex;
width: 16px;
height: 16px;
flex: 0 0 16px;
}
body[data-nav-wip] .gen-tab,
body[data-nav-wip] .wr-title #fullscreenBtn {
white-space: nowrap;
}
/* narrow layouts: icon-only tabs and fullscreen button (labels are bare text
nodes, so they are collapsed with font-size:0; the svg keeps its own size) */
@media (max-width: 1100px) {
body[data-nav-wip] .gen-tab .dt-tab-txt,
body[data-nav-wip] .wr-title #fullscreenBtn .dt-tab-txt {
display: none;
}
body[data-nav-wip] .gen-tab {
gap: 0;
width: 36px;
height: 34px;
padding: 0 !important;
justify-content: center;
}
body[data-nav-wip] .gen-tab .dt-tab-ico svg {
width: 17px;
height: 17px;
}
body[data-nav-wip] .wr-title #fullscreenBtn {
gap: 0;
width: 36px;
padding: 0;
justify-content: center;
}
body[data-nav-wip] .wr-title #fullscreenBtn svg {
width: 16px;
height: 16px;
}
}
body[data-nav-wip] .gen-tab .dt-tab-ico svg {
width: 16px;
height: 16px;
}
body[data-nav-wip] .gen-tab:hover {
background: #f5f5f6;
color: #111827;
}
body[data-nav-wip] .gen-tab.active {
background: #e5e7eb; /* quiet grey (Higgsfield): blue is reserved for the generate key; one step darker than the #f5f5f6 hover */
color: #111827;
font-weight: 600;
}
body.dark-mode[data-nav-wip] .gen-tab.active {
background: #2a2a2e;
color: #f5f5f6;
}
/* result box: solid field-coloured panel, same skin as the left cards */
body[data-nav-wip] .wr-lists-box {
margin: 0 24px 24px;
border: 0;
background: #f5f6f8;
border-radius: 16px;
height: auto;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body[data-nav-wip] .wam-result {
display: flex;
flex-direction: column;
}
body[data-nav-wip] .wr-lists-box > .wr-lists {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* the list fills the box height, and a wrapping flex row stretches its lines
(align-content) and cells (align-items) into that height - with few History
items the tiles grew taller than square. Pack rows at the top, keep 1:1. */
body[data-nav-wip] .wr-lists.history {
align-content: flex-start;
align-items: flex-start;
}
body[data-nav-wip] .wr-lists.result {
height: auto;
padding: 32px 16px 0; /* top inset doubled: the image no longer hugs the box edge */
}
body[data-nav-wip] .wr-lists.result .comparison-container {
height: 100%;
}
/* letterbox bands beside a contained image take the box's own field colour */
body[data-nav-wip] .wr-lists.result .image-comparison,
body[data-nav-wip] .wr-lists.result .comparison-container,
body[data-nav-wip] .wr-lists.result .image-compare-container {
box-shadow: none;
background: transparent;
}
body.dark-mode[data-nav-wip] .wr-lists.result .image-comparison {
background: transparent;
}
/* legacy hover buttons (compare/download) sit at the box bottom with opacity 0
and still swallow clicks — make them click-through unless actually shown, and
lift them above the caption while the showcase is on */
body[data-nav-wip] .floating-buttons {
pointer-events: none;
}
body[data-nav-wip] .wr-lists-box:hover .floating-buttons.show-on-hover:not(.force-hide),
body[data-nav-wip] .wr-lists-box.draw-layout-active .floating-buttons:not(.force-hide) {
pointer-events: auto;
}
body[data-nav-wip] .wr-lists-box:has(.dt-showcase.on) .floating-buttons {
bottom: 124px;
}
/* showcase caption + example carousel (built by snaprender-panel-wip.js) */
body[data-nav-wip] .dt-showcase {
flex: 0 0 auto;
display: none;
text-align: center;
padding: 12px 16px 14px;
}
body[data-nav-wip] .dt-showcase.on {
display: block;
}
/* Space Grotesk 700 (the @font-face lives in nav-wip.css, loaded from ) */
body[data-nav-wip] .dt-showcase .dt-sc-title {
font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 28px;
line-height: 36px;
font-weight: 700;
letter-spacing: 0;
color: #111827;
}
body[data-nav-wip] .dt-showcase .dt-sc-desc {
font-size: 12.5px;
color: #6b7280;
margin: 4px auto 0;
max-width: 520px;
}
body[data-nav-wip] .dt-showcase .dt-sc-car {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 10px;
}
body[data-nav-wip] .dt-showcase .dt-sc-arr {
width: 34px;
height: 34px;
border-radius: 50%;
border: 0;
background: #f3f4f6;
color: #374151;
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
body[data-nav-wip] .dt-showcase .dt-sc-arr:hover {
background: #e5e7eb;
}
body[data-nav-wip] .dt-showcase .dt-sc-thumbs {
display: flex;
gap: 6px;
padding: 5px;
border-radius: 24px;
background: #f3f4f6;
}
body[data-nav-wip] .dt-showcase .dt-sc-thumb {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid transparent;
padding: 0;
overflow: hidden;
cursor: pointer;
background: #d1d5db;
transition: width .2s ease, border-radius .2s ease;
}
body[data-nav-wip] .dt-showcase .dt-sc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body[data-nav-wip] .dt-showcase .dt-sc-thumb.on {
width: 62px;
border-radius: 17px;
border-color: #111827;
}
/* ── Source picker (built by snaprender-panel-wip.js, appended to body) ── */
body[data-nav-wip] .dt-picker {
position: fixed;
inset: 0;
z-index: 10020;
display: none;
}
body[data-nav-wip] .dt-picker.on {
display: block;
}
body[data-nav-wip] .dt-pk-backdrop {
position: absolute;
inset: 0;
background: transparent; /* click-away only; the page stays readable */
}
body[data-nav-wip] .dt-pk-sheet {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(440px, calc(100vw - 32px));
background: #ffffff;
border-radius: 20px;
box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
padding: 20px 20px 22px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif;
}
/* anchored beside the upload card (positioned by the JS) */
body[data-nav-wip] .dt-pk-sheet.dt-pk-anchored {
transform: none;
box-shadow: 0 16px 48px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .08);
border: 1px solid #eef0f3;
}
body[data-nav-wip] .dt-pk-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
body[data-nav-wip] .dt-pk-title {
font-size: 16px;
font-weight: 700;
color: #111827;
}
body[data-nav-wip] .dt-pk-close {
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: #f3f4f6;
color: #374151;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
body[data-nav-wip] .dt-pk-opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
body[data-nav-wip] .dt-pk-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 12px 16px;
border: 1.5px dashed #d1d5db;
border-radius: 14px;
background: #f5f6f8;
cursor: pointer;
text-align: center;
transition: border-color .15s ease, background .15s ease;
}
body[data-nav-wip] .dt-pk-opt:hover {
border-color: #2563eb;
background: #f5f8ff;
}
body[data-nav-wip] .dt-pk-opt:disabled {
opacity: .45;
cursor: not-allowed;
border-color: #e5e7eb;
background: #f5f6f8;
}
body[data-nav-wip] .dt-pk-ico {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
color: #374151;
display: flex;
align-items: center;
justify-content: center;
}
body[data-nav-wip] .dt-pk-ico svg {
width: 18px;
height: 18px;
}
body[data-nav-wip] .dt-pk-txt b {
display: block;
font-size: 13.5px;
font-weight: 600;
color: #111827;
}
body[data-nav-wip] .dt-pk-txt small {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: #9ca3af;
}
body[data-nav-wip] .dt-pk-exlabel {
margin: 16px 0 8px;
font-size: 12px;
font-weight: 600;
color: #6b7280;
}
body[data-nav-wip] .dt-pk-ex {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
body[data-nav-wip] .dt-pk-exit {
padding: 0;
border: 2px solid transparent;
border-radius: 10px;
overflow: hidden;
background: #e5e7eb;
aspect-ratio: 4 / 3;
cursor: pointer;
transition: border-color .15s ease, transform .15s ease;
}
body[data-nav-wip] .dt-pk-exit:hover {
border-color: #2563eb;
transform: translateY(-1px);
}
body[data-nav-wip] .dt-pk-exit img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.dark-mode[data-nav-wip] .dt-pk-sheet {
background: #161618;
}
body.dark-mode[data-nav-wip] .dt-pk-title,
body.dark-mode[data-nav-wip] .dt-pk-txt b {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-pk-opt {
background: #1f1f22;
border-color: #2a2a2e;
}
body.dark-mode[data-nav-wip] .dt-pk-close,
body.dark-mode[data-nav-wip] .dt-pk-ico {
background: #2a2a2e;
color: #e5e7eb;
}
/* ── layui alert / confirm dialogs (layer.alert / layer.confirm) ──
header-3.css styles them globally with !important (gradient button, block
buttons); these carry body[data-nav-wip] for higher specificity so the WIP
pages get the panel language: 16px sheet, left-aligned title + text,
right-aligned flat buttons. Toasts (.layui-layer-msg) are left alone. */
body[data-nav-wip] .layui-layer-dialog {
border-radius: 16px !important;
border: 1px solid #eef0f3;
box-shadow: 0 24px 60px rgba(16, 24, 40, .18), 0 2px 8px rgba(16, 24, 40, .06) !important;
overflow: hidden;
min-width: 360px;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-title {
height: auto !important;
line-height: 1.3 !important;
padding: 22px 56px 0 24px !important;
background: #ffffff !important;
border: 0 !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #111827 !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-content {
padding: 12px 24px 4px !important;
text-align: left !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #4b5563 !important;
background: #ffffff !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-content .layui-layer-ico,
body[data-nav-wip] .layui-layer-dialog .layui-layer-content .layui-layer-face {
display: none !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-setwin {
top: 16px !important;
right: 16px !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-setwin .layui-layer-close {
width: 30px !important;
height: 30px !important;
line-height: 30px !important;
border-radius: 50% !important;
background: #f3f4f6 !important;
color: #374151 !important;
font-size: 16px !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-setwin .layui-layer-close:hover {
background: #e5e7eb !important;
color: #111827 !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-btn {
display: flex !important;
justify-content: flex-end !important;
gap: 8px;
padding: 18px 24px 22px !important;
border: 0 !important;
background: #ffffff !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-btn a {
display: inline-flex !important;
align-items: center;
justify-content: center;
height: 36px !important;
line-height: 36px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 10px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-btn .layui-layer-btn0 {
background: #2563eb !important;
color: #ffffff !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-btn .layui-layer-btn0:hover {
background: #1d4ed8 !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-btn .layui-layer-btn1 {
background: #f3f4f6 !important;
color: #374151 !important;
}
body[data-nav-wip] .layui-layer-dialog .layui-layer-btn .layui-layer-btn1:hover {
background: #e5e7eb !important;
}
body[data-nav-wip] .layui-layer-shade {
background-color: #111827 !important;
opacity: .35 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-dialog,
body.dark-mode[data-nav-wip] .layui-layer-dialog .layui-layer-title,
body.dark-mode[data-nav-wip] .layui-layer-dialog .layui-layer-content,
body.dark-mode[data-nav-wip] .layui-layer-dialog .layui-layer-btn {
background: #161618 !important;
border-color: #1f1f22;
}
body.dark-mode[data-nav-wip] .layui-layer-dialog .layui-layer-title {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-dialog .layui-layer-content {
color: #a1a1aa !important;
}
/* ── Icon pass: compare-slider handle, history hover buttons, fullscreen
viewer buttons. The legacy glyphs (↔ ⇔ ⛶ ⇩ ×) are hidden (color:
transparent — font-size:0 is clamped by Chrome) and replaced by SVG
backgrounds; the buttons themselves keep their ids/classes and handlers. ── */
/* slider: thin white line, 36px white disc with left/right chevrons */
body[data-nav-wip] .comparison-slider,
body[data-nav-wip] .compare-slider,
body[data-nav-wip] .ex-compare-slider {
width: 2px !important;
background: #ffffff !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .25) !important;
}
body[data-nav-wip] .comparison-slider::before,
body[data-nav-wip] .compare-slider::before,
body[data-nav-wip] .ex-compare-slider::before {
content: '' !important;
width: 36px !important;
height: 36px !important;
border: 0 !important;
border-radius: 50% !important;
background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 18px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06) !important;
color: transparent !important;
font-size: 0 !important;
}
body[data-nav-wip] .comparison-slider::after,
body[data-nav-wip] .compare-slider::after {
content: none !important;
}
/* rounded corners on the picture: with object-fit:contain the ![]()
box is the
whole wrapper and its corners sit in the letterbox, so a radius on it is
invisible. Size the ![]()
to its own content instead (auto + max 100%,
centred in the wrapper) and round that. The after-layer clip is a
percentage on the wrapper, so the slider alignment is unaffected. */
body[data-nav-wip] .wr-lists.result .comparison-image,
body[data-nav-wip] .wr-lists.result .compare-image-before,
body[data-nav-wip] .wr-lists.result .compare-image-after {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body[data-nav-wip] .wr-lists.result .comparison-image img,
body[data-nav-wip] .wr-lists.result .compare-image-before img,
body[data-nav-wip] .wr-lists.result .compare-image-after img,
body[data-nav-wip] .wr-lists.result > img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
border-radius: 14px !important;
margin: 0 !important;
}
body[data-nav-wip] .wr-lists.result > img {
display: block;
margin: 0 auto !important;
}
body[data-nav-wip] .ex-compare-before img,
body[data-nav-wip] .ex-compare-after img {
border-radius: 14px !important;
}
/* shared icon-button look for history hover + fullscreen viewer */
body[data-nav-wip] .wr-lists.history :is(.img-container, .video-container) .img-hover-actions button,
body[data-nav-wip] .fullscreen-close,
body[data-nav-wip] .fullscreen-download {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
background-color: rgba(17, 24, 39, .55) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px 18px !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
backdrop-filter: blur(6px);
transition: background-color .15s ease, transform .15s ease;
}
body[data-nav-wip] .wr-lists.history :is(.img-container, .video-container) .img-hover-actions button:hover,
body[data-nav-wip] .fullscreen-close:hover,
body[data-nav-wip] .fullscreen-download:hover {
background-color: rgba(37, 99, 235, .9) !important;
transform: none !important;
}
body[data-nav-wip] .wr-lists.history :is(.img-container, .video-container) .img-hover-actions {
gap: 10px !important;
justify-content: center !important;
}
/* expand */
body[data-nav-wip] .wr-lists.history :is(.hist-fullscreen-btn, .hist-vid-fs-btn) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E") !important;
}
/* download */
body[data-nav-wip] .wr-lists.history :is(.hist-download-btn, .hist-vid-dl-btn),
body[data-nav-wip] .fullscreen-download {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0l-4-4m4 4l4-4M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E") !important;
}
/* [WIP 2026-09-25] the play badge (.dt-vid-mark, shared with the results rail's
video thumbs) sits centred over the video tile same as elsewhere; it must
stay under the hover-actions overlay/buttons, which are already later in
paint order (DOM order: video, mark, overlay) so no z-index is needed here.
On hover the two action buttons take the centre, so the badge steps aside. */
body[data-nav-wip] .video-container .dt-vid-mark { transition: opacity .15s; }
body[data-nav-wip] .video-container:hover .dt-vid-mark { opacity: 0; }
/* [WIP 2026-09-28] compare source switch over the left (before) image: Input /
Before edit (cpDecorate). Deliberately quiet (2026-09-28 follow-up): a small
translucent pill, no shadow, dimmed until the compare box is hovered. */
body[data-nav-wip] .dt-cp-src {
position: absolute;
z-index: 6;
top: 14px;
left: 14px;
display: inline-flex;
gap: 1px;
padding: 2px;
border-radius: 999px;
background: rgba(0, 0, 0, .26);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: .7;
transition: opacity .18s;
}
body[data-nav-wip] #imageCompareContainer:hover .dt-cp-src,
body[data-nav-wip] .dt-cp-src:focus-within { opacity: 1; }
body[data-nav-wip] .dt-cp-src button {
height: 20px;
padding: 0 8px;
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(255, 255, 255, .72);
font-size: 11px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
cursor: pointer;
transition: background .15s, color .15s;
}
body[data-nav-wip] .dt-cp-src button:hover { color: #fff; }
body[data-nav-wip] .dt-cp-src button.is-on { background: rgba(255, 255, 255, .2); color: #fff; }
body[data-nav-wip] .dt-cp-src button:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 1px; }
/* [WIP 2026-09-27] buffer-then-play: a progress card over the stage while the
whole video downloads (vdShow) */
body[data-nav-wip] .wr-lists.result.dt-vid-loading { position: relative; min-height: 320px; }
body[data-nav-wip] .wr-lists.result.dt-vid-loading > video.dt-vid { visibility: hidden; }
body[data-nav-wip] .dt-vid-load {
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 200px;
padding: 20px 24px 18px;
border: 1px solid #e5e7eb;
border-radius: 16px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
color: #374151;
font-size: 13px;
font-variant-numeric: tabular-nums;
transform: translate(-50%, -50%);
pointer-events: none;
}
body[data-nav-wip] .dt-vid-load-spin {
width: 22px;
height: 22px;
border: 2px solid #e5e7eb;
border-top-color: #111827;
border-radius: 50%;
animation: dtVidSpin .8s linear infinite;
}
@keyframes dtVidSpin { to { transform: rotate(360deg); } }
body[data-nav-wip] .dt-vid-load-bar {
display: block;
width: 100%;
height: 3px;
border-radius: 3px;
background: #e5e7eb;
overflow: hidden;
}
body[data-nav-wip] .dt-vid-load-bar i {
display: block;
width: 0;
height: 100%;
border-radius: 3px;
background: #111827;
transition: width .2s linear;
}
body.dark-mode[data-nav-wip] .dt-vid-load { border-color: #2e2e33; background: rgba(31, 31, 34, .94); color: #d4d4d8; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
body.dark-mode[data-nav-wip] .dt-vid-load-spin { border-color: #34343a; border-top-color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-vid-load-bar { background: #34343a; }
body.dark-mode[data-nav-wip] .dt-vid-load-bar i { background: #f5f5f6; }
/* close */
body[data-nav-wip] .fullscreen-close {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important;
}
body[data-nav-wip] .fullscreen-close {
top: 20px !important;
right: 20px !important;
}
body[data-nav-wip] .fullscreen-download {
top: 20px !important;
right: 68px !important;
}
/* ── Dark mode: guards against dark-theme.css (620 !important rules for the
prod page) so the WIP surfaces keep the neutral palette ── */
body.dark-mode[data-nav-wip] .wam-op #uploadContainer.new-upload-container,
body.dark-mode[data-nav-wip] .new-prompt-input,
body.dark-mode[data-nav-wip] .new-prompt-input.show,
body.dark-mode[data-nav-wip] #promptInline,
body.dark-mode[data-nav-wip] .wamo-1 > .new-param-row:not(.prompt-row),
body.dark-mode[data-nav-wip] .new-param-row.prompt-row,
body.dark-mode[data-nav-wip] .wr-lists-box {
background: #1f1f22 !important;
border-color: #2a2a2e !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .new-prompt-input::placeholder {
color: #6b6b73 !important;
}
body.dark-mode[data-nav-wip] .new-constraint-buttons,
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-thumbs,
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-arr {
background: #161618 !important;
}
body.dark-mode[data-nav-wip] .gen-tab,
body.dark-mode[data-nav-wip] .gen-tab.active,
body.dark-mode[data-nav-wip] .gen-tab:hover {
border: 0 !important; /* dark-theme.css draws a same-colour border on every tab */
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .gen-tab {
background: transparent !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .gen-tab:hover {
background: #1f1f22 !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .gen-tab.active {
background: #2a2a2e !important; /* neutral, not blue, in dark mode */
color: #f5f5f6 !important;
}
/* the mode-tab row is not a card: keep it transparent in dark too (the guard
above paints every .new-param-row #1f1f22) */
body.dark-mode[data-nav-wip] .wamo-1 > .new-param-row:has(> .new-style-buttons),
body.dark-mode[data-nav-wip] .new-style-buttons {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .new-style-btn,
body.dark-mode[data-nav-wip] .new-style-btn.active {
background: transparent !important; /* dark-theme.css boxes these (slate fill + white border) */
border: 0 !important;
box-shadow: none !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .new-style-btn.active {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .new-constraint-btn {
border: 0 !important;
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .new-style-btn.active::after {
background: #f5f5f6;
}
body.dark-mode[data-nav-wip] .new-param-label,
body.dark-mode[data-nav-wip] .dt-up-title,
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-desc {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .new-upload-tip,
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-desc {
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-up-ico {
background: #2a2a2e;
color: #f5f5f6;
}
/* ── Dark mode ── */
body.dark-mode[data-nav-wip] .new-upload-container,
body.dark-mode[data-nav-wip] .new-style-buttons,
body.dark-mode[data-nav-wip] .wamo-1 > .new-param-row:not(.prompt-row),
body.dark-mode[data-nav-wip] .new-param-row.prompt-row,
body.dark-mode[data-nav-wip] .new-prompt-input,
body.dark-mode[data-nav-wip] #promptInline {
background: #1f1f22;
}
body.dark-mode[data-nav-wip] #uploadContainer {
background: #1f1f22;
border-color: #2a2a2e;
}
body.dark-mode[data-nav-wip] .new-style-btn.active,
body.dark-mode[data-nav-wip] .new-constraint-btn.active {
background: #2a2a2e !important; /* same grey as the active result tab; dark-theme.css paints slate */
color: #f5f5f6 !important;
border: 0 !important;
box-shadow: none !important;
color: #ffffff;
}
body.dark-mode[data-nav-wip] .new-constraint-buttons {
background: #161618;
}
body.dark-mode[data-nav-wip] .dt-up-title,
body.dark-mode[data-nav-wip] .new-param-label,
body.dark-mode[data-nav-wip] #promptInline .space-type-chip,
body.dark-mode[data-nav-wip] .new-prompt-input,
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-title {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-arr,
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-thumbs {
background: #1f1f22;
color: #e5e7eb;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-thumb.on {
border-color: #f5f5f6;
}
/* ── Narrow (stacked) layout ── */
@media (max-width: 768px) {
body[data-nav-wip] .wam-op {
padding: 16px !important;
}
/* stacked layout: the result panel is height:auto, so the showcase needs a
definite image height or the 100%-tall compare collapses to 0 */
body[data-nav-wip] .wr-lists.result {
min-height: 320px;
}
body[data-nav-wip] .wr-lists.result .comparison-container {
height: 300px;
}
}
/* ── [WIP 2026-09-19] result keys: Compare / Download / Fullscreen as icons ──
Compare and Download leave the result's bottom row and join Fullscreen on
the tab row's right end as three icon keys (names in tooltips); the bottom
row keeps Generate Video and Image Edit. Fullscreen drops its label. */
body[data-nav-wip] .wr-title .dt-rs-key,
body[data-nav-wip] .wr-title #fullscreenBtn {
width: 36px;
height: 34px;
padding: 0 !important;
gap: 0 !important;
justify-content: center;
align-items: center;
display: inline-flex;
border: 0;
border-radius: 8px;
background: #f5f6f8;
color: #111827;
cursor: pointer;
flex: 0 0 auto;
}
body[data-nav-wip] .wr-title .dt-rs-key[hidden] {
display: none !important;
}
body[data-nav-wip] .wr-title .dt-rs-key:hover {
background: #e5e7eb;
}
body[data-nav-wip] .wr-title .dt-rs-key:disabled {
opacity: .45;
cursor: not-allowed;
}
body[data-nav-wip] .wr-title .dt-rs-key svg,
body[data-nav-wip] .wr-title #fullscreenBtn svg {
width: 16px;
height: 16px;
}
body[data-nav-wip] .wr-title #fullscreenBtn .dt-tab-txt {
display: none !important;
}
/* the keys sit together at the row's right end whichever of them show: the
tab group takes the free space, every key keeps an 8px gap */
body[data-nav-wip] .wam-result .wr-title .tab-buttons {
margin-right: auto !important;
}
body[data-nav-wip] .wr-title .dt-rs-key,
body[data-nav-wip] .wr-title #fullscreenBtn {
margin-left: 8px !important;
}
/* Compare is a toggle: tinted while before / after is on */
body[data-nav-wip] .wr-title .dt-rs-key.dt-rs-compare.is-on {
background: #e8efff;
color: #2563eb;
}
body.dt-rs-icons-on[data-nav-wip] .floating-buttons :is(.compare-btn, .download-btn) {
display: none !important;
}
body.dark-mode[data-nav-wip] .wr-title .dt-rs-key {
background: #1f1f22;
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .wr-title .dt-rs-key:hover {
background: #2a2a2e;
}
body.dark-mode[data-nav-wip] .wr-title .dt-rs-key.dt-rs-compare.is-on {
background: #1e2a4a;
color: #93b4ff;
}
/* ── [WIP 2026-09-19] result views: big + filmstrip / grid; Continue Edit bar ─
Built by snaprender-panel-wip.js (6c). */
body[data-nav-wip] .wr-title .dt-rv-toggle {
display: inline-flex;
gap: 2px;
padding: 3px;
margin-left: 8px;
border-radius: 10px;
background: #f5f6f8;
flex: 0 0 auto;
}
body[data-nav-wip] .wr-title .dt-rv-toggle[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-rv-mode {
width: 30px;
height: 28px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-mode:hover {
color: #111827;
}
body[data-nav-wip] .dt-rv-mode.is-on {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
/* big view: the session's results as a single column on the right */
body[data-nav-wip] .dt-rv-strip {
position: absolute;
top: 12px;
right: 12px;
bottom: 12px;
width: 84px;
z-index: 12;
display: flex;
flex-direction: column;
gap: 8px;
padding: 6px;
overflow-y: auto;
border-radius: 16px;
background: rgba(255, 255, 255, .72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
scrollbar-width: none;
box-sizing: border-box;
}
body[data-nav-wip] .dt-rv-strip::-webkit-scrollbar {
width: 0;
}
body[data-nav-wip] .dt-rv-strip[hidden],
body[data-nav-wip] .dt-rv-grid[hidden],
body[data-nav-wip] .dt-rv-bar[hidden],
body[data-nav-wip] .dt-rv-bar [hidden] {
display: none !important;
}
body[data-nav-wip] .dt-rv-thumb {
flex: 0 0 72px;
width: 72px;
height: 72px;
padding: 0;
border: 2px solid transparent;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: #e5e7eb;
opacity: .82;
transition: opacity .15s ease, border-color .15s ease;
}
body[data-nav-wip] .dt-rv-thumb:hover {
opacity: 1;
}
body[data-nav-wip] .dt-rv-thumb.is-current {
opacity: 1;
border-color: #2563eb;
}
body[data-nav-wip] .dt-rv-thumb img,
body[data-nav-wip] .dt-rv-cell img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* the picture makes room for the strip and the bottom bar */
body.dt-rv-strip-on[data-nav-wip] .wr-lists.result {
padding-right: 104px !important;
box-sizing: border-box !important;
}
body.dt-rv-bar-on[data-nav-wip] .wr-lists.result {
padding-bottom: 72px !important;
box-sizing: border-box !important;
}
/* grid view: the session as a 3-4 column masonry, newest at the bottom */
body[data-nav-wip] .dt-rv-grid {
position: absolute;
inset: 0;
z-index: 14;
padding: 16px;
overflow-y: auto;
display: flex;
align-items: flex-start;
gap: 12px;
background: inherit;
box-sizing: border-box;
}
body[data-nav-wip]:not(.dark-mode) .dt-rv-grid {
background: #ffffff;
}
body[data-nav-wip] .dt-rv-cell {
display: block;
width: 100%;
margin: 0 0 12px;
padding: 0;
border: 0;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
break-inside: avoid;
background: #f3f4f6;
transition: transform .15s ease, box-shadow .15s ease;
}
body[data-nav-wip] .dt-rv-cell img {
height: auto;
}
body[data-nav-wip] .dt-rv-cell:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15, 23, 42, .15);
}
/* grid view has no single "current" picture: its per-image keys step aside */
body.dt-rv-grid-on[data-nav-wip] :is(.dt-rs-key, #fullscreenBtn, .floating-buttons) {
display: none !important;
}
/* big view's bottom row: one long Continue Edit, Generate Video beside it */
body[data-nav-wip] .dt-rv-bar {
position: absolute;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
z-index: 13;
display: flex;
gap: 10px;
}
body[data-nav-wip] .dt-rv-continue {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 340px;
max-width: calc(100vw - 160px);
height: 44px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: #2563eb;
color: #ffffff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}
body[data-nav-wip] .dt-rv-continue:hover {
background: #1d4ed8;
}
body[data-nav-wip] .dt-rv-video {
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #d4d8de;
border-radius: 999px;
background: #ffffff;
color: #1f2937;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-video:hover {
background: #f9fafb;
}
body[data-nav-wip] :is(.dt-rv-continue, .dt-rv-video):disabled {
opacity: .5;
cursor: not-allowed;
}
/* the bar stands in for the old hover row's Generate Video / Image Edit */
body.dt-rv-bar-on[data-nav-wip] .floating-buttons :is(.video-btn, .edit-btn) {
display: none !important;
}
/* dark */
body.dark-mode[data-nav-wip] .wr-title .dt-rv-toggle {
background: #1f1f22;
}
body.dark-mode[data-nav-wip] .dt-rv-mode {
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-rv-mode:hover,
body.dark-mode[data-nav-wip] .dt-rv-mode.is-on {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-rv-mode.is-on {
background: #2a2a2e;
box-shadow: none;
}
body.dark-mode[data-nav-wip] .dt-rv-strip {
background: rgba(22, 22, 24, .72);
}
body.dark-mode[data-nav-wip] .dt-rv-thumb,
body.dark-mode[data-nav-wip] .dt-rv-cell {
background: #2a2a2e;
}
body.dark-mode[data-nav-wip] .dt-rv-grid {
background: #161618;
}
body.dark-mode[data-nav-wip] .dt-rv-video {
background: #2a2a2e;
border-color: #3a3a3f;
color: #e5e7eb;
}body[data-nav-wip] .dt-rv-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
body[data-nav-wip] .dt-rv-col .dt-rv-cell {
margin: 0;
}
/* Large / Grid toggle on the result, top-right, above the filmstrip */
body[data-nav-wip] .wr-lists-box > .dt-rv-toggle {
position: absolute;
top: 12px;
right: 12px;
z-index: 16;
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: 10px;
background: rgba(245, 246, 248, .92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .wr-lists-box > .dt-rv-toggle[hidden] {
display: none !important;
}
body.dark-mode[data-nav-wip] .wr-lists-box > .dt-rv-toggle {
background: rgba(31, 31, 34, .92);
box-shadow: none;
}
body[data-nav-wip] .dt-rv-strip {
top: 58px;
}
body[data-nav-wip] .dt-rv-grid {
padding-top: 58px;
}
/* ── History > Projects (6d) ── */
body[data-nav-wip] .dt-pj {
position: absolute;
inset: 0;
z-index: 14;
overflow-y: auto;
padding: 16px;
box-sizing: border-box;
}
body[data-nav-wip]:not(.dark-mode) .dt-pj {
background: #ffffff;
}
body.dark-mode[data-nav-wip] .dt-pj {
background: #161618;
}
body[data-nav-wip] .dt-pj[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-pj-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px 16px;
}
body[data-nav-wip] .dt-pj-card {
cursor: pointer;
outline: none;
}
body[data-nav-wip] .dt-pj-cover {
position: relative;
aspect-ratio: 4 / 3;
margin-top: 8px;
}
/* a second image peeking behind the cover reads as a folder of pictures */
body[data-nav-wip] .dt-pj-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px;
background: #f3f4f6;
}
body[data-nav-wip] .dt-pj-back-img {
transform: translate(8px, -8px) scale(.96);
opacity: .55;
}
body[data-nav-wip] .dt-pj-front-img {
box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
transition: transform .15s ease;
}
body[data-nav-wip] .dt-pj-card:hover .dt-pj-front-img {
transform: translateY(-2px);
}
body[data-nav-wip] .dt-pj-badge {
position: absolute;
left: 10px;
top: 10px;
padding: 3px 8px;
border-radius: 999px;
background: #2563eb;
color: #ffffff;
font-size: 12px;
font-weight: 600;
}
body[data-nav-wip] .dt-pj-del {
position: absolute;
right: 8px;
top: 8px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(17, 24, 39, .55);
color: #ffffff;
font-size: 16px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity .15s ease;
}
body[data-nav-wip] .dt-pj-card:hover .dt-pj-del {
opacity: 1;
}
body[data-nav-wip] .dt-pj-meta {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
font-size: 13px;
}
body[data-nav-wip] .dt-pj-name {
font-weight: 600;
color: #111827;
}
body[data-nav-wip] .dt-pj-n {
color: #6b7280;
}
body[data-nav-wip] .dt-pj-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
body[data-nav-wip] .dt-pj-back {
height: 32px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: #f3f4f6;
color: #111827;
font-size: 13px;
cursor: pointer;
}
body[data-nav-wip] .dt-pj-title {
font-weight: 600;
color: #111827;
}
body[data-nav-wip] .dt-pj-count {
color: #6b7280;
font-size: 13px;
}
body[data-nav-wip] .dt-pj-masonry {
display: flex;
align-items: flex-start;
gap: 12px;
}
body[data-nav-wip] .dt-pj-empty {
max-width: 420px;
margin: 80px auto 0;
text-align: center;
color: #6b7280;
font-size: 14px;
line-height: 1.6;
}
body[data-nav-wip] .dt-pj-lb {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
background: rgba(10, 10, 12, .82);
box-sizing: border-box;
}
body[data-nav-wip] .dt-pj-lb img {
max-width: 100%;
max-height: calc(100% - 56px);
object-fit: contain;
border-radius: 12px;
}
body[data-nav-wip] .dt-pj-lb-bar {
display: flex;
gap: 10px;
}
body[data-nav-wip] .dt-pj-lb-open,
body[data-nav-wip] .dt-pj-lb-close {
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: #ffffff;
color: #111827;
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
}
body[data-nav-wip] .dt-pj-lb-close {
width: 36px;
padding: 0;
justify-content: center;
font-size: 20px;
}
body.dark-mode[data-nav-wip] .dt-pj-name,
body.dark-mode[data-nav-wip] .dt-pj-title {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-pj-back {
background: #2a2a2e;
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-pj-cover img {
background: #2a2a2e;
}/* the History switch carries words, not icons: size to its label */
body[data-nav-wip] .dt-pj-switch .dt-pj-opt {
width: auto;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
/* [WIP 2026-09-28] History type chips (Images / Videos), left of All / Projects:
same pill family, slightly smaller, a clear gap before the scope switch */
body[data-nav-wip] .wr-title .dt-ht-switch { margin-right: 8px; }
body[data-nav-wip] .wr-title .dt-ht-switch[hidden] { display: none !important; }
body[data-nav-wip] .dt-ht-switch .dt-ht-opt {
width: auto;
height: 26px;
padding: 0 10px;
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
}
body[data-nav-wip] .wr-lists.history .hist-empty {
width: 100%;
padding: 48px 0;
text-align: center;
color: #6b7280;
font-size: 13px;
}
body.dark-mode[data-nav-wip] .wr-lists.history .hist-empty { color: #a1a1aa; }
/* ── [WIP 2026-09-19] prompt hint: quieter ────────────────────────────────────
The placeholder (#9ca3af, 13px) read almost as loud as typed text. It steps
back to a lighter grey at 12.5px so the field reads empty; typed text keeps
its colour. */
body[data-nav-wip] #newPromptInput::placeholder {
color: #c4c9d1 !important;
font-size: 12.5px;
opacity: 1;
}
body.dark-mode[data-nav-wip] #newPromptInput::placeholder {
color: #5a5a63 !important;
}
/* ── [WIP 2026-09-19] Continue Edit: light and shorter ────────────────────────
The solid blue 340px bar was heavy right under the picture; it is a light
outlined pill at 220px now (dark: the panel's control surface). */
body[data-nav-wip] .dt-rv-continue {
width: 220px;
height: 40px;
font-size: 14px;
background: #ffffff;
color: #1f2937;
border: 1px solid #d4d8de;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
body[data-nav-wip] .dt-rv-continue:hover {
background: #f9fafb;
border-color: #b9c0ca;
}
body[data-nav-wip] .dt-rv-video {
width: 40px;
height: 40px;
}
body.dark-mode[data-nav-wip] .dt-rv-continue {
background: #2a2a2e;
border-color: #3a3a3f;
color: #f5f5f6;
box-shadow: none;
}
body.dark-mode[data-nav-wip] .dt-rv-continue:hover {
background: #34343a;
}
/* ── [WIP 2026-09-19] generating: a mask over the canvas, progress card ───────
While the page's progress runs (.progress.active) the result area is dimmed -
white-ish in light, black-ish in dark, with a slight blur - over the picture,
filmstrip and bottom bar, so nothing under it looks clickable. The progress
itself becomes the same card ImageForge WIP uses: title, then a thin line
along the card's bottom edge. CSS only: the page's show / hide and progress
updates are unchanged. */
body[data-nav-wip] .wr-lists-box:has(> .progress.active)::before {
content: '';
position: absolute;
inset: 0;
z-index: 18;
border-radius: inherit;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
body[data-nav-wip]:not(.dark-mode) .wr-lists-box:has(> .progress.active)::before {
background: rgba(255, 255, 255, .55);
}
body.dark-mode[data-nav-wip] .wr-lists-box:has(> .progress.active)::before {
background: rgba(0, 0, 0, .5);
}
body[data-nav-wip] .wr-lists-box > .progress {
z-index: 20 !important;
width: 320px !important;
max-width: calc(100% - 32px) !important;
height: auto !important;
left: 50% !important;
top: 50% !important;
margin: 0 !important;
padding: 0 !important;
transform: translate(-50%, -50%);
border-radius: 16px !important;
overflow: hidden;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
body[data-nav-wip]:not(.dark-mode) .wr-lists-box > .progress {
background: rgba(255, 255, 255, .96) !important;
border: 1px solid rgba(17, 24, 39, .06);
box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}
body.dark-mode[data-nav-wip] .wr-lists-box > .progress {
background: rgba(31, 31, 34, .94) !important;
border: 1px solid #2a2a2e;
box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
body[data-nav-wip] .wr-lists-box > .progress .p-mask {
display: none !important;
}
body[data-nav-wip] .wr-lists-box > .progress::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
}
body[data-nav-wip]:not(.dark-mode) .wr-lists-box > .progress::after {
background: #eef1f5;
}
body.dark-mode[data-nav-wip] .wr-lists-box > .progress::after {
background: rgba(255, 255, 255, .06);
}
body[data-nav-wip] .wr-lists-box > .progress .p-title {
position: relative !important;
height: auto !important;
line-height: 22px !important;
padding: 18px 20px 22px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-align: center;
}
body[data-nav-wip]:not(.dark-mode) .wr-lists-box > .progress .p-title {
color: #111827 !important;
}
body.dark-mode[data-nav-wip] .wr-lists-box > .progress .p-title {
color: #f5f5f6 !important;
}
body[data-nav-wip] .wr-lists-box > .progress .p-bg-progress {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
height: 4px !important;
z-index: 1;
border-radius: 0 4px 4px 0 !important;
background: linear-gradient(90deg, #2563eb, #60a5fa) !important;
box-shadow: 0 0 8px rgba(37, 99, 235, .35);
}
/* ── [WIP 2026-09-19] inline edit box (6e) ────────────────────────────────────
Continue Edit opens a prompt field in the bar: text, a blue Edit (credits)
and a close key. The bar widens to fit it, leaving the filmstrip clear. */
body[data-nav-wip] .dt-rv-editbox {
display: none;
}
body[data-nav-wip] .dt-rv-bar.is-editing {
width: min(680px, calc(100% - 140px));
}
body[data-nav-wip] .dt-rv-bar.is-editing :is(.dt-rv-continue, .dt-rv-video) {
display: none !important;
}
body[data-nav-wip] .dt-rv-bar.is-editing .dt-rv-editbox {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 48px;
padding: 0 6px 0 16px;
border: 1px solid #d4d8de;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
box-sizing: border-box;
}
body[data-nav-wip] .dt-rv-prompt {
flex: 1 1 auto;
min-width: 0;
height: 36px;
border: 0;
outline: none;
background: transparent;
color: #111827;
font-size: 14px;
}
body[data-nav-wip] .dt-rv-prompt::placeholder {
color: #b3b9c3;
}
body[data-nav-wip] .dt-rv-send {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 999px;
background: #2563eb;
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-send:hover {
background: #1d4ed8;
}
body[data-nav-wip] .dt-rv-cost {
font-size: 12px;
font-weight: 500;
opacity: .8;
}
body[data-nav-wip] .dt-rv-close {
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #6b7280;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-close:hover {
background: #f3f4f6;
color: #111827;
}
body[data-nav-wip] .dt-rv-bar.is-busy .dt-rv-editbox {
opacity: .6;
}
body[data-nav-wip] .dt-rv-bar :is(.dt-rv-prompt, .dt-rv-send):disabled {
cursor: not-allowed;
}
body.dark-mode[data-nav-wip] .dt-rv-bar.is-editing .dt-rv-editbox {
background: #1f1f22;
border-color: #3a3a3f;
box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
body.dark-mode[data-nav-wip] .dt-rv-prompt {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-rv-prompt::placeholder {
color: #5a5a63;
}
body.dark-mode[data-nav-wip] .dt-rv-close {
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-rv-close:hover {
background: #2a2a2e;
color: #f5f5f6;
}
/* ── [WIP 2026-09-19] bar centred on the picture area; strip hugs its thumbs ──
With the filmstrip up, the bottom bar (Continue Edit / the edit field) is
centred in the space left of it, not across the whole box, and narrows to
fit. The strip's backing panel only wraps its thumbs - it no longer runs
the full height with an empty tail - and scrolls once it would overflow.
The global dark theme paints inputs navy: the edit field stays transparent
inside its pill. */
body.dt-rv-strip-on[data-nav-wip] .dt-rv-bar {
left: calc(50% - 52px);
}
body.dt-rv-strip-on[data-nav-wip] .dt-rv-bar.is-editing {
width: min(680px, calc(100% - 104px - 48px));
}
body[data-nav-wip] .dt-rv-strip {
bottom: auto;
max-height: calc(100% - 70px);
}
body[data-nav-wip] .dt-rv-bar .dt-rv-prompt,
body.dark-mode[data-nav-wip] .dt-rv-bar .dt-rv-prompt {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* ── Interior: Collage Render | 3D Render switch (snaprender-panel-wip.js 12).
It takes the camera-angle row's place; the camera-angle row drops under the
prompt and only shows for Collage. Exterior keeps its original layout. ── */
body[data-nav-wip] .wamo-1 > .new-param-row.dt-im-row {
display: none !important;
padding: 4px !important;
min-height: 0;
}
body.dt-im-on[data-nav-wip] .wamo-1 > .new-param-row.dt-im-row {
display: flex !important;
}
body.dt-im-on[data-nav-wip] .wamo-1 > .new-param-row.dt-cam-row {
order: 1;
}
body.dt-im-on[data-nav-wip] #promptInline {
order: 2;
}
body.dt-im-on[data-nav-wip] #refImageUpload {
order: 3;
}
body.dt-im-3d[data-nav-wip] .wamo-1 > .new-param-row.dt-cam-row {
display: none !important;
}
body[data-nav-wip] .dt-im-seg {
display: flex;
gap: 4px;
width: 100%;
}
body[data-nav-wip] .dt-im-opt {
flex: 1 1 0;
height: 38px;
padding: 0 10px;
border: 0;
border-radius: 10px;
background: transparent;
color: #6b7280;
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
}
body[data-nav-wip] .dt-im-opt:hover {
color: #111827;
background: rgba(255, 255, 255, .6);
}
body[data-nav-wip] .dt-im-opt.active {
background: #ffffff;
color: #111827;
font-weight: 600;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body.dark-mode[data-nav-wip] .dt-im-opt {
color: #9ca3af;
}
body.dark-mode[data-nav-wip] .dt-im-opt:hover {
color: #f5f5f6;
background: rgba(255, 255, 255, .05);
}
body.dark-mode[data-nav-wip] .dt-im-opt.active {
background: #34343a;
color: #f5f5f6;
box-shadow: none;
}
/* ── Fullscreen viewer follows the theme: a double-click on the result opens it
too (snaprender-tool-wip.js). Light = pale grey stage, dark = near-black;
the round icon keys stay dark glass so they read on both. ── */
body[data-nav-wip] #fullscreenModal.fullscreen-modal {
background: #f3f4f6 !important;
}
body.dark-mode[data-nav-wip] #fullscreenModal.fullscreen-modal {
background: #0b0b0d !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-image-wrapper img,
body[data-nav-wip] #fullscreenModal .fullscreen-compare-container {
border-radius: 12px;
}
body[data-nav-wip] #fullscreenModal .fullscreen-gallery-nav {
background: rgba(17, 24, 39, .55) !important;
color: #ffffff !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-gallery-nav:hover {
background: rgba(37, 99, 235, .9) !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-gallery-counter {
color: #6b7280 !important;
}
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-gallery-counter {
color: rgba(255, 255, 255, .65) !important;
}
body[data-nav-wip] #fullscreenModal .zoom-indicator {
background: rgba(17, 24, 39, .7) !important;
color: #ffffff !important;
font-size: 13px;
}
/* Comparison / Original / Generated: one segmented pill instead of three blue/grey chips */
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-buttons {
gap: 2px !important;
padding: 4px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn {
height: 32px;
padding: 0 14px !important;
border-radius: 9px !important;
background: transparent !important;
color: #6b7280 !important;
font-size: 13px !important;
font-weight: 500;
}
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn:hover {
color: #111827 !important;
background: #f3f4f6 !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn.active {
background: #111827 !important;
color: #ffffff !important;
font-weight: 600;
}
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-toggle-buttons {
background: #1f1f22;
box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn {
color: #9ca3af !important;
}
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn:hover {
color: #f5f5f6 !important;
background: rgba(255, 255, 255, .06) !important;
}
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn.active {
background: #f3f4f6 !important;
color: #111827 !important;
}/* ── [WIP 2026-09-19] edit field always open + edit tools above the picture ──
The bottom bar is the prompt field itself (no Continue Edit step, no close
key) with Generate Video at its right end. The tools (Comment / Remove BG /
Remove / Resize) sit centred over the picture area on the line of the
Large/Grid switch; the picture starts below them. Both follow the same
state: a real result in the big view. */
body[data-nav-wip] .dt-rv-bar.is-open {
width: min(720px, calc(100% - 140px));
align-items: center;
}
body.dt-rv-strip-on[data-nav-wip] .dt-rv-bar.is-open {
width: min(720px, calc(100% - 104px - 48px));
}
body[data-nav-wip] .dt-rv-bar.is-open .dt-rv-continue {
display: none !important;
}
body[data-nav-wip] .dt-rv-bar.is-open .dt-rv-video:not([hidden]) {
display: inline-flex !important;
flex: 0 0 48px;
width: 48px;
height: 48px;
box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
body.dark-mode[data-nav-wip] .dt-rv-bar.is-open .dt-rv-video:not([hidden]) {
box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
body[data-nav-wip] .dt-rv-bar.is-open .dt-rv-editbox {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
body[data-nav-wip] .dt-rv-bar .dt-rv-prompt:disabled {
background: transparent !important;
}
body.dt-rv-bar-on[data-nav-wip] .wr-lists.result {
padding-top: 58px !important;
}
body[data-nav-wip] .dt-rv-tools {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 13;
display: flex;
gap: 2px;
padding: 3px;
border-radius: 11px;
background: rgba(245, 246, 248, .92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body.dt-rv-strip-on[data-nav-wip] .dt-rv-tools {
left: calc(50% - 52px);
}
body[data-nav-wip] .dt-rv-tools[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-rv-tool {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 11px;
border: 0;
border-radius: 8px;
background: transparent;
color: #4b5563;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-tool:hover {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .dt-rv-tool svg {
flex: 0 0 auto;
}
body.dark-mode[data-nav-wip] .dt-rv-tools {
background: rgba(31, 31, 34, .92);
box-shadow: none;
}
body.dark-mode[data-nav-wip] .dt-rv-tool {
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-rv-tool:hover {
background: #2a2a2e;
color: #f5f5f6;
box-shadow: none;
}
/* narrower canvases: icon-only tools, icon + credits on the Edit key */
@media (max-width: 1400px) {
body[data-nav-wip] .dt-rv-tool {
width: 32px;
padding: 0;
justify-content: center;
}
body[data-nav-wip] .dt-rv-tool-txt {
display: none;
}
}
@media (max-width: 1100px) {
body[data-nav-wip] .dt-rv-send-txt {
display: none;
}
body[data-nav-wip] .dt-rv-send {
padding: 0 12px;
}
}/* short windows: .wamo-1 is a scrolling column flexbox, so its rows must keep
their height (they were squeezed - the prompt header to 13px) and let the
panel scroll instead */
body[data-nav-wip] .wamo-1 > .new-param-row,
body[data-nav-wip] .wamo-1 > #promptInline {
flex-shrink: 0 !important;
}/* grid view keeps the edit field: it floats over the grid (the grid scrolls
clear of it) and edits the current picture, outlined in the grid */
body.dt-rv-grid-on[data-nav-wip] .dt-rv-bar {
z-index: 15;
}
body.dt-rv-grid-on.dt-rv-bar-on[data-nav-wip] .dt-rv-grid {
padding-bottom: 84px;
}
body[data-nav-wip] .dt-rv-cell {
position: relative;
}
body[data-nav-wip] .dt-rv-cell.is-current::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid #2563eb;
border-radius: inherit;
pointer-events: none;
}/* grid view while rendering: the next slot holds a placeholder with the
progress; the full-canvas mask and the centred card step aside */
body.dt-rv-grid-pending[data-nav-wip] .wr-lists-box:has(> .progress.active)::before {
display: none !important;
}
body.dt-rv-grid-pending[data-nav-wip] .wr-lists-box > .progress {
visibility: hidden !important;
}
body[data-nav-wip] .dt-rv-pending {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 120px;
cursor: default;
overflow: hidden;
background: linear-gradient(110deg, #eef0f3 30%, #f7f8fa 50%, #eef0f3 70%) 0 0 / 250% 100%;
animation: dt-rv-shimmer 1.6s linear infinite;
}
body[data-nav-wip] .dt-rv-pending:hover {
transform: none;
box-shadow: none;
}
body.dark-mode[data-nav-wip] .dt-rv-pending {
background: linear-gradient(110deg, #1f1f22 30%, #2a2a2e 50%, #1f1f22 70%) 0 0 / 250% 100%;
}
@keyframes dt-rv-shimmer {
to { background-position: -150% 0; }
}
body[data-nav-wip] .dt-rv-pend-pct {
font-size: 22px;
font-weight: 600;
color: #374151;
font-variant-numeric: tabular-nums;
}
body.dark-mode[data-nav-wip] .dt-rv-pend-pct {
color: #e5e7eb;
}
body[data-nav-wip] .dt-rv-pend-bar {
width: 56%;
height: 4px;
border-radius: 4px;
overflow: hidden;
background: rgba(17, 24, 39, .08);
}
body.dark-mode[data-nav-wip] .dt-rv-pend-bar {
background: rgba(255, 255, 255, .08);
}
body[data-nav-wip] .dt-rv-pend-bar i {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #2563eb, #60a5fa);
transition: width .3s ease;
}/* ── tool sheet (6g): opens under the toolbar, names the cost; Run submits ── */
body[data-nav-wip] .dt-tl-pop {
position: absolute;
top: 54px;
z-index: 17;
width: 260px;
padding: 14px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(17, 24, 39, .06);
box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
box-sizing: border-box;
}
body[data-nav-wip] .dt-tl-pop[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-tl-head b {
display: block;
font-size: 14px;
font-weight: 600;
color: #111827;
}
body[data-nav-wip] .dt-tl-head span {
display: block;
margin-top: 4px;
font-size: 12.5px;
line-height: 1.5;
color: #6b7280;
}
body[data-nav-wip] .dt-tl-opts {
display: flex;
gap: 4px;
margin-top: 12px;
padding: 3px;
border-radius: 10px;
background: #f3f4f6;
}
body[data-nav-wip] .dt-tl-opt {
flex: 1 1 0;
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: #6b7280;
font-size: 13px;
font-weight: 600;
line-height: 30px;
cursor: pointer;
}
body[data-nav-wip] .dt-tl-opt small {
font-size: 11.5px;
font-weight: 500;
opacity: .75;
}
body[data-nav-wip] .dt-tl-opt.is-on {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .dt-tl-run {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 36px;
margin-top: 12px;
border: 0;
border-radius: 10px;
background: #2563eb;
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
body[data-nav-wip] .dt-tl-run:hover {
background: #1d4ed8;
}
body[data-nav-wip] .dt-rv-tool.is-on {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body.dark-mode[data-nav-wip] .dt-tl-pop {
background: #1f1f22;
border-color: #2a2a2e;
box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
body.dark-mode[data-nav-wip] .dt-tl-head b {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-tl-head span {
color: #9ca3af;
}
body.dark-mode[data-nav-wip] .dt-tl-opts {
background: #161618;
}
body.dark-mode[data-nav-wip] .dt-tl-opt {
color: #9ca3af;
}
body.dark-mode[data-nav-wip] .dt-tl-opt.is-on,
body.dark-mode[data-nav-wip] .dt-rv-tool.is-on {
background: #34343a;
color: #f5f5f6;
box-shadow: none;
}/* the camera-angle / detail-level row label matches "Render engine" (14px 600) */
body[data-nav-wip] .wamo-1 > .new-param-row.dt-cam-row > .new-param-label {
font-size: 14px !important;
font-weight: 600 !important;
color: #111827 !important;
}
body.dark-mode[data-nav-wip] .wamo-1 > .new-param-row.dt-cam-row > .new-param-label {
color: #f5f5f6 !important;
}/* ── right side rail (6h): Results / Assets, 64px collapsed, 300px open ──────
--dt-side is the width the picture area gives up. Everything centred on the
picture (the picture itself, the tools, the edit field, the grid) reads it,
and transitions carry the slide when it changes. */
body[data-nav-wip] .wr-lists-box {
--dt-side: 0px;
}
body.dt-side-on[data-nav-wip] .wr-lists-box {
--dt-side: 0px;
}
body.dt-side-on.dt-side-open[data-nav-wip] .wr-lists-box {
--dt-side: 0px;
}
body.dt-side-on[data-nav-wip] .wr-lists.result {
padding-right: calc(var(--dt-side) + 16px) !important;
box-sizing: border-box !important;
}
body[data-nav-wip] .wr-lists.result,
body[data-nav-wip] .dt-rv-tools,
body[data-nav-wip] .dt-rv-bar,
body[data-nav-wip] .dt-rv-grid {
transition: padding .28s cubic-bezier(.2, .8, .2, 1), left .28s cubic-bezier(.2, .8, .2, 1), right .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1);
}
body.dt-side-on[data-nav-wip] .dt-rv-tools,
body.dt-side-on[data-nav-wip] .dt-rv-bar {
left: calc(50% - var(--dt-side) / 2);
}
body.dt-side-on[data-nav-wip] .dt-rv-bar.is-open {
width: min(720px, calc(100% - var(--dt-side) - 48px));
}
body.dt-side-on[data-nav-wip] .dt-rv-grid {
right: var(--dt-side);
}
body[data-nav-wip] .dt-side {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 16;
width: 64px;
display: flex;
flex-direction: column;
box-sizing: border-box;
border-left: 1px solid rgba(17, 24, 39, .06);
background: inherit;
overflow: hidden;
transition: width .28s cubic-bezier(.2, .8, .2, 1);
}
body[data-nav-wip]:not(.dark-mode) .dt-side {
background: #ffffff;
}
body.dark-mode[data-nav-wip] .dt-side {
background: #161618;
border-left-color: #2a2a2e;
}
body[data-nav-wip] .dt-side[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-side.is-open {
width: 300px;
}
/* header: collapsed = a column (expand key, then the Large/Grid switch);
open = tabs left, switch + collapse key right, on the toolbar's line */
body[data-nav-wip] .dt-side-head {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 6px;
padding: 12px 0 8px;
flex: 0 0 auto;
}
body[data-nav-wip] .dt-side.is-open .dt-side-head {
flex-direction: row;
justify-content: space-between;
padding: 12px 12px 10px;
}
body[data-nav-wip] .dt-side-tabs {
display: none;
gap: 2px;
padding: 3px;
border-radius: 10px;
background: #f3f4f6;
margin-right: auto;
}
body[data-nav-wip] .dt-side.is-open .dt-side-tabs {
display: inline-flex;
}
body[data-nav-wip] .dt-side-tab {
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 7px;
background: transparent;
color: #6b7280;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
body[data-nav-wip] .dt-side-tab.is-on {
background: #ffffff;
color: #111827;
font-weight: 600;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .dt-side .dt-rv-toggle {
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 3px;
border-radius: 10px;
background: #f3f4f6;
}
body[data-nav-wip] .dt-side.is-open .dt-rv-toggle {
flex-direction: row;
}
body[data-nav-wip] .dt-side .dt-rv-toggle[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-side-fold {
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
}
body[data-nav-wip] .dt-side-fold:hover {
background: #f3f4f6;
color: #111827;
}
body[data-nav-wip] .dt-side-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
}
body[data-nav-wip] .dt-side-body::-webkit-scrollbar {
width: 0;
}
body[data-nav-wip] .dt-side[data-tab="results"] .dt-side-assets,
body[data-nav-wip] .dt-side[data-tab="assets"] .dt-side-results {
display: none;
}
/* result thumbs: a 44px column collapsed, a 3-up grid open */
body[data-nav-wip] .dt-side .dt-rv-strip {
position: static !important;
inset: auto !important;
width: auto !important;
max-height: none !important;
padding: 4px 10px 12px !important;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-radius: 0 !important;
overflow: visible !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
body[data-nav-wip] .dt-side .dt-rv-thumb {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 10px;
}
body[data-nav-wip] .dt-side.is-open .dt-rv-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 12px 12px !important;
}
body[data-nav-wip] .dt-side.is-open .dt-rv-thumb {
width: 100%;
height: auto;
aspect-ratio: 1;
}
body[data-nav-wip] .dt-side-empty {
display: none;
padding: 8px 16px;
font-size: 12.5px;
line-height: 1.5;
color: #9ca3af;
}
body[data-nav-wip] .dt-side.is-open .dt-side-empty:not([hidden]) {
display: block;
}
/* assets: category chips, then a 3-up grid of tiles */
body[data-nav-wip] .dt-mat-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 2px 12px 12px;
}
body[data-nav-wip] .dt-mat-cat {
height: 28px;
padding: 0 11px;
border: 1px solid #e5e7eb;
border-radius: 999px;
background: transparent;
color: #4b5563;
font-size: 12.5px;
cursor: pointer;
}
body[data-nav-wip] .dt-mat-cat:hover {
border-color: #cbd2da;
color: #111827;
}
body[data-nav-wip] .dt-mat-cat.is-on {
border-color: #2563eb;
background: #eff4ff;
color: #1d4ed8;
font-weight: 600;
}
body[data-nav-wip] .dt-mat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 0 12px 16px;
}
body[data-nav-wip] .dt-mat-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: center;
min-width: 0;
}
body[data-nav-wip] .dt-mat-face {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border-radius: 12px;
background: #f3f4f6;
color: #9ca3af;
overflow: hidden;
transition: box-shadow .15s ease, transform .15s ease;
}
body[data-nav-wip] .dt-mat-face img {
width: 100%;
height: 100%;
object-fit: contain;
}
body[data-nav-wip] .dt-mat-item.is-ph .dt-mat-face {
border: 1.5px dashed #d1d5db;
background: transparent;
}
body[data-nav-wip] .dt-mat-face em {
position: absolute;
top: 5px;
right: 5px;
padding: 1px 5px;
border-radius: 5px;
background: #f3f4f6;
color: #9ca3af;
font-size: 10px;
font-style: normal;
line-height: 14px;
}
body[data-nav-wip] .dt-mat-item:hover .dt-mat-face {
box-shadow: 0 0 0 2px #2563eb inset;
}
body[data-nav-wip] .dt-mat-name {
font-size: 11.5px;
color: #4b5563;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* reference chips at the front of the edit field */
body[data-nav-wip] .dt-rv-refs {
display: flex;
gap: 4px;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
}
body[data-nav-wip] .dt-rv-refs[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-rv-ref {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 4px 0 3px;
border-radius: 999px;
background: #eff4ff;
color: #1d4ed8;
font-size: 12px;
white-space: nowrap;
flex: 0 0 auto;
}
body[data-nav-wip] .dt-rv-ref img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background: #ffffff;
}
body[data-nav-wip] .dt-rv-ref-x {
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 15px;
line-height: 1;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-ref-x:hover {
background: rgba(37, 99, 235, .12);
}
/* toolbar: the divider before Assets */
body[data-nav-wip] .dt-rv-tool-sep {
width: 1px;
margin: 6px 4px;
background: rgba(17, 24, 39, .12);
flex: 0 0 auto;
}
body.dark-mode[data-nav-wip] .dt-rv-tool-sep {
background: rgba(255, 255, 255, .12);
}
/* dark */
body.dark-mode[data-nav-wip] .dt-side-tabs,
body.dark-mode[data-nav-wip] .dt-side .dt-rv-toggle {
background: #1f1f22;
}
body.dark-mode[data-nav-wip] .dt-side-tab {
color: #9ca3af;
}
body.dark-mode[data-nav-wip] .dt-side-tab.is-on {
background: #34343a;
color: #f5f5f6;
box-shadow: none;
}
body.dark-mode[data-nav-wip] .dt-side-fold {
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-side-fold:hover {
background: #2a2a2e;
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-mat-cat {
border-color: #2f2f34;
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-mat-cat:hover {
border-color: #3f3f46;
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-mat-cat.is-on {
border-color: #3b82f6;
background: rgba(37, 99, 235, .16);
color: #bfdbfe;
}
body.dark-mode[data-nav-wip] .dt-mat-face {
background: #1f1f22;
color: #5a5a63;
}
body.dark-mode[data-nav-wip] .dt-mat-item.is-ph .dt-mat-face {
border-color: #34343a;
background: transparent;
}
body.dark-mode[data-nav-wip] .dt-mat-face em {
background: #1f1f22;
color: #71717a;
}
body.dark-mode[data-nav-wip] .dt-mat-name {
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-rv-ref {
background: rgba(37, 99, 235, .18);
color: #bfdbfe;
}
/* narrow canvases: the open panel floats over the picture instead of squeezing it */
@media (max-width: 1279px) {
body.dt-side-on.dt-side-open[data-nav-wip] .wr-lists-box {
--dt-side: 0px;
}
body[data-nav-wip] .dt-side.is-open {
box-shadow: -12px 0 32px rgba(15, 23, 42, .14);
}
}/* ── side rail as its own card (2026-09-19): it sits beside the canvas inside the
result card, same top / bottom / radius, 12px apart. The canvas gives up its
width with a right margin (so everything inside it centres by itself; the
in-canvas --dt-side offsets above are now 0) and the margin carries the slide. */
body.dt-side-on[data-nav-wip] .wam-result {
position: relative;
}
body[data-nav-wip] .wam-result > .wr-lists-box {
transition: margin-right .28s cubic-bezier(.2, .8, .2, 1);
}
body.dt-side-on[data-nav-wip] .wam-result > .wr-lists-box {
margin-right: calc(24px + 64px + 12px) !important;
}
body.dt-side-on.dt-side-open[data-nav-wip] .wam-result > .wr-lists-box {
margin-right: calc(24px + 300px + 12px) !important;
}
body[data-nav-wip] .wam-result > .dt-side {
right: 24px;
bottom: 24px;
border-left: 0 !important;
border-radius: 16px;
background: #f5f6f8 !important;
}
body.dark-mode[data-nav-wip] .wam-result > .dt-side {
background: #1f1f22 !important;
}
@media (max-width: 1279px) {
body.dt-side-on.dt-side-open[data-nav-wip] .wam-result > .wr-lists-box {
margin-right: calc(24px + 64px + 12px) !important;
}
}/* the edit field's Edit key: light grey, not blue (2026-09-19) - light: pale
grey on the white field; dark: the same light grey as a highlight on the
dark field (the dark-mode "light chip, dark text" pattern) */
body[data-nav-wip] .dt-rv-bar .dt-rv-send {
background: #eceef1;
color: #111827;
}
body[data-nav-wip] .dt-rv-bar .dt-rv-send:hover {
background: #e1e4e8;
}
body.dark-mode[data-nav-wip] .dt-rv-bar .dt-rv-send {
background: #e5e7eb;
color: #111827;
}
body.dark-mode[data-nav-wip] .dt-rv-bar .dt-rv-send:hover {
background: #f3f4f6;
}
body[data-nav-wip] .dt-rv-bar .dt-rv-send .dt-rv-cost {
opacity: .6;
}/* ── grid Select / Multi-select (6i) ──────────────────────────────────────── */
body[data-nav-wip] .dt-rv-cell.is-sel::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid #2563eb;
border-radius: inherit;
pointer-events: none;
}
body[data-nav-wip] .dt-rv-check {
display: none;
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
width: 22px;
height: 22px;
border-radius: 50%;
box-sizing: border-box;
border: 2px solid rgba(255, 255, 255, .9);
background: rgba(17, 24, 39, .28);
pointer-events: none;
}
body.dt-rv-multi[data-nav-wip] .dt-rv-cell .dt-rv-check {
display: block;
}
body.dt-rv-multi[data-nav-wip] .dt-rv-cell.is-sel .dt-rv-check {
border-color: #2563eb;
background: #2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}
/* the selection on top of the edit field: the pill becomes a card */
body[data-nav-wip] .dt-rv-selrow {
display: flex;
gap: 8px;
flex: 0 0 100%;
padding: 2px 0 2px;
}
body[data-nav-wip] .dt-rv-selrow[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-rv-bar.has-sel {
align-items: flex-end;
}
body[data-nav-wip] .dt-rv-bar.is-editing.has-sel .dt-rv-editbox {
flex-wrap: wrap;
height: auto;
min-height: 48px;
row-gap: 6px;
padding: 10px 6px 6px 12px;
border-radius: 20px;
}
body[data-nav-wip] .dt-rv-sel {
position: relative;
width: 72px;
height: 72px;
flex: 0 0 72px;
border-radius: 12px;
overflow: hidden;
background: #f3f4f6;
}
body[data-nav-wip] .dt-rv-sel img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body[data-nav-wip] .dt-rv-sel em {
position: absolute;
left: 4px;
bottom: 4px;
padding: 0 5px;
border-radius: 5px;
background: rgba(17, 24, 39, .72);
color: #ffffff;
font-size: 10.5px;
font-style: normal;
line-height: 16px;
}
body[data-nav-wip] .dt-rv-sel-x {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(17, 24, 39, .72);
color: #ffffff;
font-size: 14px;
line-height: 20px;
cursor: pointer;
opacity: 0;
transition: opacity .15s ease;
}
body[data-nav-wip] .dt-rv-sel:hover .dt-rv-sel-x,
body[data-nav-wip] .dt-rv-sel-x:focus-visible {
opacity: 1;
}
body.dark-mode[data-nav-wip] .dt-rv-sel {
background: #2a2a2e;
}
/* the grid scrolls clear of the taller card */
body.dt-rv-grid-on.dt-rv-bar-on[data-nav-wip] .wr-lists-box:has(.dt-rv-bar.has-sel) .dt-rv-grid {
padding-bottom: 168px;
}/* the grid key waits for a generated result on show */
body[data-nav-wip] .dt-rv-mode:disabled {
opacity: .35;
cursor: not-allowed;
background: transparent !important;
box-shadow: none !important;
}/* rail header segments read as one control: the track differs from the card
(the card took the canvas colour, the old track matched it) with a hairline
edge, and the two tabs share the width evenly */
body[data-nav-wip] .dt-side.is-open .dt-side-tabs {
flex: 1 1 auto;
margin-right: 8px;
}
body[data-nav-wip] .dt-side-tab {
flex: 1 1 0;
}
body[data-nav-wip] .dt-side-tabs,
body[data-nav-wip] .dt-side .dt-rv-toggle {
background: #e7e9ed;
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
body[data-nav-wip] .dt-side-tab.is-on,
body[data-nav-wip] .dt-side .dt-rv-mode.is-on {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}
body.dark-mode[data-nav-wip] .dt-side-tabs,
body.dark-mode[data-nav-wip] .dt-side .dt-rv-toggle {
background: #141416;
box-shadow: inset 0 0 0 1px #2a2a2e;
}
body.dark-mode[data-nav-wip] .dt-side-tab.is-on,
body.dark-mode[data-nav-wip] .dt-side .dt-rv-mode.is-on {
background: #34343a;
color: #f5f5f6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}/* narrow result cards: the open rail never grows past the card's inner width
(it floats over the canvas there; the card is its containing block) */
body[data-nav-wip] .wam-result > .dt-side.is-open {
width: min(300px, calc(100% - 48px));
}/* ── upload card feedback (2026-09-19): hover / press / drag-over. The empty
card only (not the preview); light and dark. !important because the dark
guard above pins the card's colours, and the page's drag handler writes
inline border / background colours. ── */
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container {
transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
body[data-nav-wip] .dt-up-ico {
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container:is(:hover, .dt-drag):has(#uploadDefault:not([style*="none"])) {
border-color: #2563eb !important;
background-color: #eef4ff !important;
}
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container:is(:hover, .dt-drag) .dt-up-ico {
background: #2563eb !important;
color: #ffffff !important;
transform: translateY(-2px);
}
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container:hover .dt-up-title {
color: #1d4ed8 !important;
}
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container.dt-drag {
border-style: solid !important;
background-color: #e3edff !important;
}
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container:active:has(#uploadDefault:not([style*="none"])) {
transform: scale(.99);
}
body.dark-mode[data-nav-wip] .wam-op #uploadContainer.new-upload-container:is(:hover, .dt-drag):has(#uploadDefault:not([style*="none"])) {
border-color: #3b82f6 !important;
background-color: #1d2230 !important;
}
body.dark-mode[data-nav-wip] .wam-op #uploadContainer.new-upload-container:hover .dt-up-title {
color: #bfdbfe !important;
}
body.dark-mode[data-nav-wip] .wam-op #uploadContainer.new-upload-container.dt-drag {
background-color: #1e2a44 !important;
}/* the result compare: its container is sized to the generated picture (JS
fitCompare), so both pictures fill it - they line up even when the source
upload is smaller - and the container's own radius clips the corners */
body[data-nav-wip] .wr-lists.result > #imageCompareContainer {
border-radius: 14px;
overflow: hidden;
}
body[data-nav-wip] .wr-lists.result > #imageCompareContainer .compare-image-before img,
body[data-nav-wip] .wr-lists.result > #imageCompareContainer .compare-image-after img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
border-radius: 0 !important;
}/* Exterior: the same two-way row (Detailed Model | Massing Model) replaces the
Detail / Rough row, which is hidden there */
body.dt-ex-on[data-nav-wip] .wamo-1 > .new-param-row.dt-im-row {
display: flex !important;
}
body.dt-ex-on[data-nav-wip] .wamo-1 > .new-param-row.dt-cam-row {
display: none !important;
}/* ── fullscreen viewer: Comparison / Original / Generated move to the top-right
row beside close (and download when it shows), as a 38px pill - nothing sits
over the bottom of the picture. The fullscreen slider takes the same look as
the example / result compare: 2px white line, 36px white disc with chevrons. ── */
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-buttons {
position: fixed !important; /* its parent is the 90vw picture area; line up with close, which is on the modal */
top: 20px !important;
right: 68px !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
height: 38px;
box-sizing: border-box;
align-items: center;
padding: 3px !important;
border-radius: 999px !important;
}
body[data-nav-wip] #fullscreenModal:has(.fullscreen-download[style*="display: block"], .fullscreen-download[style*="display: flex"], .fullscreen-download[style*="display: inline"]) .fullscreen-toggle-buttons {
right: 116px !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn {
height: 32px !important;
padding: 0 14px !important;
border-radius: 999px !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-compare-slider {
width: 2px !important;
background: #ffffff !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .25) !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-compare-slider::before {
content: '' !important;
width: 36px !important;
height: 36px !important;
border: 0 !important;
border-radius: 50% !important;
background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 18px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06) !important;
cursor: ew-resize;
}
body[data-nav-wip] #fullscreenModal .fullscreen-compare-slider::after {
content: none !important;
}/* with the side rail up, the fullscreen key caps it: same 64px width, 16px
radius and fill as the collapsed rail, right edges already aligned */
body.dt-side-on[data-nav-wip] .wr-title #fullscreenBtn {
width: 64px !important;
border-radius: 8px !important; /* same corners as the compare / download keys */
justify-content: center !important; /* the icon sat at the left of the widened key */
padding: 0 !important;
gap: 0 !important;
}
body.dt-side-on[data-nav-wip] .wr-title #fullscreenBtn .dt-tab-txt {
display: none !important;
}/* the grid's own toolbar sits above the grid layer (the grid is z 14 with an
opaque fill, so at z 13 the bar was drawn but covered) and below the rail */
body[data-nav-wip] .dt-rv-tools.dt-rv-gridbar {
z-index: 15;
}
/* Edit key: dim until there is something to send (a picture to edit and a
prompt typed - .is-ready from the JS), then the bright light-grey */
body[data-nav-wip] .dt-rv-bar:not(.is-ready) .dt-rv-send {
background: #eceef1;
color: #9ca3af;
}
body[data-nav-wip] .dt-rv-bar:not(.is-ready) .dt-rv-send:hover {
background: #e4e6ea;
}
body[data-nav-wip] .dt-rv-bar.is-ready .dt-rv-send {
background: #111827;
color: #ffffff;
}
body[data-nav-wip] .dt-rv-bar.is-ready .dt-rv-send:hover {
background: #1f2937;
}
body.dark-mode[data-nav-wip] .dt-rv-bar:not(.is-ready) .dt-rv-send {
background: #2a2a2e;
color: #71717a;
}
body.dark-mode[data-nav-wip] .dt-rv-bar:not(.is-ready) .dt-rv-send:hover {
background: #313136;
}
body.dark-mode[data-nav-wip] .dt-rv-bar.is-ready .dt-rv-send {
background: #e5e7eb;
color: #111827;
}
body.dark-mode[data-nav-wip] .dt-rv-bar.is-ready .dt-rv-send:hover {
background: #f3f4f6;
}
body[data-nav-wip] .dt-rv-bar .dt-rv-send {
transition: background-color .15s ease, color .15s ease;
}/* source picker in dark mode: the anchored sheet kept its light-mode hairline
(#eef0f3) and read as a white outline; the example thumbs picked up white
rings. Dark hairline + deeper shadow; thumbs framed only on hover. */
body.dark-mode[data-nav-wip] .dt-pk-sheet,
body.dark-mode[data-nav-wip] .dt-pk-sheet.dt-pk-anchored {
border: 1px solid #2a2a2e !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3) !important;
}
body.dark-mode[data-nav-wip] .dt-pk-exit {
border: 2px solid transparent !important;
background: #2a2a2e !important;
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .dt-pk-exit:hover {
border-color: #3b82f6 !important;
}/* ── server projects (6j): "continue this project" on the project header, and
the prompt / kind under a picture in the lightbox ── */
body[data-nav-wip] .dt-sp-load {
margin-left: auto;
height: 32px;
padding: 0 14px;
border: 0;
border-radius: 999px;
background: #111827;
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
body[data-nav-wip] .dt-sp-load:hover {
background: #1f2937;
}
body.dark-mode[data-nav-wip] .dt-sp-load {
background: #e5e7eb;
color: #111827;
}
body.dark-mode[data-nav-wip] .dt-sp-load:hover {
background: #f3f4f6;
}
body[data-nav-wip] .dt-pj-lb img {
max-height: calc(100% - 140px);
}
body[data-nav-wip] .dt-sp-info {
max-width: min(640px, 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
color: #e5e7eb;
font-size: 13px;
line-height: 1.5;
}
body[data-nav-wip] .dt-sp-info b {
font-weight: 600;
color: #ffffff;
font-size: 12.5px;
}
body[data-nav-wip] .dt-sp-info span {
max-height: 3em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body[data-nav-wip] .dt-sp-use {
height: 28px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 999px;
background: transparent;
color: #ffffff;
font-size: 12.5px;
cursor: pointer;
}
body[data-nav-wip] .dt-sp-use:hover {
background: rgba(255, 255, 255, .12);
}/* import offer for projects this browser kept locally (6j) */
body[data-nav-wip] .dt-sp-banner {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 12px;
background: #eff4ff;
color: #1e3a8a;
font-size: 13px;
}
body[data-nav-wip] .dt-sp-banner span {
flex: 1 1 240px;
}
body[data-nav-wip] .dt-sp-import,
body[data-nav-wip] .dt-sp-skip {
height: 30px;
padding: 0 14px;
border: 0;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
body[data-nav-wip] .dt-sp-import {
background: #2563eb;
color: #ffffff;
}
body[data-nav-wip] .dt-sp-import:disabled {
opacity: .6;
cursor: default;
}
body[data-nav-wip] .dt-sp-skip {
background: transparent;
color: #1e3a8a;
}
body.dark-mode[data-nav-wip] .dt-sp-banner {
background: rgba(37, 99, 235, .14);
color: #bfdbfe;
}
body.dark-mode[data-nav-wip] .dt-sp-skip {
color: #bfdbfe;
}
/* ── [WIP 2026-09-21] toasts match the progress card ──────────────────────────
layer.msg toasts centre on the window, while the progress card centres on the
result area (which sits right of the rail and panel), so the two never lined
up and looked like two different components. On WIP pages a toast now wears
the progress card's surface, and 6k places it over the result area - just
above the card while a generation runs. Alert/confirm dialogs are untouched. */
body[data-nav-wip] .layui-layer.layui-layer-msg {
min-width: min(320px, calc(100vw - 32px)) !important;
max-width: min(420px, calc(100vw - 32px)) !important;
border-radius: 16px !important;
overflow: hidden !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
body[data-nav-wip]:not(.dark-mode) .layui-layer.layui-layer-msg {
background: rgba(255, 255, 255, .96) !important;
border: 1px solid rgba(17, 24, 39, .06) !important;
box-shadow: 0 12px 32px rgba(15, 23, 42, .12) !important;
}
body.dark-mode[data-nav-wip] .layui-layer.layui-layer-msg {
background: rgba(31, 31, 34, .94) !important;
border: 1px solid #2a2a2e !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, .35) !important;
}
body[data-nav-wip] .layui-layer.layui-layer-msg .layui-layer-content {
background: transparent !important;
padding: 18px 22px !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 22px !important;
text-align: center !important;
white-space: normal !important;
word-break: break-word;
}
body[data-nav-wip]:not(.dark-mode) .layui-layer.layui-layer-msg .layui-layer-content {
color: #111827 !important;
}
body.dark-mode[data-nav-wip] .layui-layer.layui-layer-msg .layui-layer-content {
color: #f5f5f6 !important;
}
/* ── [WIP 2026-09-21] assets you can drag onto the picture (6l) ────────────────
A hint under the categories; a real asset shows a grab cursor and some air
around its picture. The drag / transform styling lives in dt-asset-stage.css. */
body[data-nav-wip] .dt-mat-hint {
margin: -4px 12px 10px;
font-size: 11.5px;
line-height: 16px;
color: #6b7280;
}
body.dark-mode[data-nav-wip] .dt-mat-hint { color: #8b8b94; }
body[data-nav-wip] .dt-mat-item:not(.is-ph) { cursor: grab; }
body[data-nav-wip] .dt-mat-item:not(.is-ph) .dt-mat-face img {
padding: 10%;
box-sizing: border-box;
-webkit-user-drag: none;
user-select: none;
}
/* ── [WIP 2026-09-21] edit field: short at rest, full width in use ─────────────
The left panel's Generate is the main action; the edit field under the picture
rests at 480px and widens (existing width transition) while focused, typed in,
or carrying references / grid picks / placed assets. A small thumb at its
front shows which picture it edits (the big view; the grid shows its picks). */
body[data-nav-wip] .dt-rv-bar.is-open.is-compact {
width: min(480px, calc(100% - var(--dt-side, 0px) - 48px));
}
body[data-nav-wip] .dt-rv-bar.is-compact .dt-rv-editbox {
cursor: text;
}
body[data-nav-wip] .dt-rv-bar .dt-rv-prompt {
min-width: 0;
text-overflow: ellipsis;
}
body[data-nav-wip] .dt-rv-cur {
flex: 0 0 32px;
width: 32px;
height: 32px;
margin-left: -8px;
border-radius: 9px;
overflow: hidden;
background: #f3f4f6;
box-shadow: 0 0 0 1px rgba(17, 24, 39, .08);
}
body[data-nav-wip] .dt-rv-cur img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
body.dark-mode[data-nav-wip] .dt-rv-cur {
background: #1f1f22;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}
/* ── [WIP 2026-09-25 follow-up] Video's optional end frame: a slot the same
size as the start-frame thumbnail (.dt-rv-cur), video mode only. Empty
shows a "+" button; filled shows the picture with its own x. ── */
body[data-nav-wip] .dt-rv-vidend {
position: relative;
flex: 0 0 32px;
width: 32px;
height: 32px;
margin-left: 2px;
border-radius: 9px;
overflow: hidden;
background: #f3f4f6;
box-shadow: 0 0 0 1px rgba(17, 24, 39, .08);
}
body[data-nav-wip] .dt-rv-vidend[hidden] { display: none !important; }
body[data-nav-wip] .dt-rv-vidend-add {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: 0;
background: transparent;
color: #9ca3af;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-vidend-add:hover { color: #111827; background: #e5e7eb; }
body[data-nav-wip] .dt-rv-vidend img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
body[data-nav-wip] .dt-rv-vidend-x {
position: absolute;
top: 1px;
right: 1px;
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(17, 24, 39, .65);
color: #ffffff;
cursor: pointer;
}
body[data-nav-wip] .dt-rv-vidend-x:hover { background: rgba(0, 0, 0, .8); }
body.dark-mode[data-nav-wip] .dt-rv-vidend { background: #1f1f22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
body.dark-mode[data-nav-wip] .dt-rv-vidend-add { color: #71717a; }
body.dark-mode[data-nav-wip] .dt-rv-vidend-add:hover { color: #f5f5f6; background: #2a2a2e; }
/* the end-frame picker popover (mirrors .dt-tl-pop's look) */
body[data-nav-wip] .dt-vd-end-pop {
position: absolute;
z-index: 16;
top: 56px;
width: min(260px, calc(100% - 24px));
max-height: 280px;
overflow-y: auto;
padding: 10px;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
}
body[data-nav-wip] .dt-vd-end-pop[hidden] { display: none !important; }
body[data-nav-wip] .dt-vd-end-head {
margin-bottom: 8px;
font-size: 12.5px;
font-weight: 600;
color: #6b7280;
}
body[data-nav-wip] .dt-vd-end-upload {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
height: 32px;
margin-bottom: 8px;
padding: 0 10px;
border: 1px dashed #d4d8de;
border-radius: 8px;
background: transparent;
color: #374151;
font-size: 12.5px;
cursor: pointer;
}
body[data-nav-wip] .dt-vd-end-upload:hover { background: #f3f4f6; }
body[data-nav-wip] .dt-vd-end-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
body[data-nav-wip] .dt-vd-end-item {
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
background: #f3f4f6;
}
body[data-nav-wip] .dt-vd-end-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-nav-wip] .dt-vd-end-empty {
padding: 10px 2px;
font-size: 12.5px;
color: #9ca3af;
text-align: center;
}
body.dark-mode[data-nav-wip] .dt-vd-end-pop {
background: #1f1f22;
box-shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
}
body.dark-mode[data-nav-wip] .dt-vd-end-head { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-vd-end-upload { border-color: #3a3a3f; color: #d4d4d8; }
body.dark-mode[data-nav-wip] .dt-vd-end-upload:hover { background: #2a2a2e; }
body.dark-mode[data-nav-wip] .dt-vd-end-item { background: #2a2a2e; }
body.dark-mode[data-nav-wip] .dt-vd-end-empty { color: #71717a; }
@media (max-width: 640px) {
body[data-nav-wip] .dt-vd-end-pop { width: min(220px, calc(100% - 16px)); }
}
/* ── [WIP 2026-09-21] a result picture that no longer loads is hidden ─────────── */
body[data-nav-wip] .dt-rv-thumb.is-broken,
body[data-nav-wip] .dt-rv-cell.is-broken {
display: none !important;
}
/* ── [WIP 2026-09-21] tool Run keys are black, like the edit field's Edit ──────
Blue belongs to the left panel's Generate (a new render from the source);
actions on the current picture - the edit field's Edit and the tools' Run -
are black in light mode and light grey in dark mode. */
body[data-nav-wip] .dt-tl-run {
background: #111827;
color: #ffffff;
}
body[data-nav-wip] .dt-tl-run:hover {
background: #1f2937;
}
body.dark-mode[data-nav-wip] .dt-tl-run {
background: #e5e7eb;
color: #111827;
}
body.dark-mode[data-nav-wip] .dt-tl-run:hover {
background: #f3f4f6;
}
body[data-nav-wip] .dt-tl-run .dt-rv-cost {
opacity: .6;
}
/* ── [WIP 2026-09-21] tighter top inset on both panels ────────────────────────
The top of each card sat 29px above the tab row's visible pills, twice the
15px from the pills down to the canvas. Both cards now start 10px above the
44px tab row (15px to the pills), so the two gaps match and the canvas grows. */
@media (min-width: 769px) {
body[data-nav-wip] .wam-op {
padding-top: 10px !important;
}
body[data-nav-wip] .wr-title {
margin-top: 10px;
}
}
/* ── [WIP 2026-09-21] layout offer / undo bar and the Clear tool (6n) ─────────
A one-line pill 12px inside the picture's top edge: "restore last layout? ·
Restore · Ignore" after an upload, "cleared · Undo" after Clear. */
body[data-nav-wip] .dt-as-offer {
position: absolute;
z-index: 14;
display: flex;
align-items: center;
gap: 6px;
max-width: calc(100% - 32px);
padding: 5px 5px 5px 14px;
border-radius: 999px;
transform: translateX(-50%);
font-size: 13px;
line-height: 18px;
white-space: nowrap;
background: rgba(255, 255, 255, .97);
color: #111827;
box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}
body[data-nav-wip] .dt-as-offer[hidden],
body[data-nav-wip] .dt-as-offer [hidden],
body[data-nav-wip] .dt-rv-tools .dt-as-clear[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-as-offer-txt {
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px;
}
body[data-nav-wip] .dt-as-offer button {
flex: 0 0 auto;
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
body[data-nav-wip] .dt-as-offer-go {
background: #111827;
color: #fff;
}
body[data-nav-wip] .dt-as-offer-go:hover { background: #1f2937; }
body[data-nav-wip] .dt-as-offer-no {
background: transparent;
color: #6b7280;
}
body[data-nav-wip] .dt-as-offer-no:hover { background: #f3f4f6; color: #111827; }
body.dark-mode[data-nav-wip] .dt-as-offer {
background: rgba(31, 31, 34, .97);
color: #f5f5f6;
box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
body.dark-mode[data-nav-wip] .dt-as-offer-go { background: #e5e7eb; color: #111827; }
body.dark-mode[data-nav-wip] .dt-as-offer-go:hover { background: #f3f4f6; }
body.dark-mode[data-nav-wip] .dt-as-offer-no { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-as-offer-no:hover { background: #2a2a2e; color: #f5f5f6; }
/* ── [WIP 2026-09-21] the picture's stage: checkerboard, picture centred ───────
While a picture is on show (big view, compare included), the area it may use
- the result list's content box, between the tools and the edit field - shows
a Photoshop-style transparency checkerboard, and the contain-fitted picture
sits in its centre (it used to hug the top). A cut-out (Remove BG) reads as
transparent at once. The example showcase and the grid are untouched. */
body.dt-rs-result-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists.result {
align-items: center !important;
justify-content: center !important;
background-color: #ffffff;
background-image: conic-gradient(#e8eaed 90deg, #ffffff 90deg 180deg, #e8eaed 180deg 270deg, #ffffff 270deg);
background-size: 16px 16px;
background-position: 0 0;
background-origin: content-box;
background-clip: content-box;
}
body.dark-mode.dt-rs-result-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists.result {
background-color: #1c1c1f;
background-image: conic-gradient(#28282c 90deg, #1c1c1f 90deg 180deg, #28282c 180deg 270deg, #1c1c1f 270deg);
}
/* ── [WIP 2026-09-21] edit field as a tool (6o) and the Generate note (6p) ──── */
body[data-nav-wip] .dt-rv-tools .dt-rv-tool[hidden] {
display: none !important;
}
/* the x at the end of the edit field closes it */
body[data-nav-wip] .dt-rv-close {
flex: 0 0 32px;
width: 32px;
height: 32px;
margin-left: 2px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #9ca3af;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
body[data-nav-wip] .dt-rv-close:hover { background: #f3f4f6; color: #111827; }
body.dark-mode[data-nav-wip] .dt-rv-close { color: #71717a; }
body.dark-mode[data-nav-wip] .dt-rv-close:hover { background: #2a2a2e; color: #f5f5f6; }
/* one line under Generate Design: whether the canvas assets go with the render */
body[data-nav-wip] .dt-gen-note {
margin-top: 8px;
font-size: 12px;
line-height: 16px;
text-align: center;
color: #6b7280;
}
body[data-nav-wip] .dt-gen-note[hidden] { display: none !important; }
body[data-nav-wip] .dt-gen-note.is-with { color: #2563eb; font-weight: 500; }
body.dark-mode[data-nav-wip] .dt-gen-note { color: #8b8b94; }
body.dark-mode[data-nav-wip] .dt-gen-note.is-with { color: #93b4f8; }
/* ── [WIP 2026-09-21] one bottom field, two modes (6q) ─────────────────────────
Edit: quick actions sit in a row just above the field (chosen = black, run by
the send key). Video: resolution / length pills inside the field. */
body[data-nav-wip] .dt-rv-chips {
position: absolute;
left: 6px;
bottom: calc(100% + 8px);
display: flex;
gap: 6px;
}
body[data-nav-wip] .dt-rv-chips[hidden],
body.dt-rv-grid-on[data-nav-wip] .dt-rv-chips,
body[data-nav-wip] .dt-rv-vopts[hidden] {
display: none !important;
}
body[data-nav-wip] .dt-rv-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .96);
color: #374151;
font-size: 13px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
white-space: nowrap;
}
body[data-nav-wip] .dt-rv-chip svg { flex: 0 0 auto; }
body[data-nav-wip] .dt-rv-chip small {
font-size: 11.5px;
color: #9ca3af;
}
body[data-nav-wip] .dt-rv-chip:hover { background: #ffffff; color: #111827; }
body[data-nav-wip] .dt-rv-chip.is-on { background: #111827; color: #ffffff; }
body[data-nav-wip] .dt-rv-chip.is-on small { color: rgba(255, 255, 255, .6); }
body.dark-mode[data-nav-wip] .dt-rv-chip { background: rgba(31, 31, 34, .96); color: #d4d4d8; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
body.dark-mode[data-nav-wip] .dt-rv-chip:hover { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-rv-chip.is-on { background: #e5e7eb; color: #111827; }
body.dark-mode[data-nav-wip] .dt-rv-chip.is-on small { color: rgba(17, 24, 39, .6); }
body.dark-mode[data-nav-wip] .dt-rv-chip small { color: #71717a; }
/* a chosen quick action: the field shows what it does (read-only) */
body[data-nav-wip] .dt-rv-bar.is-tool .dt-rv-prompt { cursor: default; }
/* video options inside the field */
body[data-nav-wip] .dt-rv-vopts {
display: inline-flex;
gap: 4px;
flex: 0 0 auto;
}
body[data-nav-wip] .dt-rv-vsel {
height: 30px;
padding: 0 8px;
border: 0;
border-radius: 999px;
background: #f3f4f6;
color: #374151;
font-size: 12.5px;
cursor: pointer;
outline: none;
}
body[data-nav-wip] .dt-rv-vsel:hover { background: #e5e7eb; }
body.dark-mode[data-nav-wip] .dt-rv-vsel { background: #2a2a2e; color: #d4d4d8; }
body.dark-mode[data-nav-wip] .dt-rv-vsel:hover { background: #34343a; }
/* the selects above as a pill key + a menu that opens upward (vselDropup, 2026-09-27) */
body[data-nav-wip] .dt-dd {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
body[data-nav-wip] .dt-dd-key {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 9px 0 12px;
border: 0;
border-radius: 999px;
background: #f3f4f6;
color: #374151;
font-size: 12.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background .15s, color .15s;
}
body[data-nav-wip] .dt-dd-key svg {
width: 12px;
height: 12px;
color: #9ca3af;
transition: transform .18s ease;
}
body[data-nav-wip] .dt-dd-key:hover,
body[data-nav-wip] .dt-dd.is-open .dt-dd-key { background: #e5e7eb; color: #111827; }
body[data-nav-wip] .dt-dd.is-open .dt-dd-key svg { transform: rotate(180deg); }
body[data-nav-wip] .dt-dd-key:focus-visible { outline: 2px solid #9ca3af; outline-offset: 1px; }
body[data-nav-wip] .dt-dd-menu {
position: absolute;
z-index: 40;
bottom: calc(100% + 10px);
left: 50%;
min-width: max(100%, 136px);
padding: 5px;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
box-shadow: 0 14px 36px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06);
transform: translateX(-50%);
animation: dtDdUp .14s ease-out;
}
@keyframes dtDdUp {
from { opacity: 0; transform: translate(-50%, 4px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
body[data-nav-wip] .dt-dd-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 34px;
padding: 0 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: #374151;
font-size: 13px;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
body[data-nav-wip] .dt-dd-item:hover,
body[data-nav-wip] .dt-dd-item:focus-visible { background: #f3f4f6; outline: none; }
body[data-nav-wip] .dt-dd-item.is-on { color: #111827; font-weight: 600; }
body[data-nav-wip] .dt-dd-txt { flex: 1 1 auto; }
body[data-nav-wip] .dt-dd-cost {
color: #9ca3af;
font-size: 11.5px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
body[data-nav-wip] .dt-dd-cost::before { content: '-'; }
body[data-nav-wip] .dt-dd-check {
flex: 0 0 12px;
width: 12px;
height: 12px;
color: #111827;
visibility: hidden;
}
body[data-nav-wip] .dt-dd-item.is-on .dt-dd-check { visibility: visible; }
body.dark-mode[data-nav-wip] .dt-dd-key { background: #2a2a2e; color: #d4d4d8; }
body.dark-mode[data-nav-wip] .dt-dd-key svg { color: #71717a; }
body.dark-mode[data-nav-wip] .dt-dd-key:hover,
body.dark-mode[data-nav-wip] .dt-dd.is-open .dt-dd-key { background: #34343a; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-dd-menu {
border-color: #2e2e33;
background: #1f1f22;
box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02);
}
body.dark-mode[data-nav-wip] .dt-dd-item { color: #d4d4d8; }
body.dark-mode[data-nav-wip] .dt-dd-item:hover,
body.dark-mode[data-nav-wip] .dt-dd-item:focus-visible { background: #2a2a2e; }
body.dark-mode[data-nav-wip] .dt-dd-item.is-on { color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-dd-cost { color: #71717a; }
body.dark-mode[data-nav-wip] .dt-dd-check { color: #f5f5f6; }
/* ── [WIP 2026-09-21] the picture's tools in the tab row (6r) ────────────────
The tools sit in the Results / History / Examples row, centred on the canvas
(JS writes left), as a quiet 34px group the same height as the tabs; the
canvas no longer reserves a 58px band for a bar floating over the picture.
Icon-only when the row is too narrow. The old hover row's Generate Video /
Image Edit never show on these pages (the Edit and Video tools replace them). */
body[data-nav-wip] .wr-title {
position: relative;
}
body[data-nav-wip] .wr-title > .dt-rv-tools-top {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
padding: 3px;
border-radius: 10px;
background: #f5f6f8;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transition: none;
}
body.dark-mode[data-nav-wip] .wr-title > .dt-rv-tools-top {
background: #1f1f22;
}
body[data-nav-wip] .dt-rv-tools-top.is-icons .dt-rv-tool-txt {
display: none;
}
body[data-nav-wip] .dt-rv-tools-top.is-icons .dt-rv-tool {
padding: 0 8px;
}
body.dt-rs-result-on[data-nav-wip] .wr-lists.result {
padding-top: 16px !important;
}
body[data-nav-wip] .dt-rv-grid {
padding-top: 16px;
}
body[data-nav-wip] .dt-tl-pop {
top: 8px;
}
body[data-nav-wip] .floating-buttons :is(.video-btn, .edit-btn) {
display: none !important;
}
/* ── [WIP 2026-09-21] tighter gap between the panels; fullscreen key corners ── */
body[data-nav-wip] .web-ai-main {
gap: 16px !important; /* 20px -> 13px was tighter than every other spacing (24 / 28); 16 keeps it compact */
}
body[data-nav-wip] .wr-title #fullscreenBtn {
border-radius: 8px !important; /* same corners as the compare / download keys */
}
/* ── [WIP 2026-09-21] the checkerboard fills the whole canvas box ──────────────
It used to cover only the picture's content box, leaving a 16px grey band of
the box around it - two textures side by side. The whole rounded box is the
checkerboard now, with a 1px hairline around it. */
body.dt-rs-result-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists.result {
background: transparent !important;
}
body.dt-rs-result-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists-box:not(:has(.dt-showcase.on)) {
background-color: #ffffff;
background-image: conic-gradient(#e8eaed 90deg, #ffffff 90deg 180deg, #e8eaed 180deg 270deg, #ffffff 270deg);
background-size: 16px 16px;
box-shadow: inset 0 0 0 1px #e5e7eb;
}
body.dark-mode.dt-rs-result-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists-box:not(:has(.dt-showcase.on)) {
background-color: #1c1c1f;
background-image: conic-gradient(#28282c 90deg, #1c1c1f 90deg 180deg, #28282c 180deg 270deg, #1c1c1f 270deg);
box-shadow: inset 0 0 0 1px #2a2a2e;
}
/* ── [WIP 2026-09-21] quick actions: Remove BG / Upscale / Remove / Comment (6s) ── */
body[data-nav-wip] .dt-rv-chips {
flex-wrap: wrap;
max-width: calc(100% - 12px);
}
body[data-nav-wip] .dt-rv-chip.is-soon {
opacity: .6;
}
body[data-nav-wip] .dt-rv-chip.is-soon:hover {
opacity: .85;
}body[data-nav-wip] .dt-rv-chips {
flex-wrap: nowrap;
max-width: none;
width: max-content;
}
/* ── [WIP 2026-09-21] a stage line under the progress (6t) ─────────────────── */
body[data-nav-wip] .wr-lists-box > .progress .dt-p-stage {
position: relative;
margin-top: -14px;
padding: 0 20px 20px;
font-size: 12.5px;
line-height: 18px;
text-align: center;
color: #6b7280;
}
body[data-nav-wip] .wr-lists-box > .progress .dt-p-stage[hidden] { display: none; }
body.dark-mode[data-nav-wip] .wr-lists-box > .progress .dt-p-stage { color: #a1a1aa; }
body[data-nav-wip] .dt-rv-pend-stage {
display: block;
margin-top: 10px;
font-size: 12px;
color: #6b7280;
text-align: center;
}
body.dark-mode[data-nav-wip] .dt-rv-pend-stage { color: #a1a1aa; }
body[data-nav-wip] :is(.dt-p-stage, .dt-rv-pend-stage).is-in {
animation: dtStageIn .45s ease both;
}
@keyframes dtStageIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: none; }
}
/* ── [WIP 2026-09-21] the picture keeps a 16px margin on every side ──────────── */
body.dt-rs-result-on[data-nav-wip]:not(.dt-rv-bar-on) .wr-lists.result {
padding-bottom: 16px !important;
}
/* ── [WIP 2026-09-21] video results in the canvas (6v) ──────────────────────── */
body[data-nav-wip] .wr-lists.result > video.dt-vid {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
border-radius: 14px;
background: #000;
outline: none;
}
body.dt-vid-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists.result {
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
background: transparent !important;
}
body.dt-vid-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists-box {
background-color: #ffffff;
background-image: conic-gradient(#e8eaed 90deg, #ffffff 90deg 180deg, #e8eaed 180deg 270deg, #ffffff 270deg);
background-size: 16px 16px;
box-shadow: inset 0 0 0 1px #e5e7eb;
}
body.dark-mode.dt-vid-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists-box {
background-color: #1c1c1f;
background-image: conic-gradient(#28282c 90deg, #1c1c1f 90deg 180deg, #28282c 180deg 270deg, #1c1c1f 270deg);
box-shadow: inset 0 0 0 1px #2a2a2e;
}
/* compare has no meaning for a video */
body.dt-vid-on[data-nav-wip] .wr-title .dt-rs-key.dt-rs-compare {
display: none !important;
}
/* [WIP 2026-09-25] the page's own bottom-of-canvas Compare/Download pills
(.floating-buttons, shown on hover over the video's native controls) have no
role once a video is on show - Download/Fullscreen already sit in the
top-right key row (6b/6v) and Compare has no meaning for a video. Hide the
whole legacy row so it never appears over the video. */
body.dt-vid-on[data-nav-wip] .floating-buttons {
display: none !important;
}
/* thumbs / grid cells: first frame + a play mark */
body[data-nav-wip] :is(.dt-rv-thumb, .dt-rv-cell).is-video {
position: relative;
}
body[data-nav-wip] .dt-rv-thumb.is-video video,
body[data-nav-wip] .dt-rv-thumb.is-video img.dt-rv-poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
body[data-nav-wip] .dt-rv-cell.is-video img.dt-rv-poster,
body[data-nav-wip] .dt-rv-cell.is-video video {
display: block;
width: 100%;
height: auto;
pointer-events: none;
background: #000;
}
body[data-nav-wip] .dt-vid-mark {
position: absolute;
left: 50%;
top: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border-radius: 50%;
background: rgba(17, 24, 39, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 14px;
pointer-events: none;
}
body[data-nav-wip] .dt-rv-cell.is-video .dt-vid-mark {
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
background-size: 20px;
}
/* ── [WIP 2026-09-21] no scrollbar on the single-picture canvas ────────────────
The picture (or compare / video) is fitted to the canvas, so the canvas never
needs to scroll; a sub-pixel overflow (browser zoom, rounding) used to show a
full-height scrollbar at its right edge. Several pictures stacked by the page
still scroll. */
body.dt-rs-result-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists.result:not(:has(> img ~ img)),
body.dt-vid-on[data-nav-wip]:not(.dt-rv-grid-on) .wr-lists.result {
overflow: hidden !important;
}
/* ── [WIP 2026-09-21] reference slot inside the prompt box (6w) ───────────────
Exterior · Massing · Reference: the big upload panel gives way to a 92px
slot at the prompt box's left; the text keeps the rest of the box. */
body.dt-ref-on[data-nav-wip] #refImageUpload {
display: none !important;
}
body.dt-ref-on[data-nav-wip] .wamo-1 {
position: relative;
}
body.dt-ref-on[data-nav-wip] .wamo-1 #newPromptInput {
display: block !important;
min-height: 132px !important;
padding-left: 118px !important;
}
body[data-nav-wip] .dt-ref-slot {
position: absolute;
z-index: 2;
width: 92px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
body[data-nav-wip] .dt-ref-slot[hidden],
body[data-nav-wip] .dt-ref-slot [hidden] {
display: none !important;
}
body[data-nav-wip] .dt-ref-add,
body[data-nav-wip] .dt-ref-pic {
width: 92px;
height: 92px;
border-radius: 12px;
box-sizing: border-box;
}
body[data-nav-wip] .dt-ref-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0;
border: 1.5px dashed #cbd5e1;
background: #ffffff;
color: #6b7280;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
body[data-nav-wip] .dt-ref-add:hover,
body[data-nav-wip] .dt-ref-slot.is-over .dt-ref-add {
border-color: #2563eb;
color: #2563eb;
background: #eff6ff;
}
body[data-nav-wip] .dt-ref-pic {
position: relative;
overflow: hidden;
cursor: pointer;
background: #ffffff;
box-shadow: 0 0 0 1px rgba(17, 24, 39, .08), 0 2px 6px rgba(15, 23, 42, .08);
}
body[data-nav-wip] .dt-ref-slot.is-over .dt-ref-pic {
box-shadow: 0 0 0 2px #2563eb;
}
body[data-nav-wip] .dt-ref-pic img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body[data-nav-wip] .dt-ref-x {
position: absolute;
top: 5px;
right: 5px;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(17, 24, 39, .6);
color: #ffffff;
font-size: 15px;
line-height: 22px;
cursor: pointer;
}
body[data-nav-wip] .dt-ref-x:hover { background: #dc2626; }
body[data-nav-wip] .dt-ref-lib {
padding: 0;
border: 0;
background: none;
color: #2563eb;
font-size: 12px;
font-weight: 500;
text-align: center;
cursor: pointer;
}
body[data-nav-wip] .dt-ref-lib:hover { text-decoration: underline; }
body.dt-ref-on[data-nav-wip] #refModeButtons {
margin-top: 8px;
}
body.dark-mode[data-nav-wip] .dt-ref-add {
border-color: #3f3f46;
background: #1f1f22;
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-ref-add:hover,
body.dark-mode[data-nav-wip] .dt-ref-slot.is-over .dt-ref-add {
border-color: #2563eb;
color: #93b4f8;
background: rgba(37, 99, 235, .12);
}
body.dark-mode[data-nav-wip] .dt-ref-pic {
background: #1f1f22;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
body.dark-mode[data-nav-wip] .dt-ref-lib { color: #93b4f8; }body.dt-ref-on[data-nav-wip] .wamo-1 #newPromptInput {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
}
/* Effect / Block / Linework: a quiet segmented switch under the prompt box */
body.dt-ref-on[data-nav-wip] #refModeButtons {
display: flex;
gap: 2px;
padding: 3px;
border-radius: 10px;
background: #f3f4f6;
width: auto !important;
}
body.dt-ref-on[data-nav-wip] #refModeButtons .ref-mode-btn {
flex: 1 1 0;
height: 30px;
margin: 0 !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: 8px !important;
background: transparent !important;
color: #4b5563 !important;
font-size: 12.5px !important;
font-weight: 500;
box-shadow: none !important;
cursor: pointer;
}
body.dt-ref-on[data-nav-wip] #refModeButtons .ref-mode-btn.active {
background: #ffffff !important;
color: #111827 !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important;
}
body.dark-mode.dt-ref-on[data-nav-wip] #refModeButtons {
background: #1f1f22;
}
body.dark-mode.dt-ref-on[data-nav-wip] #refModeButtons .ref-mode-btn {
color: #a1a1aa !important;
}
body.dark-mode.dt-ref-on[data-nav-wip] #refModeButtons .ref-mode-btn.active {
background: #2a2a2e !important;
color: #f5f5f6 !important;
}body.dt-ref-on[data-nav-wip] #refModeButtons { width: 100% !important; box-sizing: border-box; }
/* ── [WIP 2026-09-21] the page's notice dialog (customAlert) ─────────────────
Same language as the other WIP dialogs: a 16px sheet, left-aligned title and
text, a round close key, one quiet black confirm key (light grey in dark) -
no gradient. Dark mode reads dark-on-dark correctly (it was light grey text
on a white sheet). */
body[data-nav-wip] .custom-modal {
background: rgba(15, 23, 42, .45) !important;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
body[data-nav-wip] .custom-modal .custom-modal-content {
width: min(420px, calc(100vw - 32px)) !important;
max-width: none !important;
padding: 20px 20px 16px !important;
border: 0 !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 20px 50px rgba(15, 23, 42, .22) !important;
text-align: left !important;
}
body[data-nav-wip] .custom-modal .custom-modal-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body[data-nav-wip] .custom-modal .custom-modal-header h3 {
margin: 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 24px !important;
color: #111827 !important;
}
body[data-nav-wip] .custom-modal .custom-modal-close {
flex: 0 0 32px;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
color: #9ca3af !important;
font-size: 20px !important;
line-height: 32px !important;
cursor: pointer;
}
body[data-nav-wip] .custom-modal .custom-modal-close:hover {
background: #f3f4f6 !important;
color: #111827 !important;
}
body[data-nav-wip] .custom-modal .custom-modal-body {
margin: 8px 0 0 !important;
padding: 0 !important;
background: transparent !important;
}
body[data-nav-wip] .custom-modal .custom-modal-body p {
margin: 0 !important;
font-size: 14px !important;
line-height: 22px !important;
color: #4b5563 !important;
text-align: left !important;
}
body[data-nav-wip] .custom-modal .custom-modal-footer {
display: flex !important;
justify-content: flex-end !important;
margin: 20px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body[data-nav-wip] .custom-modal .custom-modal-btn {
min-width: 88px;
height: 36px !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 10px !important;
background: #111827 !important;
background-image: none !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 600 !important;
box-shadow: none !important;
transform: none !important;
cursor: pointer;
}
body[data-nav-wip] .custom-modal .custom-modal-btn:hover {
background: #1f2937 !important;
}
body.dark-mode[data-nav-wip] .custom-modal {
background: rgba(0, 0, 0, .55) !important;
}
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-content {
background: #1f1f22 !important;
box-shadow: 0 0 0 1px #2a2a2e, 0 20px 50px rgba(0, 0, 0, .5) !important;
}
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-header h3 { color: #f5f5f6 !important; }
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-body p { color: #a1a1aa !important; }
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-close { color: #71717a !important; }
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-close:hover { background: #2a2a2e !important; color: #f5f5f6 !important; }
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-btn { background: #e5e7eb !important; color: #111827 !important; }
body.dark-mode[data-nav-wip] .custom-modal .custom-modal-btn:hover { background: #f3f4f6 !important; }
/* ── [WIP 2026-09-21] reference mode: switch closer to the box, engine kept ─── */
body.dt-ref-on[data-nav-wip] #refModeButtons {
margin-top: -4px !important; /* 6px under the prompt box (the column gap is 10px) */
}
/* the page hides the render-engine row in reference mode; keep it */
body.dt-ref-on[data-nav-wip] .wamo-1 #promptInline {
display: flex !important;
}
/* ── [WIP 2026-09-22] upload preview ×: 8px inside the drawn picture (placed by
6x in JS), smaller, and only its colour animates (no slide when placed) ── */
body[data-nav-wip] .new-upload-preview > .new-close-btn {
width: 28px !important;
height: 28px !important;
font-size: 17px !important;
line-height: 1 !important;
transition: background-color .2s ease !important;
}
/* ── [WIP 2026-09-22] the edit field keeps one length ──────────────────────────
No short resting width (JS no longer sets .is-compact), a fixed-width send key
with short labels, and the mode options (Upscale 2K / 4K, video resolution /
length) inside the field at the prompt's right end (a fixed slot) - so the field
and the send key stay put in Edit, Remove BG, Upscale and Video. */
body[data-nav-wip] .dt-rv-bar .dt-rv-send {
flex: 0 0 148px;
width: 148px;
justify-content: center;
white-space: nowrap;
overflow: hidden;
}
body[data-nav-wip] .dt-rv-bar .dt-rv-send .dt-rv-send-txt {
overflow: hidden;
text-overflow: ellipsis;
}
body[data-nav-wip] .dt-rv-chips {
align-items: center;
flex-wrap: wrap; /* the field is always full width now: wrap inside it, upwards */
width: auto;
max-width: calc(100% - 12px);
}
body[data-nav-wip] .dt-rv-chip[hidden] {
display: none !important;
}
/* the prompt and the mode's options share one fixed slot (flex 1): the options
sit at the prompt's right end, inside the field, and nothing else moves */
body[data-nav-wip] .dt-rv-inwrap {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
body[data-nav-wip] .dt-rv-inwrap .dt-rv-prompt {
flex: 1 1 auto;
min-width: 0;
}
body[data-nav-wip] .dt-rv-inwrap .dt-rv-vopts {
flex: 0 0 auto;
gap: 4px;
}
@media (max-width: 900px) {
body[data-nav-wip] .dt-rv-bar .dt-rv-send {
flex-basis: 120px;
width: 120px;
}
}
/* [WIP 2026-09-25 follow-up] Video's extra end-frame slot is one thumbnail too
many for a narrow pill: past this width it steps aside so the prompt input
keeps a usable, non-zero width instead of being squeezed to nothing by the
two fixed-size thumbnails plus two selects. The picker is still reachable
at comfortable widths; this only trims it where space is genuinely tight. */
@media (max-width: 1200px) {
body[data-nav-wip] .dt-rv-bar.is-video .dt-rv-vidend { display: none !important; }
}
body[data-nav-wip] .dt-rv-bar.is-video .dt-rv-prompt {
min-width: 36px;
}
/* ── [WIP 2026-09-22] Markup (6z): the drawing strip takes the chips' place above
the field while open; the Markup chip carries a dot while marks exist ── */
body[data-nav-wip] .dt-rv-bar > .dt-mk-bar {
position: absolute;
left: 6px;
bottom: calc(100% + 8px);
z-index: 2;
}
body[data-nav-wip] .dt-rv-bar.dt-mk-open > .dt-rv-chips {
display: none !important;
}
body.dt-rv-grid-on[data-nav-wip] .dt-rv-bar > .dt-mk-bar {
display: none !important;
}
body[data-nav-wip] .dt-rv-chip-mk {
position: relative;
}
body[data-nav-wip] .dt-rv-chip-dot {
display: none;
position: absolute;
top: 5px;
right: 7px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #ef4444;
}
body[data-nav-wip] .dt-rv-chip-mk.has-marks .dt-rv-chip-dot {
display: block;
}
/* ── [WIP 2026-09-22] Edit / Video / Assets are one mode at a time ────────────
Assets: the markup strip stays up (no close key - it leaves with the mode) and
the whole-picture quick actions are hidden; in Edit they are dimmed while
assets are on the canvas (they would leave them out). */
body[data-nav-wip] .dt-rv-bar.is-assets .dt-mk-key[data-k="close"],
body[data-nav-wip] .dt-rv-bar.is-assets .dt-mk-bar > span.dt-mk-sep:nth-of-type(2) {
display: none !important;
}
body[data-nav-wip] .dt-rv-chip.is-off {
opacity: .4;
cursor: not-allowed;
}
/* ── [WIP 2026-09-22] My assets (6ab): the + tile, uploads in progress, a delete
key on hover, the Undo line, and the rail lit while files are dragged over ── */
body[data-nav-wip] .dt-mine-up .dt-mat-face {
display: flex;
align-items: center;
justify-content: center;
border: 1.5px dashed #c7ccd4;
background: transparent !important;
color: #6b7280;
box-sizing: border-box;
}
body[data-nav-wip] .dt-mine-up:hover .dt-mat-face { border-color: #2563eb; color: #2563eb; }
body.dark-mode[data-nav-wip] .dt-mine-up .dt-mat-face { border-color: #3f3f46; color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-mine-up:hover .dt-mat-face { border-color: #3b82f6; color: #93c5fd; }
body[data-nav-wip] .dt-mine,
body[data-nav-wip] .dt-mine-pending { position: relative; }
body[data-nav-wip] .dt-mine .dt-mat-face img { object-fit: contain; }
body[data-nav-wip] .dt-mine-pending .dt-mat-face { position: relative; }
body[data-nav-wip] .dt-mine-pending img { opacity: .45; object-fit: contain; }
body[data-nav-wip] .dt-mine-spin {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #2563eb;
border-right-color: transparent;
border-radius: 50%;
animation: dt-mine-spin .8s linear infinite;
}
@keyframes dt-mine-spin { to { transform: rotate(360deg); } }
body[data-nav-wip] .dt-mine-x {
position: absolute;
top: 4px;
right: 4px;
display: none;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(17, 24, 39, .72);
color: #ffffff;
cursor: pointer;
}
body[data-nav-wip] .dt-mine:hover .dt-mine-x,
body[data-nav-wip] .dt-mine:focus-visible .dt-mine-x { display: flex; }
body[data-nav-wip] .dt-mine-x:hover { background: #dc2626; }
body[data-nav-wip] .dt-mine-undo {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 6px 6px 10px;
border-radius: 10px;
background: #111827;
color: #f3f4f6;
font-size: 12px;
}
body[data-nav-wip] .dt-mine-undo span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-nav-wip] .dt-mine-undo-btn {
flex: 0 0 auto;
padding: 4px 10px;
border: 0;
border-radius: 7px;
background: #ffffff;
color: #111827;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
body.dark-mode[data-nav-wip] .dt-mine-undo { background: #e5e7eb; color: #111827; }
body.dark-mode[data-nav-wip] .dt-mine-undo-btn { background: #111827; color: #ffffff; }
body[data-nav-wip] .dt-side.is-file-over { box-shadow: inset 0 0 0 2px #2563eb; }
/* ── [WIP 2026-09-22] Assets mode is one row: the markup strip, then Blend in and
close - no prompt field (notes go on the picture with the Text tool). The
reference thumbs still show when there are any. ── */
body[data-nav-wip] .dt-rv-bar.is-open.is-assets {
width: auto !important;
display: flex;
align-items: center;
gap: 8px;
}
body[data-nav-wip] .dt-rv-bar.is-assets > .dt-mk-bar {
position: static;
height: 48px;
padding: 0 8px;
}
/* ── [WIP 2026-09-25] Remove (object erase, erase_object lane): a canvas
overlay on the picture for marking the area to erase (brush or a closed
area). The controls live in the shared bottom bar itself, not a floating
panel: while Remove is active (.dt-rv-bar.is-remove) the prompt / the other
modes' select / the reference thumbs step aside inside .dt-rv-inwrap and
.dt-rm-bar takes their place - Brush/Area, size (brush only), Undo, Clear,
then the bar's own Run and close x carry on unchanged. Nothing floats over
the picture except this canvas layer and the brush cursor ring. ── */
body[data-nav-wip] .dt-rm-layer {
position: absolute;
z-index: 13;
pointer-events: auto;
/* area mode: ring + centre dot (same glyph as Markup's shapes) */
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='white' stroke-width='3.5'/%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23111827' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23111827' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, crosshair;
touch-action: none;
}
/* brush mode: the size ring (.dt-rm-cursor) is the cursor */
body[data-nav-wip] .dt-rm-layer.is-brush { cursor: none; }
body[data-nav-wip] .dt-rm-layer[hidden] { display: none !important; }
body[data-nav-wip] .dt-rm-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
body[data-nav-wip] .dt-rm-cursor {
position: absolute;
border: 1.5px solid #2563eb;
background: rgba(37, 99, 235, .12);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
body[data-nav-wip] .dt-rm-bar {
display: none;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
body[data-nav-wip] .dt-rv-bar.is-remove .dt-rm-bar {
display: flex;
}
body[data-nav-wip] .dt-rv-bar.is-remove .dt-rv-prompt,
body[data-nav-wip] .dt-rv-bar.is-remove .dt-rv-vopts,
body[data-nav-wip] .dt-rv-bar.is-remove .dt-rv-refs {
display: none !important;
}
body[data-nav-wip] .dt-rm-modes {
flex: 0 0 auto;
display: flex;
gap: 2px;
padding: 2px;
border-radius: 8px;
background: #f3f4f6;
}
body[data-nav-wip] .dt-rm-mode {
flex: 0 0 auto;
height: 26px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: #6b7280;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
body[data-nav-wip] .dt-rm-mode.is-on {
background: #ffffff;
color: #111827;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .dt-rm-size-input {
flex: 0 0 100px;
width: 100px;
}
body[data-nav-wip] .dt-rm-size-input[hidden] { display: none !important; }
body[data-nav-wip] .dt-rm-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #6b7280;
cursor: pointer;
}
body[data-nav-wip] .dt-rm-icon:hover {
background: #f3f4f6;
color: #111827;
}
body[data-nav-wip] .dt-rm-hint {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: #9ca3af;
}
@media (max-width: 1100px) {
body[data-nav-wip] .dt-rm-hint { display: none; }
body[data-nav-wip] .dt-rm-size-input { display: none !important; }
}
@media (max-width: 640px) {
body[data-nav-wip] .dt-rm-modes { padding: 1px; }
body[data-nav-wip] .dt-rm-mode { padding: 0 7px; }
}
body.dark-mode[data-nav-wip] .dt-rm-cursor { border-color: #60a5fa; background: rgba(96, 165, 250, .16); }
body.dark-mode[data-nav-wip] .dt-rm-modes { background: #161618; }
body.dark-mode[data-nav-wip] .dt-rm-mode { color: #9ca3af; }
body.dark-mode[data-nav-wip] .dt-rm-mode.is-on { background: #34343a; color: #f5f5f6; box-shadow: none; }
body.dark-mode[data-nav-wip] .dt-rm-icon { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-rm-icon:hover { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-rm-hint { color: #71717a; }
/* ── [WIP 2026-09-25] Comment (Codex-style pinned comments, nano_banana_2
lane): a click layer over the picture (.dt-cm-layer, positioned exactly
like Remove's .dt-rm-layer via DtAssetStage.contentRect, so pins track
zoom/pan/resize) holds numbered pins and one open bubble at a time. The
bottom bar itself only grows a compact chip list to the left of the
prompt input (.dt-cm-bar, shown via .dt-rv-bar.is-comment) - unlike
Remove, the prompt input stays live for optional extra instructions. ── */
body[data-nav-wip] .dt-cm-layer {
position: absolute;
z-index: 13;
/* comment bubble with a "+", hotspot at its pointed corner (where the pin lands) */
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V12a9 9 0 1 1 9 9z' fill='%23111827' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12 8.5v7M8.5 12h7' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 3 21, crosshair;
touch-action: none;
}
body[data-nav-wip] .dt-cm-layer[hidden] { display: none !important; }
body[data-nav-wip] .dt-cm-pin {
position: absolute;
transform: translate(-50%, -50%);
width: 22px;
height: 22px;
padding: 0;
border: 2px solid #ffffff;
border-radius: 50%;
background: #2563eb;
color: #ffffff;
font-size: 11px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
body[data-nav-wip] .dt-cm-pin:hover { background: #1d4ed8; }
body[data-nav-wip] .dt-cm-pin.is-active {
background: #1d4ed8;
box-shadow: 0 0 0 4px rgba(37, 99, 235, .28), 0 1px 4px rgba(0, 0, 0, .35);
}
body[data-nav-wip] .dt-cm-bubble {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
max-width: min(320px, calc(100% - 12px));
padding: 5px 6px 5px 12px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .06);
cursor: default;
}
body[data-nav-wip] .dt-cm-input {
flex: 1 1 auto;
min-width: 140px;
width: 140px;
height: 26px;
border: 0;
background: transparent;
color: #111827;
font-size: 13px;
outline: none;
}
body[data-nav-wip] .dt-cm-input::placeholder { color: #9ca3af; }
body[data-nav-wip] .dt-cm-send,
body[data-nav-wip] .dt-cm-del {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
}
body[data-nav-wip] .dt-cm-send {
background: #111827;
color: #ffffff;
}
body[data-nav-wip] .dt-cm-send:hover { background: #000000; }
body[data-nav-wip] .dt-cm-del {
background: transparent;
color: #9ca3af;
font-size: 16px;
line-height: 1;
}
body[data-nav-wip] .dt-cm-del:hover { background: #f3f4f6; color: #111827; }
body.dark-mode[data-nav-wip] .dt-cm-bubble {
background: #1f1f22;
box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}
body.dark-mode[data-nav-wip] .dt-cm-input { color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-cm-input::placeholder { color: #71717a; }
body.dark-mode[data-nav-wip] .dt-cm-send { background: #e5e7eb; color: #111827; }
body.dark-mode[data-nav-wip] .dt-cm-send:hover { background: #f3f4f6; }
body.dark-mode[data-nav-wip] .dt-cm-del { color: #71717a; }
body.dark-mode[data-nav-wip] .dt-cm-del:hover { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-cm-pin { border-color: #1f1f22; }
/* [WIP 2026-09-25 follow-up] the chip row is a line of its own, above the
input row, inside the same pill - not squeezed between the input and the
send key. .dt-cm-bar is a DIRECT child of .dt-rv-editbox (not nested under
.dt-rv-inwrap): order:-1 plus flex:1 0 100% makes it the pill's first flex
line when the pill itself wraps (.is-comment.has-comments below), so the
thumbnail/input/send/close row is pushed to the next line unchanged. With
zero comments .dt-cm-bar stays display:none and the pill looks exactly as
it did before Comment existed - no wrap, no extra row. */
body[data-nav-wip] .dt-rv-bar.is-comment.has-comments .dt-rv-editbox {
flex-wrap: wrap;
height: auto;
min-height: 48px;
row-gap: 6px;
padding: 8px 6px 6px 12px;
border-radius: 20px;
align-items: center;
}
body[data-nav-wip] .dt-cm-bar {
display: none;
order: -1;
flex: 1 0 100%;
width: 100%;
align-items: center;
gap: 6px;
}
body[data-nav-wip] .dt-rv-bar.is-comment.has-comments .dt-cm-bar { display: flex; }
body[data-nav-wip] .dt-cm-chips {
display: flex;
flex: 1 1 0;
flex-wrap: wrap;
align-content: flex-start;
gap: 6px;
min-width: 0;
max-height: 60px;
overflow-y: auto;
overflow-x: hidden;
padding: 1px;
}
body[data-nav-wip] .dt-cm-chip {
flex: 0 1 auto;
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
max-width: 260px;
height: 24px;
padding: 0 4px 0 6px;
border-radius: 999px;
background: #f3f4f6;
color: #111827;
font-size: 12px;
cursor: pointer;
}
body[data-nav-wip] .dt-cm-chip b {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2563eb;
color: #ffffff;
font-size: 10px;
font-weight: 700;
font-style: normal;
}
body[data-nav-wip] .dt-cm-chip-txt {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body[data-nav-wip] .dt-cm-chip-x {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #9ca3af;
font-size: 13px;
line-height: 1;
cursor: pointer;
}
body[data-nav-wip] .dt-cm-chip-x:hover { background: #e5e7eb; color: #111827; }
body[data-nav-wip] .dt-cm-clear {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #9ca3af;
cursor: pointer;
}
body[data-nav-wip] .dt-cm-clear[hidden] { display: none !important; }
body[data-nav-wip] .dt-cm-clear:hover { background: #f3f4f6; color: #111827; }
@media (max-width: 640px) {
body[data-nav-wip] .dt-cm-chip { max-width: 170px; }
}
body.dark-mode[data-nav-wip] .dt-cm-chip { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-cm-chip b { background: #60a5fa; color: #111827; }
body.dark-mode[data-nav-wip] .dt-cm-chip-x { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-cm-chip-x:hover { background: #34343a; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-cm-clear { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-cm-clear:hover { background: #2a2a2e; color: #f5f5f6; }
body[data-nav-wip] .dt-rv-bar.is-open.is-assets .dt-rv-editbox {
flex: 0 0 auto !important;
width: auto !important;
height: 48px;
padding: 0 6px !important;
gap: 6px;
}
body[data-nav-wip] .dt-rv-bar.is-assets .dt-rv-inwrap,
body[data-nav-wip] .dt-rv-bar.is-assets .dt-rv-cur {
display: none !important;
}
/* ── [WIP 2026-09-22] a kept upload in the results rail (6ac): a small label ── */
body[data-nav-wip] .dt-rv-thumb.is-upload { position: relative; }
body[data-nav-wip] .dt-up-mark {
position: absolute;
left: 4px;
bottom: 4px;
padding: 1px 5px;
border-radius: 5px;
background: rgba(17, 24, 39, .72);
color: #ffffff;
font-size: 10px;
font-style: normal;
line-height: 14px;
pointer-events: none;
}
/* ── [WIP 2026-09-22] the whole empty upload card opens the source picker ── */
body[data-nav-wip] .wam-op #uploadContainer.new-upload-container:has(#uploadPreview[style*="none"]) {
cursor: pointer;
}
/* Area completion stays explicit and reachable, including narrow toolbars. */
body[data-nav-wip] .dt-rm-close {
flex: 0 0 auto; padding: 5px 9px; border: 1px solid #bfdbfe; border-radius: 7px;
background: #eff6ff; color: #1d4ed8; font: inherit; font-size: 12px; cursor: pointer;
}
body[data-nav-wip] .dt-rm-close[hidden] { display: none !important; }
body[data-nav-wip] .dt-rm-close:disabled { opacity: .45; cursor: default; }
body[data-nav-wip] .dt-rm-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
body[data-nav-wip] .dt-rm-bar { flex-wrap: wrap; overflow: visible; }
/* Hint changes must not move the image while the pointer targets the start. */
body[data-nav-wip] .dt-rm-hint { flex-basis: 0; }
body.dark-mode[data-nav-wip] .dt-rm-close { background: #1e3a5f; border-color: #3b82f6; color: #bfdbfe; }
/* WIP Mode view: workflow selection is separate from the saved result session. */
body[data-nav-wip] .dt-sr-mode-panel[hidden] { display: none !important; }
body[data-nav-wip] .dt-sr-mode-panel {
position: absolute;
inset: 0;
z-index: 50;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: max-content;
align-content: start;
gap: 20px;
padding: 48px 24px 24px;
border-radius: inherit;
background: #fff;
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #d1d5db transparent;
}
body.dt-sr-mode-open[data-nav-wip] .wr-lists-box { position: relative; overflow: hidden !important; }
body.dt-sr-mode-open[data-nav-wip] .wr-lists-box > :not(.dt-sr-mode-panel),
body.dt-sr-mode-open[data-nav-wip] .wr-lists-box::before,
body.dt-sr-mode-open[data-nav-wip] .wr-lists-box::after,
body.dt-sr-mode-open[data-nav-wip] .wr-title > :not(.tab-buttons) { display: none !important; }
body.dt-sr-mode-open[data-nav-wip] .gen-tab.active:not(.dt-sr-mode-tab) {
background: transparent !important;
color: #6b7280 !important;
box-shadow: none !important;
}
body.dt-sr-mode-open[data-nav-wip] .dt-sr-mode-tab { background: #e5e7eb !important; color: #111827 !important; }
body[data-nav-wip] .dt-sr-mode-card {
position: relative;
min-width: 0;
padding: 0;
border: 2px solid transparent;
border-radius: 16px;
background: #f5f6f8;
color: #111827;
text-align: left;
overflow: hidden;
cursor: pointer;
font: inherit;
}
body[data-nav-wip] .dt-sr-mode-card:hover { border-color: #a5b4fc; }
body[data-nav-wip] .dt-sr-mode-card.is-current { border-color: #4163ff; }
body[data-nav-wip] .dt-sr-mode-card:focus-visible { outline: 3px solid #4163ff; outline-offset: 3px; }
body[data-nav-wip] .wr-title .ex-grid-toggle {
position: static;
flex: 0 0 42px;
width: 42px;
height: 42px;
margin-left: auto;
padding: 0;
border: 0;
border-radius: 12px;
background: #f5f6f8;
color: #6b7280;
}
body[data-nav-wip] .wr-title .ex-grid-toggle[hidden] { display: none !important; }
body[data-nav-wip] .wr-title .ex-grid-toggle:hover,
body[data-nav-wip] .wr-title .ex-grid-toggle.active { background: #e5e7eb; color: #111827; }
body.dark-mode[data-nav-wip] .wr-title .ex-grid-toggle { background: #202024; color: #a1a1aa; }
body.dark-mode[data-nav-wip] .wr-title .ex-grid-toggle:hover,
body.dark-mode[data-nav-wip] .wr-title .ex-grid-toggle.active { background: #2a2a2e; color: #f5f5f6; }
body[data-nav-wip] .dt-sr-mode-pair { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
body[data-nav-wip] .dt-sr-mode-pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
body[data-nav-wip] .dt-sr-mode-pair img:first-child { clip-path: inset(0 50% 0 0); }
body[data-nav-wip] .dt-sr-mode-pair img:nth-child(2) { clip-path: inset(0 0 0 50%); }
body[data-nav-wip] .dt-sr-mode-divider { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #111827; font-size: 19px; line-height: 1; box-shadow: 0 1px 5px #0003; }
body[data-nav-wip] .dt-sr-mode-pair::after { content: ''; position: absolute; inset: 0 auto 0 50%; width: 1px; background: #fff; }
body[data-nav-wip] .dt-sr-mode-divider { z-index: 1; }
body[data-nav-wip] .dt-sr-mode-copy { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
body[data-nav-wip] .dt-sr-mode-copy strong { font-size: 14px; line-height: 1.4; }
body[data-nav-wip] .dt-sr-mode-copy > span { font-size: 12px; line-height: 1.5; color: #6b7280; }
body[data-nav-wip] .dt-sr-mode-current { display: none; position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 6px; background: #4163ff; color: #fff; font-size: 11px; line-height: 1.3; }
body[data-nav-wip] .dt-sr-mode-card.is-current .dt-sr-mode-current { display: block; }
body.dark-mode[data-nav-wip] .dt-sr-mode-panel { background: #161618; scrollbar-color: #48484f transparent; }
body.dark-mode[data-nav-wip] .dt-sr-mode-card { background: #202024; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-sr-mode-copy > span { color: #a1a1aa; }
body.dark-mode.dt-sr-mode-open[data-nav-wip] .gen-tab.active:not(.dt-sr-mode-tab) { color: #a1a1aa !important; }
body.dark-mode.dt-sr-mode-open[data-nav-wip] .dt-sr-mode-tab { background: #2a2a2e !important; color: #f5f5f6 !important; }
@media (max-width: 1200px) {
body[data-nav-wip] .dt-sr-mode-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 16px; gap: 14px; }
}
@media (max-width: 640px) {
body[data-nav-wip] .dt-sr-mode-panel { grid-template-columns: minmax(0, 1fr); padding: 16px 10px; }
}
@media (max-width: 768px) {
/* The stacked mobile panel has auto height; its absolute picker needs a stage. */
body.dt-sr-mode-open[data-nav-wip] .wam-result .wr-lists-box {
flex: 0 0 auto;
height: 70vh;
min-height: 360px;
}
}