Merge pull request 'feat: 重构电商指令栏布局，模式标签外置、精简结果标签、优化生成记录交互' (#13) from feat/ecommerce-composer-redesign into main

Reviewed-on: #13

src/features/ecommerce/EcommercePage.tsx

@@ -106,8 +106,8 @@ const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration;
 
 const ecommerceInspirationRows = [
   {
-    title: "社区集锦",
+    title: "作品记录",
-    desc: "不止作图，更懂转化。",
+    desc: "沉淀最近生成的高转化素材，随时回看与复用。",
     variant: "team",
     cards: [
       { title: "指定ASIN，优化listing", meta: "竞品拆解 · 卖点重排 · 图文建议", mediaUrl: ecommerceInspirationAssets.asinListing, mediaType: "image" },
@@ -3295,8 +3295,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   }, [openCloneBasicSelect]);
 
   useEffect(() => {
-    const shouldAutoCompactComposer = (status === "generating" || status === "done") && !isCommandComposerCompact;
+    if (!composerMenu && !(status === "done" && !isCommandComposerCompact)) return undefined;
-    if (!composerMenu && !shouldAutoCompactComposer) return undefined;
 
     const handlePointerDown = (event: PointerEvent) => {
       const target = event.target;
@@ -3305,19 +3304,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       if (composer?.contains(target)) return;
 
       if (composerMenu && composerMenu !== "settings") setComposerMenu(null);
-      if (shouldAutoCompactComposer) setIsCommandComposerCompact(true);
+      if (status === "done" && !isCommandComposerCompact) setIsCommandComposerCompact(true);
     };
 
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [composerMenu, isCommandComposerCompact, status]);
 
-  useEffect(() => {
-    if ((status === "generating" || status === "done") && !isCommandComposerCompact) {
-      setIsCommandComposerCompact(true);
-    }
-  }, [isCommandComposerCompact, status]);
-
   useEffect(() => {
     if (composerMenuCloseTimeoutRef.current !== null) {
       window.clearTimeout(composerMenuCloseTimeoutRef.current);
@@ -4494,14 +4487,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
           >
             <img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
-            <span>原图素材</span>
           </button>
           <div className="product-set-flow-arrow" aria-hidden="true" />
           <div className="product-set-card-grid result-reveal">
             {setPreviewCards.map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
-                <span>{card.label}</span>
               </button>
             ))}
           </div>
@@ -4773,12 +4764,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   };
 
   const showMainVideoWorkspace = cloneOutput === "video" && isVideoWorkspaceVisible;
-  const hasGenerationSurface = status === "generating" || status === "done" || canvasNodes.length > 0;
-  const showPreGenerationGuides =
-    (status === "idle" || status === "ready") &&
-    !showMainVideoWorkspace &&
-    !activeHistoryRecordId &&
-    canvasNodes.length === 0;
 
   const scrollInspirationRow = (event: ReactMouseEvent<HTMLButtonElement>, direction: -1 | 1) => {
     const row = event.currentTarget.closest(".ecom-inspiration-row");
@@ -4998,38 +4983,23 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                         e.currentTarget.releasePointerCapture(e.pointerId);
                       }
                     }}
-                  >
+                  />
-                    <span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
-                  </div>
                   {node.sourceImage ? (
-                    <div className="clone-ai-source-stack">
+                    <button
-                      <button
+                      type="button"
-                        type="button"
+                      className="clone-ai-main-result"
-                        className="clone-ai-source-corner-action"
+                      onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
-                        onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
+                    >
-                      >
+                      <img src={node.sourceImage} alt="原图素材" />
-                        原图素材
+                    </button>
-                      </button>
-                      <button
-                        type="button"
-                        className="clone-ai-main-result"
-                        aria-label="预览原图素材"
-                        onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
-                      >
-                        <img src={node.sourceImage} alt="原图素材" />
-                      </button>
-                    </div>
                   ) : null}
                   <div className="clone-ai-flow-arrow" aria-hidden="true" />
-                  <div className="clone-ai-result-stack">
+                  <div className="clone-ai-result-grid result-reveal">
-                    <div className="clone-ai-result-grid result-reveal">
+                    {node.results.map((card) => (
-                      {node.results.map((card) => (
+                      <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
-                        <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
+                        <img src={card.src} alt={card.label} />
-                          <img src={card.src} alt={card.label} />
+                      </button>
-                          <span>{card.label}</span>
+                    ))}
-                        </button>
-                      ))}
-                    </div>
                   </div>
                 </article>
               ))}
@@ -5065,18 +5035,16 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
       <section
         ref={commandComposerWrapRef}
