/* ============================================================================
roomflow-panel-wip.css - WIP-only restyle of /roomflow-tool-wip (2026-09-16).
Loaded ONLY when the controller sets $roomflow_is_wip, i.e. the WIP route; the
production /roomflow-tool renders the same template without it and never links
this file. Two parts:
1. vw -> px re-base of roomflow-tool-shared.css (generated)
2. the nav-wip panel restyle (hand-written, wins on source order)
========================================================================== */
/* ============================================================================
nav-wip: vw -> px re-base (2026-09-16). roomflow-tool-shared.css sizes the whole
tool panel in vw against a 1920px design, so a half-width window or a tablet
collapses the text to a few px. For the WIP route only, every small vw
declaration is re-based to its 1920px value, keeping the design size at any
viewport width. Layout widths (>= 20vw) and vh stay fluid. GENERATED by
scratchpad/vw-rebase-roomflow.js - regenerate rather than hand-edit.
============================================================================ */
body[data-nav-wip] .web-ai-main {
gap: 19.2px;
}
body[data-nav-wip] .wam-op {
margin-top: 38.4px;
margin-bottom: 38.4px;
border-radius: 19.2px;
padding: 38.4px 17.09px;
padding-top: 9.6px;
}
body[data-nav-wip] .wam-result {
margin-top: 38.4px;
margin-bottom: 38.4px;
border-radius: 19.2px;
}
body[data-nav-wip] .wo-style-box {
margin-top: 9.6px;
}
body[data-nav-wip] .wsb-item {
border-radius: 7.68px;
}
body[data-nav-wip] .wsb-item img {
border-radius: 7.68px;
}
body[data-nav-wip] .wsb-item .api-badge {
top: -4.8px;
left: calc(-6.24px - 2ch);
padding: 1.44px 10.08px 1.44px calc(10.08px + 2ch);
height: 20.16px;
line-height: 17.28px;
font-size: 8.64px;
}
body[data-nav-wip] .wsb-item > div:first-child {
border-radius: 7.68px !important;
}
body[data-nav-wip] .wsb-item.active > img,
body[data-nav-wip] .wsb-item:hover > img,
body[data-nav-wip] .wsb-item.active > div:first-child,
body[data-nav-wip] .wsb-item:hover > div:first-child {
border: 3.84px solid #1256e0;
box-shadow: 0 0 0 0.96px rgba(18,86,224,.15);
}
body[data-nav-wip] .wsb-item:not(.active):not(:hover) > img,
body[data-nav-wip] .wsb-item:not(.active):not(:hover) > div:first-child {
border: 1.92px solid rgba(18,86,224,.7);
}
body[data-nav-wip] .wsb-item.active > img,
body[data-nav-wip] .wsb-item.active > div:first-child {
border-width: 4.8px;
}
body[data-nav-wip] .wsb-item.disabled::after {
padding: 1.92px 7.68px;
font-size: 7.68px;
border-top-right-radius: 7.68px;
border-bottom-left-radius: 4.8px;
}
body[data-nav-wip] .wsbi {
margin-top: 3.84px;
}
body[data-nav-wip] .wsbi > div {
font-size: max(11.52px, 11px);
margin-left: 3.84px;
}
body[data-nav-wip] .wo-picture {
font-size: max(11.52px, 11px);
border-radius: 11.52px;
margin-top: 6.39px;
padding: 6.72px;
}
body[data-nav-wip] .wo-picture.ref-img {
margin-top: -12.81px;
}
body[data-nav-wip] .wo-picture .wopo-btn-add {
width: 28.8px;
height: 28.8px;
}
/* section titles (Mode / Upload / Settings) are gone: every card below now
carries its own label, same as the SnapRender panel. Only the `.head` ones
are section headers — "Draw layout" / "Reference image" keep theirs. */
body[data-nav-wip] .wam-op .wo-title.head {
display: none !important;
}
body[data-nav-wip] .wo-title {
margin-top: 9.6px;
}
body[data-nav-wip] .wo-title.head {
font-size: max(15.36px, 13px);
margin-top: 14.4px;
gap: 3.84px;
}
body[data-nav-wip] .title-star {
font-size: max(15.36px, 13px);
}
body[data-nav-wip] .title-help {
font-size: max(13.44px, 12px);
}
body[data-nav-wip] .wamo-1-scroll > .wo-title.head.gen-params {
margin-bottom: 4.8px;
}
body[data-nav-wip] .wo-param {
margin-top: 9.6px;
}
body[data-nav-wip] .wop-title {
width: 76.8px;
height: max(30.72px, 24px);
line-height: max(30.72px, 24px);
font-size: max(13.44px, 12px);
}
body[data-nav-wip] .wop-param {
height: max(30.72px, 24px);
border-radius: 3.84px;
font-size: max(13.44px, 12px);
}
body[data-nav-wip] .new-style-buttons {
gap: 7.68px;
}
body[data-nav-wip] .new-style-btn {
border-radius: 6.72px;
padding: max(5.76px, 5px) max(11.52px, 8px);
font-size: max(11.52px, 11px);
}
body[data-nav-wip] .wo-param.srm-mode .new-style-btn,
body[data-nav-wip] .planrender-actions .new-style-btn {
gap: 6.72px;
}
body[data-nav-wip] .detail-switch {
gap: 7.68px;
}
body[data-nav-wip] .detail-control-container.show + .wo-prompt {
margin-top: 9.6px !important;
}
body[data-nav-wip] .detail-control-container.show ~ .wo-prompt {
margin-top: 9.6px !important;
}
body[data-nav-wip] .detail-control-container.show + .wo-prompt.hide + .upload-ref + .wo-picture.ref-img {
margin-top: 9.6px;
}
body[data-nav-wip] .detail-control-container.show ~ .wo-prompt.hide ~ .wo-picture.ref-img {
margin-top: 9.6px !important;
}
body[data-nav-wip] .detail-btn {
border-radius: 6.72px;
padding: max(5.76px, 5px) max(11.52px, 8px);
font-size: max(11.52px, 11px);
}
body[data-nav-wip] .constraint-buttons {
gap: 7.68px;
}
body[data-nav-wip] .constraint-btn {
border-radius: 6.72px;
padding: max(5.76px, 5px) max(11.52px, 8px);
font-size: max(11.52px, 11px);
}
body[data-nav-wip] select.wop-param {
padding-right: 28.8px;
background-position: calc(100% - 9.6px) center;
background-size: 15.99px;
}
body[data-nav-wip] .custom-select {
font-size: max(13.44px, 12px);
}
body[data-nav-wip] .custom-select .cs-selected {
height: max(30.72px, 24px);
line-height: max(30.72px, 24px);
font-size: max(11.19px, 11px);
padding: 0 15.36px;
padding-right: 30.72px;
border-radius: 6.72px;
}
body[data-nav-wip] .custom-select .cs-selected:after {
right: 11.52px;
width: 6.39px;
height: 6.39px;
border-right: 1.92px solid #666;
border-bottom: 1.92px solid #666;
}
body[data-nav-wip] .custom-select .cs-options {
top: calc(100% + 5.76px);
border-radius: 6.72px;
}
body[data-nav-wip] .custom-select .cs-option {
padding: 7.68px 15.36px;
}
body[data-nav-wip] .wo-prompt textarea {
padding: 9.6px;
border-radius: 5.76px;
font-size: max(11.52px, 11px);
}
body[data-nav-wip] .wo-prompt {
margin-top: -12.81px;
}
body[data-nav-wip] .style-inline {
padding: 7.68px 9.6px 11.52px;
border-radius: 5.76px 5.76px 0 0;
font-size: max(11.52px, 11px);
gap: 7.68px;
}
body[data-nav-wip] .style-transfer-prompt-ele textarea#style-transfer-prompt {
padding-top: 5.76px;
}
body[data-nav-wip] .web-ai-container.mode-maopi #roomStyleInline {
font-size: 13.25px;
}
body[data-nav-wip] .web-ai-container.mode-softcollage .constraint-btn {
border-radius: 6.72px;
padding-top: 5.76px;
padding-bottom: 5.76px;
padding-left: 11.52px;
padding-right: 11.52px;
font-size: 11.52px;
gap: 6.72px;
height: calc(25.34px + 2px);
}
body[data-nav-wip] .web-ai-container.mode-softcollage .wo-prompt.prompt-ele:not(.hide) {
margin-top: 9.6px;
}
body[data-nav-wip] .web-ai-container.mode-jieturender .wo-param.srm-mode .new-style-btn {
padding-top: 5.76px;
padding-bottom: 5.76px;
height: calc(25.34px + 2px);
}
body[data-nav-wip] .wo-param.planrender-actions .new-style-btn {
padding-top: 5.76px;
padding-bottom: 5.76px;
height: calc(25.34px + 2px);
}
body[data-nav-wip] .web-ai-container.mode-jieturender .wo-prompt.prompt-ele:not(.hide) {
margin-top: 9.6px;
}
body[data-nav-wip] .web-ai-container.mode-jieturender .wo-picture.ref-img {
margin-top: 9.6px;
}
body[data-nav-wip] #styleInline {
font-size: 13.25px;
}
body[data-nav-wip] .style-chip {
gap: 5.76px;
padding: 4.8px 15.36px;
}
body[data-nav-wip] .style-menu {
border-radius: 5.76px;
padding: 9.6px;
column-gap: 15.36px;
}
body[data-nav-wip] .style-menu .menu-item {
padding: 6.72px 23.04px 6.72px 14.4px;
font-size: 11.52px;
}
body[data-nav-wip] #colorStyleMenu {
min-width: 201.6px;
}
body[data-nav-wip] #colorStyleMenu .color-style-item {
gap: 8.64px;
}
body[data-nav-wip] #planTypeMenu .menu-item {
gap: 5.76px;
}
body[data-nav-wip] #layoutStyleMenu {
padding: 11.52px;
}
body[data-nav-wip] #layoutStyleMenu.show-menu {
gap: 9.6px;
}
body[data-nav-wip] #layoutStyleMenu .layout-style-item {
width: 96px;
border-radius: 5.76px;
}
body[data-nav-wip] #layoutStyleMenu .layout-style-item .label {
padding: 4.8px 0;
font-size: 10.56px;
}
body[data-nav-wip] .upload-ref,
body[data-nav-wip] .wo-prompt-container {
height: 48px;
margin-top: 4.8px;
}
body[data-nav-wip] .upload-ref .wo-title,
body[data-nav-wip] .wo-prompt-container .wo-title {
width: max(153.6px, 100px);
font-size: max(13.44px, 12px);
}
body[data-nav-wip] .upload-ref {
margin-top: -3.84px;
}
body[data-nav-wip] .wo-switch {
height: 38.4px;
margin-top: 12.48px;
}
body[data-nav-wip] .wamo2-btn {
height: max(48px, 36px);
gap: 3.84px;
border-radius: 9.6px;
line-height: max(48px, 36px);
font-size: max(12.48px, 13px);
}
body[data-nav-wip] .wamo2-help {
font-size: 8.31px;
margin-top: 9.6px;
margin-bottom: 9.6px;
}
body[data-nav-wip] .wr-title {
height: 57.6px;
line-height: 57.6px;
font-size: 15.36px;
}
/* the PlanRender tutorial link is dropped in this panel — it floated over the
result area beside Fullscreen with nothing anchoring it. The page still
toggles .is-visible on it, which is why this needs !important. */
body[data-nav-wip] .result-tutorial-link,
body[data-nav-wip] .result-tutorial-link.is-visible {
display: none !important;
}
body[data-nav-wip] .fullscreen-btn {
right: 28.8px;
top: 28.8px;
padding: 6.34px 12.86px;
border-radius: 5.76px;
font-size: 9.02px;
gap: 3.84px;
}
body[data-nav-wip] .fullscreen-btn svg {
width: 10.18px;
height: 10.18px;
}
body[data-nav-wip] .wr-lists {
border-radius: 9.6px;
padding: 19.2px;
}
body[data-nav-wip] .wr-lists-box {
margin: 19.2px;
border-radius: 9.6px;
}
body[data-nav-wip] .load-more {
margin-top: 19.2px;
}
body[data-nav-wip] .gen-tab {
padding: 5.4px 14.4px;
font-size: 10.08px;
border-radius: 5.4px;
}
body[data-nav-wip] .gen-tab[data-type="history"] {
border-radius: 0 5.4px 5.4px 0;
}
body[data-nav-wip] .canvas-tab {
border-radius: 5.4px 0 0 5.4px;
}
body[data-nav-wip] .progress {
height: 38.4px;
border-radius: 9.6px;
margin-top: -19.2px;
}
body[data-nav-wip] .p-mask {
border-radius: 9.6px;
}
body[data-nav-wip] .p-title {
height: 38.4px;
line-height: 38.4px;
}
body[data-nav-wip] .p-bg-progress {
height: 38.4px;
border-radius: 9.6px;
}
body[data-nav-wip] .wr-lists.result {
padding: 19.2px;
}
body[data-nav-wip] .floating-btn {
font-size: 8.97px;
}
body[data-nav-wip] .upload-buttons {
gap: 7.68px;
margin-bottom: 15.36px;
}
body[data-nav-wip] .upload-btn {
gap: 3.84px;
padding: max(5.76px, 5px) max(11.52px, 8px);
border-radius: 4.8px;
font-size: max(10.56px, 11px);
min-width: max(67.2px, 60px);
}
body[data-nav-wip] .upload-btn svg {
width: max(11.52px, 12px);
height: max(11.52px, 12px);
}
body[data-nav-wip] .upload-tip-main {
font-size: max(8.64px, 10px);
margin-bottom: 3.84px;
}
body[data-nav-wip] .upload-tip-format {
font-size: max(7.68px, 9px);
}
body[data-nav-wip] .material-library-modal {
border-radius: 11.52px;
}
body[data-nav-wip] .modal-content {
border-radius: 9.6px;
}
body[data-nav-wip] .modal-header {
padding: 19.2px;
border-radius: 9.6px 9.6px 0 0;
}
body[data-nav-wip] .modal-title {
font-size: 15.36px;
}
body[data-nav-wip] .modal-close {
font-size: 23.04px;
width: 38.4px;
height: 38.4px;
}
body[data-nav-wip] .modal-tab {
padding: 15.36px;
font-size: 12.48px;
}
body[data-nav-wip] .modal-body {
padding: 19.2px;
}
body[data-nav-wip] .material-grid {
gap: 7.68px;
padding: 9.6px;
}
body[data-nav-wip] .material-item {
border-radius: 5.76px;
}
body[data-nav-wip] .material-placeholder {
font-size: 9.6px;
}
body[data-nav-wip][data-sidebar-active] {
--wip-gap: 19.2px;
--wip-margin: 38.4px;
}
body[data-nav-wip] .planrender-workflow {
margin-top: max(12.48px, 10px);
}
body[data-nav-wip] .planrender-workflow-title {
margin-bottom: max(6.72px, 6px);
}
body[data-nav-wip] .planrender-workflow .planrender-actions {
gap: max(7.68px, 7px);
}
body[data-nav-wip] .planrender-workflow .workflow-card {
min-height: max(57.6px, 54px);
padding: max(7.68px, 7px) max(8.64px, 8px);
gap: max(3.84px, 4px);
border-radius: max(6.72px, 7px);
font-size: max(11.9px, 11px);
}
body[data-nav-wip] .workflow-card-icon {
width: max(22.08px, 19px);
height: max(22.08px, 19px);
}
body[data-nav-wip] .workflow-card-check {
top: max(3.84px, 3px);
right: max(4.8px, 4px);
width: max(16.32px, 15px);
height: max(16.32px, 15px);
font-size: max(9.22px, 9px);
}
body[data-nav-wip] .workflow-summary {
min-height: max(33.6px, 32px);
margin-top: max(6.72px, 6px);
padding: max(5.76px, 6px) max(10.56px, 9px);
gap: max(5.38px, 5px);
border-radius: max(5.76px, 6px);
font-size: max(11.14px, 10.5px);
}
body[data-nav-wip] .workflow-summary-icon {
width: max(17.28px, 16px);
height: max(17.28px, 16px);
}
body[data-nav-wip] .web-ai-container.mode-planrender .primary-upload-zone {
padding: max(15.36px, 14px);
border-radius: max(10.56px, 10px);
}
body[data-nav-wip] .primary-upload-empty {
padding: max(11.52px, 10px) max(15.36px, 14px) max(42.24px, 40px);
}
body[data-nav-wip] .primary-upload-trigger {
min-width: max(182.4px, 172px);
min-height: max(45.12px, 42px);
padding: max(8.64px, 8px) max(15.36px, 14px);
border-radius: max(7.68px, 8px);
gap: max(7.68px, 7px);
font-size: max(12.67px, 12px);
}
body[data-nav-wip] .primary-upload-trigger > svg:first-child {
width: max(19.2px, 18px);
height: max(19.2px, 18px);
}
body[data-nav-wip] .primary-upload-chevron {
width: max(14.4px, 14px);
height: max(14.4px, 14px);
margin-left: max(1.92px, 2px);
}
body[data-nav-wip] .primary-upload-menu {
top: calc(100% + max(6.72px, 6px));
width: max(259.2px, 238px);
padding: max(5.76px, 6px);
border-radius: max(8.64px, 9px);
}
body[data-nav-wip] .primary-upload-menu button {
padding: max(8.64px, 9px) max(9.6px, 10px);
border-radius: max(5.76px, 6px);
gap: max(9.6px, 9px);
}
body[data-nav-wip] .primary-upload-menu button > svg {
width: max(20.16px, 19px);
height: max(20.16px, 19px);
}
body[data-nav-wip] .primary-upload-menu strong {
font-size: max(11.71px, 11px);
}
body[data-nav-wip] .primary-upload-menu small {
font-size: max(9.98px, 9.5px);
}
body[data-nav-wip] .primary-upload-note {
right: max(8.64px, 8px);
bottom: max(7.68px, 8px);
left: max(8.64px, 8px);
font-size: max(10.37px, 10px);
}
body[data-nav-wip] #styleInline.plan-coloring-style-grid {
gap: max(6.72px, 7px);
padding: max(7.68px, 8px);
}
body[data-nav-wip] .plan-coloring-style-card {
min-height: max(88.32px, 84px);
padding: max(4.8px, 5px);
border-radius: max(6.72px, 7px);
gap: max(3.46px, 3px);
}
body[data-nav-wip] .plan-coloring-style-preview {
border-radius: max(4.22px, 4px);
}
body[data-nav-wip] .plan-coloring-style-preview img {
height: max(49.92px, 48px);
}
body[data-nav-wip] .plan-coloring-style-copy {
padding: 0 max(1.92px, 2px) max(0.96px, 1px);
}
body[data-nav-wip] .plan-coloring-style-copy strong {
font-size: max(10.75px, 10.5px);
}
body[data-nav-wip] .plan-coloring-style-copy small {
font-size: max(8.64px, 8.5px);
}
body[data-nav-wip] .plan-coloring-style-check {
top: max(6.72px, 6px);
right: max(6.72px, 6px);
width: max(18.24px, 17px);
height: max(18.24px, 17px);
font-size: max(9.98px, 9px);
}
body[data-nav-wip] .style-transfer-prompt-ele.is-plan-coloring textarea#style-transfer-prompt {
padding: max(8.64px, 8px) max(10.56px, 10px);
}
body[data-nav-wip][data-sidebar-active] .dt-global-sidebar {
border-radius: 12.86px 0 0 12.86px !important;
}
body[data-nav-wip][data-sidebar-active] .wam-op {
border-radius: 0 12.86px 12.86px 0 !important;
}
body[data-nav-wip][data-sidebar-active] .wam-result {
border-radius: 12.86px !important;
}
body[data-nav-wip][data-sidebar-collapsed] .web-ai-main {
gap: 19.2px !important;
}
body[data-nav-wip][data-sidebar-collapsed] .wam-op {
margin: 38.4px 0 !important;
border-radius: 19.2px !important;
}
body[data-nav-wip][data-sidebar-collapsed] .wam-result {
margin-top: 38.4px !important;
margin-bottom: 38.4px !important;
border-radius: 19.2px !important;
}
body[data-nav-wip] .dt-gs-expand-btn {
top: calc(var(--wip-header, 68px) + 38.4px);
border-radius: 19.2px;
}
body[data-nav-wip] .dt-float-contact {
bottom: 38.4px;
}
/* ============================================================================
roomflow-panel-wip.css — part 2: nav-wip panel restyle (2026-09-16).
Brings /…/roomflow-tool-wip up to the SnapRender WIP standard: Scheme D field
with two white panel cards, Higgsfield card rhythm inside the left panel,
quiet grey result tabs, a raised blue generate key, and the neutral near-black
dark palette.
Scoped to body[data-nav-wip] — the WIP route only. The prod route renders the
same template without that attribute and never loads this file. Several rules
carry !important because roomflow-tool-shared.css sets the old global-sidebar
layout (body[data-sidebar-active] …) with !important, and dark-theme.css
paints the slate dark palette the same way.
========================================================================== */
/* ── Shell: 56px slim header, field colour, two panel cards ─────────────── */
body[data-nav-wip] {
--wip-header: 56px;
--wip-edge: 0px;
--wip-margin: 8px;
--wip-gap: 20px;
--wip-panel-h: calc(100vh - 56px - 36px);
--dt-gs-width: 56px; /* = --dt-rail-w. roomflow-tool-shared.css offsets
.web-ai-container by this var with !important, which
outranks the rail's own push rule — so feed it the rail width */
--dt-field: #eef0f3;
--dt-card: #f5f6f8;
--dt-ink: #111827;
--dt-muted: #6b7280;
--dt-line: #e5e7eb;
--dt-blue: #2563eb;
}
body[data-nav-wip][data-rail-pinned] {
--dt-gs-width: 240px; /* = --dt-rail-wp */
}
body[data-nav-wip] .web-ai-container {
margin-top: 56px;
background-color: #eef0f3;
}
body[data-nav-wip][data-sidebar-active] .web-ai-main {
justify-content: flex-start !important;
gap: 20px !important;
padding: 0 28px 0 24px !important;
box-sizing: border-box !important;
}
body[data-nav-wip][data-sidebar-active] .wam-op {
width: 384px !important;
min-width: 0 !important;
flex: 0 0 384px !important;
margin: 8px 0 28px 0 !important;
height: calc(100vh - 56px - 36px) !important;
background-color: #ffffff;
border: 0 !important;
border-radius: 21px !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
padding: 10px 24px 24px !important; /* matches the result panel's tab-row inset,
so the two header rows sit on one line */
box-sizing: border-box;
}
body[data-nav-wip][data-sidebar-active] .wam-result {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 8px 0 28px 0 !important;
height: calc(100vh - 56px - 36px) !important;
background-color: #ffffff;
border: 0 !important;
border-radius: 21px !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* the controls no longer grow: the generate key sits right after the last card
instead of being pushed to the panel bottom (SnapRender round 51) */
body[data-nav-wip] .wamo-1 {
flex: 0 1 auto !important;
gap: 0;
}
body[data-nav-wip] .wamo-2 {
flex: 0 0 auto;
margin-top: 0 !important;
}
/* ── Section titles ─────────────────────────────────────────────────────── */
/* section titles (Mode / Upload / Settings) are gone: every card below now
carries its own label, same as the SnapRender panel. Only the `.head` ones
are section headers — "Draw layout" / "Reference image" keep theirs. */
body[data-nav-wip] .wam-op .wo-title.head {
display: none !important;
}
body[data-nav-wip] .wo-title {
margin-top: 14px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #111827;
line-height: 1.4;
}
body[data-nav-wip] .wamo-1 > .wo-title.head:first-child {
margin-top: 0;
}
body[data-nav-wip] .wo-title .title-star {
color: #ef4444;
margin-right: 3px;
}
/* ── Mode cards: quiet neutral tiles, blue ring only when picked ────────── */
body[data-nav-wip] .wo-style-box {
gap: 8px;
margin-top: 0;
justify-content: flex-start;
}
body[data-nav-wip] .wo-style-box + .wo-style-box {
margin-top: 8px;
}
body[data-nav-wip] .wsb-item {
width: auto;
flex: 1 1 0;
min-width: 0;
border-radius: 12px;
padding: 6px 6px 4px;
background: #f5f6f8;
box-sizing: border-box;
transition: background .15s ease, box-shadow .15s ease;
}
body[data-nav-wip] .wsb-item:hover {
background: #eceef2;
}
body[data-nav-wip] .wsb-item.active {
background: #e8f0fe;
box-shadow: inset 0 0 0 1.5px #2563eb;
}
body[data-nav-wip] .wsb-item > img,
body[data-nav-wip] .wsb-item > div:first-child {
border: 0 !important;
box-shadow: none !important;
border-radius: 8px !important;
width: 100%;
display: block;
}
body[data-nav-wip] .wsb-item.active > img,
body[data-nav-wip] .wsb-item:hover > img,
body[data-nav-wip] .wsb-item.active > div:first-child,
body[data-nav-wip] .wsb-item:hover > div:first-child {
border: 0 !important;
box-shadow: none !important;
}
body[data-nav-wip] .wsbi {
margin-top: 5px;
}
body[data-nav-wip] .wsbi > div {
font-size: 12px;
color: #4b5563;
line-height: 1.3;
}
body[data-nav-wip] .wsb-item.active .wsbi > div {
color: #111827;
font-weight: 600;
}
body[data-nav-wip] .wsbi-radio {
display: none;
}
body[data-nav-wip] .wsb-item .api-badge {
top: 4px;
left: auto;
right: 4px;
padding: 0 5px;
height: 14px;
line-height: 14px;
font-size: 8px;
border-radius: 7px;
background: #2563eb;
}
/* ── Upload card ────────────────────────────────────────────────────────── */
body[data-nav-wip] .wo-picture {
/* fixed box in both states. .wop-preview is height:100% of a parent with no
height, and the preview ![]()
is max-height:none, so a portrait photo used
to stretch the card from 168px to 579px and shove the controls below it
off-screen. A ratio keeps it stable and scales with the panel. */
height: auto;
aspect-ratio: 16 / 7;
min-height: 140px;
margin-top: 0;
padding: 12px 14px;
background: #f5f6f8;
border: 1.5px dashed #d1d5db;
border-radius: 14px;
color: #6b7280;
font-size: 12px;
}
body[data-nav-wip] .wo-picture.ref-img {
margin-top: 0;
min-height: 132px;
}
/* upload buttons: two quiet keys instead of one white + one grey */
body[data-nav-wip] .wo-picture .upload-btn {
height: 34px;
padding: 0 14px;
border: 0;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
color: #111827;
font-size: 13px;
font-weight: 500;
}
body[data-nav-wip] .wo-picture .upload-btn-library {
background: #e5e7eb;
box-shadow: none;
}
body[data-nav-wip] .wo-picture .upload-btn:hover {
background: #e5e7eb;
}
body.dark-mode[data-nav-wip] .wo-picture .upload-btn {
background: #2a2a2e !important;
border: 0 !important;
box-shadow: none !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wo-picture .upload-btn-library {
background: #1f1f22 !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .wo-picture .upload-btn:hover {
background: #34343a !important;
}
/* preview state: the picture is contained in the fixed box, never sizing it.
`display` is left entirely to the page — it ships the layer as
style="display:none" and switches it on when an image lands, so setting
display here would show the placeholder on top of the empty state. The
layer is position:relative already, so centre the picture absolutely. */
body[data-nav-wip] .wo-picture .wop-preview {
height: 100%;
overflow: hidden;
}
body[data-nav-wip] .wo-picture .wop-preview img.preview {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain;
border-radius: 10px;
}
/* the ref-image card follows the same rule, one notch shorter */
body[data-nav-wip] .wo-picture.ref-img {
aspect-ratio: 16 / 9;
min-height: 132px;
}
/* ── Prompt card: title fused to the box below it, like the SnapRender panel.
The rebase gives .wo-prompt.prompt-ele a -0.667vw top margin (-12.8px at
1920), which pulled the box up over the row above and clipped the first
line of the placeholder. ── */
body[data-nav-wip] .dt-pt-head {
margin: 10px 0 0;
padding: 12px 14px 0;
background: #f5f6f8;
border-radius: 14px 14px 0 0;
font-size: 13px;
font-weight: 600;
color: #111827;
line-height: 1.4;
}
body[data-nav-wip] .dt-pt-head + .wo-prompt.prompt-ele {
margin-top: 0 !important;
/* the box inherited a ~215px height from the mode CSS's height:100%; that
is more empty space than the two-line placeholder needs */
height: 160px !important;
}
body[data-nav-wip] .dt-pt-head + .wo-prompt.prompt-ele textarea#prompt {
border-radius: 0 0 14px 14px !important;
}
body.dark-mode[data-nav-wip] .dt-pt-head {
background: #1f1f22 !important;
color: #f5f5f6 !important;
}
/* the character counter sits inside the card, bottom right */
body[data-nav-wip] #promptCharCount {
font-size: 11px;
color: #9ca3af;
}
body.dark-mode[data-nav-wip] #promptCharCount {
color: #71717a !important;
}
/* ── Prompt + parameter cards ───────────────────────────────────────────── */
body[data-nav-wip] .wo-prompt textarea,
body[data-nav-wip] textarea#prompt {
box-sizing: border-box;
width: 100%;
background: #f5f6f8;
border: 0;
border-radius: 14px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.5;
color: #111827;
resize: none;
}
body[data-nav-wip] .wo-prompt textarea::placeholder,
body[data-nav-wip] textarea#prompt::placeholder {
color: #9ca3af;
white-space: pre-line; /* the coaching text is two lines: guidance + example */
}
body[data-nav-wip] .style-inline {
background: #f5f6f8;
border: 0;
border-radius: 14px;
padding: 10px;
box-sizing: border-box;
}
/* ── Prompt / Reference segmented switch ────────────────────────────────── */
body[data-nav-wip] .detail-btn {
background: transparent;
border: 0;
border-radius: 10px;
padding: 7px 10px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
box-shadow: none;
}
body[data-nav-wip] .detail-btn.active {
background: #ffffff;
border: 0;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
color: #111827;
font-weight: 600;
}
/* moved directly under the mode card by the panel script */
body[data-nav-wip] .wamo-1-scroll > .detail-control-container {
margin: 0 0 10px !important;
}
/* the switch sits in its own soft track, like the SnapRender segmented controls */
body[data-nav-wip] .detail-switch {
background: #f5f6f8;
border-radius: 12px;
padding: 4px;
gap: 4px;
box-sizing: border-box;
}
body.dark-mode[data-nav-wip] .detail-switch {
background: #1f1f22 !important;
}
/* ── Compare slider: thin white line + 36px disc with chevrons ──────────── */
body[data-nav-wip] .comparison-slider,
body[data-nav-wip] .compare-slider,
body[data-nav-wip] .ex-compare-slider,
body[data-nav-wip] .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] .comparison-slider::before,
body[data-nav-wip] .compare-slider::before,
body[data-nav-wip] .ex-compare-slider::before,
body[data-nav-wip] .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;
color: transparent !important;
font-size: 0 !important;
}
body[data-nav-wip] .comparison-slider::after,
body[data-nav-wip] .compare-slider::after,
body[data-nav-wip] .ex-compare-slider::after {
content: none !important;
}
/* ── Parameter rows (roomflow-panel-wip.js): the values that used to sit inside
the prompt sentence, one per row — label left, current value right ───── */
body[data-nav-wip] .dt-inline-hidden {
display: none !important; /* the sentence stays in the DOM: its chips are
still clicked through by the rows below */
}
body[data-nav-wip] .dt-params {
margin: 10px 0;
}
body[data-nav-wip] .dt-params-rows {
display: flex;
flex-direction: column;
gap: 10px;
}
body[data-nav-wip] .dt-prow {
display: flex;
align-items: center;
gap: 10px;
background: #f5f6f8;
border-radius: 14px;
padding: 12px 14px;
cursor: pointer;
box-sizing: border-box;
}
body[data-nav-wip] .dt-prow:hover {
background: #eceef2;
}
body[data-nav-wip] .dt-pk {
font-size: 13px;
font-weight: 500;
color: #111827;
}
body[data-nav-wip] .dt-pv {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 8px 0 10px;
border-radius: 8px;
background: #e8f0fe;
color: #2563eb;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
body[data-nav-wip] .dt-pv svg {
width: 13px;
height: 13px;
opacity: .65;
}
body.dark-mode[data-nav-wip] .dt-pk {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-prow {
background: #1f1f22 !important;
}
body.dark-mode[data-nav-wip] .dt-prow:hover {
background: #242428 !important;
}
body.dark-mode[data-nav-wip] .dt-pv {
background: #2a2a2e !important;
color: #93c5fd !important;
}
/* the page's own option menu, re-anchored to the row by the panel JS */
body[data-nav-wip] .style-menu {
border: 0;
border-radius: 12px;
padding: 6px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(16, 24, 40, .14), 0 0 0 1px rgba(16, 24, 40, .06);
max-height: 320px;
overflow-y: auto;
z-index: 10000;
}
body[data-nav-wip] .style-menu .menu-item {
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
color: #111827;
border-top: 0 !important;
}
body[data-nav-wip] .style-menu .menu-item:hover {
background: #f5f6f8;
}
body[data-nav-wip] .style-menu .menu-item-custom {
margin-top: 4px;
color: #6b7280 !important;
box-shadow: inset 0 1px 0 #eef0f3;
}
body.dark-mode[data-nav-wip] .style-menu {
background: #1f1f22 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .style-menu .menu-item {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .style-menu .menu-item:hover {
background: #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .style-menu .menu-item-custom {
color: #a1a1aa !important;
box-shadow: inset 0 1px 0 #2a2a2e;
}
/* ── Mode: one big current-mode card, picker over the result panel ───────── */
/* the page's six tiles stay in the DOM (the card and the picker click them) */
body[data-nav-wip] .wam-op .wo-style-box {
display: none !important;
}
body[data-nav-wip] .dt-modewrap {
margin-bottom: 10px;
}
body[data-nav-wip] .dt-modecard {
position: relative;
/* 3:2, matching the landscape room photos the tiles use — a 16:9 box cropped
too much off the top and bottom. Ratio, not a fixed height, so it scales
with the panel on narrower windows. */
aspect-ratio: 3 / 2;
min-height: 168px;
margin-top: 10px; /* card top == result box top */
border-radius: 16px;
overflow: hidden;
cursor: pointer;
background: #e5e7eb;
margin-bottom: 10px;
}
body[data-nav-wip] .dt-modecard .dt-mc-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body[data-nav-wip] .dt-modecard .dt-mc-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .2) 46%, rgba(0, 0, 0, 0) 72%),
linear-gradient(to bottom, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 22%); /* top band: the pill and the Change key sit on pale photos */
}
/* Change stays on the card, top-right, over the scrim */
body[data-nav-wip] .dt-mc-change {
position: absolute;
top: 12px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
padding: 0 11px;
border: 0;
border-radius: 9px;
background: rgba(255, 255, 255, .92);
color: #111827;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
body[data-nav-wip] .dt-mc-change svg {
width: 12px;
height: 12px;
}
body[data-nav-wip] .dt-modecard:hover .dt-mc-change {
background: #ffffff;
}
/* step arrows: one mode per click, parked at the right end of the header row
so they are always visible instead of hidden behind a hover on the card.
No wheel binding — see stepMode() in the panel script. */
body[data-nav-wip] .dt-mc-nav {
width: 34px;
height: 34px;
border: 0;
border-radius: 8px;
background: #f5f6f8;
color: #374151;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s ease, color .15s ease;
}
body[data-nav-wip] .dt-mc-nav svg {
width: 16px;
height: 16px;
}
body[data-nav-wip] .dt-mc-prev {
margin-left: auto; /* pushes the pair to the right end of the row */
}
body[data-nav-wip] .dt-mc-nav:hover {
background: #e5e7eb;
color: #111827;
}
body.dark-mode[data-nav-wip] .dt-mc-nav {
background: #1f1f22 !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-mc-nav:hover {
background: #2a2a2e !important;
color: #f5f5f6 !important;
}
body[data-nav-wip] .dt-modecard .dt-mc-meta {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
display: flex;
flex-direction: column;
color: #ffffff;
}
/* header row: same 34px height and 10px inset as the result panel's tab row,
label on the left where the tabs are, Change key on the right where the
fullscreen key is — the two panels line up across the gap */
body[data-nav-wip] .dt-mode-head {
display: flex;
align-items: center;
height: 34px;
gap: 6px;
}
body[data-nav-wip] .dt-mc-kicker {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 12px;
border-radius: 8px;
background: #f5f6f8;
color: #6b7280;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}body[data-nav-wip] .dt-modecard .dt-mc-name {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
body[data-nav-wip] .dt-modecard .dt-mc-desc {
font-size: 12px;
opacity: .86;
margin-top: 2px;
line-height: 1.45;
}
body.dark-mode[data-nav-wip] .dt-mc-kicker {
background: #1f1f22 !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-mc-change {
background: rgba(40, 40, 44, .9) !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-modecard:hover .dt-mc-change {
background: #2a2a2e !important;
}
/* picker: an overlay on the result panel, not a fourth tab */
body[data-nav-wip] .wam-result {
position: relative;
}
body[data-nav-wip] .dt-modepick {
position: absolute;
inset: 0;
z-index: 40;
display: none;
flex-direction: column;
padding: 24px;
/* Match the stage clip so the result cannot show through the corners. */
border-radius: inherit;
background: #ffffff;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
body[data-nav-wip] .dt-modepick.open {
display: flex;
}
/* the tab row names the picker now, so it stays visible; the page's three tabs
just go quiet while this one is on, without their .active class being touched */
body[data-nav-wip] .wam-result .wr-lists-box {
position: relative;
}
/* Mode owns the stage while open: History must not create a second scroller
or move the absolute picker when its saved scroll offset is nonzero. */
body.dt-modepick-open[data-nav-wip] .wam-result .wr-lists-box {
overflow: hidden !important;
}
body.dt-modepick-open[data-nav-wip] .wam-result .wr-lists-box > :not(.dt-modepick) {
display: none !important;
}
body.dt-modepick-open[data-nav-wip] .gen-tab.active:not(.dt-mode-tab) {
background: transparent !important;
color: #6b7280 !important;
font-weight: 500 !important;
box-shadow: none !important;
}
body.dark-mode.dt-modepick-open[data-nav-wip] .gen-tab.active:not(.dt-mode-tab) {
background: transparent !important;
color: #a1a1aa !important;
}
/* Mode selects a workflow; image/video actions belong to the preview tabs. */
body.dt-modepick-open[data-nav-wip] .wr-title .dt-rs-tools,
body.dt-modepick-open[data-nav-wip] .wr-title .dt-rs-keys,
body.dt-modepick-open[data-nav-wip] .wr-title .dt-rf-vid-dl,
body.dt-modepick-open[data-nav-wip] .fullscreen-btn {
display: none !important;
}
body[data-nav-wip] .dt-mp-head {
display: flex;
align-items: center;
margin-bottom: 10px;
flex: 0 0 auto;
}
body[data-nav-wip] .dt-mp-head h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #111827;
}
body[data-nav-wip] .dt-mp-close {
margin-left: auto;
width: 32px;
height: 32px;
border: 0;
border-radius: 9px;
background: #f5f6f8;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
body[data-nav-wip] .dt-mp-close svg {
width: 15px;
height: 15px;
}
body[data-nav-wip] .dt-mp-close:hover {
background: #e5e7eb;
color: #111827;
}
body[data-nav-wip] .dt-mp-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-content: start;
/* past this the cards stop reading as cards */
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 1100px) {
body[data-nav-wip] .dt-mp-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
body[data-nav-wip] .dt-mp-card {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 14px;
overflow: hidden;
background: #f5f6f8;
cursor: pointer;
text-align: left;
font-family: inherit;
}
body[data-nav-wip] .dt-mp-card:hover {
background: #eceef2;
}
body[data-nav-wip] .dt-mp-th {
display: block;
/* a fixed 104px strip under a column that can be 450px wide read as a
letterboxed sliver; the picture now scales with the card */
height: auto;
aspect-ratio: 16 / 9;
background: #e5e7eb;
}
body[data-nav-wip] .dt-mp-th img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body[data-nav-wip] .dt-mp-b {
display: block;
padding: 10px 12px 12px;
}
body[data-nav-wip] .dt-mp-n {
display: block;
font-size: 13px;
font-weight: 600;
color: #111827;
}
body[data-nav-wip] .dt-mp-d {
display: block;
font-size: 11.5px;
color: #6b7280;
margin-top: 3px;
line-height: 1.45;
}
/* the ring is a layer above the card: an inset box-shadow paints under the
thumbnail, so only the text strip below the picture showed it */
body[data-nav-wip] .dt-mp-card.is-current::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 2px #2563eb;
pointer-events: none;
z-index: 2;
}
body[data-nav-wip] .dt-mp-card.is-current .dt-mp-n {
color: #2563eb;
}
body[data-nav-wip] .dt-mp-cur {
position: absolute;
top: 8px;
right: 8px;
display: none;
background: #2563eb;
color: #ffffff;
font-size: 10px;
font-weight: 700;
border-radius: 6px;
padding: 2px 6px;
}
body[data-nav-wip] .dt-mp-card.is-current .dt-mp-cur {
display: block;
}
body[data-nav-wip] .dt-mp-new {
position: absolute;
top: 8px;
left: 8px;
background: #111827;
color: #ffffff;
font-size: 9px;
font-weight: 700;
border-radius: 6px;
padding: 2px 6px;
}
body[data-nav-wip] .dt-mp-card.is-disabled {
opacity: .5;
cursor: not-allowed;
}
body.dark-mode[data-nav-wip] .dt-modepick {
background: #161618 !important;
}
body.dark-mode[data-nav-wip] .dt-mp-head h3,
body.dark-mode[data-nav-wip] .dt-mp-n {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-mp-card.is-current .dt-mp-n {
color: #93c5fd !important;
}
body.dark-mode[data-nav-wip] .dt-mp-d {
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-mp-card,
body.dark-mode[data-nav-wip] .dt-mp-close {
background: #1f1f22 !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-mp-card:hover,
body.dark-mode[data-nav-wip] .dt-mp-close:hover {
background: #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .dt-mp-card.is-current::after {
box-shadow: inset 0 0 0 2px #3b82f6 !important;
}
body.dark-mode[data-nav-wip] .dt-mp-new {
background: #f5f5f6 !important;
color: #111827 !important;
}
/* ── Upload card: icon + title + one hint, buttons hidden behind the picker ─ */
body[data-nav-wip] .wo-picture .dt-up-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
body[data-nav-wip] .wo-picture .dt-up-ico {
width: 42px;
height: 42px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
color: #111827;
}
body[data-nav-wip] .wo-picture .dt-up-ico svg {
width: 19px;
height: 19px;
}
body[data-nav-wip] .wo-picture .dt-up-title {
font-size: 13px;
font-weight: 600;
color: #111827;
}
body[data-nav-wip] .wo-picture .dt-up-hint {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
line-height: 1.5;
}
/* the two legacy buttons and the old hint are replaced by the head + picker —
ONLY on the primary zone. The reference card has no picker of its own, and
these buttons are its only way to add an image, so it keeps them. */
body[data-nav-wip] .wo-picture.primary-upload-zone .upload-buttons,
body[data-nav-wip] .wo-picture.primary-upload-zone .upload-tips {
display: none !important;
}
/* reference card: its own quiet keys, matching the picker's */
body[data-nav-wip] .wo-picture.ref-img .upload-buttons {
display: flex;
gap: 8px;
justify-content: center;
}
body[data-nav-wip] .wo-picture.ref-img .upload-tips {
margin-top: 8px;
font-size: 12px;
color: #6b7280;
text-align: center;
}
body.dark-mode[data-nav-wip] .wo-picture.ref-img .upload-tips {
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .wo-picture .dt-up-ico {
background: #2a2a2e !important;
box-shadow: none !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wo-picture .dt-up-title {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wo-picture .dt-up-hint {
color: #a1a1aa !important;
}
/* ── Source picker: the SnapRender "Add a photo" sheet (built by the panel
script, appended to body). Beside the upload card when there is room,
centred otherwise. ── */
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;
box-sizing: border-box;
}
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;
font-family: inherit;
padding: 0;
}
body[data-nav-wip] .dt-pk-close:hover {
background: #e5e7eb;
}
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;
font-family: inherit;
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 !important;
border-color: #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .dt-pk-title,
body.dark-mode[data-nav-wip] .dt-pk-txt b {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-pk-opt {
background: #1f1f22 !important;
border-color: #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .dt-pk-opt:hover {
border-color: #3b82f6 !important;
background: #242430 !important;
}
body.dark-mode[data-nav-wip] .dt-pk-close,
body.dark-mode[data-nav-wip] .dt-pk-ico {
background: #2a2a2e !important;
color: #e5e7eb !important;
}
body.dark-mode[data-nav-wip] .dt-pk-exlabel {
color: #a1a1aa !important;
}/* ── Generate key: raised blue physical button ──────────────────────────── */
body[data-nav-wip] .wamo2-btn {
margin-top: 16px !important;
height: 48px;
line-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);
}
/* ── Result panel: left-aligned quiet tabs ──────────────────────────────── */
body[data-nav-wip] .tab-buttons {
gap: 6px; /* the tabs live in this wrapper, not directly in .wr-title */
}
body[data-nav-wip] .wr-title {
/* 10px above the buttons and 10px below them, so the row sits in even
whitespace between the panel edge and the box. A fixed 44px basis with
asymmetric padding used to land the buttons 7px from the top. */
height: auto;
line-height: normal;
justify-content: flex-start;
align-items: center;
gap: 6px;
padding: 10px 24px 0;
box-sizing: border-box;
flex: 0 0 auto;
margin-bottom: 10px;
}
body[data-nav-wip] .gen-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px !important;
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 500;
background: transparent;
color: #6b7280;
white-space: nowrap;
}
body[data-nav-wip] .gen-tab:hover {
background: #f5f5f6;
color: #111827;
}
body[data-nav-wip] .gen-tab.active {
background: #e5e7eb; /* quiet grey — blue is reserved for the generate key */
color: #111827;
font-weight: 600;
}
body[data-nav-wip] .wr-lists-box {
margin: 0 24px 24px;
border: 0;
background: #f5f6f8;
border-radius: 16px;
/* column flex so the caption can sit under a picture that fills the rest;
the base rule's height:100% would otherwise collapse a height:auto child */
display: flex;
flex-direction: column;
height: auto;
flex: 1 1 auto;
min-height: 0;
}
body[data-nav-wip] .wr-lists.result,
body[data-nav-wip] .wr-lists.canvas,
body[data-nav-wip] .wr-lists.history {
flex: 1 1 auto;
min-height: 0;
}
body[data-nav-wip] .wr-lists.result {
height: auto;
padding: 32px 16px 0; /* SnapRender rhythm: the caption below supplies the bottom */
overflow: hidden;
}
body[data-nav-wip] .wr-lists.canvas {
padding: 20px;
}
body[data-nav-wip] .wr-lists.result img {
border-radius: 14px;
}
/* tab icons (added by roomflow-panel-wip.js) */
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 .dt-tab-ico svg,
body[data-nav-wip] .wr-title #fullscreenBtn svg {
width: 16px;
height: 16px;
}
/* fullscreen: relocated onto the tab row by the panel JS, quiet borderless key */
body[data-nav-wip] .wr-title #fullscreenBtn {
position: static;
margin-left: auto;
height: 34px;
padding: 0 12px;
gap: 6px;
border: 0;
border-radius: 8px;
background: #f5f6f8;
box-shadow: none;
color: #111827;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
body[data-nav-wip] .wr-title #fullscreenBtn .dt-fs-content {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
line-height: 16px;
}
body[data-nav-wip] .wr-title #fullscreenBtn .dt-fs-content svg {
display: block;
flex: 0 0 16px;
}
body[data-nav-wip] .wr-title #fullscreenBtn:hover {
background: #e5e7eb;
box-shadow: none;
}
body.dark-mode[data-nav-wip] .wr-title #fullscreenBtn {
background: #1f1f22 !important;
background-color: #1f1f22 !important;
border: 0 !important;
color: #f5f5f6 !important;
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .wr-title #fullscreenBtn:hover {
background: #2a2a2e !important;
background-color: #2a2a2e !important;
}
/* narrow layouts: icon-only tabs and fullscreen key */
@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,
body[data-nav-wip] .wr-title #fullscreenBtn {
gap: 0;
width: 36px;
padding: 0 !important;
justify-content: center;
}
}
/* ── Canvas editor: one toolbar under the picture instead of two floating
chip stacks on top of it (moved there by roomflow-panel-wip.js) ─────── */
body[data-nav-wip] .wr-lists.canvas {
display: flex;
flex-direction: column;
gap: 12px;
}
body[data-nav-wip] .wr-lists.canvas .canvas-wrapper {
flex: 1 1 auto;
height: auto;
min-height: 0;
border-radius: 14px;
/* the checkerboard reads as "transparent", but this is just the empty mat
around a centred picture — a quiet fill says that without the noise */
background-image: none;
background-color: #f5f6f8;
}
body[data-nav-wip] .dt-canvas-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center; /* one cluster in the middle, not pinned to both ends */
/* and the white only wraps that cluster — a full-width bar under a centred
group read as an empty strip with controls floating in it */
width: fit-content;
max-width: 100%;
margin: 0 auto;
gap: 14px;
padding: 8px 14px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
flex-wrap: wrap;
}
/* the two stacks become plain rows in the bar, with no pill of their own */
body[data-nav-wip] .dt-canvas-bar .canvas-toolbar {
position: static;
transform: none;
flex-direction: row;
align-items: center;
gap: 10px;
pointer-events: auto;
}
body[data-nav-wip] .dt-canvas-bar .canvas-actions {
position: static;
margin-left: 0;
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
body[data-nav-wip] .dt-canvas-bar .canvas-tool-group {
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
gap: 4px;
}
/* a hairline between the colours and the tools */
body[data-nav-wip] .dt-canvas-bar .canvas-tool-group + .canvas-tool-group,
body[data-nav-wip] .dt-canvas-bar .canvas-toolbar + .canvas-actions {
padding-left: 14px;
border-left: 1px solid #eef0f3;
}
body[data-nav-wip] .dt-canvas-bar .canvas-tool-btn {
width: 34px;
height: 34px;
border-radius: 8px;
color: #4b5563;
}
body[data-nav-wip] .dt-canvas-bar .canvas-tool-btn:hover {
background: #f5f6f8;
color: #111827;
}
body[data-nav-wip] .dt-canvas-bar .canvas-tool-btn.active {
background: #e5e7eb;
color: #111827;
}
body[data-nav-wip] .dt-canvas-bar .canvas-color-dot {
width: 22px;
height: 22px;
border-width: 2px;
}
body[data-nav-wip] .dt-canvas-bar .canvas-color-dot.active {
border-color: #111827;
box-shadow: 0 0 0 2px #ffffff inset;
}
body[data-nav-wip] .dt-canvas-bar .canvas-action-btn {
width: 34px;
height: 34px;
border-radius: 8px;
color: #4b5563;
}
body[data-nav-wip] .dt-canvas-bar .canvas-action-btn:hover {
background: #f5f6f8;
color: #111827;
}
/* Done: the black key SnapRender uses for Edit / send — blue stays reserved
for the page's one generate key */
body[data-nav-wip] .dt-canvas-bar .canvas-apply-btn {
height: 34px;
padding: 0 16px;
border-radius: 8px;
background: #111827;
color: #ffffff;
font-size: 13px;
font-weight: 600;
}
body[data-nav-wip] .dt-canvas-bar .canvas-apply-btn:hover {
background: #1f2937;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-apply-btn {
background: #e5e7eb !important;
color: #111827 !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-apply-btn:hover {
background: #f3f4f6 !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar {
background: #1f1f22 !important;
box-shadow: 0 0 0 1px #2a2a2e, 0 1px 2px rgba(0, 0, 0, .4) !important;
}
/* dark-theme.css gives every .canvas-tool-group / .canvas-actions its own
card (bg, border, shadow, all !important), which broke the one rounded bar
into three boxes. Inside the bar they stay plain rows, as in light mode. */
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-tool-group,
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-actions {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-tool-group + .canvas-tool-group,
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-toolbar + .canvas-actions {
border-left: 1px solid #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-tool-btn svg,
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-action-btn svg {
stroke: currentColor !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-tool-btn,
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-action-btn {
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-tool-btn:hover,
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-action-btn:hover {
background: #2a2a2e !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-tool-btn.active {
background: #2a2a2e !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-canvas-bar .canvas-color-dot.active {
border-color: #f5f5f6 !important;
box-shadow: 0 0 0 2px #1f1f22 inset !important;
}
body.dark-mode[data-nav-wip] .wr-lists.canvas .canvas-wrapper {
background-image: none !important;
background-color: #161618 !important;
}
/* ── Showcase caption under the example compare (roomflow-panel-wip.js) ─── */
body[data-nav-wip] .dt-showcase {
flex: 0 0 auto;
display: none;
text-align: center;
padding: 12px 16px 18px;
}
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;
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: 12px;
}
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;
font-family: inherit;
padding: 0;
}
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;
}
body[data-nav-wip] .dt-showcase .dt-sc-thumb.is-disabled {
opacity: .45;
cursor: not-allowed;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-arr {
background: #1f1f22 !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-arr:hover {
background: #2a2a2e !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-thumbs {
background: #1f1f22 !important;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-thumb.on {
border-color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-title {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .dt-showcase .dt-sc-desc {
color: #a1a1aa !important;
}
/* the compare frame itself carries a white fill, a 12px radius and a drop
shadow; with a content-sized picture inside, that shows as a pale border
around the image. The picture supplies the rounding now. */
body[data-nav-wip] .wr-lists.result .image-compare-container {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* content-sized, rounded compare layers: with object-fit the ![]()
box fills
the wrapper and the radius lands in the letterbox, so size the picture to
its own content and round that (same fix as SnapRender round 49) */
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 .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;
}
/* fullscreen: quiet borderless key in the box corner */
body[data-nav-wip] .fullscreen-btn {
right: 16px;
top: 16px;
height: 34px;
padding: 0 12px;
gap: 6px;
border: 0;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
color: #111827;
font-size: 13px;
font-weight: 500;
}
body[data-nav-wip] .fullscreen-btn:hover {
background: #e5e7eb;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .fullscreen-btn svg {
width: 15px;
height: 15px;
}
/* ── Narrow layouts ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
body[data-nav-wip][data-sidebar-active] .web-ai-container,
body[data-nav-wip][data-rail-pinned][data-sidebar-active] .web-ai-container {
margin-left: 0 !important;
width: 100% !important;
}
body[data-nav-wip][data-sidebar-active] .web-ai-main {
padding: 0 12px !important;
gap: 12px !important;
flex-direction: column !important;
}
body[data-nav-wip][data-sidebar-active] .wam-op,
body[data-nav-wip][data-sidebar-active] .wam-result {
width: 100% !important;
flex: 0 0 auto !important;
height: auto !important;
margin: 12px 0 0 0 !important;
}
}
/* ============================================================================
Dark mode — Higgsfield-style neutral near-black. dark-theme.css paints the
whole tool slate (#1f2937 / #374151 / #475569) with !important, so every rule
below has to answer in kind.
========================================================================== */
body.dark-mode[data-nav-wip] .web-ai-container {
background-color: #0e0e10 !important;
}
body.dark-mode[data-nav-wip][data-sidebar-active] .wam-op,
body.dark-mode[data-nav-wip][data-sidebar-active] .wam-result {
background-color: #161618 !important;
box-shadow: none !important;
border: 1px solid #2a2a2e !important;
}
body.dark-mode[data-nav-wip] .wo-title,
body.dark-mode[data-nav-wip] .wsb-item.active .wsbi > div {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wsbi > div,
body.dark-mode[data-nav-wip] .wo-picture {
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .wsb-item,
body.dark-mode[data-nav-wip] .style-inline,
body.dark-mode[data-nav-wip] .wo-prompt textarea,
body.dark-mode[data-nav-wip] textarea#prompt {
background: #1f1f22 !important;
border: 0 !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wsb-item:hover {
background: #242428 !important;
}
body.dark-mode[data-nav-wip] .wsb-item.active {
background: #2a2a2e !important;
box-shadow: inset 0 0 0 1.5px #3b82f6 !important;
}
body.dark-mode[data-nav-wip] .wo-picture {
background: #1f1f22 !important;
border: 1.5px dashed #3a3a40 !important;
}
body.dark-mode[data-nav-wip] .wo-prompt textarea::placeholder,
body.dark-mode[data-nav-wip] textarea#prompt::placeholder {
color: #71717a !important;
}
body.dark-mode[data-nav-wip] .style-chip {
background: #2a2a2e !important;
border-color: #3a3a40 !important;
color: #93c5fd !important;
}body.dark-mode[data-nav-wip] .detail-btn {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .detail-btn.active {
background: #2a2a2e !important;
color: #f5f5f6 !important;
box-shadow: none !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;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .wr-lists-box {
background: #1f1f22 !important;
border: 0 !important;
}
body.dark-mode[data-nav-wip] .fullscreen-btn {
background: #1f1f22 !important;
border: 0 !important;
color: #f5f5f6 !important;
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .fullscreen-btn:hover {
background: #2a2a2e !important;
}
/* ── Reference card: reads as a smaller sibling of the main upload card ─────
Same dashed shell and the same round-icon head, one notch shorter and
clearly separated from the picture above it. Its own two buttons stay —
the picker is wired to constraint_img only — and the long legacy tip line
is replaced by the head's hint. ── */
body[data-nav-wip] .wo-picture.ref-img {
margin-top: 12px !important;
aspect-ratio: 16 / 7;
min-height: 140px;
padding: 12px 14px;
}
body[data-nav-wip] .wo-picture.ref-img .wop-op {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
body[data-nav-wip] .wo-picture.ref-img .dt-up-ico {
width: 34px;
height: 34px;
margin-bottom: 6px;
}
body[data-nav-wip] .wo-picture.ref-img .dt-up-ico svg {
width: 16px;
height: 16px;
}
body[data-nav-wip] .wo-picture.ref-img .dt-up-hint {
margin-top: 2px;
}
/* both cards now open the same source sheet, so the reference card's two
buttons go the way of the primary zone's. They stay in the DOM — the sheet
proxies a click to them, which is what sets the ref_img preview target. */
body[data-nav-wip] .wo-picture.ref-img .upload-buttons {
display: none !important;
}
body[data-nav-wip] .wo-picture.ref-img .upload-tips {
display: none !important;
}
/* ── PlanRender folds back into the one upload pattern ──────────────────────
It shipped its own treatment: a taller dashed box (240-300px) with its own
border/background, and a big blue trigger button plus a menu inside
.primary-upload-empty. Stacked under the head this panel adds, that gave
two sets of upload chrome in one card and pushed it to 259px. Every mode
here uses the same card + source sheet, so PlanRender uses it too. The
menu stays in the DOM — the sheet proxies clicks to its items. ── */
body[data-nav-wip] .web-ai-container.mode-planrender .primary-upload-empty {
display: none !important;
}
body[data-nav-wip] .web-ai-container.mode-planrender .primary-upload-zone,
body[data-nav-wip] .web-ai-container.mode-planrender .primary-upload-zone:hover {
height: auto;
aspect-ratio: 16 / 7;
min-height: 140px;
padding: 12px 14px;
border: 1.5px dashed #d1d5db;
border-radius: 14px;
background: #f5f6f8;
}
body[data-nav-wip] .web-ai-container.mode-planrender .upload-empty-shell {
height: auto;
}
/* the three PlanRender sub-workflows are the one control this mode adds, and
they choose what the panel below them does — exactly the job the
Description / Reference switch has. So they take that switch's shape: one
soft track, a white pill on the selected segment, text only. */
body[data-nav-wip] .planrender-actions {
display: flex;
gap: 4px;
padding: 4px;
background: #f5f6f8;
border-radius: 12px;
box-sizing: border-box;
}
body[data-nav-wip] .planrender-actions .workflow-card {
flex: 1 1 0;
min-width: 0;
height: auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
border: 0 !important;
border-radius: 10px !important;
padding: 7px 8px !important;
background: transparent !important;
color: #6b7280 !important;
box-shadow: none !important;
transition: background .15s ease;
}
body[data-nav-wip] .planrender-actions .workflow-card:hover {
background: #eceef2 !important;
}
body[data-nav-wip] .planrender-actions .workflow-card.active {
background: #ffffff !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
color: #111827 !important;
}
/* a segment is its label; the icon and the tick belong to a card, not a pill */
body[data-nav-wip] .planrender-actions .workflow-card > svg,
body[data-nav-wip] .planrender-actions .workflow-card-check {
display: none !important;
}
body[data-nav-wip] .planrender-actions .workflow-card-label {
font-size: 13px;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit !important;
}
body[data-nav-wip] .planrender-actions .workflow-card.active .workflow-card-label {
font-weight: 600;
}
/* Sub-mode switches (3D-Render Detailed Model / Block Sketch, CollageRender
Lock / Correct): moved under the mode card by the panel JS and given the same
segmented-track shape as the switch above */
body[data-nav-wip] .wam-op .wo-param.srm-mode,
body[data-nav-wip] .wam-op .wo-param.constraints-settings {
margin: 0 0 12px !important;
}
body[data-nav-wip] .wo-param.srm-mode .wop-param,
body[data-nav-wip] .wo-param.constraints-settings .wop-param {
padding: 0 !important;
background: transparent !important;
height: auto !important;
}
body[data-nav-wip] .wo-param.srm-mode .new-style-buttons,
body[data-nav-wip] .wo-param.constraints-settings .constraint-buttons {
display: flex;
gap: 4px;
padding: 4px;
background: #f5f6f8;
border-radius: 12px;
box-sizing: border-box;
}
body[data-nav-wip] .wo-param.srm-mode .new-style-btn,
body[data-nav-wip] .wo-param.constraints-settings .constraint-btn {
flex: 1 1 0;
min-width: 0;
height: auto !important;
border: 0 !important;
border-radius: 10px !important;
padding: 7px 8px !important;
background: transparent !important;
color: #6b7280 !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
transition: background .15s ease;
}
body[data-nav-wip] .wo-param.srm-mode .new-style-btn:hover,
body[data-nav-wip] .wo-param.constraints-settings .constraint-btn:hover {
background: #eceef2 !important;
}
body[data-nav-wip] .wo-param.srm-mode .new-style-btn.active,
body[data-nav-wip] .wo-param.constraints-settings .constraint-btn.active {
background: #ffffff !important;
box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
color: #111827 !important;
font-weight: 600;
}
/* a segment is its label (the page draws a ::before icon on these); the
constraints block also carries a "Setting" title the track doesn't need */
body[data-nav-wip] .wo-param.constraints-settings .wop-title {
display: none !important;
}
body[data-nav-wip] .wo-param.srm-mode .new-style-btn::before,
body[data-nav-wip] .wo-param.constraints-settings .constraint-btn::before,
body[data-nav-wip] .wo-param.srm-mode .new-style-btn svg,
body[data-nav-wip] .wo-param.constraints-settings .constraint-btn svg,
body[data-nav-wip] .wo-param.srm-mode .new-style-btn img,
body[data-nav-wip] .wo-param.constraints-settings .constraint-btn img {
display: none !important;
}
body.dark-mode[data-nav-wip] .wo-param.srm-mode .new-style-buttons,
body.dark-mode[data-nav-wip] .wo-param.constraints-settings .constraint-buttons {
background: #1f1f22 !important;
}
body.dark-mode[data-nav-wip] .wo-param.srm-mode .new-style-btn,
body.dark-mode[data-nav-wip] .wo-param.constraints-settings .constraint-btn {
background: transparent !important;
color: #a1a1aa !important;
border: 0 !important;
}
body.dark-mode[data-nav-wip] .wo-param.srm-mode .new-style-btn:hover,
body.dark-mode[data-nav-wip] .wo-param.constraints-settings .constraint-btn:hover {
background: #242428 !important;
}
body.dark-mode[data-nav-wip] .wo-param.srm-mode .new-style-btn.active,
body.dark-mode[data-nav-wip] .wo-param.constraints-settings .constraint-btn.active {
background: #2a2a2e !important;
box-shadow: none !important;
color: #f5f5f6 !important;
}
/* and the upload card below it is a separate step, not a continuation */
body[data-nav-wip] .planrender-workflow {
margin-bottom: 12px;
}
body.dark-mode[data-nav-wip] .planrender-actions {
background: #1f1f22 !important;
}
body.dark-mode[data-nav-wip] .planrender-actions .workflow-card {
background: transparent !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .planrender-actions .workflow-card:hover {
background: #242428 !important;
}
body.dark-mode[data-nav-wip] .planrender-actions .workflow-card.active {
background: #2a2a2e !important;
box-shadow: none !important;
color: #f5f5f6 !important;
}
body[data-nav-wip] .planrender-workflow .workflow-summary {
border: 0;
border-radius: 12px;
background: #f5f6f8;
color: #6b7280;
}
body[data-nav-wip] .planrender-workflow .workflow-summary-title {
color: #111827;
}
body.dark-mode[data-nav-wip] .planrender-workflow .workflow-summary {
background: #1f1f22 !important;
color: #a1a1aa !important;
}
body.dark-mode[data-nav-wip] .planrender-workflow .workflow-summary-title {
color: #f5f5f6 !important;
}
/* PlanRender's cover is a white floor plan, and a scrim tuned for photographs
left the title unreadable on it — deepen the bottom band for this mode only */
body[data-nav-wip] .web-ai-container.mode-planrender .dt-modecard .dt-mc-scrim {
background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .42) 46%, rgba(0, 0, 0, 0) 78%),
linear-gradient(to bottom, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 22%);
}
/* the summary line only repeated the selected tile's own label */
body[data-nav-wip] .planrender-workflow .workflow-summary {
display: none !important;
}
/* the generate key stays guarded until a plan is uploaded, but it no longer
greys out — it reads the same as every other mode and says what it wants */
body[data-nav-wip] .wamo2-btn.is-upload-disabled {
background: #2563eb !important;
color: #ffffff !important;
/* the page's disabled rule strips the raised shadow, adds a hairline and
sets pointer-events:none — which would also swallow the real click the
nudge listens for. All four go back to the live look. */
border: 0 !important;
box-shadow: 0 4px 0 #1e40af, 0 6px 14px rgba(37, 99, 235, .25) !important;
cursor: pointer !important;
pointer-events: auto !important;
opacity: 1 !important;
}
body[data-nav-wip] .wamo2-btn.is-upload-disabled:hover {
background: #2b6cf0 !important;
transform: translateY(1px);
box-shadow: 0 3px 0 #1e40af, 0 5px 12px rgba(37, 99, 235, .25) !important;
}
body[data-nav-wip] .wamo2-btn.is-upload-disabled span {
color: #ffffff !important;
opacity: .7 !important;
}
/* PlanRender's prompt box gets the same fused head and height as the others */
body[data-nav-wip] .dt-pt-head + .wo-prompt.style-transfer-prompt-ele {
margin-top: 0 !important;
height: 160px !important;
}
body[data-nav-wip] .dt-pt-head + .wo-prompt.style-transfer-prompt-ele textarea {
border-radius: 0 0 14px 14px !important;
}
/* Plan Coloring puts a four-card preset grid inside the prompt box, so a fixed
height clipped it — the grid and the textarea spilled over the card and the
generate key sat on top of them. This one variant sizes to its content. */
body[data-nav-wip] .dt-pt-head + .wo-prompt.style-transfer-prompt-ele.is-plan-coloring {
height: auto !important;
padding-bottom: 12px !important;
}
body[data-nav-wip] .wo-prompt.style-transfer-prompt-ele.is-plan-coloring textarea {
height: auto !important;
min-height: 62px;
}
/* ── Mode tab: the picker's own entry in the result tab row ────────────────
Not a data-type tab — the page delegates on that attribute — so it is
styled here to sit level with the three it joins. ── */
body[data-nav-wip] .dt-mode-tab {
margin-left: 0;
}
body[data-nav-wip] .dt-mode-tab.active {
background: #eceef2 !important;
color: #111827 !important;
font-weight: 600 !important;
box-shadow: none !important;
}
body.dark-mode[data-nav-wip] .dt-mode-tab.active {
background: #2a2a2e !important;
color: #f5f5f6 !important;
}
/* a mode is easiest to recognise from what it does to a picture, so the card
shows that mode's own example pair rather than its input photo alone */
body[data-nav-wip] .dt-mp-th.dt-mp-ab {
display: flex;
overflow: hidden;
}
body[data-nav-wip] .dt-mp-th.dt-mp-ab img {
flex: 1 1 50%;
min-width: 0;
width: 50%;
height: 100%;
object-fit: cover;
display: block;
}
body[data-nav-wip] .dt-mp-th.dt-mp-ab .dt-mp-after {
border-left: 2px solid #ffffff;
}
body.dark-mode[data-nav-wip] .dt-mp-th.dt-mp-ab .dt-mp-after {
border-left-color: #161618;
}
/* ── "Custom …" prompt dialog (layer.prompt) ───────────────────────────────
Scoped to .layui-layer-prompt so the page's other dialogs keep their own
look. The page paints every dialog button with a blue gradient and stacks
them; here the pair sits on one line — quiet Cancel, solid OK. ── */
body[data-nav-wip] .layui-layer.layui-layer-prompt {
border-radius: 16px !important;
border: 0 !important;
box-shadow: 0 20px 48px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06) !important;
overflow: hidden;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-title {
height: auto !important;
/* room on the right for the close key, which shares this line */
padding: 20px 56px 6px 22px !important;
border-bottom: 0 !important;
background: transparent !important;
color: #111827 !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 22px !important;
}
/* the close key lines up with the title text, with a real hit area */
body[data-nav-wip] .layui-layer-prompt .layui-layer-setwin {
top: 16px !important;
right: 14px !important;
left: auto !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-setwin .layui-layer-close {
width: 30px !important;
height: 30px !important;
margin: 0 !important;
border-radius: 8px !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 17px !important;
color: #9ca3af !important;
transition: background .15s ease, color .15s ease;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-setwin .layui-layer-close:hover {
background: #f5f6f8 !important;
color: #111827 !important;
}
/* the card paints the surface; its parts carry their own white otherwise, which
showed as a white frame around the dark dialog */
body[data-nav-wip] .layui-layer-prompt .layui-layer-content,
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn {
background: transparent !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-content {
padding: 10px 22px 0 !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-input {
width: 100% !important;
height: 40px !important;
box-sizing: border-box;
padding: 0 12px !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
font-size: 14px !important;
color: #111827 !important;
background: #ffffff !important;
box-shadow: none !important;
outline: none;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-input:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn {
display: flex !important;
flex-direction: row-reverse !important; /* OK on the right */
gap: 10px !important;
padding: 16px 22px 20px !important;
border-top: 0 !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn a {
flex: 1 1 0;
height: 40px !important;
line-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-align: center;
transition: background .15s ease !important;
transform: none !important;
box-shadow: none !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn .layui-layer-btn0 {
background: #2563eb !important;
color: #ffffff !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn .layui-layer-btn0:hover {
background: #1d4ed8 !important;
transform: none !important;
box-shadow: none !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn .layui-layer-btn1 {
background: #f5f6f8 !important;
color: #4b5563 !important;
}
body[data-nav-wip] .layui-layer-prompt .layui-layer-btn .layui-layer-btn1:hover {
background: #eceef2 !important;
color: #111827 !important;
}
/* dark: a grey card with lighter grey fields on it — near-black surfaces read
as a hole punched in the page rather than a dialog sitting above it */
body.dark-mode[data-nav-wip] .layui-layer.layui-layer-prompt {
background: #2b2b30 !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, .5), 0 0 0 1px #3a3a41 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-title {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-input {
background: #37373d !important;
border-color: #4a4a52 !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-input::placeholder {
color: #8e8e96 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-input:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, .2) !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-btn .layui-layer-btn1 {
background: #3a3a41 !important;
color: #d4d4d8 !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-btn .layui-layer-btn1:hover {
background: #45454d !important;
color: #ffffff !important;
}
body.dark-mode[data-nav-wip] .layui-layer-prompt .layui-layer-setwin .layui-layer-close {
color: #a1a1aa !important;
}
/* ── Image action buttons (history hover, fullscreen viewer) ───────────────
The page draws these as glyph circles; roomflow-panel-wip.js swaps the
glyph for a stroked icon and tags the button, so they match the panel:
a soft square, one hairline, no zoom on hover. ── */
body[data-nav-wip] .dt-iconbtn {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, .22) !important;
background: rgba(17, 24, 39, .55) !important;
color: #ffffff !important;
font-size: 0 !important;
/* no display here: the page hides the viewer's download key until there is
something to download, and shows it by setting display itself */
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
transition: background .15s ease, border-color .15s ease;
}
body[data-nav-wip] .dt-iconbtn:hover {
background: rgba(17, 24, 39, .78) !important;
border-color: rgba(255, 255, 255, .38) !important;
transform: none !important;
}
body[data-nav-wip] .dt-iconbtn svg {
width: 19px;
height: 19px;
display: block;
}
/* the viewer's two keys sit on the same line, one gap apart */
body[data-nav-wip] .fullscreen-close.dt-iconbtn {
top: 18px !important;
right: 18px !important;
}
body[data-nav-wip] .fullscreen-download.dt-iconbtn {
top: 18px !important;
right: 64px !important;
}
/* ── Canvas tab's empty state ──────────────────────────────────────────────
The page draws it with an 8px radius inside a wrapper this panel rounds
to 14px, so the hover ring's corners were clipped, and it used its own
blue and its own grey glyph. It now matches the upload card: same fill,
same round-icon head, same type, and a ring that follows the wrapper. ── */
body[data-nav-wip] #canvasUploadPlaceholder {
background: #f5f6f8 !important;
border-radius: 14px !important;
box-shadow: none;
transition: background .15s ease, box-shadow .15s ease;
}
body[data-nav-wip] #canvasUploadPlaceholder:hover {
background: #eceef2 !important;
box-shadow: inset 0 0 0 1.5px #2563eb !important;
}
body[data-nav-wip] #canvasUploadPlaceholder .dt-up-ico {
width: 42px;
height: 42px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
display: flex;
align-items: center;
justify-content: center;
color: #111827;
}
body[data-nav-wip] #canvasUploadPlaceholder .dt-up-ico svg {
width: 19px;
height: 19px;
stroke: currentColor !important;
stroke-width: 1.8;
}
body[data-nav-wip] #canvasUploadPlaceholder:hover .dt-up-ico svg {
stroke: currentColor !important;
}
body[data-nav-wip] #canvasUploadPlaceholder > div:nth-of-type(1) {
margin-top: 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #111827 !important;
}
body[data-nav-wip] #canvasUploadPlaceholder > div:nth-of-type(2) {
margin-top: 4px !important;
font-size: 12px !important;
color: #6b7280 !important;
}
body.dark-mode[data-nav-wip] #canvasUploadPlaceholder {
background: #161618 !important;
}
body.dark-mode[data-nav-wip] #canvasUploadPlaceholder:hover {
background: #1f1f22 !important;
box-shadow: inset 0 0 0 1.5px #3b82f6 !important;
}
body.dark-mode[data-nav-wip] #canvasUploadPlaceholder .dt-up-ico {
background: #2a2a2e !important;
box-shadow: none !important;
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] #canvasUploadPlaceholder > div:nth-of-type(1) {
color: #f5f5f6 !important;
}
body.dark-mode[data-nav-wip] #canvasUploadPlaceholder > div:nth-of-type(2) {
color: #a1a1aa !important;
}
/* ── Parameter dropdown ──────────────────────────────────────────────────────────
The page's own menus are never shown in this panel; the rows open a copy
this panel owns (.dt-dd). The copy keeps the page's menu classes so the
existing item styling, light and dark, applies to it. ── */
body[data-nav-wip] .style-menu:not(.dt-dd) {
visibility: hidden !important;
pointer-events: none !important;
}
body[data-nav-wip] .dt-dd {
z-index: 10001;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(16, 24, 40, .14), 0 1px 2px rgba(16, 24, 40, .06);
}
/* Room types: an icon beside each label (decorateMenu in roomflow-panel-wip.js) */
body[data-nav-wip] .dt-dd.dt-dd-rooms,
body[data-nav-wip] .dt-dd.dt-dd-styles {
column-count: unset !important;
/* display is set inline by openChip ("grid"), so a closed menu's inline
display:none still wins — an !important here left an empty bar behind */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
}
body[data-nav-wip] .dt-dd.dt-dd-rooms .menu-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
body[data-nav-wip] .dt-dd .dt-mi-ico {
flex: none;
color: #6b7280;
}
body[data-nav-wip] .dt-dd .menu-item:hover .dt-mi-ico {
color: #2563eb;
}
body[data-nav-wip] .dt-dd .dt-mi-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Styles: the same small bedroom rendered in each style, label under it */
body[data-nav-wip] .dt-dd.dt-dd-styles {
gap: 4px;
max-height: min(520px, calc(100vh - 24px));
}
body[data-nav-wip] .dt-dd.dt-dd-styles .menu-item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
padding: 5px;
text-align: center;
min-width: 0;
}
body[data-nav-wip] .dt-dd .dt-mi-thumb {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
background: #eef0f3;
}
body[data-nav-wip] .dt-dd.dt-dd-styles .menu-item:hover .dt-mi-thumb {
box-shadow: 0 0 0 2px #3b82f6;
}
body[data-nav-wip] .dt-dd.dt-dd-styles .menu-item-custom {
justify-content: center;
margin-top: 0;
box-shadow: none;
border: 1px dashed #d1d5db !important;
}
/* Layout Gen output: two preview cards (line drawing / realistic render) */
body[data-nav-wip] .dt-dd.dt-dd-output {
column-count: unset !important;
/* display is set inline by openChip ("grid"), so a closed menu's inline
display:none still wins — an !important here left an empty bar behind */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
padding: 8px;
}
body[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 5px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: #111827;
text-align: center;
}
body[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 6px;
background: #eef0f3;
}
body[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item:hover {
background: #f5f6f8;
}
body[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item:hover img,
body[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item.active img {
box-shadow: 0 0 0 2px #3b82f6;
}
body.dark-mode[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item {
color: #f5f5f6;
}
body.dark-mode[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item:hover {
background: #2a2a2e;
}
body.dark-mode[data-nav-wip] .dt-dd.dt-dd-output .layout-style-item img {
background: #2a2a2e;
}
body.dark-mode[data-nav-wip] .dt-dd .dt-mi-ico {
color: #a1a1aa;
}
body.dark-mode[data-nav-wip] .dt-dd .menu-item:hover .dt-mi-ico {
color: #93c5fd;
}
body.dark-mode[data-nav-wip] .dt-dd .dt-mi-thumb {
background: #2a2a2e;
}
body.dark-mode[data-nav-wip] .dt-dd.dt-dd-styles .menu-item-custom {
border-color: #3f3f46 !important;
box-shadow: none;
}
/* ── upload card feedback (2026-09-29), same as SnapRender: hover / drag-over
on an EMPTY card (JS sets .dt-hot / .dt-drag only while no preview shows).
!important: the mode-planrender block and the page's drag handler pin the
card's border / background. ── */
body[data-nav-wip] .wo-picture.primary-upload-zone,
body[data-nav-wip] .wo-picture.ref-img {
transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
body[data-nav-wip] .wo-picture .dt-up-ico {
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
body[data-nav-wip] .wo-picture:is(.dt-hot, .dt-drag) {
border-color: #2563eb !important;
background-color: #eef4ff !important;
cursor: pointer;
}
body[data-nav-wip] .wo-picture:is(.dt-hot, .dt-drag) .dt-up-ico {
background: #2563eb !important;
color: #ffffff !important;
transform: translateY(-2px);
}
body[data-nav-wip] .wo-picture.dt-hot .dt-up-title {
color: #1d4ed8 !important;
}
body[data-nav-wip] .wo-picture.dt-drag {
border-style: solid !important;
background-color: #e3edff !important;
}
body[data-nav-wip] .wo-picture.dt-hot:active {
transform: scale(.99);
}
body.dark-mode[data-nav-wip] .wo-picture:is(.dt-hot, .dt-drag) {
border-color: #3b82f6 !important;
background-color: #1d2230 !important;
}
body.dark-mode[data-nav-wip] .wo-picture:is(.dt-hot, .dt-drag) .dt-up-ico {
background: #3b82f6 !important;
color: #ffffff !important;
}
body.dark-mode[data-nav-wip] .wo-picture.dt-hot .dt-up-title {
color: #bfdbfe !important;
}
body.dark-mode[data-nav-wip] .wo-picture.dt-drag {
background-color: #1e2a44 !important;
}
/* ── label notice (layer skin dt-notice, PlanRender Layout Gen without room
labels): the WIP dialog look — white card, quiet title, black primary key,
grey secondary key side by side. The page paints layer buttons with a blue
gradient and stacks them. ── */
body[data-nav-wip] .layui-layer.dt-notice {
border-radius: 16px !important;
border: 0 !important;
box-shadow: 0 20px 48px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06) !important;
overflow: hidden;
}
body[data-nav-wip] .dt-notice .layui-layer-title {
height: auto !important;
padding: 20px 56px 4px 22px !important;
border-bottom: 0 !important;
background: transparent !important;
color: #111827 !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 22px !important;
}
body[data-nav-wip] .dt-notice .layui-layer-setwin {
top: 16px !important;
right: 14px !important;
left: auto !important;
}
body[data-nav-wip] .dt-notice .layui-layer-setwin .layui-layer-close {
width: 30px !important;
height: 30px !important;
margin: 0 !important;
border-radius: 8px !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 17px !important;
color: #9ca3af !important;
}
body[data-nav-wip] .dt-notice .layui-layer-setwin .layui-layer-close:hover {
background: #f5f6f8 !important;
color: #111827 !important;
}
body[data-nav-wip] .dt-notice .layui-layer-content,
body[data-nav-wip] .dt-notice .layui-layer-btn {
background: transparent !important;
}
body[data-nav-wip] .dt-notice .dt-notice-body {
padding: 8px 22px 0;
font-size: 14px;
line-height: 22px;
color: #4b5563;
}
body[data-nav-wip] .dt-notice .layui-layer-btn {
display: flex !important;
flex-direction: row-reverse !important; /* primary on the right */
gap: 10px !important;
padding: 20px 22px 20px !important;
border-top: 0 !important;
}
body[data-nav-wip] .dt-notice .layui-layer-btn a {
flex: 1 1 0;
height: 40px !important;
line-height: 40px !important;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-image: none !important;
transform: none !important;
box-shadow: none !important;
transition: background .15s ease !important;
}
body[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn0 {
background: #111827 !important;
color: #ffffff !important;
font-weight: 600 !important;
}
body[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn0:hover {
background: #1f2937 !important;
}
body[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn1 {
background: #f5f6f8 !important;
color: #4b5563 !important;
}
body[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn1:hover {
background: #eceef2 !important;
color: #111827 !important;
}
body.dark-mode[data-nav-wip] .layui-layer.dt-notice {
background: #2b2b30 !important;
box-shadow: 0 20px 48px rgba(0, 0, 0, .5), 0 0 0 1px #3a3a41 !important;
}
body.dark-mode[data-nav-wip] .dt-notice .layui-layer-title { color: #f5f5f6 !important; }
body.dark-mode[data-nav-wip] .dt-notice .dt-notice-body { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-notice .layui-layer-setwin .layui-layer-close:hover { background: #3a3a41 !important; color: #f5f5f6 !important; }
body.dark-mode[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn0 { background: #e5e7eb !important; color: #111827 !important; }
body.dark-mode[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn0:hover { background: #f3f4f6 !important; }
body.dark-mode[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn1 { background: #3a3a41 !important; color: #d4d4d8 !important; }
body.dark-mode[data-nav-wip] .dt-notice .layui-layer-btn .layui-layer-btn1:hover { background: #45454d !important; color: #ffffff !important; }
/* ── result actions (panel JS block 12), as on SnapRender: the floating row
under the picture is gone; Edit / Generate Video sit centred in the tab
row, Compare / Download are icon keys beside Fullscreen ── */
body[data-nav-wip] .wr-lists-box .floating-buttons {
display: none !important;
}
body[data-nav-wip] .wr-title {
position: relative;
}
body[data-nav-wip] .wr-title .dt-rs-tools {
position: absolute;
left: 50%; /* the panel JS sets the real left (placeResultTools) */
top: calc(50% + 5px); /* the row has 10px top padding, none below */
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 4px;
padding: 3px;
border-radius: 10px;
background: #f5f6f8;
}
body[data-nav-wip] .wr-title .dt-rs-tools:not(:has(.dt-rs-tool:not([hidden]))) {
display: none;
}
body[data-nav-wip] .wr-title .dt-rs-tool {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: #111827;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background .15s ease;
}
body[data-nav-wip] .wr-title .dt-rs-tool[hidden],
body[data-nav-wip] .wr-title .dt-rs-key[hidden] {
display: none;
}
body[data-nav-wip] .wr-title .dt-rs-tool:hover {
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-nav-wip] .wr-title .dt-rs-tool svg,
body[data-nav-wip] .wr-title .dt-rs-key svg {
width: 16px;
height: 16px;
}
body[data-nav-wip] .wr-title .dt-rs-keys {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
body[data-nav-wip] .wr-title .dt-rs-keys + #fullscreenBtn {
margin-left: 6px;
}
body[data-nav-wip] .wr-title .dt-rs-key {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 34px;
border: 0;
border-radius: 8px;
background: #f5f6f8;
color: #111827;
cursor: pointer;
transition: background .15s ease;
}
body[data-nav-wip] .wr-title .dt-rs-key:hover {
background: #e5e7eb;
}
body[data-nav-wip] .wr-title .dt-rs-key.is-on {
background: #111827;
color: #ffffff;
}
body[data-nav-wip] .wr-title .dt-rs-key:disabled,
body[data-nav-wip] .wr-title .dt-rs-tool:disabled {
opacity: .45;
cursor: not-allowed;
}
body.dark-mode[data-nav-wip] .wr-title .dt-rs-tools { background: #1f1f22; }
body.dark-mode[data-nav-wip] .wr-title .dt-rs-tool { color: #f5f5f6; }
body.dark-mode[data-nav-wip] .wr-title .dt-rs-tool:hover { background: #2a2a2e; box-shadow: none; }
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.is-on { background: #e5e7eb; color: #111827; }
/* no room for the labels: icon-only (names stay in their tooltips) */
body[data-nav-wip] .wr-title .dt-rs-tools.is-icons .dt-rs-txt { display: none; }
body[data-nav-wip] .wr-title .dt-rs-tools.is-icons .dt-rs-tool { width: 32px; padding: 0; justify-content: center; }
body[data-nav-wip] .dt-notice .layui-layer-content {
padding: 0 !important;
}
/* the result tools need the room: tabs icon-only (same shape as the <1100px rule) */
body.dt-rs-tight[data-nav-wip] .wr-title .gen-tab .dt-tab-txt {
display: none;
}
body.dt-rs-tight[data-nav-wip] .wr-title .gen-tab {
gap: 0;
width: 36px;
padding: 0 !important;
justify-content: center;
}
/* ── result compare sized to the generated picture (panel JS 3b): the frame
clips both layers to one rounded rectangle; the "before" keeps its own shape
inside (contain) on the box colour, so a different aspect never shows the
result through its letterbox ── */
body[data-nav-wip] .wr-lists.result > #imageCompareContainer.dt-cmp-fit {
flex: 0 0 auto !important;
margin: auto !important;
border-radius: 14px !important;
overflow: hidden !important;
position: relative;
}
body[data-nav-wip] .wr-lists.result > #imageCompareContainer.dt-cmp-fit .compare-image-before img,
body[data-nav-wip] .wr-lists.result > #imageCompareContainer.dt-cmp-fit .compare-image-after img {
object-fit: contain;
border-radius: 0 !important;
}
body[data-nav-wip] .wr-lists.result > #imageCompareContainer.dt-cmp-fit .compare-image-before {
background: #f5f6f8;
}
body.dark-mode[data-nav-wip] .wr-lists.result > #imageCompareContainer.dt-cmp-fit .compare-image-before {
background: #161618;
}
/* Use the generation lifecycle's single mask. A second pseudo-element veil
compounded its tint, while the old mask at z-index 200 covered the card. */
body[data-nav-wip] .wr-lists-box > #genLoadingMask {
z-index: 200;
border-radius: inherit;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
body[data-nav-wip]:not(.dark-mode) .wr-lists-box > #genLoadingMask {
background: rgba(250, 250, 250, .6);
}
body.dark-mode[data-nav-wip] .wr-lists-box > #genLoadingMask {
background: rgba(0, 0, 0, .5);
}
body[data-nav-wip] .wr-lists-box > .progress {
z-index: 201 !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;
box-sizing: border-box;
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);
}
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;
}
body[data-nav-wip]:not(.dark-mode) .wr-lists-box > .progress .dt-p-stage {
color: #6b7280;
}
body.dark-mode[data-nav-wip] .wr-lists-box > .progress .dt-p-stage {
color: #a1a1aa;
}
body[data-nav-wip] .wr-lists-box > .progress .dt-p-stage[hidden] {
display: none;
}
body[data-nav-wip] .wr-lists-box > .progress .dt-p-stage.is-in {
animation: dtRfProgressStageIn .45s ease both;
}
@keyframes dtRfProgressStageIn {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: none; }
}
/* Prompt validation uses a separate helper line; the field keeps its neutral focus cue. */
body[data-nav-wip] .dt-pt-head .dt-pt-note {
display: block;
margin: 4px 0 0;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
color: #b4534b;
}
body.dark-mode[data-nav-wip] .dt-pt-head .dt-pt-note { color: #e5a09a; }
/* ── [WIP 2026-09-29] Fullscreen viewer, same look as SnapRender's
(snaprender-panel-wip.css "Fullscreen viewer follows the theme" + the
top-right toggle row): theme stage instead of black, 12px picture corners,
Compare / Original / Generated as one segmented pill beside the close key
(and download when it shows) so nothing covers the bottom of the picture,
and the slider handle without the base sheet's blue ⇔ glyph. ── */
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,
body[data-nav-wip] #fullscreenModal .fullscreen-gallery-label {
color: #6b7280 !important;
}
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-gallery-counter,
body.dark-mode[data-nav-wip] #fullscreenModal .fullscreen-gallery-label {
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;
}
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-buttons {
position: fixed !important; /* parent is the 90vw picture area; line up with close, which is on the modal */
top: 18px !important;
right: 64px !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
display: flex;
align-items: center;
gap: 2px !important;
height: 38px;
box-sizing: border-box;
padding: 3px !important;
border-radius: 999px !important;
background: #ffffff;
box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}
body[data-nav-wip] #fullscreenModal:has(.fullscreen-download[style*="display: flex"], .fullscreen-download[style*="display: block"], .fullscreen-download[style*="display: inline"]) .fullscreen-toggle-buttons {
right: 110px !important;
}
body[data-nav-wip] #fullscreenModal .fullscreen-toggle-btn {
height: 32px !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 999px !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;
}
body[data-nav-wip] #fullscreenModal .fullscreen-compare-slider::before {
cursor: ew-resize;
}
body[data-nav-wip] #fullscreenModal .fullscreen-compare-slider::after {
content: none !important;
}
/* ── [WIP 2026-09-29] a finished video on show, as on SnapRender (6v): the
Download key sits beside Fullscreen in the tab row (roomflow-panel-wip.js
syncResultActions, body.dt-rf-vid-on), so the inline-edit file's own small
download control - which landed in the box's top-left corner - never shows;
the stage gets SnapRender's checkerboard and the page's floating row stays
out of the picture. ── */
body[data-nav-wip] .dt-rf-vid-dl {
display: none !important;
}
body.dt-rf-vid-on[data-nav-wip] .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-rf-vid-on[data-nav-wip] .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;
}
body.dt-rf-vid-on[data-nav-wip] .wr-lists.result {
background: transparent !important;
overflow: hidden !important;
}
body.dt-rf-vid-on[data-nav-wip] .floating-buttons {
display: none !important;
}
/* Keep tab geometry stable while selection changes; never animate font metrics. */
body[data-nav-wip] .wam-result .wr-title .gen-tab,
body.dt-modepick-open[data-nav-wip] .wam-result .wr-title .gen-tab.active:not(.dt-mode-tab) {
font-weight: 600 !important;
flex-shrink: 0;
transition: background-color .12s ease, color .12s ease;
}
/* Borderless prompt feedback: the fused title and field change tone together. */
body[data-nav-wip] .wam-op {
--rf-prompt-hover-bg: #eef0f3;
--rf-prompt-active-bg: #e8ebef;
}
body.dark-mode[data-nav-wip] .wam-op {
--rf-prompt-hover-bg: #242427;
--rf-prompt-active-bg: #2a2a2e;
}
body[data-nav-wip] .wam-op .dt-pt-head,
body[data-nav-wip] .wam-op .wo-prompt textarea {
transition: background-color .15s ease;
}
body[data-nav-wip] .wam-op .wo-prompt textarea:not(:disabled):not([readonly]):hover,
body[data-nav-wip] .wam-op .dt-pt-head:has(+ .wo-prompt textarea:not(:disabled):not([readonly]):hover) {
background: var(--rf-prompt-hover-bg) !important;
}
body[data-nav-wip] .wam-op .wo-prompt textarea:not(:disabled):not([readonly]):focus,
body[data-nav-wip] .wam-op textarea#prompt:not(:disabled):not([readonly]):focus,
body[data-nav-wip] .wam-op .dt-pt-head:has(+ .wo-prompt textarea:not(:disabled):not([readonly]):focus) {
background: var(--rf-prompt-active-bg) !important;
}
body[data-nav-wip] .wam-op .wo-prompt textarea,
body[data-nav-wip] .wam-op textarea#prompt:focus {
outline: none !important;
box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
body[data-nav-wip] .wam-op .dt-pt-head,
body[data-nav-wip] .wam-op .wo-prompt textarea {
transition: none;
}
}
/* Collage engine picker follows the SnapRender panel, below the prompt. */
body[data-nav-wip] .rf-collage-engine { display: none; }
body[data-nav-wip] .mode-softcollage .rf-collage-engine { display: block; margin: 12px 0 0; }
body[data-nav-wip] .rf-collage-engine select[hidden],
body[data-nav-wip] .rf-engine-menu[hidden] { display: none !important; }
body[data-nav-wip] .rf-engine-trigger {
display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px;
padding: 10px 14px; border: 0; border-radius: 16px;
background: var(--dt-param-bg, #f5f6f8); color: #111827; font: inherit; cursor: pointer;
}
body[data-nav-wip] .rf-engine-label { margin-right: auto; font-size: 14px; font-weight: 600; text-align: left; }
body[data-nav-wip] .rf-engine-value {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
border-radius: 8px; background: #e8f0fe; color: #2563eb; font-size: 13px;
font-weight: 600; white-space: nowrap;
}
body[data-nav-wip] .rf-engine-value svg { width: 14px; height: 14px; flex: none; }
body[data-nav-wip] .rf-engine-chevron { width: 18px; height: 18px; color: #9ca3af; flex: none; }
body[data-nav-wip] .rf-engine-trigger:hover .rf-engine-value { background: #dbe7fd; }
body[data-nav-wip] .rf-engine-menu {
position: fixed; z-index: 100010; box-sizing: border-box; width: min(320px, calc(100vw - 24px));
max-height: calc(100dvh - 24px); overflow-y: auto; padding: 8px;
border: 1px solid #eef0f3; border-radius: 18px; background: #fff;
box-shadow: 0 8px 28px rgba(16, 24, 40, .16); font-family: inherit;
}
body[data-nav-wip] .rf-engine-option {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px;
border: 0; border-radius: 12px; background: transparent; color: #111827;
text-align: left; font: inherit; cursor: pointer;
}
body[data-nav-wip] .rf-engine-option:hover,
body[data-nav-wip] .rf-engine-option[aria-checked="true"] { background: #f5f6f8; }
body[data-nav-wip] .rf-engine-icon {
display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
width: 40px; height: 40px; border-radius: 10px; background: #f3f4f6; color: #374151;
}
body[data-nav-wip] .rf-engine-icon svg { width: 20px; height: 20px; }
body[data-nav-wip] .rf-engine-body { flex: 1; min-width: 0; }
body[data-nav-wip] .rf-engine-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.3; }
body[data-nav-wip] .rf-engine-top { padding: 0 6px; border-radius: 6px; background: #dbeafe; color: #1d4ed8; font-size: 10px; font-weight: 700; line-height: 16px; }
body[data-nav-wip] .rf-engine-sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: #6b7280; }
body[data-nav-wip] .rf-engine-check { width: 18px; height: 18px; flex: none; visibility: hidden; color: #2563eb; }
body[data-nav-wip] .rf-engine-option[aria-checked="true"] .rf-engine-check { visibility: visible; }
body[data-nav-wip] .rf-engine-trigger:focus-visible,
body[data-nav-wip] .rf-engine-option:focus-visible { outline: 2px solid #315eff; outline-offset: 2px; }
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-trigger,
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-option { color: #f5f5f6; }
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-trigger { background: #232428; }
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-menu { background: #161618; border-color: #29292e; }
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-option:hover,
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-option[aria-checked="true"],
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-icon { background: #232428; color: #e5e7eb; }
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-value,
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-top { background: #303b59; color: #a9c4ff; }
:is(html.dark body, body.dark-mode)[data-nav-wip] .rf-engine-sub { color: #9ca3af; }
/* Upload preview uses the input Canvas without enabling drawing by default. */
body[data-nav-wip] .rf-input-preview { display: none; }
body.dt-rf-input-preview[data-nav-wip] .wr-lists.canvas > .dt-canvas-bar { display: none !important; }
body.dt-rf-input-preview[data-nav-wip] .wr-lists.canvas:not(.hide) {
display: flex; align-items: center; justify-content: center; box-sizing: border-box;
padding: 20px; border-radius: 20px; overflow: hidden;
background-color: #fff;
background-image: conic-gradient(#e7e9ed 25%, transparent 0 50%, #e7e9ed 0 75%, transparent 0);
background-size: 20px 20px;
}
body.dt-rf-input-preview[data-nav-wip] .wr-lists.canvas > .canvas-wrapper {
visibility: hidden; position: absolute; inset: 0; pointer-events: none;
}
body.dt-rf-input-preview[data-nav-wip] .rf-input-preview {
display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
object-fit: contain; border-radius: 16px;
}
body.dt-rf-input-preview.dt-rf-bar-on[data-nav-wip] .wr-lists.canvas {
padding-bottom: var(--dt-rf-bar-h, 150px);
}
body.dark-mode.dt-rf-input-preview[data-nav-wip] .wr-lists.canvas {
background-color: #202024;
background-image: conic-gradient(#29292e 25%, transparent 0 50%, #29292e 0 75%, transparent 0);
}
@media (min-width: 769px) {
body.dt-rf-input-preview.dt-rf-rail-on[data-nav-wip] .wr-lists.canvas { width: calc(100% - 68px); }
body.dt-rf-input-preview.dt-rf-rail-open[data-nav-wip] .wr-lists.canvas { width: calc(100% - min(292px, 100% - 28px)); }
}
/* Input canvas and generated results share the visible Result tab. */
body.dt-rf-merged-preview[data-nav-wip] .wr-title .gen-tab[data-type="canvas"],
body.dt-rf-merged-preview[data-nav-wip] .wr-title .gen-tab[data-type="result"] {
display: none !important;
}