Merge branch 'main' into codex/ecommerce-ui-current

src/features/ecommerce/EcommercePage.tsx

@@ -102,6 +102,48 @@ const smartCutoutSizeOptions = [
 type SmartCutoutSizeKey = (typeof smartCutoutSizeOptions)[number]["key"];
 type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string };
 
+const ecommerceInspirationTabs = ["最近打开", "一键同款", "海报模板", "热门", "商品图", "模特穿戴"];
+
+const ecommerceInspirationRows = [
+  {
+    title: "AI团队",
+    desc: "不止作图，更懂转化。",
+    variant: "team",
+    cards: [
+      { title: "指定ASIN，优化listing", meta: "竞品拆解 · 卖点重排 · 图文建议" },
+      { title: "TikTok美区爆品分析", meta: "脚本方向 · 人群洞察 · 素材策略" },
+      { title: "竞品分析 + 全套listing", meta: "关键词 · 主图结构 · 转化建议" },
+      { title: "世界杯属性快闪视频", meta: "热点追踪 · 模板复用 · 15秒短片" },
+    ],
+  },
+  {
+    title: "电商套图",
+    desc: "主图 / 详情图全套一次性生成。",
+    variant: "listing",
+    cards: [
+      { title: "科技礼盒主图", meta: "高反差质感 · 参数卖点" },
+      { title: "美妆节日套图", meta: "促销氛围 · 多规格展示" },
+      { title: "防晒产品场景", meta: "户外光感 · 功效表达" },
+      { title: "露营家具详情", meta: "场景组合 · 尺寸说明" },
+      { title: "香氛A+页面", meta: "材质细节 · 品牌氛围" },
+      { title: "童装listing组合", meta: "多角度 · 人群展示" },
+    ],
+  },
+  {
+    title: "商品视频",
+    desc: "口播模拟 / 商品展示视频 / 社媒短片。",
+    variant: "video",
+    cards: [
+      { title: "口播种草短片", meta: "手持展示 · 真实推荐" },
+      { title: "香水质感视频", meta: "光影旋转 · 高级静物" },
+      { title: "玩具互动短视频", meta: "生活场景 · 情绪表达" },
+      { title: "器皿产品展示", meta: "极简背景 · 材质突出" },
+      { title: "饰品模特试戴", meta: "近景特写 · 搭配建议" },
+      { title: "包袋生活方式", meta: "室内场景 · 组合展示" },
+    ],
+  },
+] as const;
+
 const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
 const normalizeHexColor = (value: string) => {
@@ -4201,6 +4243,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     handleGenerate();
   };
 
+  const scrollInspirationRow = (event: ReactMouseEvent<HTMLButtonElement>, direction: -1 | 1) => {
+    const row = event.currentTarget.closest(".ecom-inspiration-row");
+    const strip = row?.querySelector<HTMLElement>(".ecom-inspiration-strip");
+    if (!strip) return;
+    strip.scrollBy({ left: direction * Math.max(280, strip.clientWidth * 0.78), behavior: "smooth" });
+  };
+
   const clonePreview = (
     <main className="product-clone-preview clone-ai-preview" data-status={status} aria-label="电商 AI 作图预览" {...getPreviewSurfaceProps()}>
       <header className="clone-ai-preview-header">
@@ -4572,7 +4621,46 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             ))}
           </section>
         ) : null}