-        className={`clone-ai-bottom-input ecom-command-composer-wrap${hasGenerationSurface ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && hasGenerationSurface ? " is-compact" : ""}`}
+        className={`clone-ai-bottom-input ecom-command-composer-wrap${status === "done" || canvasNodes.length > 0 ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && (status === "done" || canvasNodes.length > 0) ? " is-compact" : ""}`}
         aria-label="生成指令"
         onClick={() => {
-          if (isCommandComposerCompact && status !== "generating") setIsCommandComposerCompact(false);
+          if (isCommandComposerCompact) setIsCommandComposerCompact(false);
         }}
       >
-        {!hasGenerationSurface ? (
+        <h1 className={`ecom-command-title${status === "done" || canvasNodes.length > 0 ? " is-after-generate" : ""}`}>
-          <h1 className="ecom-command-title">
+          {typewriterText}
-            {typewriterText}
+          <span className="typewriter-cursor" aria-hidden="true">|</span>
-            <span className="typewriter-cursor" aria-hidden="true">|</span>
+        </h1>
-          </h1>
-        ) : null}
         <input
           ref={cloneReferenceInputRef}
           type="file"
@@ -5104,27 +5072,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           onChange={handleSmartCutoutUpload}
           aria-label="上传智能抠图素材"
         />
+        <div className="ecom-command-mode-tabs" aria-label="生成模式">
+          {cloneOutputOptions.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              className={cloneOutput === option.key ? "is-active" : ""}
+              onClick={() => handleCloneOutputChange(option.key)}
+            >
+              <span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
+              <strong>{option.label}</strong>
+            </button>
+          ))}
+        </div>
         <div className="clone-ai-input-wrapper ecom-command-composer">
