diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx
index 81d5cc7..e703ea0 100644
--- a/src/features/ecommerce/EcommercePage.tsx
+++ b/src/features/ecommerce/EcommercePage.tsx
@@ -1429,6 +1429,7 @@ const maxCloneProductImages = 20;
const maxCloneReferenceImages = 20;
const cloneVideoDurationMin = 5;
const cloneVideoDurationMax = 45;
+const composerDurationOptions = [5, 10, 15];
const defaultEcommercePlatform = "淘宝/天猫";
const defaultProductSetOutput: ProductSetOutputKey = "set";
const defaultCloneOutput: CloneOutputKey = "set";
@@ -2411,13 +2412,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const cloneRatioOptions = baseCloneRatioOptions;
const composerRatioOptions = useMemo(
() => [
- "1000×1000px 1:1",
- "800×1200px 2:3",
- "1200×800px 3:2",
- "1200×900px 4:3",
- "900×1200px 3:4",
- "1080×1920px 9:16",
- "1920×1080px 16:9",
+ "1000×1000px\u00a0\u00a0\u00a01:1",
+ "800×1200px\u00a0\u00a0\u00a02:3",
+ "1200×800px\u00a0\u00a0\u00a03:2",
+ "1200×900px\u00a0\u00a0\u00a04:3",
+ "900×1200px\u00a0\u00a0\u00a03:4",
+ "1080×1920px\u00a0\u00a0\u00a09:16",
+ "1920×1080px\u00a0\u00a0\u00a016:9",
],
[],
);
@@ -5975,11 +5976,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
}
if (menuToRender === "platform") {
return (
-
{cloneOutput === "set" ? (
@@ -6599,14 +6610,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
) : null}
{shouldShowScenarioSettings ? (
-
-
+ {activeCommerceScenario !== "salesVideo" && activeCommerceScenario !== "poster" ? (
+
+ ) : null}
+ {activeCommerceScenario !== "salesVideo" ? (
+
+ ) : null}
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css
index ddb620b..46f6904 100644
--- a/src/styles/ecommerce-standalone.css
+++ b/src/styles/ecommerce-standalone.css
@@ -14328,9 +14328,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
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-option-row.ecom-command-option-row--settings {
+ display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
@@ -14339,40 +14338,6 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
@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: flex !important;
- flex-wrap: nowrap !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;
- flex: 1 1 0 !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;
@@ -19482,9 +19447,16 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
border: 0 !important;
border-radius: 14px !important;
color: #ffffff !important;
- background: #181b1f !important;
- box-shadow: 0 12px 28px rgba(16, 32, 44, 0.14) !important;
+ background: linear-gradient(135deg, #1ebddb 0%, #0f829b 100%) !important;
+ box-shadow: 0 12px 28px rgba(15, 130, 155, 0.22) !important;
text-align: center !important;
+ transition: transform 160ms ease, box-shadow 160ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit:hover {
+ background: linear-gradient(135deg, #21c8e3 0%, #1194ad 100%) !important;
+ box-shadow: 0 14px 32px rgba(15, 130, 155, 0.28) !important;
+ transform: translateY(-1px) !important;
}
@media (max-width: 640px) {
@@ -20125,3 +20097,378 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
color: #0f7895 !important;
font-weight: 600 !important;
}
+
+
+/* Platform picker: single-column scrollable list without logos, matching language/ratio style. */
+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--platforms.ecom-command-popover--platforms {
+ display: flex !important;
+ flex-direction: column !important;
+ flex-wrap: nowrap !important;
+ gap: 2px !important;
+ width: fit-content !important;
+ min-width: 0 !important;
+ max-width: calc(100vw - 48px) !important;
+ max-height: min(320px, calc(100dvh - 180px)) !important;
+ padding: 5px !important;
+ border: 1px solid rgba(16, 115, 204, 0.1) !important;
+ border-radius: 12px !important;
+ background: #ffffff !important;
+ box-shadow: 0 12px 32px rgba(16, 115, 204, 0.1) !important;
+ overflow-x: hidden !important;
+ overflow-y: auto !important;
+ scrollbar-width: thin !important;
+ scrollbar-color: rgba(16, 115, 204, 0.28) transparent !important;
+ animation: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button {
+ display: flex !important;
+ flex: 0 0 auto !important;
+ align-items: center !important;
+ justify-content: center !important;
+ width: 100% !important;
+ height: 36px !important;
+ min-height: 36px !important;
+ padding: 0 16px !important;
+ border: 0 !important;
+ border-radius: 8px !important;
+ color: rgba(16, 32, 44, 0.78) !important;
+ background: transparent !important;
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ white-space: nowrap !important;
+ animation: none !important;
+ transition: background 120ms ease, color 120ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button:hover {
+ background: rgba(30, 189, 219, 0.08) !important;
+ color: #0f7895 !important;
+ transform: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active {
+ background: rgba(30, 189, 219, 0.12) !important;
+ color: #0f7895 !important;
+ font-weight: 600 !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--platforms.ecom-command-popover--platforms::-webkit-scrollbar {
+ width: 5px !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--platforms.ecom-command-popover--platforms::-webkit-scrollbar-thumb {
+ background: rgba(16, 115, 204, 0.28) !important;
+ border-radius: 999px !important;
+}
+
+
+/* Ratio & Language pickers: stronger active state so the selected option is clearly visible. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active {
+ background: rgba(30, 189, 219, 0.2) !important;
+ color: #0f7895 !important;
+ font-weight: 700 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active::before,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active::before {
+ position: absolute !important;
+ left: 8px !important;
+ top: 50% !important;
+ width: 5px !important;
+ height: 5px !important;
+ border-radius: 999px !important;
+ background: #1ebddb !important;
+ transform: translateY(-50%) scale(1) !important;
+ opacity: 1 !important;
+ content: "" !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active {
+ position: relative !important;
+ padding-left: 22px !important;
+}
+
+
+/* Platform picker: stronger active state with a visible dot indicator. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active {
+ position: relative !important;
+ padding-left: 22px !important;
+ background: rgba(30, 189, 219, 0.2) !important;
+ color: #0f7895 !important;
+ font-weight: 700 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active::before {
+ position: absolute !important;
+ left: 8px !important;
+ top: 50% !important;
+ width: 5px !important;
+ height: 5px !important;
+ border-radius: 999px !important;
+ background: #1ebddb !important;
+ transform: translateY(-50%) scale(1) !important;
+ opacity: 1 !important;
+ content: "" !important;
+}
+
+
+/* Ratio/Language/Platform pickers: clean active state without dot indicator, keep color highlight only. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active {
+ position: static !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ background: rgba(30, 189, 219, 0.2) !important;
+ color: #0f7895 !important;
+ font-weight: 700 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker.ecom-command-popover--ratio-picker button.is-active::before,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--languages.ecom-command-popover--languages button.is-active::before,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platforms.ecom-command-popover--platforms button.is-active::before {
+ content: none !important;
+}
+
+
+/* Duration picker: single-column scrollable list for video duration, matching ratio/language style. */
+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--duration.ecom-command-popover--duration {
+ display: flex !important;
+ flex-direction: column !important;
+ flex-wrap: nowrap !important;
+ gap: 2px !important;
+ width: fit-content !important;
+ min-width: 0 !important;
+ max-width: calc(100vw - 48px) !important;
+ max-height: min(320px, calc(100dvh - 180px)) !important;
+ padding: 5px !important;
+ border: 1px solid rgba(16, 115, 204, 0.1) !important;
+ border-radius: 12px !important;
+ background: #ffffff !important;
+ box-shadow: 0 12px 32px rgba(16, 115, 204, 0.1) !important;
+ overflow-x: hidden !important;
+ overflow-y: auto !important;
+ scrollbar-width: thin !important;
+ scrollbar-color: rgba(16, 115, 204, 0.28) transparent !important;
+ animation: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--duration.ecom-command-popover--duration button {
+ display: flex !important;
+ flex: 0 0 auto !important;
+ align-items: center !important;
+ justify-content: center !important;
+ width: 100% !important;
+ height: 36px !important;
+ min-height: 36px !important;
+ padding: 0 16px !important;
+ border: 0 !important;
+ border-radius: 8px !important;
+ color: rgba(16, 32, 44, 0.78) !important;
+ background: transparent !important;
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ white-space: nowrap !important;
+ animation: none !important;
+ transition: background 120ms ease, color 120ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--duration.ecom-command-popover--duration button:hover {
+ background: rgba(30, 189, 219, 0.08) !important;
+ color: #0f7895 !important;
+ transform: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--duration.ecom-command-popover--duration button.is-active {
+ background: rgba(30, 189, 219, 0.2) !important;
+ color: #0f7895 !important;
+ font-weight: 700 !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--duration.ecom-command-popover--duration::-webkit-scrollbar {
+ width: 5px !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--duration.ecom-command-popover--duration::-webkit-scrollbar-thumb {
+ background: rgba(16, 115, 204, 0.28) !important;
+ border-radius: 999px !important;
+}
+
+/* Final composer rhythm: keep attachments compact and pin the toolbelt to the card bottom. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
+ display: flex !important;
+ flex-direction: column !important;
+ justify-content: flex-start !important;
+ align-items: stretch !important;
+ gap: clamp(12px, 1.6vw, 18px) !important;
+ min-height: clamp(250px, 31vh, 316px) !important;
+ padding: clamp(18px, 2.05vw, 24px) clamp(18px, 2.3vw, 26px) clamp(16px, 1.9vw, 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:has(.ecom-command-asset-popover) {
+ min-height: clamp(286px, 35vh, 340px) !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-asset-popover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+ display: flex !important;
+ flex-wrap: nowrap !important;
+ align-items: center !important;
+ align-self: start !important;
+ gap: 12px !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ min-height: 64px !important;
+ margin: 0 !important;
+ padding: 0 2px 2px !important;
+ border: 0 !important;
+ background: transparent !important;
+ box-shadow: none !important;
+ overflow-x: auto !important;
+ overflow-y: hidden !important;
+ scrollbar-width: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover::-webkit-scrollbar {
+ display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add {
+ flex: 0 0 64px !important;
+ width: 64px !important;
+ height: 64px !important;
+ min-height: 64px !important;
+ padding: 0 !important;
+ border: 0 !important;
+ border-radius: 15px !important;
+ background: rgba(30, 189, 219, 0.1) !important;
+ color: #0b8fb2 !important;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span {
+ font-size: 24px !important;
+ line-height: 1 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small {
+ margin-top: 4px !important;
+ color: #0f7f9e !important;
+ font-size: 14px !important;
+ font-weight: 600 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+ flex: 0 0 64px !important;
+ width: 64px !important;
+ height: 64px !important;
+ min-height: 64px !important;
+ border-radius: 15px !important;
+ box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !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-option-row--settings {
+ align-self: start !important;
+ margin: 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 > textarea {
+ flex: 1 1 auto !important;
+ align-self: stretch !important;
+ width: 100% !important;
+ min-height: 86px !important;
+ height: auto !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ line-height: 1.58 !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: 78px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+ flex: 0 0 auto !important;
+ align-self: end !important;
+ width: 100% !important;
+ margin: auto 0 0 !important;
+ padding-top: clamp(12px, 1.45vw, 16px) !important;
+ border-top: 1px solid rgba(30, 189, 219, 0.12) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
+ min-width: 0 !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 {
+ gap: 12px !important;
+ min-height: 318px !important;
+ padding: 18px 16px 16px !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: 336px !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-asset-popover,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+ gap: 10px !important;
+ min-height: 58px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+ flex-basis: 58px !important;
+ width: 58px !important;
+ height: 58px !important;
+ min-height: 58px !important;
+ border-radius: 14px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span {
+ font-size: 22px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small {
+ font-size: 13px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea,
+ 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: 96px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+ min-height: 58px !important;
+ padding-top: 12px !important;
+ }
+}
+
+@media (max-width: 390px) {
+ 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: 306px !important;
+ padding-inline: 14px !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: 326px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+ flex-basis: 54px !important;
+ width: 54px !important;
+ height: 54px !important;
+ min-height: 54px !important;
+ }
+}
diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css
index 08875be..2302139 100644
--- a/src/styles/pages/ecommerce.css
+++ b/src/styles/pages/ecommerce.css
@@ -12522,9 +12522,16 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
border: 0 !important;
border-radius: 14px !important;
color: #ffffff !important;
- background: #181b1f !important;
- box-shadow: 0 12px 28px rgba(16, 32, 44, 0.14) !important;
+ background: linear-gradient(135deg, #1ebddb 0%, #0f829b 100%) !important;
+ box-shadow: 0 12px 28px rgba(15, 130, 155, 0.22) !important;
text-align: center !important;
+ transition: transform 160ms ease, box-shadow 160ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit:hover {
+ background: linear-gradient(135deg, #21c8e3 0%, #1194ad 100%) !important;
+ box-shadow: 0 14px 32px rgba(15, 130, 155, 0.28) !important;
+ transform: translateY(-1px) !important;
}
@media (max-width: 640px) {
@@ -12639,3 +12646,179 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
overflow-y: auto !important;
}
}
+
+/* Final composer rhythm: keep attachments compact and pin the toolbelt to the card bottom. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
+ display: flex !important;
+ flex-direction: column !important;
+ justify-content: flex-start !important;
+ align-items: stretch !important;
+ gap: clamp(12px, 1.6vw, 18px) !important;
+ min-height: clamp(250px, 31vh, 316px) !important;
+ padding: clamp(18px, 2.05vw, 24px) clamp(18px, 2.3vw, 26px) clamp(16px, 1.9vw, 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:has(.ecom-command-asset-popover) {
+ min-height: clamp(286px, 35vh, 340px) !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-asset-popover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+ display: flex !important;
+ flex-wrap: nowrap !important;
+ align-items: center !important;
+ align-self: start !important;
+ gap: 12px !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ min-height: 64px !important;
+ margin: 0 !important;
+ padding: 0 2px 2px !important;
+ border: 0 !important;
+ background: transparent !important;
+ box-shadow: none !important;
+ overflow-x: auto !important;
+ overflow-y: hidden !important;
+ scrollbar-width: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover::-webkit-scrollbar {
+ display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add {
+ flex: 0 0 64px !important;
+ width: 64px !important;
+ height: 64px !important;
+ min-height: 64px !important;
+ padding: 0 !important;
+ border: 0 !important;
+ border-radius: 15px !important;
+ background: rgba(30, 189, 219, 0.1) !important;
+ color: #0b8fb2 !important;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span {
+ font-size: 24px !important;
+ line-height: 1 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small {
+ margin-top: 4px !important;
+ color: #0f7f9e !important;
+ font-size: 14px !important;
+ font-weight: 600 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+ flex: 0 0 64px !important;
+ width: 64px !important;
+ height: 64px !important;
+ min-height: 64px !important;
+ border-radius: 15px !important;
+ box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !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-option-row--settings {
+ align-self: start !important;
+ margin: 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 > textarea {
+ flex: 1 1 auto !important;
+ align-self: stretch !important;
+ width: 100% !important;
+ min-height: 86px !important;
+ height: auto !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ line-height: 1.58 !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: 78px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+ flex: 0 0 auto !important;
+ align-self: end !important;
+ width: 100% !important;
+ margin: auto 0 0 !important;
+ padding-top: clamp(12px, 1.45vw, 16px) !important;
+ border-top: 1px solid rgba(30, 189, 219, 0.12) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
+ min-width: 0 !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 {
+ gap: 12px !important;
+ min-height: 318px !important;
+ padding: 18px 16px 16px !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: 336px !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-asset-popover,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+ gap: 10px !important;
+ min-height: 58px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+ flex-basis: 58px !important;
+ width: 58px !important;
+ height: 58px !important;
+ min-height: 58px !important;
+ border-radius: 14px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span {
+ font-size: 22px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small {
+ font-size: 13px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea,
+ 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: 96px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+ min-height: 58px !important;
+ padding-top: 12px !important;
+ }
+}
+
+@media (max-width: 390px) {
+ 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: 306px !important;
+ padding-inline: 14px !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: 326px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+ flex-basis: 54px !important;
+ width: 54px !important;
+ height: 54px !important;
+ min-height: 54px !important;
+ }
+}
diff --git a/src/styles/standalone/overrides.css b/src/styles/standalone/overrides.css
index 272f22b..d4817c3 100644
--- a/src/styles/standalone/overrides.css
+++ b/src/styles/standalone/overrides.css
@@ -3461,9 +3461,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
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-option-row.ecom-command-option-row--settings {
+ display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
@@ -3472,40 +3471,6 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
@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: flex !important;
- flex-wrap: nowrap !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;
- flex: 1 1 0 !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;
@@ -3560,15 +3525,18 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
z-index: 160 !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--platform {
- width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important;
- max-width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !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--platforms {
+ width: fit-content !important;
+ min-width: 0 !important;
+ max-width: min(320px, calc(100% - var(--composer-popover-left, 0px))) !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--languages,
-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--ratio-picker {
- width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important;
- max-width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !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--ratio-picker,
+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--duration {
+ width: fit-content !important;
+ min-width: 0 !important;
+ max-width: min(320px, calc(100% - var(--composer-popover-left, 0px))) !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--settings {