-        <span className="clone-ai-char-count">{requirement.length}/500</span>
+        {status !== "done" ? (
+          <section className="ecom-inspiration-lab" aria-label="电商灵感案例">
+            <nav className="ecom-inspiration-tabs" aria-label="案例分类">
+              {ecommerceInspirationTabs.map((tab, index) => (
+                <button key={tab} type="button" className={index === 3 ? "is-active" : ""}>
+                  {tab}
+                </button>
+              ))}
+            </nav>
+            <div className="ecom-inspiration-rows">
+              {ecommerceInspirationRows.map((row) => (
+                <section key={row.title} className={`ecom-inspiration-row ecom-inspiration-row--${row.variant}`} aria-label={row.title}>
+                  <div className="ecom-inspiration-row__meta">
+                    <strong>{row.title}</strong>
+                    <span>{row.desc}</span>
+                    <div className="ecom-inspiration-row__controls">
+                      <button type="button" aria-label={`向左浏览${row.title}`} onClick={(event) => scrollInspirationRow(event, -1)}>‹</button>
+                      <button type="button" aria-label={`向右浏览${row.title}`} onClick={(event) => scrollInspirationRow(event, 1)}>›</button>
+                    </div>
+                  </div>
+                  <div className="ecom-inspiration-strip" tabIndex={0}>
+                    {row.cards.map((card, index) => (
+                      <article key={card.title} className="ecom-inspiration-card">
+                        <div className="ecom-inspiration-card__visual" aria-hidden="true">
+                          <span />
+                          <span />
+                          <span />
+                          <span />
+                        </div>
+                        <strong>{card.title}</strong>
+                        <p>{card.meta}</p>
+                        <em>{String(index + 1).padStart(2, "0")}</em>
+                      </article>
+                    ))}
+                  </div>
+                </section>
+              ))}
+            </div>
+          </section>
+        ) : null}
       </section>
     </main>
   );
@@ -5956,7 +6044,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             aria-label={isCommandHistoryCollapsed ? "展开记录" : "收起记录"}
             aria-expanded={!isCommandHistoryCollapsed}
           >
