diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index 3098177..e2dffe5 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -314,6 +314,21 @@ interface CanvasNode { y: number; } +interface PreviewTouchPoint { + id: number; + x: number; + y: number; +} + +interface PreviewTouchGesture { + mode: "none" | "pan" | "pinch"; + points: PreviewTouchPoint[]; + startOffset: { x: number; y: number }; + startZoom: number; + startDistance: number; + startCenter: { x: number; y: number }; +} + interface CloneSavedSetting { id: string; name: string; @@ -1007,7 +1022,7 @@ const defaultCloneSetCounts: Record = { }; const minCloneSetTotal = 1; const maxCloneSetTotal = 16; -const maxCloneProductImages = 7; +const maxCloneProductImages = 20; const maxCloneReferenceImages = 20; const cloneVideoDurationMin = 5; const cloneVideoDurationMax = 45; @@ -1494,6 +1509,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { offsetX: 0, offsetY: 0, }); + const previewTouchGestureRef = useRef({ + mode: "none", + points: [], + startOffset: { x: 0, y: 0 }, + startZoom: 1, + startDistance: 0, + startCenter: { x: 0, y: 0 }, + }); const nodeDragRef = useRef<{ active: boolean; nodeId: string; startX: number; startY: number; originX: number; originY: number }>({ active: false, nodeId: "", @@ -1535,6 +1558,114 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { [previewOffset.x, previewOffset.y, previewZoom], ); + const updatePreviewTransform = (nextZoom: number, nextOffset: { x: number; y: number }) => { + previewZoomRef.current = nextZoom; + previewOffsetRef.current = nextOffset; + setPreviewZoom(nextZoom); + setPreviewOffset(nextOffset); + }; + + const getPreviewGestureDistance = (points: PreviewTouchPoint[]) => { + if (points.length < 2) return 0; + return Math.hypot(points[0]!.x - points[1]!.x, points[0]!.y - points[1]!.y); + }; + + const getPreviewGestureCenter = (points: PreviewTouchPoint[]) => { + if (points.length < 2) return points[0] ? { x: points[0].x, y: points[0].y } : { x: 0, y: 0 }; + return { + x: (points[0]!.x + points[1]!.x) / 2, + y: (points[0]!.y + points[1]!.y) / 2, + }; + }; + + const isPreviewTouchInteractiveTarget = (target: HTMLElement | null) => + Boolean(target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header, .clone-ai-source-corner-action, input, textarea, select, a, button")); + + const startPreviewTouchGesture = (event: ReactPointerEvent) => { + if (event.pointerType === "mouse" || isPreviewTouchInteractiveTarget(event.target as HTMLElement | null)) return; + event.preventDefault(); + event.currentTarget.setPointerCapture(event.pointerId); + const points = [ + ...previewTouchGestureRef.current.points.filter((point) => point.id !== event.pointerId), + { id: event.pointerId, x: event.clientX, y: event.clientY }, + ].slice(-2); + const mode = points.length >= 2 ? "pinch" : "pan"; + previewTouchGestureRef.current = { + mode, + points, + startOffset: previewOffsetRef.current, + startZoom: previewZoomRef.current, + startDistance: getPreviewGestureDistance(points), + startCenter: getPreviewGestureCenter(points), + }; + event.currentTarget.classList.add("is-touch-panning"); + }; + + const movePreviewTouchGesture = (event: ReactPointerEvent) => { + const gesture = previewTouchGestureRef.current; + if (gesture.mode === "none" || event.pointerType === "mouse") return; + event.preventDefault(); + const points = gesture.points.map((point) => point.id === event.pointerId ? { ...point, x: event.clientX, y: event.clientY } : point); + if (!points.some((point) => point.id === event.pointerId)) return; + + if (gesture.mode === "pinch" && points.length >= 2 && gesture.startDistance > 0) { + const rect = event.currentTarget.getBoundingClientRect(); + const center = getPreviewGestureCenter(points); + const zoomRatio = getPreviewGestureDistance(points) / gesture.startDistance; + const nextZoom = Math.min(2, Math.max(0.25, gesture.startZoom * zoomRatio)); + const startCenterX = gesture.startCenter.x - rect.left; + const startCenterY = gesture.startCenter.y - rect.top; + const currentCenterX = center.x - rect.left; + const currentCenterY = center.y - rect.top; + const contentX = (startCenterX - gesture.startOffset.x) / gesture.startZoom; + const contentY = (startCenterY - gesture.startOffset.y) / gesture.startZoom; + updatePreviewTransform(nextZoom, { + x: currentCenterX - contentX * nextZoom, + y: currentCenterY - contentY * nextZoom, + }); + } else { + const point = points[0]!; + const startPoint = gesture.points[0]!; + updatePreviewTransform(gesture.startZoom, { + x: gesture.startOffset.x + point.x - startPoint.x, + y: gesture.startOffset.y + point.y - startPoint.y, + }); + } + + previewTouchGestureRef.current = { ...gesture, points }; + }; + + const stopPreviewTouchGesture = (event: ReactPointerEvent) => { + const gesture = previewTouchGestureRef.current; + if (event.pointerType === "mouse" || gesture.mode === "none") return; + const points = gesture.points.filter((point) => point.id !== event.pointerId); + if (points.length) { + previewTouchGestureRef.current = { + mode: "pan", + points, + startOffset: previewOffsetRef.current, + startZoom: previewZoomRef.current, + startDistance: 0, + startCenter: getPreviewGestureCenter(points), + }; + } else { + previewTouchGestureRef.current = { + mode: "none", + points: [], + startOffset: previewOffsetRef.current, + startZoom: previewZoomRef.current, + startDistance: 0, + startCenter: { x: 0, y: 0 }, + }; + event.currentTarget.classList.remove("is-touch-panning"); + } + try { + event.currentTarget.releasePointerCapture(event.pointerId); + } catch { + // Pointer capture can already be released by the browser after cancel. + } + }; + useEffect(() => { const container = previewSurfaceRef.current; if (!container) return undefined; @@ -1644,8 +1775,43 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onAuxClick: (event: ReactMouseEvent) => { if (event.button === 1) event.preventDefault(); }, + onPointerDown: startPreviewTouchGesture, + onPointerMove: movePreviewTouchGesture, + onPointerUp: stopPreviewTouchGesture, + onPointerCancel: stopPreviewTouchGesture, }); + const startCanvasNodeDrag = (event: ReactPointerEvent, node: CanvasNode) => { + if (event.button !== 0 || event.pointerType === "mouse") return; + if ((event.target as HTMLElement | null)?.closest("button, a, input, textarea, select")) return; + event.preventDefault(); + event.stopPropagation(); + event.currentTarget.setPointerCapture(event.pointerId); + nodeDragRef.current = { active: true, nodeId: node.id, startX: event.clientX, startY: event.clientY, originX: node.x, originY: node.y }; + }; + + const moveCanvasNodeDrag = (event: ReactPointerEvent, nodeId: string) => { + const drag = nodeDragRef.current; + if (!drag.active || drag.nodeId !== nodeId || event.pointerType === "mouse") return; + event.preventDefault(); + event.stopPropagation(); + const zoom = previewZoomRef.current; + const dx = (event.clientX - drag.startX) / zoom; + const dy = (event.clientY - drag.startY) / zoom; + setCanvasNodes((prev) => prev.map((node) => node.id === nodeId ? { ...node, x: drag.originX + dx, y: drag.originY + dy } : node)); + }; + + const stopCanvasNodeDrag = (event: ReactPointerEvent, nodeId: string) => { + if (nodeDragRef.current.nodeId !== nodeId || event.pointerType === "mouse") return; + nodeDragRef.current = { ...nodeDragRef.current, active: false }; + event.stopPropagation(); + try { + event.currentTarget.releasePointerCapture(event.pointerId); + } catch { + // Pointer capture can already be released by the browser after cancel. + } + }; + const handlePreviewWheel = (event: React.WheelEvent) => { if (!event.currentTarget) return; const container = event.currentTarget as HTMLElement; @@ -5102,6 +5268,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { data-mode={node.mode} data-node-id={node.id} style={{ transform: `translate(${node.x}px, ${node.y}px)` }} + onPointerDown={(event) => startCanvasNodeDrag(event, node)} + onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)} + onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)} + onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)} >
{productImages.length ? ( -
+
+ {productImages.map((image) => (
{image.name -
))} -
) : null}
@@ -6666,6 +6843,25 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0); const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null; const currentResultThumbs = canvasNodes.flatMap((node) => node.results).slice(0, 6); + const activeHistoryImageIds = new Set((activeHistoryRecord?.productImages ?? []).map((image) => image.id)); + const historyConversationImages = activeHistoryRecord?.productImages?.length ? activeHistoryRecord.productImages : productImages; + const newConversationImages = activeHistoryRecord ? productImages.filter((image) => !activeHistoryImageIds.has(image.id)) : []; + const historyRequirementText = activeHistoryRecord?.requirement?.trim() || requirement.trim(); + const newRequirementText = requirement.trim() && requirement.trim() !== historyRequirementText + ? requirement.trim() + : "继续上传素材,准备下一轮生成。"; + const historyRequirementMeta = [ + { label: "平台", value: activeHistoryRecord?.platform || platform }, + { label: "语种", value: activeHistoryRecord?.language || language }, + { label: "比例", value: formatRatioDisplayValue(activeHistoryRecord?.ratio || ratio) }, + { label: "设置", value: composerSettingLabel }, + ]; + const currentRequirementMeta = [ + { label: "平台", value: platform }, + { label: "语种", value: language }, + { label: "比例", value: formatRatioDisplayValue(ratio) }, + { label: "设置", value: composerSettingLabel }, + ]; return (
需求 -

{requirement.trim() || "上传商品素材,描述你想生成的商品图、详情图、模特图或短视频。"}

- {productImages.length ? ( +

{historyRequirementText || "上传商品素材,描述你想生成的商品图、详情图、模特图或短视频。"}

+
+ {historyRequirementMeta.map((item) => ( + + {item.label} + {item.value} + + ))} +
+ {historyConversationImages.length ? (
- {productImages.slice(0, 4).map((image) => ( + {historyConversationImages.slice(0, 4).map((image) => ( {image.name ))} - {productImages.length > 4 ? +{productImages.length - 4} : null} + {historyConversationImages.length > 4 ? +{historyConversationImages.length - 4} : null}
) : null}
+ {newConversationImages.length ? ( +
+ 新需求 +

{newRequirementText}

+
+ {currentRequirementMeta.map((item) => ( + + {item.label} + {item.value} + + ))} +
+
+ {newConversationImages.slice(0, 4).map((image) => ( + {image.name + ))} + {newConversationImages.length > 4 ? +{newConversationImages.length - 4} : null} +
+
+ ) : null}
电商图设计师

@@ -6815,7 +7039,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onClick={refreshEcommerceHistory} disabled={isHistoryRefreshing} > - ↻ +

diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css index acd83f5..bfed12d 100644 --- a/src/styles/ecommerce-standalone.css +++ b/src/styles/ecommerce-standalone.css @@ -15282,3 +15282,1372 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d height: 44px !important; min-height: 44px !important; } + +/* Record detail final polish: mature SaaS surface without changing layout or logic. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail { + --record-detail-line: rgba(30, 189, 219, 0.18); + --record-detail-line-strong: rgba(30, 189, 219, 0.34); + --record-detail-text: #10202c; + --record-detail-muted: #647987; + --record-detail-card: rgba(255, 255, 255, 0.95); + --record-detail-card-soft: rgba(246, 252, 254, 0.9); + --record-detail-shadow: 0 18px 48px rgba(16, 115, 204, 0.1); + --record-detail-focus: 0 0 0 3px rgba(30, 189, 219, 0.15); + background: + radial-gradient(54rem 34rem at 50% 12%, rgba(30, 189, 219, 0.12), transparent 70%), + linear-gradient(180deg, #f8fbfc 0%, #f5f8fa 100%) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-preview { + background: + radial-gradient(42rem 26rem at 56% 20%, rgba(30, 189, 219, 0.12), transparent 72%), + radial-gradient(32rem 24rem at 74% 34%, rgba(16, 115, 204, 0.07), transparent 70%), + linear-gradient(rgba(16, 115, 204, 0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.04) 1px, transparent 1px), + #f7fafb !important; + background-size: auto, auto, 32px 32px, 32px 32px, auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-panel, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history { + border-color: var(--record-detail-line) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.96)) !important; + box-shadow: 22px 0 54px rgba(16, 115, 204, 0.08) !important; + color: var(--record-detail-text) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history { + width: 292px !important; + box-shadow: -22px 0 54px rgba(16, 115, 204, 0.08) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__tools, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__heading { + border-color: rgba(30, 189, 219, 0.12) !important; + background: + linear-gradient(180deg, rgba(249, 254, 255, 0.98), rgba(255, 255, 255, 0.86)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head { + padding: 18px 16px 14px !important; + min-height: 74px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head strong { + color: var(--record-detail-text) !important; + font-size: 15px !important; + font-weight: 820 !important; + letter-spacing: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__heading span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__item-main span { + color: var(--record-detail-muted) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-body { + gap: 14px !important; + padding: 14px 14px 104px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail:has(.ecom-command-composer-wrap:not(.is-compact)) .clone-ai-conversation-body { + padding-bottom: 390px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message { + padding: 14px !important; + border-color: rgba(30, 189, 219, 0.13) !important; + border-radius: 18px !important; + background: + linear-gradient(180deg, var(--record-detail-card), rgba(255, 255, 255, 0.91)) !important; + box-shadow: + 0 12px 30px rgba(16, 115, 204, 0.07), + inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--user { + margin-left: 18px !important; + background: + linear-gradient(180deg, rgba(238, 251, 254, 0.96), rgba(255, 255, 255, 0.93)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--assistant { + margin-right: 18px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message > span { + color: #0f829b !important; + font-size: 12px !important; + font-weight: 780 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message p { + color: #203443 !important; + font-size: 13px !important; + line-height: 1.58 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-assets img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-results button { + border-radius: 13px !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-preview-header { + border-color: var(--record-detail-line) !important; + background: rgba(255, 255, 255, 0.96) !important; + box-shadow: 0 16px 42px rgba(16, 115, 204, 0.11) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node { + border: 1px solid rgba(30, 189, 219, 0.16) !important; + border-radius: 22px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.92)) !important; + box-shadow: + 0 22px 62px rgba(16, 115, 204, 0.11), + inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-main-result, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-result-grid button { + border-color: rgba(30, 189, 219, 0.18) !important; + border-radius: 18px !important; + background: #ffffff !important; + box-shadow: + 0 12px 30px rgba(16, 115, 204, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-main-result:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-result-grid button:hover { + border-color: rgba(30, 189, 219, 0.46) !important; + box-shadow: + var(--record-detail-focus), + 0 18px 40px rgba(16, 115, 204, 0.16) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-node-label, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-source-corner-action { + border-color: rgba(30, 189, 219, 0.22) !important; + color: #0f829b !important; + background: rgba(255, 255, 255, 0.95) !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__tools { + grid-template-columns: 38px minmax(0, 1fr) 38px !important; + gap: 8px !important; + padding: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__tools button, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head > button, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-toggle { + border-color: rgba(30, 189, 219, 0.18) !important; + color: #244053 !important; + background: rgba(248, 253, 255, 0.92) !important; + box-shadow: + 0 8px 20px rgba(16, 115, 204, 0.07), + inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__tools button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head > button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-toggle:hover { + border-color: rgba(30, 189, 219, 0.42) !important; + color: #0f829b !important; + background: rgba(232, 249, 253, 0.96) !important; + transform: translateY(-1px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__tools .ecom-command-history__new { + border-color: rgba(30, 189, 219, 0.46) !important; + color: #0f6678 !important; + background: + linear-gradient(180deg, rgba(238, 251, 254, 0.98), rgba(221, 246, 252, 0.92)) !important; + font-weight: 800 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__refresh.is-refreshing .anticon { + animation: ecom-record-refresh-spin 780ms linear infinite; +} + +@keyframes ecom-record-refresh-spin { + to { + transform: rotate(360deg); + } +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__heading { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + min-height: 48px !important; + padding: 0 16px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__heading strong { + color: var(--record-detail-text) !important; + font-size: 14px !important; + font-weight: 820 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__heading span { + padding: 3px 8px !important; + border-radius: 999px !important; + background: rgba(30, 189, 219, 0.08) !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__list { + gap: 8px !important; + padding: 12px 12px 20px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__item { + border: 1px solid transparent !important; + border-radius: 16px !important; + background: transparent !important; + transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__item:hover { + border-color: rgba(30, 189, 219, 0.14) !important; + background: rgba(255, 255, 255, 0.72) !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.06) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__item.is-active { + border-color: rgba(30, 189, 219, 0.28) !important; + background: + linear-gradient(180deg, rgba(231, 249, 253, 0.94), rgba(255, 255, 255, 0.9)) !important; + box-shadow: + 0 12px 30px rgba(16, 115, 204, 0.1), + inset 3px 0 0 rgba(30, 189, 219, 0.72) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__item-main { + min-height: 58px !important; + padding: 11px 50px 11px 12px !important; + border-radius: 15px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history__item-main strong { + color: var(--record-detail-text) !important; + font-size: 13px !important; + font-weight: 800 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap { + border-color: rgba(30, 189, 219, 0.18) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.94)) !important; + box-shadow: + 0 18px 44px rgba(16, 115, 204, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .clone-ai-input-wrapper.ecom-command-composer { + border-radius: 20px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-reference.ecom-command-reference--bottom, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .clone-ai-send-button.ecom-command-send { + transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-reference.ecom-command-reference--bottom:hover { + border-color: rgba(30, 189, 219, 0.36) !important; + background: rgba(223, 247, 252, 0.96) !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .clone-ai-send-button.ecom-command-send:hover:not(:disabled) { + box-shadow: + 0 16px 30px rgba(30, 189, 219, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.36) !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-history { + width: min(292px, calc(100vw - 72px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-body { + padding-bottom: 104px !important; + } +} + +/* Record detail composer and canvas refinement: clearer command form and calmer node scale. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail { + --clone-chat-width: 384px; + --record-composer-gap: 10px; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-panel { + width: var(--clone-chat-width) !important; + min-width: var(--clone-chat-width) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-body { + padding-bottom: 390px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail:has(.ecom-command-composer-wrap:not(.is-compact)) .clone-ai-conversation-body { + padding-bottom: 510px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-toggle { + top: calc(var(--clone-worktop, 64px) + 16px) !important; + left: var(--clone-chat-width) !important; + width: 42px !important; + height: 42px !important; + min-height: 42px !important; + border-radius: 0 15px 15px 0 !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail.is-conversation-collapsed .clone-ai-conversation-toggle { + top: 16px !important; + left: 0 !important; + border-radius: 0 15px 15px 0 !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.is-before-generate { + position: fixed !important; + inset: auto auto 14px 14px !important; + z-index: 96 !important; + display: grid !important; + gap: var(--record-composer-gap) !important; + width: calc(var(--clone-chat-width) - 28px) !important; + max-width: calc(var(--clone-chat-width) - 28px) !important; + min-width: 0 !important; + max-height: min(502px, calc(100vh - var(--clone-worktop, 64px) - 30px)) !important; + margin: 0 !important; + padding: 10px !important; + overflow: visible !important; + border: 1px solid rgba(30, 189, 219, 0.26) !important; + border-radius: 22px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 252, 254, 0.95)) !important; + box-shadow: + 0 18px 44px rgba(16, 115, 204, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; + opacity: 1 !important; + transform: none !important; + pointer-events: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail.is-conversation-collapsed > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap { + opacity: 0 !important; + transform: translateX(calc(-1 * var(--clone-chat-width))) !important; + pointer-events: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-title { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-mode-tabs { + display: flex !important; + gap: 6px !important; + width: 100% !important; + max-width: 100% !important; + padding: 0 !important; + overflow-x: auto !important; + border-radius: 0 !important; + background: transparent !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-mode-tabs button { + flex: 0 0 auto !important; + min-width: 60px !important; + min-height: 34px !important; + padding: 0 9px !important; + border-radius: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-mode-tabs strong { + max-width: none !important; + overflow: visible !important; + font-size: 12px !important; + text-overflow: clip !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto auto minmax(82px, auto) auto !important; + gap: 10px !important; + min-height: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-asset-popover { + display: flex !important; + grid-row: 1 !important; + gap: 8px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 64px !important; + max-height: 72px !important; + padding: 8px !important; + overflow-x: auto !important; + overflow-y: visible !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 16px !important; + background: rgba(248, 253, 255, 0.78) !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .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"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-asset-thumb { + flex: 0 0 54px !important; + width: 54px !important; + height: 54px !important; + margin: 0 !important; + border-radius: 14px !important; + box-shadow: 0 8px 20px rgba(16, 115, 204, 0.09) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-asset-thumb img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-asset-thumb video { + border-radius: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-asset-add { + flex: 0 0 54px !important; + width: 54px !important; + height: 54px !important; + min-height: 54px !important; + border-radius: 14px !important; + font-size: 22px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-option-row.ecom-command-option-row--settings { + display: grid !important; + grid-row: 2 !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; + width: 100% !important; + padding: 0 !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-option-row.ecom-command-option-row--settings button { + display: grid !important; + grid-template-columns: 20px auto minmax(0, 1fr) !important; + align-items: center !important; + gap: 5px !important; + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + min-height: 38px !important; + padding: 0 10px !important; + overflow: hidden !important; + border-radius: 13px !important; + color: #274153 !important; + background: rgba(255, 255, 255, 0.78) !important; + font-size: 12px !important; + line-height: 1.2 !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) { + color: #6f8390 !important; + font-weight: 720 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-option-icon { + width: 20px !important; + height: 20px !important; + border-radius: 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap textarea { + grid-row: 3 !important; + width: 100% !important; + min-height: 86px !important; + max-height: 118px !important; + padding: 12px 13px !important; + overflow: auto !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + border-radius: 16px !important; + background: rgba(255, 255, 255, 0.84) !important; + color: #203443 !important; + font-size: 13px !important; + line-height: 1.55 !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; + resize: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap textarea:focus { + border-color: rgba(30, 189, 219, 0.44) !important; + box-shadow: var(--record-detail-focus), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-toolbar { + display: flex !important; + grid-row: 4 !important; + align-items: center !important; + justify-content: space-between !important; + gap: 10px !important; + min-height: 44px !important; + padding-top: 10px !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"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-composer-actions, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-submit-row { + display: flex !important; + align-items: center !important; + width: auto !important; + min-width: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-reference.ecom-command-reference--bottom { + width: auto !important; + min-width: 118px !important; + height: 38px !important; + min-height: 38px !important; + padding: 0 12px !important; + border-radius: 13px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .ecom-command-reference.ecom-command-reference--bottom strong { + display: inline !important; + font-size: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap .clone-ai-send-button.ecom-command-send { + width: 46px !important; + min-width: 46px !important; + height: 46px !important; + min-height: 46px !important; + border-radius: 15px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-nodes { + min-width: 980px !important; + min-height: 330px !important; + padding: 28px 34px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node { + align-items: center !important; + gap: 18px !important; + width: auto !important; + min-width: 360px !important; + max-width: 520px !important; + min-height: 116px !important; + padding: 18px 22px !important; + border-radius: 20px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-main-result, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid button { + width: 90px !important; + border-radius: 16px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-main-result img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid img { + display: block !important; + width: 100% !important; + max-height: 120px !important; + object-fit: cover !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid { + gap: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-source-corner-action { + top: -14px !important; + min-height: 24px !important; + padding: 0 10px !important; + border-radius: 999px !important; + font-size: 11px !important; + font-weight: 760 !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail { + --clone-chat-width: min(92vw, 360px); + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap { + width: calc(var(--clone-chat-width) - 24px) !important; + max-width: calc(var(--clone-chat-width) - 24px) !important; + inset: auto auto 12px 12px !important; + } +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail:not(.is-conversation-collapsed) .clone-ai-canvas-nodes { + padding-left: calc(var(--clone-chat-width) + 42px) !important; +} + +/* State guard: compact record composer must stay compact; expanded styling starts only after click. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact { + position: fixed !important; + inset: auto auto 14px 14px !important; + z-index: 120 !important; + display: block !important; + width: calc(var(--clone-chat-width) - 28px) !important; + max-width: calc(var(--clone-chat-width) - 28px) !important; + min-width: 0 !important; + height: auto !important; + min-height: 0 !important; + max-height: 88px !important; + margin: 0 !important; + padding: 0 !important; + overflow: visible !important; + border: 1px solid rgba(30, 189, 219, 0.16) !important; + border-radius: 22px !important; + background: rgba(255, 255, 255, 0.97) !important; + box-shadow: 0 18px 40px rgba(16, 115, 204, 0.12) !important; + opacity: 1 !important; + transform: none !important; + pointer-events: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-mode-tabs, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-option-row.ecom-command-option-row--settings, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover { + display: none !important; + height: 0 !important; + min-height: 0 !important; + max-height: 0 !important; + opacity: 0 !important; + visibility: hidden !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + display: grid !important; + grid-template-columns: 42px minmax(0, 1fr) 46px !important; + grid-template-rows: minmax(44px, auto) !important; + align-items: end !important; + column-gap: 8px !important; + width: 100% !important; + height: auto !important; + min-height: 0 !important; + max-height: 88px !important; + padding: 10px !important; + overflow: hidden !important; + border: 0 !important; + border-radius: 22px !important; + background: transparent !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + grid-column: 2 !important; + grid-row: 1 !important; + width: 100% !important; + min-width: 0 !important; + min-height: 42px !important; + max-height: 72px !important; + padding: 11px 0 9px !important; + overflow-y: auto !important; + border: 0 !important; + background: transparent !important; + color: #10202c !important; + font-size: 14px !important; + font-weight: 500 !important; + line-height: 1.45 !important; + resize: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-toolbar, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar { + display: contents !important; + min-height: 0 !important; + height: auto !important; + padding: 0 !important; + border: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer-actions { + grid-column: 1 !important; + grid-row: 1 !important; + display: grid !important; + place-items: center !important; + width: 42px !important; + min-width: 42px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-submit-row { + grid-column: 3 !important; + grid-row: 1 !important; + display: grid !important; + place-items: center !important; + width: 46px !important; + min-width: 46px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-reference.ecom-command-reference--bottom { + width: 42px !important; + min-width: 42px !important; + height: 42px !important; + min-height: 42px !important; + padding: 0 !important; + border-radius: 15px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .ecom-command-reference.ecom-command-reference--bottom strong { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send { + width: 46px !important; + min-width: 46px !important; + height: 46px !important; + min-height: 46px !important; + border-radius: 16px !important; +} + +/* Expanded composer final layout: one clear vertical form, never a split mini grid. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto minmax(0, 1fr) !important; + gap: 10px !important; + width: calc(var(--clone-chat-width) - 28px) !important; + max-width: calc(var(--clone-chat-width) - 28px) !important; + max-height: min(508px, calc(100vh - var(--clone-worktop, 64px) - 30px)) !important; + padding: 10px !important; + overflow: visible !important; + border-radius: 22px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-mode-tabs { + grid-column: 1 / -1 !important; + grid-row: 1 !important; + display: flex !important; + align-items: center !important; + gap: 6px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 38px !important; + padding: 0 !important; + overflow-x: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-mode-tabs button { + flex: 0 0 auto !important; + min-width: 72px !important; + min-height: 36px !important; + padding: 0 10px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + grid-column: 1 / -1 !important; + grid-row: 2 !important; + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto auto minmax(84px, auto) auto !important; + grid-auto-flow: row !important; + gap: 10px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 0 !important; + max-height: none !important; + padding: 0 !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-popover { + grid-column: 1 / -1 !important; + grid-row: 1 !important; + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + gap: 8px !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + min-height: 66px !important; + max-height: 72px !important; + padding: 8px !important; + overflow-x: auto !important; + overflow-y: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-option-row.ecom-command-option-row--settings { + grid-column: 1 / -1 !important; + grid-row: 2 !important; + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + padding: 0 !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-option-row.ecom-command-option-row--settings button { + display: grid !important; + grid-template-columns: 20px max-content minmax(0, 1fr) !important; + align-items: center !important; + gap: 6px !important; + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + min-height: 38px !important; + padding: 0 10px !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-composer textarea, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + grid-column: 1 / -1 !important; + grid-row: 3 !important; + width: 100% !important; + min-width: 0 !important; + min-height: 86px !important; + max-height: 118px !important; + padding: 12px 13px !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + border-radius: 16px !important; + background: rgba(255, 255, 255, 0.84) !important; + font-size: 13px !important; + line-height: 1.55 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-toolbar { + grid-column: 1 / -1 !important; + grid-row: 4 !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 10px !important; + width: 100% !important; + min-height: 48px !important; + padding-top: 10px !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"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-composer-actions, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-submit-row { + display: flex !important; + align-items: center !important; + width: auto !important; + min-width: 0 !important; +} + +/* Uploaded assets rail: show all allowed images clearly and keep add action reachable. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-popover { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + grid-auto-rows: 52px !important; + align-items: stretch !important; + gap: 8px !important; + min-height: 66px !important; + max-height: 120px !important; + padding: 8px !important; + overflow-y: auto !important; + overflow-x: hidden !important; + scrollbar-width: thin !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb { + width: 100% !important; + height: 52px !important; + min-width: 0 !important; + min-height: 52px !important; + margin: 0 !important; + border-radius: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb video { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; + border-radius: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-add { + width: 100% !important; + height: 52px !important; + min-width: 0 !important; + min-height: 52px !important; + margin: 0 !important; + border-radius: 14px !important; + font-size: 20px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-asset-zoom, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-asset-thumb:hover .ecom-command-asset-zoom, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .ecom-command-asset-thumb:focus-within .ecom-command-asset-zoom { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--followup { + border-color: rgba(30, 189, 219, 0.28) !important; + background: + linear-gradient(180deg, rgba(229, 249, 253, 0.96), rgba(255, 255, 255, 0.94)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--followup > span { + color: #0a91aa !important; +} + +/* Detail composer refinement: upload first, many assets readable, model settings not cramped. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + grid-template-rows: auto auto minmax(82px, auto) auto !important; + gap: 9px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-popover { + grid-column: 1 / -1 !important; + grid-row: 1 !important; + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + grid-auto-rows: 58px !important; + align-items: stretch !important; + gap: 8px !important; + width: 100% !important; + min-height: 74px !important; + max-height: 140px !important; + padding: 8px !important; + overflow-x: hidden !important; + overflow-y: auto !important; + border: 1px solid rgba(30, 189, 219, 0.13) !important; + border-radius: 17px !important; + background: + linear-gradient(180deg, rgba(247, 253, 255, 0.98), rgba(255, 255, 255, 0.94)) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(30, 189, 219, 0.3) transparent !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-popover::-webkit-scrollbar { + width: 5px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-popover::-webkit-scrollbar-thumb { + border-radius: 999px !important; + background: rgba(30, 189, 219, 0.3) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-add { + order: -1 !important; + display: grid !important; + grid-template-rows: 20px 14px !important; + place-items: center !important; + gap: 2px !important; + width: 100% !important; + height: 58px !important; + min-width: 0 !important; + min-height: 58px !important; + margin: 0 !important; + padding: 6px !important; + border: 1px dashed rgba(30, 189, 219, 0.42) !important; + border-radius: 14px !important; + background: + linear-gradient(180deg, rgba(231, 250, 254, 0.95), rgba(255, 255, 255, 0.92)) !important; + color: #0a91aa !important; + font-size: 19px !important; + line-height: 1 !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-add:hover:not(:disabled) { + border-color: rgba(20, 160, 190, 0.72) !important; + background: linear-gradient(180deg, rgba(218, 247, 253, 1), rgba(245, 253, 255, 0.98)) !important; + transform: translateY(-1px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-add:disabled { + cursor: not-allowed !important; + border-style: solid !important; + border-color: rgba(123, 145, 158, 0.2) !important; + background: rgba(244, 248, 250, 0.9) !important; + color: rgba(104, 129, 143, 0.72) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-add span { + display: block !important; + font-size: 21px !important; + font-weight: 650 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-add small { + display: block !important; + color: currentColor !important; + font-size: 11px !important; + font-weight: 600 !important; + letter-spacing: 0 !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb { + position: relative !important; + width: 100% !important; + height: 58px !important; + min-width: 0 !important; + min-height: 58px !important; + margin: 0 !important; + overflow: hidden !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 14px !important; + background: #eef8fb !important; + box-shadow: 0 5px 12px rgba(13, 88, 112, 0.08) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb video { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; + border-radius: 13px !important; + transition: transform 0.18s ease, filter 0.18s ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb:hover img { + filter: brightness(0.94) !important; + transform: scale(1.025) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb > button { + position: absolute !important; + top: 4px !important; + right: 4px !important; + display: grid !important; + place-items: center !important; + width: 20px !important; + height: 20px !important; + min-width: 20px !important; + min-height: 20px !important; + padding: 0 !important; + border: 1px solid rgba(255, 255, 255, 0.7) !important; + border-radius: 999px !important; + background: rgba(9, 24, 36, 0.58) !important; + color: #fff !important; + opacity: 0 !important; + transform: translateY(-2px) !important; + transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb:hover > button, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb:focus-within > button { + opacity: 1 !important; + transform: translateY(0) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-asset-thumb > button:hover { + background: rgba(219, 52, 80, 0.9) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model { + left: 0 !important; + right: auto !important; + bottom: calc(100% + 12px) !important; + width: min(560px, calc(100vw - var(--clone-chat-width, 384px) - 44px)) !important; + min-width: min(440px, calc(100vw - 28px)) !important; + max-width: calc(100vw - 28px) !important; + max-height: min(520px, calc(100vh - var(--clone-worktop, 64px) - 92px)) !important; + padding: 16px !important; + overflow: auto !important; + border: 1px solid rgba(30, 189, 219, 0.16) !important; + border-radius: 20px !important; + background: rgba(255, 255, 255, 0.98) !important; + box-shadow: 0 26px 64px rgba(16, 115, 204, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.72) inset !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 12px !important; + margin-bottom: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-module-grid--model { + display: grid !important; + grid-template-columns: repeat(3, minmax(96px, 1fr)) !important; + gap: 8px !important; + width: 100% !important; + max-height: none !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-module-grid--model button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 0 !important; + min-height: 38px !important; + padding: 0 12px !important; + overflow: visible !important; + border-radius: 13px !important; + font-size: 12px !important; + font-weight: 600 !important; + line-height: 1.2 !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"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile { + display: grid !important; + grid-template-columns: 1fr !important; + gap: 10px !important; + width: 100% !important; + margin-top: 14px !important; + padding: 12px !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 16px !important; + background: linear-gradient(180deg, rgba(247, 253, 255, 0.96), rgba(255, 255, 255, 0.96)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile__title { + margin: 0 !important; + color: #10202c !important; + font-size: 13px !important; + font-weight: 700 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section { + display: grid !important; + grid-template-columns: 58px minmax(0, 1fr) !important; + align-items: center !important; + gap: 10px !important; + margin: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section > strong { + color: rgba(72, 96, 110, 0.92) !important; + font-size: 12px !important; + font-weight: 650 !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section > div { + display: flex !important; + flex-wrap: wrap !important; + gap: 7px !important; + min-width: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section button { + flex: 0 1 auto !important; + min-width: 54px !important; + min-height: 30px !important; + padding: 0 10px !important; + border-radius: 999px !important; + font-size: 12px !important; + font-weight: 600 !important; + white-space: nowrap !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model { + width: min(520px, calc(100vw - 22px)) !important; + min-width: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-module-grid--model { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} + +/* Model settings correction: keep the panel inside the chat composer and list scenes vertically. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model { + left: 0 !important; + right: auto !important; + bottom: calc(100% + 10px) !important; + display: block !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + max-height: min(396px, calc(100vh - var(--clone-worktop, 64px) - 84px)) !important; + padding: 12px !important; + overflow-x: hidden !important; + overflow-y: auto !important; + border-radius: 18px !important; + background: rgba(255, 255, 255, 0.98) !important; + box-shadow: 0 18px 44px rgba(16, 115, 204, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model::-webkit-scrollbar { + width: 5px !important; + height: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model::-webkit-scrollbar-thumb { + border-radius: 999px !important; + background: rgba(30, 189, 219, 0.3) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 10px !important; + margin: 0 0 10px !important; + padding: 0 0 10px !important; + border-bottom: 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"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-module-grid--model { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-auto-rows: 34px !important; + gap: 7px !important; + width: 100% !important; + max-width: 100% !important; + max-height: none !important; + margin: 0 !important; + padding: 0 !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-module-grid--model button { + width: 100% !important; + min-width: 0 !important; + min-height: 34px !important; + height: 34px !important; + justify-content: flex-start !important; + padding: 0 12px !important; + overflow: hidden !important; + border-radius: 12px !important; + font-size: 12px !important; + line-height: 1.2 !important; + text-align: left !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + gap: 9px !important; + width: 100% !important; + max-width: 100% !important; + margin: 12px 0 0 !important; + padding: 11px !important; + overflow: visible !important; + border-radius: 15px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section { + display: grid !important; + grid-template-columns: 44px minmax(0, 1fr) !important; + align-items: center !important; + gap: 8px !important; + width: 100% !important; + min-width: 0 !important; + margin: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section > strong { + min-width: 0 !important; + font-size: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section > div { + display: flex !important; + flex-wrap: wrap !important; + gap: 6px !important; + min-width: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail > .product-clone-shell > main.product-clone-preview.clone-ai-preview > section.clone-ai-bottom-input.ecom-command-composer-wrap:not(.is-compact) .ecom-command-popover.ecom-command-popover--settings-model .ecom-command-model-profile section button { + flex: 0 1 auto !important; + min-width: 48px !important; + min-height: 28px !important; + height: 28px !important; + padding: 0 9px !important; + border-radius: 999px !important; + font-size: 12px !important; + white-space: nowrap !important; +} + +/* Mobile canvas gestures and visible request parameters in record detail chat. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-meta { + display: flex !important; + flex-wrap: wrap !important; + gap: 8px !important; + margin-top: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-meta em { + display: inline-flex !important; + align-items: center !important; + gap: 6px !important; + max-width: 100% !important; + margin: 0 !important; + padding: 6px 10px !important; + overflow: hidden !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + border-radius: 999px !important; + background: rgba(248, 253, 255, 0.96) !important; + color: #335065 !important; + font-style: normal !important; + font-size: 12px !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-meta em span { + flex: 0 0 auto !important; + color: #6c8594 !important; + font-weight: 650 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-meta em strong { + min-width: 0 !important; + overflow: hidden !important; + color: #10202c !important; + font-weight: 750 !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"].is-history-detail .clone-ai-preview-zoom-wrap, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node { + touch-action: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-preview.is-touch-panning .clone-ai-preview-zoom-wrap, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node:active { + cursor: grabbing !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-canvas-node { + min-width: 320px !important; + max-width: min(92vw, 520px) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-node-drag-handle { + height: 38px !important; + } +}