-          <button
-            type="button"
-            className={`ecom-command-reference${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
-            onClick={() => productInputRef.current?.click()}
-            onDragEnter={(event) => {
-              event.preventDefault();
-              setIsProductUploadDragging(true);
-            }}
-            onDragOver={(event) => event.preventDefault()}
-            onDragLeave={() => setIsProductUploadDragging(false)}
-            onDrop={(event) => {
-              event.preventDefault();
-              setIsProductUploadDragging(false);
-              const files = Array.from(event.dataTransfer.files);
-              if (files.length) addComposerAssets(files);
-            }}
-          >
-            <span aria-hidden="true"><CloudUploadOutlined /></span>
-            <strong>上传商品图</strong>
-          </button>
           {productImages.length ? (
             <div className="ecom-command-asset-popover" aria-label="已上传素材">
               {productImages.map((image) => (
@@ -5141,6 +5102,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               <button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
             </div>
           ) : null}
+          <div className="ecom-command-option-row ecom-command-option-row--settings">
+            <button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
+              <span>平台</span>{platform}
+            </button>
+            <button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
+              <span>语种</span>{language}
+            </button>
+            <button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
+              <span>比例</span>{formatRatioDisplayValue(ratio)}
+            </button>
+            <button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
+              <span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
+              <span>设置</span>{composerSettingLabel}
+            </button>
+          </div>
           <textarea
             ref={requirementTextareaRef}
             value={requirement}
@@ -5161,10 +5140,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
           ) : null}
           <div className="ecom-command-toolbar" aria-label="生成设置">
-            <div className="ecom-command-option-row">
+            <div className="ecom-command-composer-actions">
               <button
                 type="button"
-                className={`ecom-command-reference ecom-command-reference--inline${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
+                className={`ecom-command-reference ecom-command-reference--bottom${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
                 onClick={() => productInputRef.current?.click()}
                 onDragEnter={(event) => {
                   event.preventDefault();
@@ -5182,26 +5161,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                 <span aria-hidden="true"><PaperClipOutlined /></span>
                 <strong>上传素材</strong>
               </button>
-              <button type="button" className={composerMenu === "mode" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("mode", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><AppstoreOutlined /></span>
-                {selectedCloneOutput.label}<span>模式</span>
-              </button>
-              <button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
-                <span>平台</span>{platform}
-              </button>
-              <button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
-                <span>语种</span>{language}
-              </button>
-              <button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
-                <span>比例</span>{formatRatioDisplayValue(ratio)}
-              </button>
-              <button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
-                <span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
-                <span>设置</span>{composerSettingLabel}
-              </button>
             </div>
             <div className="ecom-command-submit-row">
               <button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
@@ -5211,7 +5170,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           </div>
           {renderComposerMenu()}
         </div>
-        {showPreGenerationGuides ? (
+        {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
           <section className="ecom-command-quick-board" aria-label="快捷功能">
             {[
               { label: "A+/详情页", tone: "detail", icon: <LayoutOutlined />, onClick: openQuickDetailPage },
@@ -5236,7 +5195,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             ))}
           </section>
         ) : null}
-        {showPreGenerationGuides ? (
+        {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
           <section className="ecom-inspiration-lab" aria-label="电商灵感案例">
             <div className="ecom-inspiration-rows">
               {ecommerceInspirationRows.map((row) => (

src/styles/ecommerce-standalone.css

@@ -13017,3 +13017,459 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
   color: inherit !important;
   fill: currentColor !important;
 }
+
+/* #/imageWorkbench generated results: remove all visual labels and their reserved space. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-node-label,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result > span,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid button > span {
+  display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) {
+  padding-top: 20px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) .clone-ai-node-drag-handle {
+  height: 100% !important;
+  background: transparent !important;
+}
+
+/* #/imageWorkbench history records: keep hover delete icon centered in the row. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item {
+  position: relative !important;
+  display: block !important;
+  isolation: isolate !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-main {
+  width: 100% !important;
+  padding-right: 46px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item:hover .ecom-command-history__item-delete,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item.is-active .ecom-command-history__item-delete {
+  grid-column: auto !important;
+  grid-row: auto !important;
+  align-self: auto !important;
+  position: absolute !important;
+  top: 50% !important;
+  right: 10px !important;
+  z-index: 4 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 28px !important;
+  height: 28px !important;
+  min-width: 28px !important;
+  min-height: 28px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  line-height: 1 !important;
+  transform: translateY(-50%) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete .anticon,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete svg {
+  display: block !important;
+  line-height: 1 !important;
+}
+
+/* #/imageWorkbench composer redesign: mode tabs outside, settings and assets inside. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
+  display: grid !important;
+  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
+  gap: 8px !important;
+  width: min(100%, 760px) !important;
+  margin: 0 auto 12px !important;
+  padding: 4px !important;
+  border: 1px solid rgba(30, 189, 219, 0.11) !important;
+  border-radius: 18px !important;
+  background: rgba(255, 255, 255, 0.64) !important;
+  box-shadow:
+    0 14px 34px rgba(16, 115, 204, 0.055),
+    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
+  backdrop-filter: blur(14px) saturate(1.08) !important;
+  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button {
+  --mode-accent: #1073cc;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 7px !important;
+  min-width: 0 !important;
+  min-height: 42px !important;
+  padding: 0 11px !important;
+  border: 0 !important;
+  border-radius: 14px !important;
+  background: transparent !important;
+  color: rgba(16, 32, 44, 0.66) !important;
+  box-shadow: none !important;
+  cursor: pointer !important;
+  transition:
+    background 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--set) {
+  --mode-accent: #0f8f72;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--detail) {
+  --mode-accent: #7a5af8;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--model) {
+  --mode-accent: #1073cc;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--video) {
+  --mode-accent: #cc6b14;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--hot) {
+  --mode-accent: #c04468;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button.is-active {
+  background:
+    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 58%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.9)) !important;
+  color: rgba(16, 32, 44, 0.9) !important;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 18%, transparent),
+    0 10px 22px color-mix(in srgb, var(--mode-accent) 10%, transparent) !important;
+  transform: translateY(-1px) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon {
+  display: inline-grid !important;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  place-items: center !important;
+  border: 0 !important;
+  border-radius: 9px !important;
+  background: color-mix(in srgb, var(--mode-accent) 11%, #ffffff) !important;
+  color: var(--mode-accent) !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
+  font-size: 13px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs strong {
+  min-width: 0 !important;
+  overflow: hidden !important;
+  font-size: 13px !important;
+  font-weight: 760 !important;
+  letter-spacing: 0 !important;
+  line-height: 1 !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"] .clone-ai-input-wrapper.ecom-command-composer {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) !important;
+  grid-auto-rows: auto !important;
+  grid-template-rows: none !important;
+  align-content: start !important;
+  row-gap: 12px !important;
+  min-height: clamp(214px, 17vh, 236px) !important;
+  padding: 18px 22px 16px !important;
+  overflow: visible !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
+  min-height: clamp(256px, 22vh, 286px) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
+  grid-column: 1 !important;
+  grid-row: auto !important;
+  display: flex !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 8px !important;
+  width: 100% !important;
+  padding: 0 0 2px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
+  min-width: 0 !important;
+  min-height: 36px !important;
+  padding: 0 11px !important;
+  border: 1px solid rgba(30, 189, 219, 0.12) !important;
+  border-radius: 13px !important;
+  background: rgba(248, 253, 255, 0.72) !important;
+  color: rgba(16, 32, 44, 0.72) !important;
+  box-shadow: 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-row--settings button:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button.is-active {
+  border-color: rgba(30, 189, 219, 0.28) !important;
+  background: rgba(241, 251, 254, 0.92) !important;
+  box-shadow: 0 8px 18px rgba(16, 115, 204, 0.055) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon {
+  width: 20px !important;
+  height: 20px !important;
+  border: 0 !important;
+  background: rgba(232, 249, 253, 0.78) !important;
+  color: #0f829b !important;
+  box-shadow: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover {
+  position: static !important;
+  grid-column: 1 !important;
+  grid-row: auto !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 8px !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-height: 62px !important;
+  max-height: 72px !important;
+  padding: 8px 2px 10px !important;
+  overflow-x: auto !important;
+  overflow-y: visible !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  transform: none !important;
+  scrollbar-width: thin !important;
+  scrollbar-color: rgba(16, 115, 204, 0.18) transparent !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb {
+  flex: 0 0 58px !important;
+  width: 58px !important;
+  height: 58px !important;
+  border: 1px solid rgba(30, 189, 219, 0.12) !important;
+  border-radius: 14px !important;
+  background: rgba(246, 251, 253, 0.9) !important;
+  box-shadow: 0 8px 18px rgba(16, 115, 204, 0.06) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb img,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb video {
+  border-radius: 13px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add {
+  flex: 0 0 38px !important;
+  width: 38px !important;
+  height: 38px !important;
+  min-height: 38px !important;
+  margin: 0 !important;
+  border: 0 !important;
+  border-radius: 12px !important;
+  background: rgba(232, 249, 253, 0.72) !important;
+  color: #0f829b !important;
+  font-size: 24px !important;
+  box-shadow: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea {
+  grid-column: 1 !important;
+  grid-row: auto !important;
+  min-height: clamp(82px, 9vh, 106px) !important;
+  padding: 2px 0 4px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
+  min-height: clamp(68px, 7vh, 92px) !important;
+  max-height: 112px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+  grid-column: 1 !important;
+  grid-row: auto !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 12px !important;
+  width: 100% !important;
+  padding: 10px 0 0 !important;
+  border-top: 1px solid rgba(30, 189, 219, 0.085) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  min-width: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom {
+  position: static !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 7px !important;
+  width: auto !important;
+  min-width: 0 !important;
+  height: 38px !important;
+  min-height: 38px !important;
+  margin: 0 !important;
+  padding: 0 12px !important;
+  border: 0 !important;
+  border-radius: 13px !important;
+  background: rgba(248, 253, 255, 0.78) !important;
+  color: rgba(16, 32, 44, 0.68) !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom.is-dragging {
+  background: rgba(232, 249, 253, 0.9) !important;
+  color: #0f829b !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom > span {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  place-items: center !important;
+  margin: 0 !important;
+  font-size: 17px !important;
+  line-height: 1 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong {
+  display: inline !important;
+  font-size: 13px !important;
+  font-weight: 720 !important;
+  line-height: 1 !important;
+  white-space: nowrap !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  min-width: 0 !important;
+}
+
+@media (max-width: 900px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
+    grid-template-columns: repeat(5, minmax(94px, 1fr)) !important;
+    width: 100% !important;
+    overflow-x: auto !important;
+    overscroll-behavior-x: contain !important;
+    scrollbar-width: none !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs::-webkit-scrollbar {
+    display: none !important;
+  }
+}
+
+@media (max-width: 640px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
+    grid-template-columns: repeat(5, minmax(88px, 1fr)) !important;
+    margin-bottom: 10px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button {
+    min-height: 38px !important;
+    padding-inline: 8px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon {
+    width: 22px !important;
+    height: 22px !important;
+    min-width: 22px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
+    min-height: 230px !important;
+    padding: 15px !important;
+    row-gap: 10px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
+    flex: 1 1 calc(50% - 5px) !important;
+    justify-content: flex-start !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+    align-items: center !important;
+  }
+}
+
+@media (max-width: 420px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
+    display: grid !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+    gap: 7px !important;
+    justify-content: stretch !important;
+    overflow: visible !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
+    display: inline-flex !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    height: 42px !important;
+    min-height: 42px !important;
+    padding: 0 !important;
+    justify-content: center !important;
+    font-size: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) {
+    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-row--settings .ecom-command-option-icon {
+    display: inline-grid !important;
+    width: 22px !important;
+    height: 22px !important;
+    min-width: 22px !important;
+    margin: 0 !important;
+    font-size: 14px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    min-height: 58px !important;
+    height: auto !important;
+    padding-top: 10px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
+    width: auto !important;
+    min-width: 0 !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom {
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    height: 38px !important;
+    min-height: 38px !important;
+    padding: 0 12px !important;
+    font-size: 13px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong {
+    display: inline !important;
+  }
+}