-            {isCommandHistoryCollapsed ? "‹" : "›"}
+            {isCommandHistoryCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
           </button>
           <button type="button" className="ecom-command-history__new" onClick={handleNewEcommerceConversation}>新对话</button>
           <button

src/styles/pages/ecommerce.css

@@ -11494,3 +11494,631 @@
 .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview {
   overflow: visible !important;
 }
+
+/* Final #/imageWorkbench entry locks: keep the standalone SaaS landing stable after shared ecommerce styles load. */
+body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
+  min-height: 1.18em !important;
+  font-weight: 860 !important;
+  line-height: 1.14 !important;
+  text-wrap: balance;
+}
+
+body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button,
+body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline {
+  border-radius: 15px !important;
+}
+
+body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong {
+  display: inline !important;
+  min-width: 0 !important;
+  overflow: hidden !important;
+  color: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+@media (max-width: 760px) {
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
+    max-width: min(100%, 520px) !important;
+    min-height: 2.28em !important;
+    overflow: visible !important;
+    background:
+      linear-gradient(96deg, #10202c 0%, #164359 36%, #0f829b 68%, #18bfd2 100%) !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    color: transparent !important;
+    font-size: clamp(29px, 7.8vw, 34px) !important;
+    line-height: 1.14 !important;
+    text-shadow: 0 18px 46px rgba(15, 130, 155, 0.13) !important;
+    text-wrap: balance;
+    white-space: normal !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer,
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board {
+    width: min(100%, calc(100vw - 64px), 352px) !important;
+    margin-inline: auto !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row {
+    display: grid !important;
+    grid-template-columns: repeat(6, 44px) !important;
+    gap: 8px !important;
+    justify-content: center !important;
+    width: 100% !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button,
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    height: 44px !important;
+    min-height: 44px !important;
+    justify-content: center !important;
+    gap: 0 !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    font-size: 0 !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) > span:not(.ecom-command-option-icon),
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong {
+    display: none !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row .ecom-command-option-icon,
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline > span {
+    display: inline-flex !important;
+    width: 26px !important;
+    height: 26px !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+    font-size: 16px !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
+    position: absolute !important;
+    top: calc(100% + 12px) !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: 0 !important;
+    z-index: 140 !important;
+    box-sizing: border-box !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    max-height: min(280px, calc(100dvh - 148px)) !important;
+    overflow: auto !important;
+    border-radius: 22px !important;
+    animation: none !important;
+    transform: none !important;
+    translate: none !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid,
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--list,
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 10px !important;
+  }
+
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover button {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+}
+
+@media (max-width: 420px) {
+  body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
+    font-size: clamp(25px, 8vw, 30px) !important;
+  }
+}
+
+@media (max-width: 640px) {
+  html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
+    position: absolute !important;
+    inset: calc(100% + 12px) auto auto 0 !important;
+    box-sizing: border-box !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    max-height: min(280px, calc(100dvh - 150px)) !important;
+    overflow: auto !important;
+    animation: none !important;
+    transform: none !important;
+    translate: none !important;
+  }
+
+  html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid,
+  html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--list,
+  html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: 10px !important;
+  }
+}
+
+@media (max-width: 640px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
+    max-width: min(100%, 520px) !important;
+    min-height: 2.28em !important;
+    background:
+      linear-gradient(96deg, #10202c 0%, #164359 36%, #0f829b 68%, #18bfd2 100%) !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    color: transparent !important;
+    font-size: clamp(29px, 7.8vw, 34px) !important;
+    line-height: 1.14 !important;
+    text-shadow: 0 18px 46px rgba(15, 130, 155, 0.13) !important;
+    text-wrap: balance;
+    white-space: normal !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline {
+    width: 44px !important;
+    min-width: 44px !important;
+    max-width: 44px !important;
+    height: 44px !important;
+    min-height: 44px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) > span:not(.ecom-command-option-icon),
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong {
+    display: none !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row .ecom-command-option-icon,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline > span {
+    display: inline-flex !important;
+    width: 26px !important;
+    height: 26px !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+    font-size: 16px !important;
+    line-height: 1 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
+    position: absolute !important;
+    inset: calc(100% + 12px) auto auto 0 !important;
+    box-sizing: border-box !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    max-height: min(280px, calc(100dvh - 150px)) !important;
+    overflow: auto !important;
+    animation: none !important;
+    transform: none !important;
+    translate: none !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    align-content: start !important;
+    gap: 10px !important;
+    max-height: min(360px, 42dvh) !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    padding: 14px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings header {
+    display: flex !important;
+    grid-column: 1 / -1 !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 12px !important;
+    min-width: 0 !important;
+    margin: 0 0 2px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings > .ecom-command-count-row {
+    grid-column: 1 / -1 !important;
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    min-height: 78px !important;
+    align-items: center !important;
+    gap: 10px !important;
+    padding: 12px !important;
+    overflow: hidden !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > span {
+    min-width: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > span strong,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > span em {
+    display: block !important;
+    max-width: 100% !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > div {
+    display: grid !important;
+    grid-template-columns: 34px 24px 34px !important;
+    align-items: center !important;
+    justify-content: end !important;
+    gap: 6px !important;
+    min-width: 98px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > div button {
+    width: 34px !important;
+    min-width: 34px !important;
+    height: 34px !important;
+    min-height: 34px !important;
+    padding: 0 !important;
+    border-radius: 999px !important;
+    font-size: 16px !important;
+    line-height: 1 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > div b {
+    min-width: 24px !important;
+    text-align: center !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid--detail,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid--model,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid--video,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels {
+    grid-column: 1 / -1 !important;
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+    gap: 8px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid button,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels button {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    min-height: 44px !important;
+    overflow: hidden !important;
+    white-space: normal !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-layout {
+    grid-column: 1 / -1 !important;
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    gap: 10px !important;
+    overflow: visible !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-upload {
+    width: 100% !important;
+    min-width: 0 !important;
+    min-height: 132px !important;
+    max-width: none !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile {
+    grid-column: 1 / -1 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    overflow: hidden !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile section > div {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 6px !important;
+    min-width: 0 !important;
+    overflow: visible !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile button {
+    flex: 1 1 calc(50% - 6px) !important;
+    min-width: 0 !important;
+    max-width: none !important;
+  }
+}
+
+@media (max-width: 420px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title {
+    font-size: clamp(25px, 8vw, 30px) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row {
+    grid-template-columns: repeat(6, minmax(0, clamp(38px, 10.6vw, 42px))) !important;
+    gap: 7px !important;
+    justify-content: center !important;
+    overflow: hidden !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline {
+    width: clamp(38px, 10.6vw, 42px) !important;
+    min-width: 0 !important;
+    max-width: 42px !important;
+    height: clamp(38px, 10.6vw, 42px) !important;
+    min-height: clamp(38px, 10.6vw, 42px) !important;
+  }
+}
+
+@media (max-width: 640px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings-set,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings-model,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings-hot {
+    inset: calc(100% + 12px) auto auto 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    transform: none !important;
+    translate: none !important;
+  }
+}
+
+/* #/imageWorkbench mid-size refinement: keep the composer and floating panels balanced on tablet/small desktop widths. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline {
+  position: relative !important;
+  flex: 0 0 48px !important;
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  height: 48px !important;
+  min-height: 48px !important;
+  justify-content: center !important;
+  gap: 0 !important;
+  padding: 0 !important;
+  border-radius: 17px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline > span {
+  width: 0 !important;
+  min-width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  background: transparent !important;
+  color: transparent !important;
+  font-size: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline .anticon {
+  display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline strong {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline::before {
+  content: "+" !important;
+  display: inline-grid !important;
+  width: 24px !important;
+  height: 24px !important;
+  place-items: center !important;
+  border-radius: 10px !important;
+  background: linear-gradient(180deg, rgba(235, 252, 255, 0.96), rgba(218, 245, 250, 0.9)) !important;
+  color: #0f829b !important;
+  font-size: 22px !important;
+  font-weight: 760 !important;
+  line-height: 1 !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
+}
+
+@media (min-width: 641px) and (max-width: 1280px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap {
+    width: min(1080px, calc(100vw - 96px)) !important;
+    gap: clamp(14px, 2.2vh, 20px) !important;
+    padding-inline: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
+    width: 100% !important;
+    min-height: clamp(258px, 40vh, 304px) !important;
+    padding: clamp(18px, 2.8vw, 24px) !important;
+    border-radius: 26px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea {
+    min-height: clamp(76px, 14vh, 104px) !important;
+    max-height: clamp(104px, 18vh, 136px) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+    align-items: end !important;
+    gap: 12px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 10px !important;
+    max-width: min(100%, 660px) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) {
+    min-height: 44px !important;
+    padding-inline: 12px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover {
+    inset: calc(100% + 14px) auto auto 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    box-sizing: border-box !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    max-height: min(386px, max(220px, calc(100dvh - 470px))) !important;
+    margin: 0 !important;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+    border-radius: 24px !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 254, 0.94)) !important;
+    box-shadow:
+      0 30px 76px rgba(16, 115, 204, 0.17),
+      inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
+    transform: none !important;
+    translate: none !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+    gap: 10px !important;
+    padding: 18px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button {
+    display: grid !important;
+    min-height: 68px !important;
+    align-content: center !important;
+    gap: 5px !important;
+    padding: 11px 12px !important;
+    border-radius: 16px !important;
+    text-align: center !important;
+    white-space: normal !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button strong,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button span {
+    min-width: 0 !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings {
+    display: grid !important;
+    gap: 14px !important;
+    padding: 18px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-layout {
+    display: grid !important;
+    grid-template-columns: minmax(260px, 1.08fr) minmax(220px, 0.72fr) !important;
+    gap: 14px !important;
+    align-items: stretch !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-upload {
+    min-height: 188px !important;
+    border-radius: 18px !important;
+    background:
+      linear-gradient(180deg, rgba(250, 254, 255, 0.96), rgba(238, 250, 253, 0.84)) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-levels {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) !important;
+    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
+    gap: 12px !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-levels button {
+    min-height: 88px !important;
+    align-content: center !important;
+    padding: 16px !important;
+    border-radius: 18px !important;
+    text-align: left !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model {
+    grid-template-columns: minmax(230px, 0.82fr) minmax(0, 1.18fr) !important;
+    align-items: start !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model header {
+    grid-column: 1 / -1 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile {
+    grid-column: 1 !important;
+    grid-row: 2 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-height: 286px !important;
+    overflow-y: auto !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model {
+    grid-column: 2 !important;
+    grid-row: 2 !important;
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-height: 286px !important;
+    overflow-y: auto !important;
+    gap: 10px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile section > div {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 8px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile button {
+    flex: 1 1 auto !important;
+    min-width: max-content !important;
+    max-width: 100% !important;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 760px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-layout,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model {
+    grid-column: 1 !important;
+    grid-row: auto !important;
+  }
+}

src/styles/themes/dark-green.css

@@ -10676,6 +10676,177 @@
   color: var(--accent);
 }
 
+/* Final typography normalization. Loaded with the runtime theme so it wins over legacy page CSS. */
+html body #root,
+html body #root *:not(svg):not(path):not(use) {
+  font-family: var(--font-sans) !important;
+  font-synthesis-weight: none;
+  letter-spacing: 0 !important;
+}
+
+html body #root :is(
+  p,
+  em,
+  li,
+  td,
+  dd,
+  small,
+  figcaption,
+  input,
+  textarea,
+  select
+) {
+  font-size: var(--text-base) !important;
+  font-weight: var(--weight-regular) !important;
+  line-height: var(--leading-body) !important;
+}
+
+html body #root :is(strong, b) {
+  font-size: inherit !important;
+  font-weight: var(--weight-bold) !important;
+  line-height: inherit !important;
+}
+
+html body #root span:not(.anticon):not(.shell-icon) {
+  font-weight: var(--weight-regular) !important;
+  line-height: inherit !important;
+}
+
+html body #root :is(
+  code,
+  pre,
+  kbd,
+  samp,
+  [class*="mono"],
+  [class*="code-block"],
+  [class*="log-line"],
+  [class*="uid"]
+) {
+  font-family: var(--font-mono) !important;
+}
+
+html body #root :is(.anticon, .shell-icon, [class*="icon"]) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: 1 !important;
+}
+
+html body #root :is(
+  button,
+  label,
+  th,
+  [class*="button"],
+  [class*="btn"],
+  [class*="tab"],
+  [class*="chip"],
+  [class*="badge"],
+  [class*="tag"],
+  [class*="pill"],
+  [class*="label"]
+) {
+  font-size: var(--text-md) !important;
+  font-weight: var(--weight-semibold) !important;
+  line-height: var(--leading-control) !important;
+}
+
+html body #root :is(button, [class*="button"], [class*="btn"]) {
+  font-weight: var(--weight-bold) !important;
+}
+
+html body #root :is(
+  button,
+  label,
+  [class*="button"],
+  [class*="btn"],
+  [class*="tab"],
+  [class*="chip"],
+  [class*="badge"],
+  [class*="tag"],
+  [class*="pill"],
+  [class*="label"]
+) :is(span, strong, b) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+}
+
+html body #root :is(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  [class*="title"],
+  [class*="heading"],
+  [class*="headline"],
+  [class*="hero-title"],
+  [class*="section-title"],
+  [class*="card-title"]
+) {
+  font-family: var(--font-sans) !important;
+  font-weight: var(--weight-bold) !important;
+  line-height: var(--leading-heading) !important;
+  letter-spacing: 0 !important;
+}
+
+html body #root :is(h1, [class*="hero-title"], [class*="page-title"], [class*="headline"]) {
+  font-size: var(--text-title) !important;
+  font-weight: var(--weight-heavy) !important;
+}
+
+html body #root :is(h2, [class*="section-title"]) {
+  font-size: var(--text-3xl) !important;
+}
+
+html body #root :is(h3, [class*="card-title"]) {
+  font-size: var(--text-xl) !important;
+}
+
+html body #root :is(
+  [class*="subtitle"],
+  [class*="desc"],
+  [class*="description"],
+  [class*="hint"],
+  [class*="note"],
+  [class*="meta"],
+  [class*="caption"],
+  [class*="empty"]
+) {
+  font-size: var(--text-md) !important;
+  font-weight: var(--weight-regular) !important;
+  line-height: var(--leading-body) !important;
+}
+
+html body #root :is(
+  [class*="score"],
+  [class*="number"],
+  [class*="count"],
+  [class*="value"],
+  [class*="amount"],
+  [class*="price"]
+) {
+  font-size: inherit !important;
+  font-weight: var(--weight-bold) !important;
+  letter-spacing: 0 !important;
+}
+
+html body #root :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em, b) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+}
+
+@media (max-width: 767px) {
+  html body #root :is(h1, [class*="hero-title"], [class*="page-title"], [class*="headline"]) {
+    font-size: clamp(22px, 7vw, 30px) !important;
+  }
+
+  html body #root :is(h2, [class*="section-title"]) {
+    font-size: var(--text-2xl) !important;
+  }
+}
+
 @media (max-width: 900px) {
   .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar {
     top: 70px;