/* ===== Tailwind Utility Replacements (no CDN needed) ===== */
.min-h-screen{min-height:100vh}
.bg-white{background-color:#fff}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:0}
.top-4{top:1rem}.right-4{right:1rem}
.bottom-6{bottom:1.5rem}.right-6{right:1.5rem}
.flex{display:flex}
.hidden{display:none}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.gap-3{gap:.75rem}
.z-50{z-index:50}
.z-200{z-index:200}
.w-6{width:1.5rem}.h-6{height:1.5rem}
.w-12{width:3rem}.h-12{height:3rem}
.w-16{width:4rem}.h-16{height:4rem}
.w-48{width:12rem}.h-48{height:12rem}
.w-full{width:100%}.h-full{height:100%}
.p-8{padding:2rem}
.mx-4{margin-left:1rem;margin-right:1rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.max-w-sm{max-width:24rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-lg{border-radius:.5rem}
.border{border:1px solid}
.border-gray-200{border-color:#e5e7eb}
.bg-gray-100{background-color:#f3f4f6}
.bg-black.bg-opacity-50{background-color:rgba(0,0,0,.5)}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-800{color:#1f2937}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-center{text-align:center}
.font-bold{font-weight:700}
.object-cover{object-fit:cover}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.duration-300{transition-duration:300ms}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:text-gray-700:hover{color:#374151}

/* ===== Main Application CSS ===== */
        .feature-icon {
            width: 100%;
            height: 100%;
            padding: 0.5rem;
            object-fit: contain;
        }

        html,body{
            overflow-x: hidden;
        }
        .container {
            padding-top: 2rem;
        }

        .web-ai-container {
            margin-top: 68px;
            padding: 0;
            width: 100%;
            height: calc(100vh - 68px);
            display: inline-block;
            background-color: #dddddd;
            overflow: hidden;
        }

        .web-ai-main {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: min(96vw, 1680px);
            justify-content: center;
            margin: 0 auto;
            gap: 1vw;
        }

        .wam-op {
            width: clamp(320px, 24vw, 420px);
            flex: 0 0 clamp(320px, 24vw, 420px);
            margin-top: 2vw;
            margin-bottom: 2vw;
            margin-right: 0;
            background-color: white;
            border-radius: 1vw;
            padding: 2vw 0.89vw;
            display: flex;
            flex-direction: column;
            height: calc(100vh - 4vw - 68px);
            padding-top: .5vw;
            box-sizing: border-box;
        }

        .wamo-1 {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            height: auto;
            overflow: hidden;
        }

        .wamo-2 {
            height: auto;
            flex-shrink: 0;
            width: 100%;
            min-width: 0;
            margin-top: auto;
            padding-bottom: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        .planrender-tutorial-link {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 5px 12px;
            font-size: max(.6vw, 11px);
            color: #666;
            text-decoration: none;
            cursor: pointer;
            background: rgba(0,0,0,0.05);
            border-radius: 16px;
            transition: color 0.15s, background 0.15s;
        }
        .planrender-tutorial-link:hover {
            color: #333;
            background: rgba(0,0,0,0.08);
            text-decoration: none;
        }
        .planrender-tutorial-link svg {
            opacity: 0.8;
        }
        .web-ai-container.mode-planrender .planrender-tutorial-link {
            display: flex;
        }

        .wam-result {
            width: auto;
            flex: 1 1 0;
            min-width: 640px;
            margin-top: 2vw;
            margin-bottom: 2vw;
            background-color: white;
            border-radius: 1vw;
            display: flex;
            flex-direction: column;
            height: calc(100vh - 4vw - 68px);
        }

        .wam-result img{
            max-height: 100%;
        }

        /* Initial fade-in together, avoid left side appearing first causing flicker */
        .web-ai-container .wam-op,
        .web-ai-container .wam-result { opacity: 0; }
        .web-ai-container.ui-ready .wam-op,
        .web-ai-container.ui-ready .wam-result { opacity: 1; transition: opacity .15s ease; }

        .min-h-screen {
            display: flex;
            flex-direction: column;
        }

        .min-h-screen {
            min-height: initial;
        }

        .wo-style-box {
            display: flex;
            flex-direction: row;
            margin-top: .5vw;
            justify-content: space-between;
        }

        .wsb-item {
            width: 30%;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-radius: .4vw;
        }

        .wsb-item img {
            border-radius: .4vw;
            width: 100%;
            aspect-ratio: 3 / 2;
            object-fit: cover;
            display: block;
        }

        .wsb-item .api-badge {
            position: absolute;
            top: -0.25vw;
            left: calc(-0.325vw - 2ch);
            padding: 0.075vw 0.525vw 0.075vw calc(0.525vw + 2ch);
            height: 1.05vw;
            line-height: 0.9vw;
            background: linear-gradient(90deg, #22c55e, #2563eb);
            color: #fff;
            border-radius: 999px;
            font-weight: 700;
            font-size: 0.45vw;
            letter-spacing: 0.02em;
            z-index: 5;
            pointer-events: none;
            cursor: default;
        }

        .wsb-item > div:first-child {
            width: 100%;
            aspect-ratio: 3 / 2;
            height: auto !important;
            border-radius: .4vw !important;
            overflow: hidden;
        }

        .wsb-item > img,
        .wsb-item > div:first-child {
            transition: opacity .2s ease;
        }
        .wsb-item:not(.active) > img,
        .wsb-item:not(.active) > div:first-child {
            opacity: 1;
        }

        .wsb-item.active > img,
        .wsb-item:hover > img,
        .wsb-item.active > div:first-child,
        .wsb-item:hover > div:first-child {
            border: .2vw solid #1256e0;
            box-shadow: 0 0 0 .05vw rgba(18,86,224,.15);
        }

        .wsb-item > img,
        .wsb-item > div:first-child {
            box-sizing: border-box;
        }
        .wsb-item:not(.active):not(:hover) > img,
        .wsb-item:not(.active):not(:hover) > div:first-child {
            border: .1vw solid rgba(18,86,224,.7);
        }

        .wsb-item.active .wsbi,
        .wsb-item:hover .wsbi {
            color: #1256e0;
        }

        .wsb-item.active .wsbi > div {
            font-weight: 700;
        }
        .wsb-item.active > img,
        .wsb-item.active > div:first-child {
            border-width: .25vw;
        }

        .wsb-item.disabled {
            cursor: not-allowed;
        }
        .wsb-item.disabled > img,
        .wsb-item.disabled > div:first-child {
            opacity: .6 !important;
            filter: grayscale(10%);
        }
        .wsb-item.disabled::after {
            content: "Coming Soon";
            position: absolute;
            top: 0;
            right: 0;
            background: #ffd54f;
            color: #333;
            padding: .1vw .4vw;
            font-size: .4vw;
            line-height: 1.2;
            border-top-right-radius: .4vw;
            border-bottom-left-radius: .25vw;
            box-shadow: 0 1px 4px rgba(0,0,0,.15);
            pointer-events: none;
        }

        .wsbi {
            display: flex;
            flex-direction: row;
            width: 100%;
            text-align: center;
            justify-content: center;
            margin-top: .2vw;
        }

        .wsbi > div {
            font-size: max(.6vw, 11px);
            margin-left: .2vw;
            line-height: 1.6;
        }

        .wo-picture {
            height: 15.9vh;
            font-size: max(.6vw, 11px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            background: #f5f5f5;
            border-radius: .6vw;
            color: #adacac;
            margin-top: .333vw;
            flex-shrink: 0;
            border: 2px dashed #ddd;
            border-radius: 0.6vw;
            padding: 0.35vw; 
            box-sizing: border-box; /* Include padding and border when calculating height */
        }

        .wo-picture.ref-img {
            margin-top: -.667vw;
        }

        .wo-picture .wopo-btn-add {
            width: 1.5vw;
            height: 1.5vw;
            margin-left: auto;
            margin-right: auto;
        }

        .wo-title {
            margin-top: .5vw;

        }

        .wo-title.head{
            font-weight: bold;
            font-size: max(.8vw, 13px);
            margin-top: .75vw;
            display: flex;
            align-items: center;
            gap: .2vw;
        }
        .wamo-1 > .wo-title.head{
            cursor: pointer;
        }
        
        .title-star {
            color: #1256e0;
            font-size: max(.8vw, 13px);
            font-weight: bold;
        }
        
        .title-help {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            border: 1px solid #999;
            color: #999;
            font-size: max(.7vw, 12px);
            font-weight: bold;
            cursor: help;
        }
        .wamo-1 > .wo-title.head .back-top-icon{
            display: none;
            width: 1em;
            height: 1em;
            color: #4285f4;
            margin-left: .3em;
            opacity: .85;
        }
        .wamo-1 > .wo-title.head.show-back-top .back-top-icon{
            display: inline-block;
        }
        .wamo-1 > .wo-title.head:hover .back-top-icon{
            opacity: 1;
        }
        .wamo-1-scroll > .wo-title.head.gen-params{
            margin-bottom: .25vw;
        }

        .wamo-1-scroll > .wo-title.head.upload-title {
            position: static;
            top: auto;
            background: transparent;
            z-index: auto;
        }

        .wo-param {
            margin-top: .5vw;
            display: flex;
            flex-direction: row;
        }

        .wop-title {
            width: 4vw;
            flex-shrink: 0;
            height: max(1.6vw, 24px);
            line-height: max(1.6vw, 24px);
            font-size: max(.7vw, 12px);
        }

        .wop-param {
            width: 100%;
            text-align: center;
            background: #f5f5f5;
            height: max(1.6vw, 24px);
            border-radius: .2vw;
            font-size: max(.7vw, 12px);
        }

        .new-style-buttons {
            display: flex;
            gap: 0.4vw;
            width: 100%;
        }
        .new-style-btn {
            position: relative;
            flex: 1 1 0;
            background: #f5f5f5;
            border: 1px solid #e5e7eb;
            border-radius: 0.35vw;
            padding: max(0.3vw, 5px) max(0.6vw, 8px);
            font-size: max(0.6vw, 11px);
            line-height: 1.2;
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
        }
        .wo-param.srm-mode .new-style-btn,
        .planrender-actions .new-style-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .35vw;
        }
        .wo-param.srm-mode .new-style-btn::before,
        .planrender-actions .new-style-btn::before {
            content: '';
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: .9;
        }
        .wo-param.srm-mode .new-style-btn[data-srm="detail"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4.5v11L12 22l-8-4.5v-11L12 2z'/%3E%3Cpath d='M12 22V11.5'/%3E%3Cpath d='M20 6.5l-8 5-8-5'/%3E%3C/svg%3E");
        }
        .wo-param.srm-mode .new-style-btn[data-srm="block"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E");
        }
        .new-style-btn:hover {
            background: #efefef;
            border-color: #cfd3da;
        }
        .new-style-btn.active {
            background: #ffffff;
            border-color: #333333;
            box-shadow: inset 0 0 0 1px #333333;
            color: #000000;
            font-weight: normal;
        }

        .new-style-btn[data-srm="block"].active,
        .new-style-btn[data-srm="detail"].active {
            border-color: #333333;
            box-shadow: inset 0 0 0 1px #333333;
            color: #000000;
        }

        .detail-control-container {
            display: none;
            height: auto;
            align-items: center;
        }
        .detail-control-container.show { display: flex; }
        .detail-switch {
            height: auto;
            margin-top: 0;
            width: 100%;
            display: flex;
            gap: 0.4vw;
            justify-content: space-between;
            align-items: center;
        }
        .detail-control-container.show + .wo-prompt { margin-top: .5vw !important; }
        /* Compatible with .wo-prompt-container in between, use ~ general sibling selector to ensure prompt position */
        .detail-control-container.show ~ .wo-prompt { margin-top: .5vw !important; }
        .detail-control-container.show + .wo-prompt.hide + .upload-ref + .wo-picture.ref-img { margin-top: .5vw; }
        .detail-control-container.show ~ .wo-prompt.hide ~ .wo-picture.ref-img { margin-top: .5vw !important; }
        .detail-btn {
            position: relative;
            flex: 1 1 0;
            background: #f5f5f5;
            border: 1px solid #e5e7eb;
            border-radius: 0.35vw;
            padding: max(0.3vw, 5px) max(0.6vw, 8px);
            font-size: max(0.6vw, 11px);
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        .detail-btn:hover { background: #efefef; border-color: #cfd3da; }
        .detail-btn.active { background: #ffffff; border-color: #333333; box-shadow: inset 0 0 0 1px #333333; color: #000000; }
        /* Constraint settings button style */
        .constraint-buttons {
            display: flex;
            gap: 0.4vw;
            justify-content: space-between;
            align-items: center;
        }
        .constraint-btn {
            position: relative;
            flex: 1 1 0;
            background: #f5f5f5;
            border: 1px solid #e5e7eb;
            border-radius: 0.35vw;
            padding: max(0.3vw, 5px) max(0.6vw, 8px);
            font-size: max(0.6vw, 11px);
            cursor: pointer;
            box-sizing: border-box;
            transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        .constraint-btn:hover { background: #efefef; border-color: #cfd3da; }
        .constraint-btn.active { background: #ffffff; border-color: #333333; box-shadow: inset 0 0 0 1px #333333; color: #000000; }

        select.wop-param {
            padding-right: 1.5vw;
            background-position: calc(100% - 0.5vw) center;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: .833vw;
        }

        .custom-select {
            position: relative;
            width: 100%;
            font-size: max(.7vw, 12px);
        }
        .custom-select .cs-selected {
            height: max(1.6vw, 24px);
            line-height: max(1.6vw, 24px);
            font-size: max(.583vw, 11px);
            padding: 0 .8vw;
            padding-right: 1.6vw;
            background: #f5f5f5;
            border: 1px solid #e5e7eb;
            border-radius: .35vw;
            box-shadow: 0 1px 0 rgba(0,0,0,.02) inset, 0 1px 2px rgba(0,0,0,.03);
            color: #333;
            cursor: pointer;
            transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
            user-select: none;
            text-align: center;
        }
        .custom-select .cs-selected:hover {
            border-color: #cfd3da;
            background: #efefef;
            box-shadow: 0 1px 0 rgba(0,0,0,.02) inset, 0 2px 6px rgba(0,0,0,.06);
        }
        .custom-select .cs-selected:after {
            content: '';
            position: absolute;
            right: .6vw;
            top: 50%;
            width: .333vw;
            height: .333vw;
            border-right: .1vw solid #666;
            border-bottom: .1vw solid #666;
            transform: translateY(-50%) rotate(45deg);
            transition: transform .2s ease;
            pointer-events: none;
        }
        .custom-select.open .cs-selected:after {
            transform: translateY(-50%) rotate(-135deg);
        }
        .custom-select .cs-options {
            position: absolute;
            left: 0;
            top: calc(100% + 0.3vw);
            width: 100%;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: .35vw;
            box-shadow: 0 8px 20px rgba(0,0,0,.08);
            overflow: hidden;
            display: none;
            z-index: 20000;
        }
        .custom-select.open .cs-options { display: block; }
        .custom-select .cs-options-inner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0;
            max-height: none;
            overflow: visible;
            scrollbar-width: none;
            -ms-overflow-style: none;
            overscroll-behavior: contain;
        }
        .custom-select .cs-options-inner::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        .custom-select .cs-option {
            padding: .4vw .8vw;
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease;
            white-space: nowrap;
            text-align: center;
        }
        .custom-select .cs-option:hover {
            background: #1256e0;
            color: #fff;
        }
        .custom-select .cs-option.active {
            background: #eef2ff;
            color: #1256e0;
            font-weight: 600;
        }
        .custom-select .cs-option { border-bottom: 1px solid #f3f4f6; }
        .custom-select .cs-option:nth-child(odd) { border-right: 1px solid #f3f4f6; }
        .hidden-native-select {
            display: none !important;
        }

        .wo-prompt textarea {
            background: #f5f5f5;
            width: 100%;
            min-height: 12vh;
            height: auto;
            padding: .5vw;
            border-radius: .3vw;
            border: none;
            overflow: hidden;
            resize: none;
            font-size: max(.6vw, 11px); /* Scale with window, min 11px for readability */
            line-height: 1.6;
        }

        .wo-prompt textarea::placeholder { font-size: inherit; }

        .wo-prompt {
            margin-top: -.667vw;
        }

        /* Style transfer preset styles */
        .style-inline {
            background: #f5f5f5;
            width: 100%;
            padding: .4vw .5vw .6vw;
            border-radius: .3vw .3vw 0 0;
            border: none;
            font-size: max(.6vw, 11px);
            line-height: 1;
            color: #999;
            display: none;
            margin-top: 0;
            margin-bottom: 0;
            box-sizing: border-box;
            gap: .4vw;
        }

        .style-transfer-prompt-body textarea {
            background: #f5f5f5;
            resize: none;
            overflow-y: hidden;
        }

        .style-transfer-prompt-body textarea.with-inline {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            margin-top: 0;
            padding-top: 0;
            min-height: 10vh;
        }
        /* PlanRender: container = 15.9vh, inline + textarea share via flex (matches Empty mode) */
        .style-transfer-prompt-ele {
            height: 15.9vh;
            display: flex;
            flex-direction: column;
        }
        .style-transfer-prompt-ele #styleInline {
            flex: 0 0 auto;
        }
        .style-transfer-prompt-ele textarea#style-transfer-prompt {
            flex: 1 1 auto;
            min-height: 0;
            height: auto !important;
            box-sizing: border-box;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            padding-top: .3vw;
        }

        /* Empty Render & New Soft & Room Renov.: Remove top padding for custom prompt input */
        .web-ai-container.mode-maopi .wo-prompt.prompt-ele textarea { padding-top: 0; }
        /* Empty Render & New Soft & Room Renov.: Remove top border radius for prompt input, flat connection with above module */
        .web-ai-container.mode-maopi .wo-prompt.prompt-ele textarea {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        /* Empty Render & New Soft & Room Renov.: Remove bottom padding and border radius for prompt top module */
        .web-ai-container.mode-maopi #roomStyleInline {
            padding-bottom: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        /* Empty & New & Renov.: increase bottom prompt inline text to 1.15x */
        .web-ai-container.mode-maopi #roomStyleInline {
            font-size: .69vw;
        }
        .web-ai-container.mode-maopi #roomStyleInline .style-chip {
            font-size: inherit;
        }
        /* Empty & New & Renov.: hide prompt title/toggle row (same pattern as softcollage/jieturender) */
        .web-ai-container.mode-maopi .wo-prompt-container:not(.draw-layout-ele):not(.detail-control-container) {
            display: none !important;
        }
        /* Collage: show only Lock/Correct buttons, hide prompt title/toggle row */
        .web-ai-container.mode-softcollage .wo-param.constraints-settings .wop-title {
            display: none;
        }
        .web-ai-container.mode-softcollage .wo-param.constraints-settings .wop-param {
            width: 100%;
        }
        .web-ai-container.mode-softcollage .constraint-btn {
            border-radius: .35vw;
            padding-top: .3vw;
            padding-bottom: .3vw;
            padding-left: .6vw;
            padding-right: .6vw;
            font-size: .6vw;
            line-height: 1.2;
            gap: .35vw;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: calc(1.32vw + 2px);
        }
        .web-ai-container.mode-softcollage .constraint-btn::before {
            content: '';
            width: 1em;
            height: 1em;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            flex-shrink: 0;
            opacity: .9;
        }
        .web-ai-container.mode-softcollage .constraint-btn[data-mode="lock"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
        }
        .web-ai-container.mode-softcollage .constraint-btn[data-mode="correct"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M14 10l6-6'/%3E%3Cpath d='M4 20h5v-5'/%3E%3Cpath d='M10 14l-6 6'/%3E%3C/svg%3E");
        }
        .web-ai-container.mode-softcollage .wo-prompt-container:not(.draw-layout-ele):not(.detail-control-container) {
            display: none !important;
        }
        .web-ai-container.mode-softcollage .wo-prompt.prompt-ele:not(.hide) {
            height: 15.9vh;
            margin-top: .5vw;
            display: flex;
            flex-direction: column;
        }
        .web-ai-container.mode-softcollage .wo-prompt.prompt-ele:not(.hide) > #roomStyleInline {
            flex: 0 0 auto;
        }
        .web-ai-container.mode-softcollage .wo-prompt.prompt-ele:not(.hide) > div:last-child {
            flex: 1 1 auto;
            min-height: 0;
        }
        .web-ai-container.mode-softcollage .wo-prompt.prompt-ele:not(.hide) textarea#prompt {
            height: 100% !important;
            min-height: 100% !important;
            box-sizing: border-box;
        }

        /* 3D-Render: keep only two render buttons, hide prompt title/toggle row */
        .web-ai-container.mode-jieturender .wo-param.srm-mode .wop-title {
            display: none;
        }
        .web-ai-container.mode-jieturender .wo-param.srm-mode .wop-param {
            width: 100%;
        }
        .web-ai-container.mode-jieturender .wo-param.srm-mode .new-style-btn {
            padding-top: .3vw;
            padding-bottom: .3vw;
            height: calc(1.32vw + 2px);
        }
        /* PlanRender action buttons — same sizing as 3D-Render */
        .wo-param.planrender-actions {
            display: block;
        }
        .wo-param.planrender-actions .wop-param {
            width: 100%;
            height: auto;
            background: transparent;
            padding: 0;
        }
        .wo-param.planrender-actions .new-style-btn {
            padding-top: .3vw;
            padding-bottom: .3vw;
            height: calc(1.32vw + 2px);
        }
        .web-ai-container.mode-jieturender .wo-prompt-container:not(.draw-layout-ele):not(.detail-control-container) {
            display: none !important;
        }
        .web-ai-container.mode-jieturender .wo-prompt.prompt-ele:not(.hide) {
            height: 15.9vh;
            margin-top: .5vw;
            display: flex;
            flex-direction: column;
        }
        .web-ai-container.mode-jieturender .wo-prompt.prompt-ele:not(.hide) > #roomStyleInline {
            flex: 0 0 auto;
        }
        .web-ai-container.mode-jieturender .wo-prompt.prompt-ele:not(.hide) > div:last-child {
            flex: 1 1 auto;
            min-height: 0;
        }
        .web-ai-container.mode-jieturender .wo-prompt.prompt-ele:not(.hide) textarea#prompt {
            height: 100% !important;
            min-height: 100% !important;
            box-sizing: border-box;
        }
        .web-ai-container.mode-jieturender .wo-picture.ref-img {
            margin-top: .5vw;
        }

        #styleInline {
            display: none;
            flex-wrap: wrap;
            align-items: baseline;
            line-height: 1.8;
            padding-bottom: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            font-size: .69vw;
        }
        #styleInline .style-chip {
            font-size: inherit;
            vertical-align: baseline;
        }

        .style-chip {
            display: inline-flex;
            align-items: center;
            gap: .3vw;
            padding: .25vw .8vw;
            border-radius: 999px;
            background: #ffffff;
            color: #1256e0;
            cursor: pointer;
            border: 1px solid #e5e5e5;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
            vertical-align: baseline;
            font-weight: 600;
            line-height: 1;
        }
        
        .style-chip::before {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            flex-shrink: 0;
        }
        
        /* Plan type icon - Blueprint/Floor plan icon */
        #planTypeChip::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231256e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
        }

        /* Layout style icon - Pencil/Line icon */
        #layoutStyleChip::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231256e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
        }

        /* Room type icon - House/Space icon */
        #roomTypeChip::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231256e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
        }
        
        /* Design style icon - Palette/Canvas icon */
        #roomStyleChip::before,
        #styleChip::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231256e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
        }
        
        .style-chip:hover {
            background: #f8f9fa;
            box-shadow: 0 2px 4px rgba(0,0,0,0.12);
        }

        /* PlanRender action button icons (reuses .new-style-btn base styles) */
        .planrender-actions .new-style-btn[data-action="auto-layout"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
        }
        .planrender-actions .new-style-btn[data-action="layout-render"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
        }

        .style-menu {
            position: absolute;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: .3vw;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            padding: .5vw;
            display: none;
            z-index: 10000;
            /* 3-column adaptive display, ensure complete content and scrollable */
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
            column-gap: .8vw;
            max-height: 40vh;
            overflow: hidden;
            box-sizing: border-box;
        }

        .style-menu .menu-item {
            padding: .35vw 1.2vw .35vw .75vw;
            font-size: .6vw;
            cursor: pointer;
            white-space: nowrap;
            display: block;
            break-inside: avoid;
        }

        .style-menu .menu-item:hover {
            background: #f5f5f5;
        }

        /* Plan type menu: icon + text */
        #planTypeMenu .menu-item {
            display: flex;
            align-items: center;
            gap: .3vw;
        }
        #planTypeMenu .menu-item svg {
            width: 1.1em;
            height: 1.1em;
            flex-shrink: 0;
            color: #555;
        }

        /* Layout style menu: image preview cards */
        #layoutStyleMenu {
            column-count: unset;
            padding: .6vw;
        }
        #layoutStyleMenu.show-menu {
            display: flex !important;
            gap: .5vw;
        }
        #layoutStyleMenu .layout-style-item {
            width: 5vw;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: .3vw;
            overflow: hidden;
            transition: all 0.2s;
            text-align: center;
            background: #fafafa;
        }
        #layoutStyleMenu .layout-style-item:hover {
            border-color: #1a73e8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        #layoutStyleMenu .layout-style-item.active {
            border-color: #1a73e8;
        }
        #layoutStyleMenu .layout-style-item img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            display: block;
        }
        #layoutStyleMenu .layout-style-item .label {
            padding: .25vw 0;
            font-size: .55vw;
            color: #333;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 45px;
            height: 12px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            background-color: #d9d9d9;
            border-radius: 12px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: background-color 0.3s;
        }
        .slider::before {
            content: "";
            position: absolute;
            width: 22px;
            height: 12px;
            background-color: #1256e0;
            border-radius: 12px;
            transition: transform 0.3s;
            left: 0;
            top: 0;
        }
        .switch input:checked + .slider::before {
            transform: translateX(23px); /* 45 - 22 = 23 */
        }

        .upload-ref,
        .wo-prompt-container{
            display: flex;
            flex-direction: row;
            height: 2.5vw;
            margin-top: .25vw;
        }

        .upload-ref .wo-title,
        .wo-prompt-container .wo-title{
            width: max(8vw, 100px);
            flex-shrink: 0;
            font-size: max(.7vw, 12px);
        }

  
        .upload-ref {
            margin-top: -0.20vw;
        }
        .wo-switch {

            height: 2vw;
            margin-top: .65vw;
            width: 100%;
            text-align: right;
        }

        .wamo2-btn {
            height: max(2.5vw, 36px);
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .2vw;
            text-align: center;
            border-radius: .5vw;
            line-height: max(2.5vw, 36px);
            color: white;
            font-size: max(.65vw, 13px);
            cursor: pointer;
            background: linear-gradient(to right, #0491e8, #1c1fd8);
            overflow: hidden;
            white-space: nowrap;
        }

        .wamo2-btn:hover{
            background: linear-gradient(to right, #027dc9, #181abb);
        }

        .wamo2-help {
            font-size: .433vw;
            text-align: center;
            margin-top: .5vw;
            margin-bottom: .5vw;
            color: #888888;
        }

        .wr-title {
            text-align: center;
            height: 3vw;
            line-height: 3vw;
            flex-shrink: 0;
            font-weight: bold;
            font-size: .8vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .result-tutorial-link {
            position: absolute;
            right: calc(1.5vw + 5vw);
            top: 1.5vw;
            background: white !important;
            color: #4A90D9 !important;
            border: none;
            padding: 0.33vw 0.67vw !important;
            border-radius: 0.3vw !important;
            font-size: 0.47vw !important;
            cursor: pointer;
            display: none;
            align-items: center;
            gap: 0.2vw;
            transition: all 0.2s;
            z-index: 200;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        .web-ai-container.mode-planrender .result-tutorial-link.is-visible {
            display: flex;
        }
        .result-tutorial-link:hover {
            background: #f0f0f0 !important;
            color: #2b6cb0 !important;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        }
        .result-tutorial-link svg {
            width: 0.53vw;
            height: 0.53vw;
        }

        .tab-buttons {
            display: flex;
            gap: 0;
            justify-content: center;
            align-items: center;
        }

        .fullscreen-btn {
            position: absolute;
            right: 1.5vw;
            top: 1.5vw;
            background: white;
            color: black;
            border: none;
            padding: 0.33vw 0.67vw;
            border-radius: 0.3vw;
            font-size: 0.47vw;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.2vw;
            transition: all 0.2s;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .fullscreen-btn:hover {
            background: #f0f0f0;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        }

        .fullscreen-btn svg {
            width: 0.53vw;
            height: 0.53vw;
        }

        @media (max-width: 768px) {
            .fullscreen-btn {
                padding: 0.67vw 1.33vw;
                font-size: 1.33vw;
                right: 2vw;
                top: 2vw;
            }
            
            .fullscreen-btn svg {
                width: 1.33vw;
                height: 1.33vw;
            }
        }

        .wr-lists {
            border-radius: .5vw;
            padding: 1vw;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .wr-lists.hide{
            display: none;
        }

        .wr-lists .img-container {
            width: calc((100% - 40px) / 5);
            aspect-ratio: 1;
            background: #f8f8f8;
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
        }
        .wr-lists.history .img-container .img-hover-actions {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            opacity: 0;
            transition: opacity 0.2s;
            pointer-events: none;
        }
        .wr-lists.history .img-container:hover .img-hover-actions {
            opacity: 1;
            pointer-events: auto;
        }
        .wr-lists.history .img-container .img-hover-actions button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.5);
            background: rgba(255,255,255,0.18);
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            transition: background 0.2s;
        }
        .wr-lists.history .img-container .img-hover-actions button:hover {
            background: rgba(255,255,255,0.35);
        }

        .wr-lists img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

        .wr-lists-box {
            margin: 1vw;
            border: .1vw dashed #dddddd;
            height: 100%;
            overflow-y: auto;
            margin-top: 0;
            border-radius: 0.5vw;
            position: relative;
        }

        .wamo2-help a {
            color: #1365df;
        }
        #upload-picture {
            display: none;
        }
        .wop-preview {
            display: none;
            height: 100%; /* Preview container fills parent, with top padding to not overlap dashed line */
            position: relative;
        }

        .preview {
            height: 100%;
            max-width: 100%;
            width: auto;
            object-fit: contain;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }


        .preview-close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .preview-close-btn:hover {
            background: rgba(255, 0, 0, 0.8);
            transform: scale(1.1);
        }

        .preview-close-btn:active {
            transform: scale(0.95);
        }

        .preview-edit-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 14px;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            z-index: 10;
            opacity: 0;
            transition: all 0.2s ease;
            backdrop-filter: blur(4px);
        }
        .wop-preview:hover .preview-edit-btn {
            opacity: 1;
        }
        .preview-edit-btn:hover {
            background: rgba(26, 115, 232, 0.85);
            transform: translate(-50%, -50%) scale(1.05);
        }
        .preview-edit-btn:active {
            transform: translate(-50%, -50%) scale(0.95);
        }
        .preview-edit-btn svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .hide{
            display: none;
        }


        .wamo-1 {
            overflow: hidden;
        }

        .wamo-1-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .wamo-1-scroll::-webkit-scrollbar {
            display: none;
        }

        .load-more{
            width: 100%;
            text-align: center;
            margin-top: 1vw;
            color: gray;
        }

        .gen-tab {
            background: #e0e0e0;
            color: black;
            border: none;
            padding: 0.28125vw 0.75vw;
            font-size: 0.525vw;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 0.28125vw;
            margin: 0;
            outline: none;
            line-height: 1.2;
        }
        .gen-tab[data-type="result"] {
            border-radius: 0;
        }
        .gen-tab[data-type="history"] {
            border-radius: 0 0.28125vw 0.28125vw 0;
        }
        /* 3 tabs: Canvas left-round, Result no-round, History right-round */
        .canvas-tab {
            border-radius: 0.28125vw 0 0 0.28125vw;
        }
        .canvas-tab ~ .gen-tab[data-type="result"] {
            border-radius: 0;
        }

        .gen-tab:hover {
            background: #d0d0d0;
        }

        .gen-tab.active {
            background: #333333;
            color: white;
            font-weight: bold;
        }


        .progress {
            position: absolute;
            width: 50%;
            height: 2vw;
            background: #383838;
            border-radius: 0.5vw;
            left: 50%;
            top: 50%;
            margin-top: -1.0vw;
            margin-left: -25%;
            display: none;
            z-index: 9999;
        }


        .progress.active {
            display: block;
        }

        .p-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            z-index: 10001;
            border-radius: 0.5vw;
        }
        .p-title {
            position: relative;
            z-index: 10002;
            font-size: 0.9em;
            height: 2vw;
            line-height: 2vw;
            text-align: center;
            color: #ffffff;
            width: 100%;
        }

        .p-bg-progress {
            position: absolute;
            z-index: 10001;
            height: 2vw;
            background: linear-gradient(to right, #0490e8, #1c21d8);
            border-radius: 0.5vw;
            transition: width 0.3s ease;
            width: 0%;
            left: 0;
            top: 0;
        }

        .wr-lists.canvas,
        .wr-lists.result{
            height: 100%;
            padding: 0;
            gap: 0;
            border-radius: 0;
            box-sizing: border-box;
            flex-wrap: nowrap;
            overflow: hidden;
        }
        .wr-lists.result{
            padding: 1vw;
            align-items: center;
            justify-content: center;
        }
        .wr-lists.result img{
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        /* PlanRender multi-room grid */
        .planrender-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 12px;
            overflow-y: auto;
            align-content: center;
        }
        .planrender-grid .room-card {
            text-align: center;
            border-radius: 8px;
            overflow: hidden;
        }
        .planrender-grid .room-card img {
            width: 100%;
            height: auto;
            aspect-ratio: 4/3;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            display: block;
        }
        .planrender-grid .room-card .room-label {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
            padding-bottom: 4px;
        }
        .planrender-grid .room-card-fail {
            text-align: center;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            aspect-ratio: 4/3;
        }


        .floating-buttons {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .wr-lists-box:hover .floating-buttons.show-on-hover {
            opacity: 1;
        }


        .wr-lists-box.draw-layout-active .floating-buttons {
            opacity: 1;
        }

        .floating-btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 0.467vw;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            min-width: 60px;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .floating-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* Floating button icon size, prevent button from being enlarged by image */
        .floating-btn .btn-icon,
        .btn-icon{
            width: 12px;
            height: 12px;
            margin-right: 5px;
            vertical-align: baseline;
            display: inline-block;
            position: relative;
            top: 2.5px;
        }
        /* Force icon vertically centered in floating button, no downward offset */
        .floating-btn .btn-icon{ top: 0; vertical-align: middle; }

        .compare-btn { background: #333333; display: inline-flex; align-items: center; justify-content: center; }

        .compare-btn:hover {
            background: #555555;
        }

        .compare-btn.active {
            background: #007bff;
        }

        .compare-btn.active:hover {
            background: #0056b3;
        }

        .download-btn { background: #333333; display: inline-flex; align-items: center; justify-content: center; }

        .download-btn:hover {
            background: #555555;
        }



        .draw-btn {
            background: #333333;
        }

        .draw-btn:hover {
            background: #555555;
        }

        .draw-btn.active {
            background: #28a745;
        }

        .draw-btn.active:hover {
            background: #218838;
        }


        .draw-btn.hidden {
            display: none;
        }


        .draw-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 20;
        }

        .draw-overlay.active {
            pointer-events: all;
            cursor: crosshair;
        }

        .annotation-box {
            position: absolute;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid #fff;
            border-radius: 8px;
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 150px;
            min-height: 75px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            padding: 8px;
            box-sizing: border-box;
            z-index: 25;
            pointer-events: all;
        }

        .annotation-box:hover {
            border-color: #007bff;
        }


        .resize-handle {
            position: absolute;
            bottom: -4px;
            right: -4px;
            width: 12px;
            height: 12px;
            background: #007bff;
            border: 2px solid #fff;
            border-radius: 50%;
            cursor: se-resize;
            z-index: 25;
            opacity: 0;
            transition: opacity 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .resize-handle::before {
            content: '';
            width: 6px;
            height: 6px;
            background: linear-gradient(-45deg, transparent 40%, white 40%, white 60%, transparent 60%);
            border-radius: 1px;
        }

        .annotation-box:hover .resize-handle {
            opacity: 1;
        }


        .delete-handle {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 20px;
            height: 20px;
            background: #dc3545;
            border: 2px solid #fff;
            border-radius: 50%;
            cursor: pointer;
            z-index: 25;
            opacity: 0;
            transition: opacity 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            color: white;
            line-height: 1;
        }

        .annotation-box:hover .delete-handle {
            opacity: 1;
        }

        .delete-handle:hover {
            background: #c82333;
            transform: scale(1.1);
        }

        .annotation-input {
            background: transparent;
            border: none;
            color: white;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            outline: none;
            resize: none;
            cursor: text;
            pointer-events: all;
        }

        .annotation-input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }


        .draw-hint {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 123, 255, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            z-index: 15;
            display: none;
        }

        .draw-hint.show {
            display: block;
        }

        /* ============= Canvas Editor Tab ============= */
        .canvas-tab { display: inline-block; }

        .wr-lists.canvas.hide { display: none; }
        /* Canvas overlay mode for non-PlanRender Edit */
        .wr-lists.canvas.canvas-overlay-mode {
            display: flex !important;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 20;
            background: #fff;
        }

        .canvas-toolbar {
            position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
            z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px;
            pointer-events: none;
        }
        .canvas-toolbar > * { pointer-events: auto; }
        .canvas-tool-group {
            display: flex; align-items: center; gap: 6px;
            padding: 6px 12px; background: white; border-radius: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .canvas-color-dot {
            width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
            border: 2px solid transparent; transition: all 0.15s; flex-shrink: 0;
        }
        .canvas-color-dot:hover { transform: scale(1.15); }
        .canvas-color-dot.active { border-color: #333; box-shadow: 0 0 0 2px rgba(0,0,0,0.2); }
        .canvas-color-dot[data-color="#ffffff"] { border-color: #ccc; }
        .canvas-color-dot[data-color="#ffffff"].active { border-color: #333; }

        .canvas-tool-btn {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border: none; border-radius: 50%; background: transparent; cursor: pointer; transition: all 0.15s;
        }
        .canvas-tool-btn svg { width: 20px; height: 20px; }
        .canvas-tool-btn:hover { background: #f0f0f0; }
        .canvas-tool-btn.active { background: #e8eaf6; }
        .canvas-tool-btn.active svg { stroke: #1a73e8; }

        .canvas-actions {
            position: absolute; top: 10px; right: 10px; z-index: 10;
            display: flex; align-items: center; gap: 6px;
            padding: 4px 8px; background: white; border-radius: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .canvas-action-btn {
            width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
            border: none; border-radius: 50%; background: transparent; cursor: pointer; color: #555;
        }
        .canvas-action-btn svg { width: 18px; height: 18px; }
        .canvas-action-btn:hover { background: #f0f0f0; }
        .canvas-apply-btn {
            width: auto; height: 32px; padding: 0 16px; border-radius: 16px;
            background: #1a73e8; color: white; font-size: 13px; font-weight: 600;
            border: none; cursor: pointer; transition: background 0.15s;
        }
        .canvas-apply-btn:hover { background: #1565c0; }

        .canvas-upload-placeholder {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            cursor: pointer; z-index: 10; background: #f5f5f5;
            border: 2px dashed #ccc; border-radius: 8px;
            transition: border-color 0.2s, background 0.2s;
        }
        .canvas-upload-placeholder:hover {
            border-color: #1a73e8; background: #f0f4ff;
        }
        .canvas-upload-placeholder:hover svg { stroke: #1a73e8; }
        .canvas-upload-placeholder.hide { display: none; }

        .canvas-wrapper {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            overflow: hidden; position: relative; background: #f0f0f0;
            background-image:
                linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
                linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
                linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }

        /* Large desktop (2K/4K): follow reference proportion so left panel is not too narrow */
        @media (min-width: 1920px) {
            .web-ai-main {
                width: 100vw;
                max-width: none;
                gap: 0;
            }

            .wam-op {
                width: 20vw;
                flex: 0 0 20vw;
                margin-right: 1vw;
            }

            .wam-result {
                width: 50vw;
                flex: 0 0 50vw;
                min-width: 0;
            }
        }

        @media (max-width: 1400px) {
            .web-ai-main {
                width: min(97vw, 1500px);
            }
            .wam-op {
                width: clamp(320px, 28vw, 390px);
                flex-basis: clamp(320px, 28vw, 390px);
                min-width: 320px;
            }
            .wam-result {
                min-width: 560px;
            }
        }

        @media (max-width: 1200px) {
            .web-ai-main {
                width: 98vw;
                gap: .8vw;
            }
            .wam-op {
                width: clamp(300px, 32vw, 360px);
                flex-basis: clamp(300px, 32vw, 360px);
                min-width: 300px;
            }
            .wam-result {
                min-width: 0;
            }
        }

        @media (max-width: 1000px) {
            .wam-op {
                width: 38vw;
                flex-basis: 38vw;
                min-width: 290px;
            }
            .wam-result {
                width: auto;
                min-width: 0;
                flex: 1 1 0;
            }
        }
        @media (max-width: 768px) {
            .web-ai-main {
                flex-direction: column;
                width: 100%;
                padding: 0 1vw;
            }
            
            .wam-op {
                width: 100%;
                margin-right: 0;
                margin-bottom: 1vw;
                height: auto;
                min-height: auto;
                padding: 3vw;
            }
            
            .wam-result {
                width: 100%;
                margin-top: 0;
                height: 60vh;
            }

            .wsb-item {
                width: 32%;
            }

            .wo-style-box {
                gap: 2%;
                margin-bottom: 0.5vw;
            }

            .wo-style-box + .wo-style-box {
                margin-top: 1vw;
            }

            .wo-title.head {
                font-size: 1.2vw;
            }

            .wsbi > div {
                font-size: 1vw;
            }

            .wop-title {
                font-size: 1vw;
                width: 6vw;
            }

            .wop-param {
                font-size: 1vw;
            }

            .wamo2-help {
                font-size: 0.667vw;
            }

            .floating-btn {
                font-size: 8px;
                padding: 6px 12px;
                min-width: 50px;
            }
            
            .floating-buttons {
                gap: 10px;
                bottom: 15px;
            }
            

            .draw-hint {
                bottom: 70px;
                font-size: 10px;
                padding: 6px 12px;
            }


            .upload-buttons {
                flex-direction: row;
                gap: 1vw;
                align-items: center;
            }

            .upload-btn {
                font-size: 1.2vw;
                padding: 1vw 2vw;
                min-width: 15vw;
                flex: 0 0 auto;
                max-width: 35%;
            }

            .upload-btn svg {
                width: 1.5vw;
                height: 1.5vw;
            }

            .upload-tip-main {
                font-size: 1vw;
            }

            .upload-tip-format {
                font-size: 0.9vw;
            }
        }

        @media (max-width: 1000px) and (min-width: 769px) {
            .wo-title.head {
                font-size: max(0.9vw, 12px);
            }

            .wsbi > div {
                font-size: max(0.7vw, 11px);
            }

            .wop-title {
                font-size: max(0.8vw, 11px);
                width: max(5vw, 50px);
            }

            .wop-param {
                font-size: max(0.8vw, 11px);
            }
        }

        /* Keep left panel visual scale stable on desktop/tablet */
        @media (min-width: 769px) {
            .wam-op {
                padding: 2vw;
                padding-top: .5vw;
                border-radius: 1vw;
            }

            .wam-op .wo-title.head,
            .wam-op .title-star {
                font-size: max(.72vw, 13px);
            }

            .wam-op .wsbi > div {
                font-size: 12px;
                margin-left: 4px;
            }

            .wam-op .wop-title {
                width: 72px;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
            }

            .wam-op .wop-param {
                height: 30px;
                font-size: 12px;
                border-radius: 6px;
            }

            .wam-op .new-style-btn {
                padding: 6px 10px;
                font-size: 12px;
                border-radius: 6px;
            }
            .wam-op .detail-btn {
                padding: 6px 10px;
                font-size: 12px;
                border-radius: 6px;
                height: calc(12px * 1.2 + 12px + 2px);
            }
            .web-ai-container.mode-jieturender .wam-op .wo-param.srm-mode .new-style-btn {
                padding-top: 6px;
                padding-bottom: 6px;
                height: calc(12px * 1.2 + 12px + 2px);
            }
            .wam-op .planrender-actions { margin-top: 6px; }
            .wam-op .wo-param.planrender-actions .new-style-btn {
                padding-top: 6px;
                padding-bottom: 6px;
                height: calc(12px * 1.2 + 12px + 2px);
            }
            .wam-op .wo-prompt textarea {
                padding: 10px;
                border-radius: 8px;
                font-size: 13px;
            }

            .wam-op .style-inline {
                padding: 8px 10px;
                font-size: 12px;
                border-radius: 8px 8px 0 0;
                gap: 8px;
            }
            .web-ai-container.mode-maopi .wam-op #roomStyleInline {
                font-size: 13.8px;
            }

            .wam-op .style-chip {
                gap: 6px;
                padding: 5px 12px;
                font-size: 12px;
            }
            .wam-op #styleInline {
                font-size: 13.8px;
                line-height: 1.8;
            }
            .wam-op #styleInline .style-chip {
                font-size: 13.8px;
            }
            .web-ai-container.mode-softcollage .wam-op .constraint-btn {
                font-size: 12px;
                border-radius: 6px;
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                line-height: 1.2;
                gap: 6px;
                height: calc(12px * 1.2 + 12px + 2px);
            }
            .web-ai-container.mode-maopi .wam-op #roomStyleInline .style-chip {
                font-size: 13.8px;
            }

            .wam-op .style-menu {
                border-radius: 8px;
                padding: 8px;
                column-gap: 12px;
            }

            .wam-op .style-menu .menu-item {
                padding: 6px 16px 6px 10px;
                font-size: 12px;
            }

            .wam-op #planTypeMenu .menu-item { gap: 6px; }
            .wam-op #layoutStyleMenu { padding: 8px; }
            .wam-op #layoutStyleMenu.show-menu { gap: 8px; }
            .wam-op #layoutStyleMenu .layout-style-item { border-radius: 6px; }
            .wam-op #layoutStyleMenu .layout-style-item .label { padding: 4px 0; font-size: 11px; }

            .wam-op .upload-ref,
            .wam-op .wo-prompt-container {
                height: 34px;
                margin-top: 4px;
            }

            .wam-op .upload-ref .wo-title,
            .wam-op .wo-prompt-container .wo-title {
                width: 120px;
                font-size: 12px;
            }

            .wam-op .wo-switch {
                height: 30px;
                margin-top: 8px;
            }

            .wam-op .wamo-2 {
                height: auto;
                min-height: 0;
                margin-top: auto;
                padding-bottom: 0;
                display: flex;
                align-items: flex-end;
            }

            .wam-op .wamo2-help {
                display: none;
                margin: 0;
            }

            .wam-op .wamo2-btn {
                height: 2.5vw;
                line-height: 2.5vw;
                border-radius: 8px;
                font-size: 13px;
            }

            .wam-op .wamo2-help {
                font-size: 11px;
                margin-top: 8px;
                margin-bottom: 8px;
            }

            .wam-op .upload-buttons {
                gap: 8px;
                margin-bottom: 12px;
            }

            .wam-op .upload-btn {
                gap: 4px;
                padding: 6px 12px;
                border-radius: 6px;
                font-size: 12px;
                min-width: 88px;
            }

            .wam-op .upload-btn svg {
                width: 14px;
                height: 14px;
            }

            .wam-op .upload-tip-main {
                font-size: 11px;
                margin-bottom: 4px;
            }

            .wam-op .upload-tip-format {
                font-size: 10px;
            }

            .wam-op #promptCharCount {
                bottom: 8px !important;
                right: 10px !important;
                font-size: 11px !important;
            }
        }


        .image-compare-container {
            position: relative;
            width: 100%;
            height: 100%;
            max-width: 100%;
            margin: 0 auto;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-compare-container img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }

        .compare-image-before,
        .compare-image-after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .compare-image-before {
            z-index: 1;
        }

        .compare-image-after {
            z-index: 2;
            clip-path: inset(0 0 0 50%);
        }

        .compare-image-before img,
        .compare-image-after img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
        }

        .compare-slider {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background: #fff;
            cursor: ew-resize;
            z-index: 3;
            transform: translateX(-50%);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .compare-slider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            background: #fff;
            border: 3px solid #007bff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .compare-slider::after {
            content: '⇔';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #007bff;
            font-size: 16px;
            font-weight: bold;
            z-index: 1;
        }

        .compare-labels {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            z-index: 4;
            pointer-events: none;
        }
        .compare-label {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .compare-instructions {
            text-align: center;
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }


        .example-hint {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 123, 255, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            z-index: 5;
            animation: fadeInOut 3s ease-in-out;
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0; }
            20%, 80% { opacity: 1; }
        }

        .example-hint { display: none !important; }


        .draw-layout-ele {
            display: none !important;
        }

        .draw-layout-ele.show {
            display: none !important;
        }
        .draw-btn {
            display: none !important;
        }

        .draw-overlay {
            display: none !important;
        }

        .draw-hint {
            display: none !important;
        }


        .upload-buttons {
            display: flex;
            flex-direction: row;
            gap: 0.4vw;
            justify-content: center;
            align-items: center;
            margin-bottom: 0.8vw;
        }

        .upload-btn {
            display: flex;
            align-items: center;
            gap: 0.2vw;
            padding: max(0.3vw, 5px) max(0.6vw, 8px);
            border-radius: 0.25vw;
            border: none;
            font-size: max(0.55vw, 11px);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: max(3.5vw, 60px);
            justify-content: center;
            flex: 0 0 auto;
            max-width: 35%;
        }

        .upload-btn svg {
            width: max(0.6vw, 12px);
            height: max(0.6vw, 12px);
        }

        .upload-btn-primary {
            background-color: #ffffff;
            color: #333;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,.03);
        }

        .upload-btn-primary:hover {
            background-color: #f5f5f5;
            border-color: #dcdfe6;
        }

        .upload-btn-secondary {
            background-color: #ffffff;
            color: #333;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,.03);
        }

        .upload-btn-secondary:hover {
            background-color: #f5f5f5;
            border-color: #dcdfe6;
        }

        .upload-tips {
            text-align: center;
            color: #999;
        }

        .upload-tip-main {
            font-size: max(0.45vw, 10px);
            line-height: 1.4;
            margin-bottom: 0.2vw;
        }

        .upload-tip-format {
            font-size: max(0.4vw, 9px);
            color: #bbb;
        }


        .wo-picture {
            border: 2px dashed #ddd;
            border-radius: 0.6vw;
        }
        .wo-picture:hover {
            border-color: #007bff;
        }
        .material-library-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 0.6vw;
        }

        .material-library-modal.show {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 0.5vw;
            width: 90%;
            height: auto;
            max-width: 500px;
            max-height: 75vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1vw;
            border-bottom: 1px solid #eee;
            background: #f8f9fa;
            border-radius: 0.5vw 0.5vw 0 0;
        }

        .modal-title {
            font-size: 0.8vw;
            font-weight: bold;
            color: #333;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 1.2vw;
            cursor: pointer;
            color: #666;
            width: 2vw;
            height: 2vw;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s ease;
        }

        .modal-close:hover {
            background: #f0f0f0;
            color: #333;
        }

        .modal-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            background: #f8f9fa;
        }

        .modal-tab {
            flex: 1;
            padding: 0.8vw;
            text-align: center;
            font-size: 0.65vw;
            cursor: pointer;
            border: none;
            background: none;
            color: #666;
            transition: all 0.2s ease;
            border-bottom: 2px solid transparent;
        }

        .modal-tab.active {
            color: #007bff;
            border-bottom-color: #007bff;
            background: white;
        }

        .modal-tab:hover {
            color: #007bff;
            background: rgba(0, 123, 255, 0.05);
        }

        .modal-body {
            flex: 1;
            overflow: visible;
            padding: 1vw;
            min-height: auto;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .material-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.4vw;
            padding: 0.5vw;
            max-height: none;
        }

        .material-item {
            aspect-ratio: 1;
            border-radius: 0.3vw;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
        }

        .material-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-color: #007bff;
        }

        .material-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .material-placeholder {
            color: #999;
            font-size: 0.5vw;
            text-align: center;
        }

        .material-item.error {
            border: 1px solid #ffcccc;
            background-color: #fff5f5 !important;
        }

        .material-item.error .material-placeholder {
            color: #cc0000;
            font-weight: bold;
        }

        .material-item.loaded {
            border: 2px solid transparent;
        }
        


        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                height: auto;
                max-height: 85vh;
                max-width: 400px;
            }

            .modal-title {
                font-size: 1.2vw;
            }

            .modal-close {
                font-size: 1.8vw;
                width: 3vw;
                height: 3vw;
            }

            .modal-tab {
                font-size: 1vw;
                padding: 1.2vw;
            }

            .material-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.8vw;
                padding: 0.5vw;
            }

            .material-item {
                min-height: 50px;
            }

            .material-placeholder {
                font-size: 0.8vw;
            }

            .modal-body {
                padding: 0.8vw;
                          }
          }

          .layui-layer-btn {
              display: flex !important;
              flex-direction: column !important;
              gap: 10px !important;
              padding: 4px 24px 24px !important;
              text-align: center !important;
          }

          .layui-layer-btn .layui-layer-btn0,
          .layui-layer-btn a {
              background: linear-gradient(to right, #0491e8, #1c1fd8) !important;
              border: none !important;
              border-radius: 8px !important;
              color: white !important;
              font-weight: 500 !important;
              transition: all 0.3s ease !important;
              box-shadow: 0 2px 8px rgba(4, 145, 232, 0.3) !important;
              text-align: center !important;
              display: flex !important;
              align-items: center !important;
              justify-content: center !important;
              padding: 8px 16px !important;
              min-height: 36px !important;
              box-sizing: border-box !important;
              margin: 0 auto !important;
              width: calc(100% - 48px) !important;
          }

          .layui-layer-btn .layui-layer-btn0:hover,
          .layui-layer-btn a:hover {
              background: linear-gradient(to right, #027dc9, #181abb) !important;
              transform: translateY(-1px) !important;
              box-shadow: 0 4px 12px rgba(4, 145, 232, 0.4) !important;
          }

          .layui-layer-btn .layui-layer-btn1 {
              background: transparent !important;
              border: none !important;
              border-radius: 8px !important;
              color: #666 !important;
              font-weight: 400 !important;
              font-size: 13px !important;
              transition: all 0.2s ease !important;
              box-shadow: none !important;
              text-align: center !important;
              display: flex !important;
              align-items: center !important;
              justify-content: center !important;
              padding: 8px 16px !important;
              min-height: 36px !important;
              box-sizing: border-box !important;
              margin: 0 auto !important;
              width: calc(100% - 48px) !important;
          }

          .layui-layer-btn .layui-layer-btn1:hover {
              background: #f5f5f5 !important;
              color: #333 !important;
              transform: none !important;
              box-shadow: none !important;
          }

          .floating-buttons.force-hide{
              opacity: 0 !important;
              pointer-events: none;
          }

          /* Block sketch mode title clickable style */
          #prompt-title.clickable-title {
              transition: color 0.2s ease;
              cursor: pointer;
          }
          #prompt-title.clickable-title:hover {
              color: #4285f4;
          }

          /* Fullscreen view modal style */
          .fullscreen-modal {
              display: none;
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background: #000;
              z-index: 99999;
              animation: fadeIn 0.3s ease;
          }

          @keyframes fadeIn {
              from { opacity: 0; }
              to { opacity: 1; }
          }

          .fullscreen-modal.active {
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .fullscreen-content {
              position: relative;
              width: 90vw;
              height: 90vh;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .fullscreen-close {
              position: absolute;
              top: 20px;
              right: 20px;
              background: rgba(255, 255, 255, 0.15);
              color: white;
              border: 1px solid rgba(255, 255, 255, 0.3);
              width: 44px;
              height: 44px;
              border-radius: 50%;
              font-size: 26px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 100001;
              transition: all 0.2s;
              backdrop-filter: blur(4px);
          }

          .fullscreen-close:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: scale(1.1);
          }

          .fullscreen-download {
              position: absolute;
              top: 20px;
              right: 76px;
              background: rgba(255, 255, 255, 0.15);
              color: white;
              border: 1px solid rgba(255, 255, 255, 0.3);
              width: 44px;
              height: 44px;
              border-radius: 50%;
              font-size: 20px;
              cursor: pointer;
              display: none;
              align-items: center;
              justify-content: center;
              z-index: 100001;
              transition: all 0.2s;
              backdrop-filter: blur(4px);
          }
          .fullscreen-download:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: scale(1.1);
          }

          .fullscreen-gallery-nav {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              background: rgba(255,255,255,0.15);
              color: #fff;
              border: none;
              width: 48px;
              height: 48px;
              border-radius: 50%;
              font-size: 24px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 100001;
              transition: background 0.2s;
              backdrop-filter: blur(4px);
          }
          .fullscreen-gallery-nav:hover { background: rgba(255,255,255,0.3); }
          .fullscreen-gallery-nav.prev { left: 20px; }
          .fullscreen-gallery-nav.next { right: 20px; }
          .fullscreen-gallery-counter {
              position: absolute;
              bottom: 24px;
              left: 50%;
              transform: translateX(-50%);
              color: rgba(255,255,255,0.7);
              font-size: 14px;
              z-index: 100001;
          }
          .fullscreen-gallery-label {
              position: absolute;
              top: 24px;
              left: 50%;
              transform: translateX(-50%);
              color: rgba(255,255,255,0.85);
              font-size: 16px;
              font-weight: 500;
              z-index: 100001;
          }

          .fullscreen-image-wrapper {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              cursor: grab;
          }

          .fullscreen-image-wrapper.dragging {
              cursor: grabbing;
          }

          .fullscreen-image-wrapper img {
              max-width: 100%;
              max-height: 100%;
              object-fit: contain;
              transition: transform 0.1s ease-out;
              user-select: none;
          }

          /* Fullscreen comparison image style */
          .fullscreen-compare-container {
              position: relative;
              width: 90vw;
              height: 90vh;
              overflow: hidden;
              cursor: grab;
          }

          .fullscreen-compare-container.dragging {
              cursor: grabbing;
          }

          .fullscreen-compare-before,
          .fullscreen-compare-after {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
          }

          .fullscreen-compare-before img,
          .fullscreen-compare-after img {
              width: 100%;
              height: 100%;
              object-fit: contain; /* Ensure both images scale by same rules */
              transition: transform 0.1s ease-out;
              user-select: none;
          }

          .fullscreen-compare-after {
              clip-path: inset(0 0 0 50%);
          }

          .fullscreen-compare-slider {
              position: absolute;
              top: 0;
              left: 50%;
              width: 4px;
              height: 100%;
              background: #fff;
              cursor: ew-resize;
              z-index: 100000;
              transform: translateX(-50%);
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          }

          .fullscreen-compare-slider::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 50px;
              height: 50px;
              background: #fff;
              border: 3px solid #007bff;
              border-radius: 50%;
              transform: translate(-50%, -50%);
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          }

          .fullscreen-compare-slider::after {
              content: '⇔';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #007bff;
              font-size: 20px;
              font-weight: bold;
              z-index: 1;
          }

          .fullscreen-toggle-buttons {
              position: absolute;
              bottom: 30px;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              gap: 10px;
              z-index: 100001;
          }

          .fullscreen-toggle-btn {
              background: rgba(74, 74, 74, 0.9);
              color: white;
              border: none;
              padding: 7px 13px;
              border-radius: 4px;
              font-size: 12px;
              cursor: pointer;
              transition: all 0.2s;
          }

          .fullscreen-toggle-btn:hover {
              background: #333;
          }

          .fullscreen-toggle-btn.active {
              background: #007bff;
          }

          /* Zoom hint */
          .zoom-indicator {
              position: absolute;
              top: 20px;
              left: 50%;
              transform: translateX(-50%);
              background: rgba(74, 74, 74, 0.9);
              color: white;
              padding: 8px 16px;
              border-radius: 20px;
              font-size: 14px;
              z-index: 100002;
              pointer-events: none;
              opacity: 0;
              transition: opacity 0.3s;
          }

          .zoom-indicator.show {
              opacity: 1;
          }

/* ===== Video Modal CSS ===== */
        .video-btn{background:linear-gradient(135deg,#4285f4 0%,#34a853 100%);} .video-btn:hover{background:linear-gradient(135deg,#3367d6 0%,#2e7d32 100%);} .video-btn.disabled{background:#ccc;cursor:not-allowed;opacity:.6;} .video-btn.disabled:hover{background:#ccc;transform:none;box-shadow:0 2px 8px rgba(0,0,0,.15);}
        .edit-result-btn{background:linear-gradient(135deg,#F5A623 0%,#F7C948 100%);color:#fff;} .edit-result-btn:hover{background:linear-gradient(135deg,#E09410 0%,#E5B830 100%);} 
        .video-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none;z-index:10000;}
        .video-modal{background:#f5f5f5;border:3px solid #4285f4;border-radius:20px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.2);position:fixed;left:0;top:0;transform:none;width:auto;max-width:700px;overflow:visible;}
        .video-modal-content{display:flex;flex-direction:column;gap:20px;}
        .video-prompt-input{width:100%;min-height:80px;height:auto;padding:16px;border:none;border-radius:12px;font-size:14px;color:#666;background:#e8e8e8;resize:none;box-sizing:border-box;font-family:inherit;overflow:hidden;}
        .video-prompt-input::placeholder{color:#999;} .video-prompt-input:focus{outline:none;background:#e0e0e0;}
        .video-controls-row{display:flex;gap:20px;align-items:center;}
        .video-dropdown{position:relative;flex:1;min-width:180px;} .video-dropdown-btn{width:100%;padding:12px 20px;background:#fff;border:1px solid #ddd;border-radius:8px;font-size:14px;color:#333;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .2s ease;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .video-dropdown-btn span{white-space:nowrap;} .video-dropdown-btn:hover{border-color:#4285f4;box-shadow:0 2px 8px rgba(66,133,244,.1);} .video-dropdown-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:1000;display:none;max-height:200px;overflow-y:auto;}
        .video-dropdown-item{padding:12px 20px;cursor:pointer;font-size:14px;color:#333;transition:background-color .2s ease;} .video-dropdown-item:hover{background:#f8f9fa;} .video-dropdown-item.disabled{color:#ccc;cursor:not-allowed;background:#f5f5f5;}
        .video-generate-btn{padding:12px 40px;background:linear-gradient(135deg,#4285f4 0%,#34a853 100%);color:#fff;border:none;border-radius:8px;font-size:10.67px;font-weight:600;cursor:pointer;transition:background-color .2s ease;white-space:nowrap;min-width:0;width:100%;display:flex;align-items:center;justify-content:center;gap:4px;height:44px;}
        .video-generate-btn .video-generate-text,.video-generate-btn .video-cost{white-space:nowrap;}
        .video-generate-text{transform:translateY(1px);font-size:1.25em;} .video-cost{font-size:1.25em;color:#e5e7eb;padding-left:3px;opacity:1;}
        .video-modal-close{position:absolute;top:-16px;right:-16px;background:#fff;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.15);border:1px solid #e5e7eb;} .video-modal-close:hover{background:#e0e0e0;color:#333;}

/* ══════════════════════════════════════════════════════════
   Sidebar integration — mirrored from ImageForge tool CSS
   ══════════════════════════════════════════════════════════ */

/* ── CSS variables for sidebar layout ── */
body[data-sidebar-active] {
    --dt-gs-width: 184px;
    --wip-header: 68px;
    --wip-gap: 1vw;
    --wip-edge: 56px;
    --wip-margin: 2vw;
    --wip-panel-h: calc(100vh - var(--wip-header) - var(--wip-margin) * 2);
    background-color: #dddddd;
}

/* ── Sidebar position & style ── */
body[data-sidebar-active] .dt-global-sidebar {
    top: calc(var(--wip-header) + var(--wip-margin)) !important;
    left: var(--wip-edge) !important;
    height: var(--wip-panel-h) !important;
    border: 0.5px solid var(--dt-gs-border) !important;
    border-right: none !important;
    border-radius: 0.67vw 0 0 0.67vw !important;
    background: #fff !important;
    box-shadow: -4px 4px 24px rgba(0,0,0,0.06) !important;
}

/* ── Sidebar title: hide workspace text, show collapse button ── */
body[data-sidebar-active] .dt-gs-title-text {
    display: none !important;
}
body[data-sidebar-active] .dt-gs-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 16px 12px 8px 16px !important;
    border-bottom: none !important;
}
body[data-sidebar-active] .dt-gs-abbr {
    display: none !important;
}
body[data-sidebar-active] .dt-gs-history-item {
    padding-left: 20px !important;
}

/* ── Collapse button ── */
body[data-sidebar-active] .dt-gs-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #999;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
body[data-sidebar-active] .dt-gs-collapse-btn:hover {
    background: #f3f4f6;
    color: #333;
}

/* ── Sidebar EXPANDED: layout with sidebar visible ── */
body[data-sidebar-active] .web-ai-container {
    margin-top: var(--wip-header) !important;
    margin-left: calc(var(--dt-gs-width) + var(--wip-edge)) !important;
    width: calc(100% - var(--dt-gs-width) - var(--wip-edge)) !important;
    height: auto !important;
    display: block !important;
    transition: margin-left 0.25s ease, width 0.25s ease !important;
}
body[data-sidebar-active] .web-ai-main {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 0 var(--wip-edge) 0 0 !important;
    box-sizing: border-box !important;
    gap: var(--wip-gap) !important;
}
body[data-sidebar-active] .wam-op {
    width: 22vw !important;
    min-width: 320px !important;
    height: var(--wip-panel-h) !important;
    margin: var(--wip-margin) 0 !important;
    border-radius: 0 0.67vw 0.67vw 0 !important;
    border: 0.5px solid #e8e8ea !important;
    border-left: none !important;
}
body[data-sidebar-active] .wam-result {
    flex: 1 !important;
    min-width: 0 !important;
    height: var(--wip-panel-h) !important;
    margin-top: var(--wip-margin) !important;
    margin-bottom: var(--wip-margin) !important;
    border-radius: 0.67vw !important;
}

/* ── Collapsed state: sidebar hidden, layout reverts to original ── */
body[data-sidebar-active] .dt-global-sidebar.collapsed {
    transform: translateX(calc(-100% - var(--wip-edge))) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
}
body[data-sidebar-active] .dt-global-sidebar:not(.collapsed) {
    transform: translateX(0) !important;
    opacity: 1 !important;
    transition: transform 0.25s ease, opacity 0.2s ease !important;
}
body[data-sidebar-collapsed] .web-ai-container {
    margin-left: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: margin-left 0.25s ease, width 0.25s ease !important;
}
body[data-sidebar-collapsed] .web-ai-main {
    display: inline-flex !important;
    width: 100vw !important;
    height: auto !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 1vw !important;
}
body[data-sidebar-collapsed] .wam-op {
    width: 22vw !important;
    min-width: 384px !important;
    flex: none !important;
    height: calc(100vh - 4vw - var(--wip-header)) !important;
    margin: 2vw 0 !important;
    border: none !important;
    border-radius: 1vw !important;
}
body[data-sidebar-collapsed] .wam-result {
    width: 56vw !important;
    flex: none !important;
    min-width: 0 !important;
    height: calc(100vh - 4vw - var(--wip-header)) !important;
    margin-top: 2vw !important;
    margin-bottom: 2vw !important;
    border-radius: 1vw !important;
}

/* ── Expand button (visible when collapsed) ── */
.dt-gs-expand-btn {
    display: none;
    position: fixed;
    left: 8px;
    top: calc(var(--wip-header, 68px) + 2vw);
    width: 36px;
    height: 36px;
    border: 1px solid #e8e8ea;
    background: #fff;
    border-radius: 1vw;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    color: #666;
    transition: background 0.15s, color 0.15s;
}
.dt-gs-expand-btn:hover {
    background: #f3f4f6;
    color: #333;
}
body[data-sidebar-collapsed] .dt-gs-expand-btn {
    display: flex;
}

/* ── Floating contact buttons (bottom-right, visible when sidebar collapsed) ── */
.dt-float-contact {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 2vw;
    z-index: 50;
    flex-direction: column;
    gap: 6px;
}
body[data-sidebar-collapsed] .dt-float-contact {
    display: flex;
}
.dt-float-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e8e8ea;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    color: #999;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.dt-float-contact-btn:hover {
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #555;
}
.dt-fc-label { display: none; }
.dt-fc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
}

/* ── QR modal z-index (above sidebar z-index 9998) ── */
.z-10001 { z-index: 10001; }

/* ── Near-square viewports: hide expand button & floating contact ── */
@media (max-aspect-ratio: 6/5) {
    body[data-sidebar-collapsed] .dt-gs-expand-btn {
        display: none !important;
    }
    body[data-sidebar-collapsed] .dt-float-contact {
        display: none !important;
    }
}