/* * Pictag Workspace Redesign v1.8.2 * UX / Accessibility / Detached Tool Surface */ @media (min-width: 769px) { :root { --pictag-tool-panel-width: 420px !important; --pictag-tool-panel-offset: 16px; } /* --------------------------------------------------------- FORCE CORRECT DESKTOP SIDEBAR GEOMETRY --------------------------------------------------------- */ body.pictag-tool-workspace:not(.sidebar-collapsed) .main { margin-left: var(--sidebar-width) !important; } body.pictag-tool-workspace.sidebar-collapsed .main { margin-left: 0 !important; } /* * Detached OpenArt-style tool surface. */ #pictagToolPanel { top: calc(var(--header-height) + 16px) !important; bottom: 16px !important; left: 16px !important; width: var(--pictag-tool-panel-width) !important; min-width: var(--pictag-tool-panel-width) !important; max-width: var(--pictag-tool-panel-width) !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 16px !important; background: #f4f5f6 !important; box-shadow: 0 12px 36px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important; overflow: hidden !important; } [data-theme="dark"] #pictagToolPanel, body[data-theme="dark"] #pictagToolPanel { background: #17191c !important; border-color: rgba(255,255,255,.105) !important; box-shadow: 0 14px 42px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.20) !important; } body.pictag-tool-workspace .chat-container { width: calc( 100% - var(--pictag-tool-panel-width) - 48px ) !important; margin-left: calc( var(--pictag-tool-panel-width) + 48px ) !important; background: #fff !important; } [data-theme="dark"] body.pictag-tool-workspace .chat-container, body[data-theme="dark"].pictag-tool-workspace .chat-container { background: #0c0d0f !important; } /* Expanded Generation editor. */ body.pictag-prompt-expanded { --pictag-tool-panel-width: 560px !important; } /* --------------------------------------------------------- PANEL HEADER --------------------------------------------------------- */ .pictag-tool-panel-head { min-height: 65px !important; padding: 16px 18px 12px !important; border-bottom: 0 !important; } .pictag-tool-panel-eyebrow { margin-bottom: 4px !important; font-size: 11px !important; line-height: 1.25 !important; letter-spacing: .07em !important; } .pictag-tool-panel-title { font-size: 18px !important; line-height: 1.3 !important; font-weight: 650 !important; } .pictag-tool-panel-close { width: 36px !important; height: 36px !important; flex-basis: 36px !important; border-radius: 9px !important; } /* --------------------------------------------------------- MODE SWITCHER --------------------------------------------------------- */ .pictag-workspace-tool-tabs { margin: 0 16px 18px !important; padding: 5px !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 4px !important; border: 1px solid var(--border-color) !important; border-radius: 12px !important; background: var(--bg-primary) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; } .pictag-workspace-tool-tab { min-height: 38px !important; padding: 0 7px !important; border-radius: 8px !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 650 !important; white-space: nowrap !important; } /* --------------------------------------------------------- BODY / ACCESSIBILITY --------------------------------------------------------- */ .pictag-tool-panel-body { padding: 0 18px 26px !important; font-size: 14px !important; line-height: 1.45 !important; } .pictag-tool-panel-intro { margin-bottom: 17px !important; padding-bottom: 16px !important; font-size: 13px !important; line-height: 1.5 !important; } .pictag-workspace-section-label, .tagger-settings-title, .upscaler-settings-title, .pictag-edit-label { font-size: 13px !important; line-height: 1.35 !important; font-weight: 650 !important; } #pictagToolPanel label { font-size: 13px !important; line-height: 1.35 !important; } #pictagToolPanel select, #pictagToolPanel input[type="text"], #pictagToolPanel input[type="number"], #pictagToolPanel textarea, #pictagToolPanel button, #pictagToolPanel .form-input, #pictagToolPanel .settings-btn { font-size: 14px !important; } #pictagToolPanel select, #pictagToolPanel input[type="text"], #pictagToolPanel input[type="number"], #pictagToolPanel .form-input { min-height: 42px !important; } /* * Helper text must remain readable. */ #pictagToolPanel small, #pictagToolPanel .tagger-mode-help, #pictagToolPanel .tagger-help, #pictagToolPanel .upscaler-hint, #pictagToolPanel [class*="hint"], #pictagToolPanel [class*="help"], #pictagToolPanel [class*="notice"] { font-size: 12px !important; line-height: 1.45 !important; } /* --------------------------------------------------------- GENERATION — VERTICAL OPENART-LIKE FLOW --------------------------------------------------------- */ #pictagToolPanel .input-area { width: 100% !important; max-width: none !important; position: static !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: transparent !important; border: 0 !important; overflow: visible !important; } #pictagToolPanel .input-container { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; gap: 13px !important; margin: 0 !important; overflow: visible !important; } #pictagToolPanel #imageOptionsBar, #pictagToolPanel .image-options-bar { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; gap: 13px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } #pictagToolPanel .image-option-field { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 7px !important; margin: 0 !important; font-size: 13px !important; font-weight: 650 !important; } #pictagToolPanel .image-option-field select { display: block !important; width: 100% !important; height: 42px !important; margin: 0 !important; font-size: 14px !important; } #pictagToolPanel #imageOptionsBar > *, #pictagToolPanel .image-options-bar > * { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* * Prompt area. */ #pictagToolPanel #chatInput { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 170px !important; max-height: 310px !important; padding-bottom: 52px !important; font-size: 14px !important; line-height: 1.55 !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; } body.pictag-prompt-expanded #pictagToolPanel #chatInput { min-height: 46vh !important; max-height: 62vh !important; } #pictagPromptExpand { appearance: none; position: absolute; right: 48px; bottom: 11px; z-index: 15; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; } #pictagPromptExpand:hover { background: var(--bg-hover); color: var(--text-primary); } /* --------------------------------------------------------- UPLOAD ZONES --------------------------------------------------------- */ #pictagToolPanel #pictagUpscaleDrop, #pictagToolPanel .tagger-dropzone { min-height: 130px !important; padding: 22px 14px !important; border-radius: 12px !important; font-size: 14px !important; } #pictagToolPanel #pictagUpscaleDrop *, #pictagToolPanel .tagger-dropzone * { font-size: 13px !important; } /* --------------------------------------------------------- LEGACY UPSCALER HEADER ARTIFACTS --------------------------------------------------------- */ /* * The actual model controls belong in the tool panel. * Hide legacy duplicated header controls in non-generation modes. */ body[data-pictag-workspace-mode="upscaler"] .header .model-selector, body[data-pictag-workspace-mode="tagger"] .header .model-selector, body[data-pictag-workspace-mode="edit"] .header .model-selector { display: none !important; } /* * Old Upscaler injector occasionally puts its cloned tool * selector into the header. Never display it there. */ .header [data-pictag-upscaler-tool-menu="1"], .header [data-pictag-upscaler-menu-icon="1"] { display: none !important; } /* * We use our stable Upscaling entry instead. * Keep legacy injected menu item hidden so it cannot flicker. */ #composerToolsPopup [data-pictag-upscaler-tool-menu="1"] { display: none !important; } /* --------------------------------------------------------- TOOL MENU STABILITY --------------------------------------------------------- */ #composerToolsPopup .composer-tool-item { pointer-events: auto !important; transform: none !important; transition: background-color .12s ease, color .12s ease !important; } #composerToolsPopup .composer-tool-item:hover { transform: none !important; } /* --------------------------------------------------------- UPSCALER / TAGGER RESULT TEXT --------------------------------------------------------- */ body[data-pictag-workspace-mode="upscaler"] .upscaler-main, body[data-pictag-workspace-mode="tagger"] .tagger-main { font-size: 14px !important; } body[data-pictag-workspace-mode="upscaler"] .upscaler-main p, body[data-pictag-workspace-mode="tagger"] .tagger-main p { font-size: 13px !important; line-height: 1.5 !important; } /* --------------------------------------------------------- EDITING WORKSPACE --------------------------------------------------------- */ #pictagImageEditHost { left: calc( var(--pictag-tool-panel-width) + 48px ) !important; background: #fff !important; } [data-theme="dark"] #pictagImageEditHost, body[data-theme="dark"] #pictagImageEditHost { background: #0c0d0f !important; } /* --------------------------------------------------------- NEW CHAT REAL LINK --------------------------------------------------------- */ .pictag-new-chat-link { text-decoration: none !important; color: inherit !important; cursor: pointer !important; } } @media (max-width: 768px) { /* * This redesign pass remains desktop-only. * Existing production-tested mobile composer stays untouched. */ #pictagToolPanel, #pictagImageEditHost { display: none !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_6_CSS This modifies the real v1.8.2 workspace implementation. No separate polish asset or competing renderer. ============================================================ */ @media (min-width: 769px) { :root { --pictag-tool-panel-width: 440px; --pictag-tool-panel-min-width: 400px; --pictag-tool-panel-max-width: 720px; } /* -------------------------------------------------------- DETACHED PANEL -------------------------------------------------------- */ #pictagToolPanel { width: var(--pictag-tool-panel-width) !important; min-width: var(--pictag-tool-panel-min-width) !important; max-width: min( var(--pictag-tool-panel-max-width), calc(100vw - 340px) ) !important; overflow: visible !important; box-sizing: border-box !important; } /* * Actual draggable right edge of the whole mode panel. */ #pictagNativePanelResize { position: absolute; top: 72px; right: -7px; bottom: 16px; width: 14px; z-index: 90; cursor: ew-resize; touch-action: none; user-select: none; } #pictagNativePanelResize::after { content: ""; position: absolute; top: 16%; bottom: 16%; left: 6px; width: 2px; border-radius: 999px; background: color-mix( in srgb, var(--text-secondary) 28%, transparent ); transition: background .13s ease, width .13s ease; } #pictagNativePanelResize:hover::after, #pictagNativePanelResize.is-dragging::after { width: 3px; background: var(--accent-color); } body.pictag-native-panel-resizing, body.pictag-native-panel-resizing * { cursor: ew-resize !important; user-select: none !important; } /* -------------------------------------------------------- MODE SWITCHER -------------------------------------------------------- */ .pictag-workspace-tool-tabs { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 16px 18px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; } .pictag-workspace-tool-tab { appearance: none !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding: 0 14px !important; border: 1px solid var(--border-color) !important; border-radius: 9px !important; background: var(--bg-primary) !important; color: var(--text-primary) !important; font-size: 13px !important; line-height: 1 !important; font-weight: 650 !important; box-shadow: none !important; cursor: pointer !important; } .pictag-workspace-tool-tab:hover { border-color: color-mix( in srgb, var(--accent-color) 55%, var(--border-color) ) !important; background: color-mix( in srgb, var(--accent-color) 8%, var(--bg-primary) ) !important; } .pictag-workspace-tool-tab.active { border-color: var(--accent-color) !important; background: var(--accent-color) !important; color: #fff !important; } /* -------------------------------------------------------- NO LEGACY RIGHT-SIDEBAR FLASH -------------------------------------------------------- */ /* * Tagger/Upscaler settings should ONLY ever be visible * inside our detached tool panel. * * Even during the first frame of a mode switch the old * right-side bars therefore cannot paint. */ .tagger-settings-sidebar, .upscaler-settings-sidebar { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } #pictagToolPanel .tagger-settings-sidebar, #pictagToolPanel .upscaler-settings-sidebar { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * Same protection for the old horizontal generation bar. */ #imageOptionsBar { visibility: hidden !important; opacity: 0 !important; } #pictagToolPanel #imageOptionsBar { visibility: visible !important; opacity: 1 !important; } /* * During the handful of milliseconds while legacy hosts * initialize, do not paint them in their original layout. */ body.pictag-native-mode-switching #upscalerWorkspaceHost, body.pictag-native-mode-switching #taggerWorkspaceHost { opacity: 0 !important; } /* -------------------------------------------------------- PANEL TYPOGRAPHY -------------------------------------------------------- */ .pictag-tool-panel-title { font-size: 18px !important; line-height: 1.3 !important; } .pictag-tool-panel-eyebrow { font-size: 11px !important; line-height: 1.3 !important; } .pictag-tool-panel-intro { font-size: 13px !important; line-height: 1.5 !important; margin-bottom: 20px !important; padding-bottom: 17px !important; } #pictagToolPanel { font-size: 13px; } #pictagToolPanel select, #pictagToolPanel input, #pictagToolPanel textarea, #pictagToolPanel button { font-size: 13px; } /* -------------------------------------------------------- IMAGE GENERATION — COMPACT NATIVE GRID -------------------------------------------------------- */ #pictagToolPanel #imageOptionsBar { display: grid !important; grid-template-columns: minmax(0, 1fr) 116px !important; gap: 11px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; box-sizing: border-box !important; } #pictagToolPanel #imageOptionsBar .image-option-field { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 46px !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--border-color) !important; border-radius: 9px !important; background: var(--bg-primary) !important; box-sizing: border-box !important; overflow: hidden !important; } /* * Title is INSIDE the control, not on a separate line. */ #pictagToolPanel #imageOptionsBar .image-option-field::before { content: attr(data-field-label); position: absolute; left: 11px; top: 50%; z-index: 2; transform: translateY(-50%); color: var(--text-secondary); font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; pointer-events: none; } #pictagToolPanel #imageOptionsBar .image-option-field select { display: block !important; width: 100% !important; min-width: 0 !important; height: 44px !important; margin: 0 !important; padding: 0 34px 0 78px !important; border: 0 !important; border-radius: 8px !important; background-color: transparent !important; color: var(--text-primary) !important; font-size: 13px !important; font-weight: 600 !important; box-sizing: border-box !important; } #pictagToolPanel #imageOptionsBar .image-option-number select { padding-left: 67px !important; } /* * Requested layout: * * Model full * Format full * Quality | Number * Funding full * credits/info full */ #pictagToolPanel #imageOptionsBar .image-option-model, #pictagToolPanel #imageOptionsBar .image-option-format, #pictagToolPanel #imageOptionsBar .image-option-funding, #pictagToolPanel #imageConnectionPill { grid-column: 1 / -1 !important; } #pictagToolPanel #imageOptionsBar .image-option-quality { grid-column: 1 !important; } #pictagToolPanel #imageOptionsBar .image-option-number { grid-column: 2 !important; } /* * Funding now has the same full width as Model/Format. */ #pictagToolPanel #imageBillingSelect { width: 100% !important; } #pictagToolPanel #imageConnectionPill { width: 100% !important; max-width: none !important; box-sizing: border-box !important; justify-content: space-between !important; } /* -------------------------------------------------------- GENERATION PROMPT -------------------------------------------------------- */ #pictagToolPanel .input-area, #pictagToolPanel .input-container { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } #pictagToolPanel .input-wrapper { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 166px !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } #pictagToolPanel #chatInput { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 164px !important; max-height: 520px !important; margin: 0 !important; padding: 16px 58px 52px 54px !important; box-sizing: border-box !important; resize: vertical !important; overflow: auto !important; font-size: 14px !important; line-height: 1.55 !important; } /* * Keep the + button functional but out of the textarea flow. */ #pictagToolPanel #composerMenuToggle { position: absolute !important; left: 12px !important; bottom: 12px !important; z-index: 5; } /* * Leave the actual bottom-right corner of the textarea free * so the browser's native resize grip remains accessible. */ #pictagToolPanel .input-buttons { position: absolute !important; right: 28px !important; bottom: 12px !important; z-index: 5; display: flex !important; gap: 7px !important; } /* * v1.8.2's custom expand icon is no longer used. */ #pictagPromptExpand { display: none !important; } /* -------------------------------------------------------- TAGGING — VISUAL RHYTHM -------------------------------------------------------- */ #pictagToolPanel .tagger-dropzone { margin-top: 9px !important; margin-bottom: 27px !important; padding: 28px 20px !important; } #pictagToolPanel .tagger-settings-sidebar { padding-top: 3px !important; } #pictagToolPanel .tagger-settings-section { padding-bottom: 22px !important; margin-bottom: 22px !important; } #pictagToolPanel .tagger-settings-title { margin-bottom: 11px !important; font-size: 13px !important; line-height: 1.35 !important; } #pictagToolPanel .tagger-mode-section-v1664 { margin-top: 3px !important; margin-bottom: 24px !important; } #pictagToolPanel .pictag-tagger-mode-switch { margin-bottom: 12px !important; } #pictagToolPanel .tagger-preview-size-row { margin-top: 9px !important; margin-bottom: 10px !important; } /* -------------------------------------------------------- TAGGER THUMBNAILS -------------------------------------------------------- */ .tagger-thumb { transition: width .08s linear, border-color .12s, box-shadow .12s !important; } .tagger-thumb-media { transition: height .08s linear !important; } .tagger-preview-size-slider { width: 100% !important; } /* * Same height regardless of number of digits. * * 1–9 circle * 10–99 short pill * 100–999 wider pill * 1000+ widest pill */ .tagger-thumb-index { min-width: 24px !important; width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1 !important; box-sizing: border-box !important; } .tagger-thumb-index[data-digits="2"] { width: 32px !important; } .tagger-thumb-index[data-digits="3"] { width: 39px !important; } .tagger-thumb-index[data-digits="4"] { width: 47px !important; } /* -------------------------------------------------------- UPSCALER — VISUAL RHYTHM -------------------------------------------------------- */ #pictagToolPanel #pictagUpscaleDrop { margin-top: 9px !important; margin-bottom: 27px !important; min-height: 136px !important; padding: 27px 18px !important; } #pictagToolPanel .upscaler-settings-sidebar { padding-top: 3px !important; } #pictagToolPanel .upscaler-settings-section { padding-bottom: 22px !important; margin-bottom: 22px !important; } #pictagToolPanel .upscaler-settings-title { margin-bottom: 11px !important; font-size: 13px !important; line-height: 1.35 !important; } #pictagToolPanel .upscaler-settings-section select { min-height: 42px !important; margin-top: 4px !important; } #pictagToolPanel .upscaler-settings-section button { min-height: 40px !important; } #pictagToolPanel .upscaler-batch-count { margin: 4px 0 12px !important; } /* -------------------------------------------------------- IMAGE EDITING -------------------------------------------------------- */ .pictag-edit-canvas-frame { position: relative !important; display: inline-block !important; line-height: 0 !important; max-width: 100% !important; } .pictag-edit-canvas-frame > img { position: relative; z-index: 1; display: block !important; max-width: 100% !important; } #pictagEditMaskCanvas { position: absolute; z-index: 8; left: 0; top: 0; display: block; touch-action: none; cursor: crosshair; } #pictagEditMaskTools { display: flex; align-items: center; gap: 8px; margin: 11px 0 8px; } #pictagEditMaskTools button { flex: 1 1 0; min-height: 36px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; } #pictagEditMaskTools button:hover:not(:disabled) { border-color: color-mix( in srgb, var(--accent-color) 55%, var(--border-color) ); } #pictagEditMaskTools button:disabled { opacity: .42; cursor: default; } .pictag-edit-native-hint { margin: 0 0 15px; color: var(--text-secondary); font-size: 11px; line-height: 1.5; } #pictagEditApply.pictag-edit-ready { border-color: var(--accent-color) !important; background: var(--accent-color) !important; color: #fff !important; opacity: 1 !important; cursor: pointer !important; } /* -------------------------------------------------------- RIGHT WORK AREA -------------------------------------------------------- */ body.pictag-tool-workspace .chat-container { width: calc( 100% - var(--pictag-tool-panel-width) - 48px ) !important; margin-left: calc( var(--pictag-tool-panel-width) + 48px ) !important; } #pictagImageEditHost { left: calc( var(--pictag-tool-panel-width) + 48px ) !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_14_OPENART ============================================================ */ @media (min-width: 769px) { :root { --pt14-bg: #0d0d0d; --pt14-card: #141414; --pt14-hover: #202020; --pt14-hover2: #262626; --pt14-border: #303030; --pt14-border-hover: #454545; --pt14-text: #f5f5f5; --pt14-muted: #969ba8; --pt14-accent: var(--accent-color, #e5005a); } html body #sidebar, html body #main.main { background: var(--pt14-bg) !important; } html body #sidebar { border-right: 1px solid #292929 !important; } /* PANEL */ #pictagToolPanel { overflow: visible !important; border-right: 0 !important; box-shadow: none !important; background: var(--pt14-bg) !important; color-scheme: dark !important; } #pictagToolPanel .pictag-tool-panel-head { position: relative !important; z-index: 50 !important; box-sizing: border-box !important; flex: 0 0 auto !important; width: 100% !important; padding: 15px 16px 14px !important; overflow: visible !important; background: var(--pt14-bg) !important; border-bottom: 1px solid #262626 !important; } #pictagToolPanel .pictag-tool-panel-body { position: relative !important; z-index: 1 !important; box-sizing: border-box !important; flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; padding: 16px 16px 22px !important; overflow-x: hidden !important; overflow-y: auto !important; background: var(--pt14-bg) !important; scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; } #pictagToolPanel .pictag-tool-panel-body:hover { scrollbar-color: #525252 transparent !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar { width: 7px !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-track { background: transparent !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-thumb { border: 2px solid transparent !important; border-radius: 999px !important; background: transparent !important; background-clip: content-box !important; } #pictagToolPanel .pictag-tool-panel-body:hover::-webkit-scrollbar-thumb { background: #525252 !important; background-clip: content-box !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-button, #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-button:single-button { display: none !important; width: 0 !important; height: 0 !important; } /* MODES */ #pictagToolPanel .pictag-workspace-tool-tabs { display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 8px !important; box-sizing: border-box !important; width: 100% !important; margin: 14px 0 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; } #pictagToolPanel .pictag-workspace-tool-tab { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--pt14-border) !important; border-radius: 8px !important; background: #111 !important; color: #f5f5f5 !important; box-shadow: none !important; transform: none !important; font-size: 12px !important; font-weight: 650 !important; white-space: nowrap !important; cursor: pointer !important; } #pictagToolPanel .pictag-workspace-tool-tab:hover { background: var(--pt14-hover) !important; border-color: var(--pt14-border-hover) !important; } #pictagToolPanel .pictag-workspace-tool-tab.active { width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; background: var(--pt14-accent) !important; border-color: var(--pt14-accent) !important; color: #fff !important; box-shadow: none !important; transform: none !important; } #pictagToolPanel .pictag-tool-panel-intro { box-sizing: border-box !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 2px !important; color: #a1a5af !important; font-size: 13px !important; line-height: 1.6 !important; } /* ONE RESIZE HANDLE */ #pictagToolPanel #pictagNativePanelResize { position: absolute !important; z-index: 9999 !important; top: 0 !important; right: -13px !important; bottom: 0 !important; width: 13px !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: ew-resize !important; pointer-events: auto !important; touch-action: none !important; } #pictagToolPanel #pictagNativePanelResize::before { content: ""; position: absolute !important; top: 12px !important; bottom: 12px !important; left: 3px !important; width: 2px !important; border-radius: 999px !important; background: var(--pt14-accent) !important; opacity: 0 !important; transition: opacity .12s ease !important; } #pictagToolPanel #pictagNativePanelResize::after { content: none !important; display: none !important; } #pictagToolPanel #pictagNativePanelResize:hover::before, #pictagToolPanel #pictagNativePanelResize.is-dragging::before { opacity: 1 !important; } /* GENERATION STACK */ #pictagToolPanel #imageOptionsBar { display: flex !important; flex-direction: column !important; gap: 10px !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; } #pictagToolPanel #imageOptionsBar .pictag-v1814-native-field { display: none !important; } .pictag-v1814-shell { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .pictag-v1814-model { order: 1 !important; } .pictag-v1814-format { order: 2 !important; } .pictag-v1814-quality { order: 3 !important; } .pictag-v1814-count { order: 4 !important; } .pictag-v1814-funding { order: 5 !important; } #pictagToolPanel #imageConnectionPill { order: 6 !important; } /* OPENART-LIKE CARD */ .pictag-v1814-trigger, .pictag-v1814-count { box-sizing: border-box !important; width: 100% !important; min-height: 52px !important; border: 1px solid var(--pt14-border) !important; border-radius: 10px !important; background: var(--pt14-card) !important; color: var(--pt14-text) !important; box-shadow: none !important; } .pictag-v1814-trigger { position: relative !important; display: grid !important; grid-template-columns: 72px minmax(0,1fr) 20px !important; align-items: center !important; column-gap: 10px !important; min-height: 52px !important; padding: 0 16px !important; text-align: left !important; cursor: pointer !important; } .pictag-v1814-trigger:hover { background: var(--pt14-hover) !important; border-color: var(--pt14-border-hover) !important; } .pictag-v1814-label { color: var(--pt14-muted) !important; font-size: 9px !important; font-weight: 750 !important; letter-spacing: .045em !important; line-height: 1 !important; text-transform: uppercase !important; white-space: nowrap !important; } .pictag-v1814-value { min-width: 0 !important; overflow: hidden !important; color: #fff !important; font-size: 12.5px !important; font-weight: 600 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .pictag-v1814-arrow { position: absolute !important; top: 50% !important; right: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; transform: translateY(-50%) !important; color: #d1d1d1 !important; pointer-events: none !important; } .pictag-v1814-trigger[aria-expanded="true"] .pictag-v1814-arrow { transform: translateY(-50%) rotate(180deg) !important; } /* IN-FLOW CUSTOM MENU: cannot disappear behind the fixed mode header */ .pictag-v1814-menu { display: none !important; box-sizing: border-box !important; width: 100% !important; max-height: 320px !important; margin: 6px 0 0 !important; padding: 6px !important; overflow-y: auto !important; border: 1px solid #373737 !important; border-radius: 10px !important; background: #121212 !important; box-shadow: none !important; } .pictag-v1814-menu.is-open { display: block !important; } .pictag-v1814-option { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; min-height: 38px !important; margin: 0 0 2px !important; padding: 9px 34px 9px 11px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #ececec !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; cursor: pointer !important; } .pictag-v1814-option:hover, .pictag-v1814-option:focus-visible { outline: none !important; background: var(--pt14-hover2) !important; color: #fff !important; } .pictag-v1814-option.is-selected { background: #202020 !important; color: #fff !important; } .pictag-v1814-option.is-selected::after { content: "✓"; position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; color: var(--pt14-accent) !important; font-weight: 800 !important; } /* − 1 / 4 + */ .pictag-v1814-count { display: grid !important; grid-template-columns: 72px minmax(0,1fr) !important; align-items: center !important; column-gap: 10px !important; padding: 0 12px 0 16px !important; } .pictag-v1814-stepper { justify-self: end !important; display: grid !important; grid-template-columns: 34px 66px 34px !important; align-items: center !important; gap: 2px !important; } .pictag-v1814-stepper button { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #fff !important; font-size: 19px !important; line-height: 1 !important; cursor: pointer !important; } .pictag-v1814-stepper button:hover:not(:disabled) { background: var(--pt14-hover2) !important; } .pictag-v1814-stepper button:disabled { opacity: .28 !important; cursor: default !important; } .pictag-v1814-count-value { color: #fff !important; font-size: 12.5px !important; font-weight: 650 !important; text-align: center !important; white-space: nowrap !important; } /* FUNDING + ACCESS */ .pictag-v1814-funding, .pictag-v1814-funding .pictag-v1814-trigger { width: 100% !important; max-width: none !important; } #pictagToolPanel #imageConnectionPill { box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-height: 38px !important; margin: 0 !important; padding: 7px 10px !important; border-radius: 8px !important; overflow: hidden !important; } /* PROMPT */ #pictagToolPanel .input-area, #pictagToolPanel .input-container, #pictagToolPanel .input-wrapper { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; } #pictagToolPanel .input-area { position: static !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: visible !important; border: 0 !important; background: transparent !important; } #pictagToolPanel .input-container { position: relative !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #pictagToolPanel .input-wrapper { display: block !important; min-height: 190px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #pictagToolPanel #chatInput { box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 190px !important; min-height: 190px !important; max-height: 520px !important; margin: 0 !important; padding: 16px !important; border: 1px solid var(--pt14-border) !important; border-radius: 10px !important; background: var(--pt14-card) !important; color: #fff !important; box-shadow: none !important; font-size: 13px !important; line-height: 1.55 !important; resize: vertical !important; overflow-x: hidden !important; overflow-y: auto !important; } #pictagToolPanel #chatInput:hover { border-color: var(--pt14-border-hover) !important; } #pictagToolPanel #composerMenuToggle, #pictagToolPanel #composerToolsPopup, #pictagToolPanel #pictagPromptExpand, #pictagToolPanel .input-buttons { display: none !important; } /* UPSCALE / TAG CLOSED SELECTS */ #pictagToolPanel .upscaler-settings-section select, #pictagToolPanel .tagger-settings-section select { appearance: none !important; box-sizing: border-box !important; width: 100% !important; min-height: 44px !important; padding: 0 42px 0 12px !important; border: 1px solid var(--pt14-border) !important; border-radius: 9px !important; background-color: var(--pt14-card) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' fill='none' stroke='%23d0d0d0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 15px center !important; color: #fff !important; color-scheme: dark !important; } #pictagToolPanel .upscaler-settings-section select:hover, #pictagToolPanel .tagger-settings-section select:hover { background-color: var(--pt14-hover) !important; border-color: var(--pt14-border-hover) !important; } #pictagToolPanel #pictagUpscaleDrop, #pictagToolPanel .tagger-dropzone { box-sizing: border-box !important; width: 100% !important; background: #121212 !important; border-color: #363636 !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_15_TIGHTEN ============================================================ */ @media (min-width: 769px) { #pictagToolPanel { display: flex !important; flex-direction: column !important; flex: 0 0 var(--pictag-tool-panel-width) !important; width: var(--pictag-tool-panel-width) !important; min-width: var(--pictag-tool-panel-min-width) !important; max-width: min(760px, calc(100vw - 110px)) !important; border: 1px solid #2a2a2a !important; background: #0d0d0d !important; box-shadow: none !important; overflow: hidden !important; } #pictagToolPanel .pictag-tool-panel-head { padding: 18px 18px 12px !important; background: #0d0d0d !important; border-bottom: 0 !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20) !important; } #pictagToolPanel .pictag-tool-panel-body { padding: 14px 18px 18px !important; background: #0d0d0d !important; } #pictagToolPanel .pictag-workspace-tool-tabs { margin: 12px 0 0 !important; padding: 0 2px !important; gap: 8px !important; background: transparent !important; border: 0 !important; } #pictagToolPanel .pictag-workspace-tool-tab, #pictagToolPanel .pictag-workspace-tool-tab.active { height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 14px !important; margin: 0 !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1 !important; border-radius: 8px !important; transform: none !important; box-shadow: none !important; } #pictagToolPanel .pictag-workspace-tool-tab { background: #111111 !important; border: 1px solid #303030 !important; } #pictagToolPanel .pictag-workspace-tool-tab:hover { background: #1f1f1f !important; border-color: #444444 !important; } #pictagToolPanel .pictag-workspace-tool-tab.active { background: var(--accent-color, #e5005a) !important; border-color: var(--accent-color, #e5005a) !important; color: #ffffff !important; } #pictagToolPanel hr, #pictagToolPanel .pictag-tool-panel-head hr, #pictagToolPanel .pictag-tool-panel-body hr, #pictagToolPanel .divider, #pictagToolPanel .section-divider { display: none !important; border: 0 !important; } #pictagToolPanel .pictag-v1814-trigger, #pictagToolPanel .pictag-v1814-count { min-height: 50px !important; border-radius: 10px !important; background: #141414 !important; border: 1px solid #303030 !important; } #pictagToolPanel .pictag-v1814-trigger { padding: 0 16px !important; } #pictagToolPanel .pictag-v1814-trigger:hover, #pictagToolPanel .pictag-v1814-stepper button:hover:not(:disabled), #pictagToolPanel .pictag-v1814-option:hover, #pictagToolPanel .pictag-v1814-option:focus-visible, #pictagToolPanel .pictag-v1814-option.is-selected { background: #242424 !important; color: #ffffff !important; } #pictagToolPanel .pictag-v1814-option.is-selected::after { color: var(--accent-color, #e5005a) !important; } #pictagToolPanel .pictag-v1814-menu { background: #121212 !important; border: 1px solid #373737 !important; box-shadow: none !important; } #pictagToolPanel .pictag-v1814-arrow, #pictagToolPanel .upscaler-settings-section select, #pictagToolPanel .tagger-settings-section select { background-position: right 16px center !important; } #pictagToolPanel .pictag-v1814-count { padding: 0 12px 0 16px !important; } #pictagToolPanel .pictag-v1814-stepper { grid-template-columns: 34px 68px 34px !important; } #pictagToolPanel .pictag-v1814-count-value { font-size: 12.5px !important; font-weight: 650 !important; } #pictagToolPanel #imageConnectionPill { width: 100% !important; max-width: none !important; min-height: 38px !important; margin: 0 !important; padding: 7px 10px !important; border-radius: 8px !important; box-sizing: border-box !important; } #pictagToolPanel .input-area, #pictagToolPanel .input-container, #pictagToolPanel .input-wrapper, #pictagToolPanel .input-wrapper > *, #pictagToolPanel #chatInput { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #pictagToolPanel .input-area, #pictagToolPanel .input-container, #pictagToolPanel .input-wrapper { display: block !important; padding-right: 0 !important; margin-right: 0 !important; } #pictagToolPanel #chatInput { display: block !important; height: 190px !important; min-height: 190px !important; max-height: 520px !important; padding: 16px !important; margin: 0 !important; border: 1px solid #303030 !important; border-radius: 10px !important; background: #141414 !important; } #pictagToolPanel #chatInput:hover, #pictagToolPanel .upscaler-settings-section select:hover, #pictagToolPanel .tagger-settings-section select:hover { border-color: #444444 !important; background-color: #1f1f1f !important; } #pictagToolPanel .upscaler-settings-sidebar > .upscaler-settings-title:first-child, #pictagToolPanel .tagger-settings-sidebar > .tagger-settings-title:first-child { display: none !important; } #pictagToolPanel .upscaler-settings-section, #pictagToolPanel .tagger-settings-section { margin: 0 0 14px !important; padding: 0 !important; border-bottom: 0 !important; } #pictagToolPanel .upscaler-settings-title, #pictagToolPanel .tagger-settings-title { margin: 0 0 8px !important; } #pictagToolPanel #pictagNativePanelResize { position: absolute !important; top: 0 !important; right: -12px !important; bottom: 0 !important; width: 12px !important; z-index: 9999 !important; background: transparent !important; cursor: ew-resize !important; border: 0 !important; box-shadow: none !important; } #pictagToolPanel #pictagNativePanelResize::before { content: "" !important; position: absolute !important; top: 12px !important; bottom: 12px !important; left: 2px !important; width: 2px !important; border-radius: 999px !important; background: var(--accent-color, #e5005a) !important; opacity: 0 !important; transition: opacity .12s ease !important; } #pictagToolPanel #pictagNativePanelResize:hover::before, #pictagToolPanel #pictagNativePanelResize.is-dragging::before { opacity: 1 !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_16_FINAL_CLEANUP ============================================================ */ @media (min-width: 769px) { /* -------------------------------------------------------- ONE CONSISTENT OUTER PANEL -------------------------------------------------------- */ #pictagToolPanel { box-sizing: border-box !important; overflow: visible !important; border: 1px solid #2d2d2d !important; border-radius: 12px !important; background: #0d0d0d !important; box-shadow: none !important; } #pictagToolPanel .pictag-tool-panel-head { box-sizing: border-box !important; width: 100% !important; padding: 17px 16px 10px !important; overflow: visible !important; border: 0 !important; border-radius: 11px 11px 0 0 !important; background: #0d0d0d !important; box-shadow: none !important; } #pictagToolPanel .pictag-tool-panel-body { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; padding: 14px 18px 20px !important; border: 0 !important; border-radius: 0 0 11px 11px !important; background: #0d0d0d !important; overflow-x: hidden !important; overflow-y: auto !important; } /* -------------------------------------------------------- MODE BAR No grey strip. Equal side padding. Subtle dark shadow below when content scrolls. -------------------------------------------------------- */ #pictagToolPanel .pictag-workspace-tool-tabs { position: relative !important; z-index: 80 !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 10px 14px 12px !important; overflow: visible !important; border: 0 !important; background: #0d0d0d !important; box-shadow: 0 12px 16px -16px rgba(0,0,0,.95) !important; } #pictagToolPanel .pictag-workspace-tool-tab, #pictagToolPanel .pictag-workspace-tool-tab.active { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 13px !important; border-radius: 8px !important; transform: none !important; box-shadow: none !important; } #pictagToolPanel .pictag-workspace-tool-tab { border: 1px solid #303030 !important; background: #111111 !important; } #pictagToolPanel .pictag-workspace-tool-tab:hover { border-color: #454545 !important; background: #202020 !important; } #pictagToolPanel .pictag-workspace-tool-tab.active { border: 1px solid var(--accent-color, #e5005a) !important; background: var(--accent-color, #e5005a) !important; color: #ffffff !important; } /* -------------------------------------------------------- REMOVE INTERNAL HORIZONTAL LINES -------------------------------------------------------- */ #pictagToolPanel .pictag-tool-panel-intro, #pictagToolPanel .pictag-tool-panel-head, #pictagToolPanel .pictag-tool-panel-heading, #pictagToolPanel .upscaler-settings-section, #pictagToolPanel .tagger-settings-section { border-top: 0 !important; border-bottom: 0 !important; } #pictagToolPanel .pictag-tool-panel-intro::before, #pictagToolPanel .pictag-tool-panel-intro::after, #pictagToolPanel .upscaler-settings-section::before, #pictagToolPanel .upscaler-settings-section::after, #pictagToolPanel .tagger-settings-section::before, #pictagToolPanel .tagger-settings-section::after { content: none !important; display: none !important; } #pictagToolPanel hr, #pictagToolPanel .divider, #pictagToolPanel .section-divider { display: none !important; } /* -------------------------------------------------------- GENERATION CARDS SAME DIMENSIONS IDLE / OPEN / SELECTED -------------------------------------------------------- */ #pictagToolPanel .pictag-v1814-trigger, #pictagToolPanel .pictag-v1814-trigger:hover, #pictagToolPanel .pictag-v1814-trigger:focus, #pictagToolPanel .pictag-v1814-trigger[aria-expanded="true"] { box-sizing: border-box !important; width: 100% !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 16px !important; border-width: 1px !important; border-style: solid !important; border-color: #303030 !important; border-radius: 10px !important; transform: none !important; box-shadow: none !important; } #pictagToolPanel .pictag-v1814-trigger { background: #141414 !important; } #pictagToolPanel .pictag-v1814-trigger:hover, #pictagToolPanel .pictag-v1814-trigger[aria-expanded="true"] { background: #202020 !important; } #pictagToolPanel .pictag-v1814-count { box-sizing: border-box !important; width: 100% !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; border: 1px solid #303030 !important; border-radius: 10px !important; background: #141414 !important; } #pictagToolPanel .pictag-v1814-arrow { right: 16px !important; } /* -------------------------------------------------------- PROMPT — DO NOT CLIP RIGHT SIDE -------------------------------------------------------- */ #pictagToolPanel .input-area, #pictagToolPanel .input-container, #pictagToolPanel .input-wrapper { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; right: auto !important; left: auto !important; transform: none !important; overflow: visible !important; } #pictagToolPanel #chatInput { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 190px !important; min-height: 190px !important; margin: 0 !important; padding: 16px !important; right: auto !important; left: auto !important; transform: none !important; border: 1px solid #303030 !important; border-radius: 10px !important; background: #141414 !important; } /* -------------------------------------------------------- UPSCALE: COMPACT VERTICAL RHYTHM -------------------------------------------------------- */ #pictagToolPanel .upscaler-settings-sidebar { display: flex !important; flex-direction: column !important; gap: 11px !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #pictagToolPanel .upscaler-settings-section { box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #pictagToolPanel .upscaler-settings-title { margin: 0 0 6px !important; padding: 0 !important; } #pictagToolPanel #pictagUpscaleDrop { margin-bottom: 18px !important; } #pictagToolPanel .pictag-v1816-hide { display: none !important; } /* -------------------------------------------------------- CUSTOM UPSCALE/TAG SELECT No Windows blue native popup. -------------------------------------------------------- */ #pictagToolPanel .pictag-v1816-native-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; opacity: 0 !important; clip-path: inset(50%) !important; overflow: hidden !important; pointer-events: none !important; } #pictagToolPanel .pictag-v1816-choice { position: relative !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #pictagToolPanel .pictag-v1816-trigger { position: relative !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 42px 0 12px !important; border: 1px solid #303030 !important; border-radius: 9px !important; background: #141414 !important; color: #ffffff !important; box-shadow: none !important; font-size: 12.5px !important; text-align: left !important; cursor: pointer !important; } #pictagToolPanel .pictag-v1816-trigger:hover, #pictagToolPanel .pictag-v1816-trigger[aria-expanded="true"] { border-color: #454545 !important; background: #202020 !important; } #pictagToolPanel .pictag-v1816-value { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #pictagToolPanel .pictag-v1816-arrow { position: absolute !important; top: 50% !important; right: 15px !important; display: flex !important; width: 14px !important; height: 14px !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; color: #d0d0d0 !important; pointer-events: none !important; } #pictagToolPanel .pictag-v1816-trigger[aria-expanded="true"] .pictag-v1816-arrow { transform: translateY(-50%) rotate(180deg) !important; } #pictagToolPanel .pictag-v1816-menu { display: none !important; box-sizing: border-box !important; width: 100% !important; max-height: 280px !important; margin: 5px 0 0 !important; padding: 5px !important; overflow-y: auto !important; border: 1px solid #373737 !important; border-radius: 9px !important; background: #121212 !important; box-shadow: none !important; } #pictagToolPanel .pictag-v1816-menu.is-open { display: block !important; } #pictagToolPanel .pictag-v1816-option { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; min-height: 36px !important; margin: 0 0 2px !important; padding: 8px 32px 8px 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #eeeeee !important; font-size: 12.5px !important; text-align: left !important; cursor: pointer !important; } #pictagToolPanel .pictag-v1816-option:hover, #pictagToolPanel .pictag-v1816-option:focus-visible { outline: none !important; background: #252525 !important; color: #ffffff !important; } #pictagToolPanel .pictag-v1816-option.is-selected { background: #202020 !important; color: #ffffff !important; } #pictagToolPanel .pictag-v1816-option.is-selected::after { content: "✓"; position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; color: var(--accent-color, #e5005a) !important; font-weight: 800 !important; } /* -------------------------------------------------------- SCROLLBAR: invisible idle, visible on panel-body hover, no scrollbar buttons. -------------------------------------------------------- */ #pictagToolPanel .pictag-tool-panel-body { scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; } #pictagToolPanel .pictag-tool-panel-body:hover { scrollbar-color: #4e4e4e transparent !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar { width: 6px !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-thumb { border-radius: 999px !important; background: transparent !important; } #pictagToolPanel .pictag-tool-panel-body:hover::-webkit-scrollbar-thumb { background: #4e4e4e !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-track { background: transparent !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-button, #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-button:single-button { display: none !important; width: 0 !important; height: 0 !important; } /* -------------------------------------------------------- RESIZE HANDLE: OUTSIDE the panel and no longer clipped. -------------------------------------------------------- */ #pictagToolPanel #pictagNativePanelResize { position: absolute !important; z-index: 99999 !important; top: 0 !important; right: -14px !important; bottom: 0 !important; width: 14px !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: ew-resize !important; pointer-events: auto !important; touch-action: none !important; } #pictagToolPanel #pictagNativePanelResize::before { content: ""; position: absolute !important; top: 12px !important; bottom: 12px !important; left: 3px !important; width: 2px !important; border-radius: 999px !important; background: var(--accent-color, #e5005a) !important; opacity: 0 !important; transition: opacity .12s ease !important; } #pictagToolPanel #pictagNativePanelResize:hover::before, #pictagToolPanel #pictagNativePanelResize.is-dragging::before { opacity: 1 !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_17_CLEANUP ============================================================ */ @media (min-width: 769px) { /* -------------------------------------------------------- MODE BAR: remove the remaining pale rounded corner artifacts. Keep only the subtle black bottom shadow. -------------------------------------------------------- */ #pictagToolPanel .pictag-workspace-tool-tabs { border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: #0d0d0d !important; box-shadow: 0 11px 14px -14px rgba(0,0,0,.9) !important; clip-path: none !important; } #pictagToolPanel .pictag-workspace-tool-tabs::before, #pictagToolPanel .pictag-workspace-tool-tabs::after, #pictagToolPanel .pictag-tool-panel-head::before, #pictagToolPanel .pictag-tool-panel-head::after { content: none !important; display: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* -------------------------------------------------------- DROPDOWN SCROLLBARS: reserve scrollbar space permanently inside the menu. Result: options do NOT shrink when scrolling becomes necessary. -------------------------------------------------------- */ #pictagToolPanel .pictag-v1814-menu, #pictagToolPanel .pictag-v1816-menu { box-sizing: border-box !important; width: 100% !important; scrollbar-gutter: stable !important; } #pictagToolPanel .pictag-v1814-option, #pictagToolPanel .pictag-v1816-option { box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } /* -------------------------------------------------------- REMOVE EVERY REMAINING SECTION DIVIDER WE KNOW EXISTS -------------------------------------------------------- */ #pictagToolPanel .pictag-edit-control-group, #pictagToolPanel .upscaler-settings-section, #pictagToolPanel .tagger-settings-section, #pictagToolPanel .tagger-mode-section-v1664, #pictagToolPanel .pictag-tool-panel-intro { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; } #pictagToolPanel .pictag-edit-control-group::before, #pictagToolPanel .pictag-edit-control-group::after, #pictagToolPanel .upscaler-settings-section::before, #pictagToolPanel .upscaler-settings-section::after, #pictagToolPanel .tagger-settings-section::before, #pictagToolPanel .tagger-settings-section::after, #pictagToolPanel .tagger-mode-section-v1664::before, #pictagToolPanel .tagger-mode-section-v1664::after { content: none !important; display: none !important; border: 0 !important; } #pictagToolPanel hr, #pictagToolPanel .divider, #pictagToolPanel .section-divider { display: none !important; border: 0 !important; } /* -------------------------------------------------------- EDIT: keep spacing after removing its separators. -------------------------------------------------------- */ #pictagToolPanel .pictag-edit-control-group { margin-bottom: 16px !important; padding-bottom: 0 !important; } /* -------------------------------------------------------- GENERATION CREDITS -> PROMPT: explicit breathing room. -------------------------------------------------------- */ #pictagToolPanel #imageConnectionPill { margin-bottom: 12px !important; } /* -------------------------------------------------------- PROMPT: use AVAILABLE block width rather than inherited 100% sizing from the old composer. Pull it 1px inside the scroll-body right boundary so the complete border always paints. -------------------------------------------------------- */ #pictagToolPanel .input-area { box-sizing: border-box !important; display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 1px 0 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; align-self: stretch !important; } #pictagToolPanel .input-container, #pictagToolPanel .input-wrapper { box-sizing: border-box !important; display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; } #pictagToolPanel #chatInput { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; right: auto !important; left: auto !important; transform: none !important; } /* -------------------------------------------------------- SETTINGS WORD: class is applied by existing v1.8.16 lifecycle. -------------------------------------------------------- */ #pictagToolPanel .pictag-v1816-hide { display: none !important; margin: 0 !important; padding: 0 !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_18_NO_SCROLLBARS Scroll remains functional by mouse wheel / trackpad. No scrollbar occupies layout space anywhere in tool panels. ============================================================ */ @media (min-width: 769px) { /* Main tool-panel scrolling */ #pictagToolPanel .pictag-tool-panel-body { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none !important; scrollbar-gutter: auto !important; -ms-overflow-style: none !important; } #pictagToolPanel .pictag-tool-panel-body:hover { scrollbar-width: none !important; scrollbar-color: transparent transparent !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar, #pictagToolPanel .pictag-tool-panel-body:hover::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-thumb, #pictagToolPanel .pictag-tool-panel-body:hover::-webkit-scrollbar-thumb, #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-track, #pictagToolPanel .pictag-tool-panel-body::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* Generation custom dropdowns */ #pictagToolPanel .pictag-v1814-menu { overflow-y: auto !important; scrollbar-width: none !important; scrollbar-gutter: auto !important; -ms-overflow-style: none !important; } #pictagToolPanel .pictag-v1814-menu::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Upscale / Tag custom dropdowns */ #pictagToolPanel .pictag-v1816-menu { overflow-y: auto !important; scrollbar-width: none !important; scrollbar-gutter: auto !important; -ms-overflow-style: none !important; } #pictagToolPanel .pictag-v1816-menu::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* * Do not reserve any artificial right-side space. * This prevents buttons/options shrinking when a menu * contains enough items to require scrolling. */ #pictagToolPanel .pictag-v1814-menu, #pictagToolPanel .pictag-v1816-menu { box-sizing: border-box !important; width: 100% !important; padding-right: 6px !important; } #pictagToolPanel .pictag-v1814-option, #pictagToolPanel .pictag-v1816-option { box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-width: 0 !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_27_PROMPT_WRAPPER_FIX Fix the actual legacy composer wrapper, not the textarea. The Generation prompt must use the same content width as Funding / Credits above it. ============================================================ */ @media (min-width: 769px) { #pictagToolPanel .input-area, #pictagToolPanel .input-container { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; transform: none !important; } #pictagToolPanel .input-area { margin: 14px 0 0 0 !important; } /* * Deliberately higher specificity than the legacy chat * composer sizing rules. The old composer was expanding * this wrapper to ~790px inside a ~362px panel column. */ html body #pictagToolPanel#pictagToolPanel#pictagToolPanel .input-wrapper { position: relative !important; box-sizing: border-box !important; display: block !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; inset: auto !important; flex: none !important; align-self: stretch !important; transform: none !important; box-sizing: border-box !important; } /* * Textarea now simply fills the correctly-sized wrapper. * Remove the v1.8.26 calc(100% - 18px) workaround. */ html body #pictagToolPanel#pictagToolPanel#pictagToolPanel #chatInput { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; max-inline-size: 100% !important; min-width: 0 !important; min-inline-size: 0 !important; height: 190px; min-height: 190px !important; max-height: 520px !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; padding: 16px !important; left: auto !important; right: auto !important; transform: none !important; border: 1px solid #303030 !important; border-radius: 10px !important; background: #080808 !important; outline: none !important; box-shadow: none !important; resize: vertical !important; overflow-x: hidden !important; overflow-y: auto !important; } #pictagToolPanel #chatInput::placeholder { color: #7e7e7e !important; opacity: 1 !important; } #pictagToolPanel #chatInput:hover, #pictagToolPanel #chatInput:focus { border-color: #3b3b3b !important; background: #080808 !important; outline: none !important; box-shadow: none !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_28_GENERATION_UX ============================================================ */ /* * These extra labels live inside the existing Send button. * They remain invisible in normal AI Chat. */ #sendBtn .pictag-generation-label, #sendBtn .pictag-generation-credit-wrap { display: none; } @media (min-width: 769px) { /* * Clear breathing room between credit information * and the Generation prompt. */ #pictagToolPanel #imageConnectionPill { margin-bottom: 14px !important; } /* * The browser's textarea resize grip needs to own height. */ #pictagToolPanel #chatInput { resize: vertical !important; overflow-x: hidden !important; overflow-y: auto !important; } /* * Move the existing Send control into normal document flow * underneath the textarea. This keeps the real sendMessage() * generation / billing / pending-job workflow intact. */ #pictagToolPanel .input-buttons { position: static !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; width: 100% !important; max-width: 100% !important; height: auto !important; inset: auto !important; margin: 12px 0 0 0 !important; padding: 0 !important; gap: 0 !important; transform: none !important; pointer-events: auto !important; } /* * Voice input is unnecessary in Image Generation and would * compete with the full-width primary Generate action. */ #pictagToolPanel #micBtn { display: none !important; } #pictagToolPanel #sendBtn { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 18px !important; border: 0 !important; border-radius: 11px !important; background: #d70053 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; gap: 7px !important; box-shadow: none !important; transform: none !important; cursor: pointer !important; } #pictagToolPanel #sendBtn:hover { background: #ea075f !important; } #pictagToolPanel #sendBtn:active { transform: translateY(1px) !important; } #pictagToolPanel #sendBtn:disabled { opacity: .52 !important; cursor: not-allowed !important; } /* * Hide ordinary chat arrow only while inside Generation. */ #pictagToolPanel #sendBtn > svg { display: none !important; } #pictagToolPanel #sendBtn .pictag-generation-label { display: inline-flex !important; align-items: center !important; } #pictagToolPanel #sendBtn .pictag-generation-credit-wrap { display: inline-flex !important; align-items: center !important; gap: 3px !important; } #pictagToolPanel #sendBtn .pictag-generation-sparkle { font-size: 14px !important; line-height: 1 !important; } } /* ------------------------------------------------------------ Generated-image download format menu ------------------------------------------------------------ */ .pictag-download-format-menu { position: fixed; z-index: 100000; width: 150px; padding: 6px; border: 1px solid #323232; border-radius: 10px; background: #111111; box-shadow: 0 10px 30px rgba(0, 0, 0, .38); } .pictag-download-format-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #f4f4f4; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .pictag-download-format-menu button:hover { background: #242424; } .pictag-download-format-menu .pictag-format-ext { color: #8b8b8b; font-size: 10px; font-weight: 600; } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_29_GENERATE_REFINEMENTS ============================================================ */ @media (min-width: 769px) { /* * Credits already appear on the Generate button, * so remove the extra credits notification strip. */ #pictagToolPanel #imageConnectionPill { display: none !important; } /* * Add more breathing room above the prompt. */ #pictagToolPanel .input-area { margin-top: 18px !important; } /* * Add more breathing room above the Generate button. */ #pictagToolPanel .input-buttons { margin-top: 16px !important; } /* * Slightly softer prompt appearance without the bright * highlight feeling. */ #pictagToolPanel #chatInput { border-color: #262626 !important; background: #080808 !important; outline: none !important; box-shadow: none !important; } #pictagToolPanel #chatInput:hover, #pictagToolPanel #chatInput:focus, #pictagToolPanel #chatInput:focus-visible { border-color: #2a2a2a !important; background: #080808 !important; outline: none !important; box-shadow: none !important; } /* * Remove bright default control highlight on the button. */ #pictagToolPanel #sendBtn, #pictagToolPanel #sendBtn:hover, #pictagToolPanel #sendBtn:focus, #pictagToolPanel #sendBtn:focus-visible, #pictagToolPanel #sendBtn:active { outline: none !important; box-shadow: none !important; } /* * Flat white stars, not emoji-yellow sparkle. */ #pictagToolPanel #sendBtn .pictag-generation-credit-wrap, #pictagToolPanel #sendBtn .pictag-generation-sparkle, #pictagToolPanel #sendBtn #imageGenerateCost { color: #ffffff !important; } #pictagToolPanel #sendBtn .pictag-generation-sparkle { font-size: 12px !important; letter-spacing: 0.5px !important; line-height: 1 !important; font-family: inherit !important; font-variant-emoji: text !important; } /* * Keep the textarea resizable but reduce the bright * native corner feel where supported. */ #pictagToolPanel #chatInput::-webkit-resizer { background: transparent !important; } } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_30_MOCKUP_ALIGNMENT ============================================================ */ @media (min-width: 769px) { /* * Keep the separate credits notification hidden. * Credits are shown on the Generate button only. */ #pictagToolPanel #imageConnectionPill { display: none !important; } /* * Match the mockup spacing: a clear break between * Funding and the prompt, and between prompt and button. */ #pictagToolPanel .image-option-field.image-option-funding { margin-bottom: 18px !important; } #pictagToolPanel .input-area { margin-top: 0 !important; } #pictagToolPanel #chatInput { margin: 0 !important; border-color: #262626 !important; background: #080808 !important; outline: none !important; box-shadow: none !important; } #pictagToolPanel #chatInput:hover, #pictagToolPanel #chatInput:focus, #pictagToolPanel #chatInput:focus-visible { border-color: #2f2f2f !important; background: #080808 !important; outline: none !important; box-shadow: none !important; } #pictagToolPanel .input-buttons { margin-top: 16px !important; } /* * Mockup-like full-width Generate button. */ #pictagToolPanel #sendBtn, #pictagToolPanel #sendBtn:hover, #pictagToolPanel #sendBtn:focus, #pictagToolPanel #sendBtn:focus-visible, #pictagToolPanel #sendBtn:active { outline: none !important; box-shadow: none !important; } #pictagToolPanel #sendBtn { height: 40px !important; min-height: 40px !important; border-radius: 10px !important; background: #e40068 !important; color: #ffffff !important; gap: 8px !important; } #pictagToolPanel #sendBtn:hover { background: #f10872 !important; } #pictagToolPanel #sendBtn .pictag-generation-label, #pictagToolPanel #sendBtn .pictag-generation-credit-wrap, #pictagToolPanel #sendBtn .pictag-generation-sparkle, #pictagToolPanel #sendBtn #imageGenerateCost { color: #ffffff !important; } #pictagToolPanel #sendBtn .pictag-generation-credit-wrap { gap: 5px !important; } #pictagToolPanel #sendBtn .pictag-generation-sparkle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; line-height: 1 !important; } #pictagToolPanel #sendBtn .pictag-generation-sparkle svg { display: block; width: 15px; height: 15px; fill: currentColor; stroke: none; } } /* v1.8.31 generated-grid responsive fallback */ @media (min-width: 769px) and (max-width: 1179px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: calc(100vw - 450px) !important; max-width: none !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; gap: 22px 16px !important; } .pictag-generated-card-actions { display: flex !important; flex-wrap: nowrap !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } /* ------------------------------------------------------------ Generated image batch layout on desktop ------------------------------------------------------------ */ @media (min-width: 1180px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* * Use substantially more of the free workspace. * On a normal desktop this gives each generated image * approximately 550-580px of horizontal space. */ width: min(1180px, calc(100vw - 500px)) !important; max-width: none !important; min-width: 0 !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; gap: 34px 24px !important; align-items: start !important; margin: 14px 0 32px !important; padding: 0 !important; overflow: visible !important; } .pictag-generated-batch-card { position: relative !important; display: block !important; min-width: 0 !important; width: 100% !important; max-width: none !important; overflow: visible !important; } .pictag-generated-batch-card img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; border-radius: 12px !important; object-fit: contain !important; } .pictag-generated-card-actions { /* * This class is attached by the existing v1.8.30 * layout helper to the real native image-action row. * * Override the old hover-only presentation and keep * the actions permanently visible below every image. */ position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 30px !important; max-height: none !important; margin: 10px 0 0 0 !important; padding: 0 !important; gap: 8px !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; pointer-events: auto !important; transform: none !important; clip: auto !important; clip-path: none !important; } .pictag-generated-batch-card .pictag-generated-card-actions > * { position: static !important; display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; height: 28px !important; min-height: 28px !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; white-space: nowrap !important; } /* * Defeat native hover-only action states. */ .pictag-generated-batch-card .pictag-generated-card-actions, .pictag-generated-batch-card:hover .pictag-generated-card-actions, .pictag-generated-batch-card:focus-within .pictag-generated-card-actions { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .pictag-generated-batch-footer { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; margin-top: -2px !important; } .pictag-generated-batch-footer .action-btn, .pictag-generated-card-actions .action-btn, .pictag-generated-batch-footer button, .pictag-generated-card-actions button, .pictag-generated-batch-footer a, .pictag-generated-card-actions a { margin: 0 !important; } } /* PICTAG_NATIVE_WORKSPACE_V1_8_31_LARGE_GENERATED_GRID */ /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_32_FINAL_IMAGE_ACTIONS ============================================================ */ /* ------------------------------------------------------------ GENERATE PANEL SPACING ------------------------------------------------------------ */ @media (min-width: 769px) { /* * Proper separation between all stacked Generation fields. */ #pictagToolPanel .image-option-field { margin-top: 0 !important; margin-bottom: 10px !important; } #pictagToolPanel .image-option-field.image-option-funding { margin-bottom: 16px !important; } /* * Separate Funding from the prompt itself. */ #pictagToolPanel .input-wrapper { margin-top: 14px !important; } /* * Keep Generate separated from the textarea. */ #pictagToolPanel .input-buttons { margin-top: 16px !important; } /* * 2x the current sparkle size. */ #pictagToolPanel #sendBtn .pictag-generation-sparkle { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } #pictagToolPanel #sendBtn .pictag-generation-sparkle svg { width: 30px !important; height: 30px !important; fill: #ffffff !important; } } /* ------------------------------------------------------------ 50% LARGER GENERATED IMAGE GRID ------------------------------------------------------------ */ @media (min-width: 1180px) { /* * Increase the existing grid by exactly 50% relative to * its containing width, while preventing viewport overflow. */ .pictag-generated-batch-grid { width: 150% !important; max-width: calc(100vw - 470px) !important; min-width: 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 38px !important; overflow: visible !important; } .pictag-generated-batch-card { width: 100% !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; } .pictag-generated-batch-card img { width: 100% !important; max-width: none !important; height: auto !important; object-fit: contain !important; } } /* ------------------------------------------------------------ PER-IMAGE ACTIONS Exactly: Download | Upscale | Tag ------------------------------------------------------------ */ .pictag-v1832-card-actions { position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; margin: 10px 0 0 0 !important; padding: 0 !important; gap: 8px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } .pictag-v1832-card-actions > button, .pictag-v1832-card-actions > a { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #303030 !important; border-radius: 999px !important; background: #0b0b0b !important; color: #d6d6d6 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; cursor: pointer !important; } .pictag-v1832-card-actions > button:hover, .pictag-v1832-card-actions > a:hover { border-color: #484848 !important; background: #151515 !important; color: #ffffff !important; } /* ------------------------------------------------------------ GROUP ACTIONS Exactly: Copy | Tag All ------------------------------------------------------------ */ .pictag-generated-batch-footer { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: -6px 0 0 0 !important; padding: 0 !important; gap: 8px !important; } .pictag-generated-batch-footer > button, .pictag-generated-batch-footer > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 30px !important; margin: 0 !important; padding: 0 13px !important; border: 1px solid #303030 !important; border-radius: 999px !important; background: #0b0b0b !important; color: #d6d6d6 !important; font-size: 12px !important; font-weight: 500 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; cursor: pointer !important; } .pictag-generated-batch-footer > button:hover, .pictag-generated-batch-footer > a:hover { border-color: #484848 !important; background: #151515 !important; color: #ffffff !important; } /* * Native action controls that have been superseded by the * normalized visible v1.8.32 rows. */ .pictag-v1832-native-action-hidden { display: none !important; } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_35_MOCKUP_FINAL ============================================================ */ /* ------------------------------------------------------------ LEFT IMAGE GENERATION PANEL ------------------------------------------------------------ */ @media (min-width: 769px) { /* * Explicit mockup padding. * Do not collapse the inner controls against the shell. */ #pictagToolPanel .pictag-tool-panel-body { box-sizing: border-box !important; padding: 18px 18px 22px 18px !important; } /* * Consistent vertical separation between all controls. */ #pictagToolPanel .image-option-field { margin: 0 !important; } #pictagToolPanel .image-option-field + .image-option-field { margin-top: 10px !important; } /* * Funding -> Prompt */ #pictagToolPanel .input-wrapper { margin-top: 14px !important; } /* * Prompt -> Generate */ #pictagToolPanel .input-buttons { margin-top: 14px !important; } } /* ------------------------------------------------------------ KEEP v1.8.32 LARGE 2x2 GENERATED-IMAGE MOCKUP ------------------------------------------------------------ */ @media (min-width: 1180px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; /* * Preserve the large v1.8.32 presentation. */ width: 150% !important; max-width: calc( 100vw - 470px ) !important; min-width: 0 !important; column-gap: 24px !important; row-gap: 38px !important; overflow: visible !important; } .pictag-generated-batch-card { width: 100% !important; min-width: 0 !important; max-width: none !important; } .pictag-generated-batch-card img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; object-fit: contain !important; border-radius: 11px !important; } } /* ------------------------------------------------------------ EACH IMAGE: Download | Upscale | Edit | Tag ------------------------------------------------------------ */ .pictag-generated-batch-card .pictag-v1832-card-actions { position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 10px 0 0 0 !important; padding: 0 !important; gap: 8px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } .pictag-v1835-edit { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 30px !important; min-height: 30px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #303030 !important; border-radius: 999px !important; background: #0b0b0b !important; color: #d6d6d6 !important; font: inherit !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important; } .pictag-v1835-edit:hover { border-color: #484848 !important; background: #151515 !important; color: #ffffff !important; } /* * Tag All must NEVER live under an individual picture. */ .pictag-generated-batch-card .pictag-v1835-per-image-tag-all { display: none !important; } /* ------------------------------------------------------------ WHOLE BATCH ONLY: Copy | Tag All ------------------------------------------------------------ */ .pictag-generated-batch-footer { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; gap: 8px !important; margin: -4px 0 0 0 !important; padding: 0 !important; } /* ============================================================ PICTAG_NATIVE_WORKSPACE_V1_8_36_LARGE_RESPONSIVE_GRID ============================================================ */ /* * Remove Copy immediately, including before JS cleanup runs. */ .pictag-generated-batch-footer .pictag-v1832-group-copy, .pictag-generated-batch-footer .pictag-v1835-group-copy { display: none !important; } /* ------------------------------------------------------------ LARGE / ULTRAWIDE DESKTOP Keep two columns and use essentially all remaining workspace. ------------------------------------------------------------ */ @media (min-width: 1900px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: calc(100vw - 690px) !important; max-width: none !important; min-width: 0 !important; position: relative !important; left: 0 !important; transform: none !important; column-gap: 26px !important; row-gap: 42px !important; margin: 14px 0 32px !important; padding: 0 !important; } } /* ------------------------------------------------------------ NORMAL DESKTOP If two genuinely large cards fit, keep two columns. Otherwise switch to one large column instead of shrinking. ------------------------------------------------------------ */ @media (min-width: 1400px) and (max-width: 1899px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat( auto-fit, minmax( min(620px, 100%), 1fr ) ) !important; width: calc(100vw - 680px) !important; max-width: none !important; min-width: 0 !important; position: relative !important; left: 0 !important; transform: none !important; column-gap: 24px !important; row-gap: 38px !important; margin: 14px 0 30px !important; } } /* ------------------------------------------------------------ SMALL DESKTOP / TABLET LANDSCAPE One large image per row. ------------------------------------------------------------ */ @media (min-width: 769px) and (max-width: 1399px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: 1fr !important; width: calc(100vw - 470px) !important; max-width: none !important; min-width: 0 !important; position: relative !important; left: 0 !important; transform: none !important; column-gap: 0 !important; row-gap: 34px !important; margin: 14px 0 28px !important; } } /* ------------------------------------------------------------ MOBILE Full-width generated images. ------------------------------------------------------------ */ @media (max-width: 768px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: 1fr !important; width: calc(100vw - 24px) !important; max-width: none !important; min-width: 0 !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; column-gap: 0 !important; row-gap: 28px !important; margin: 12px 0 24px !important; padding: 0 !important; } } /* ------------------------------------------------------------ IMAGE CARDS Always consume the entire responsive grid column. ------------------------------------------------------------ */ .pictag-generated-batch-card { width: 100% !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; } .pictag-generated-batch-card img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; object-fit: contain !important; border-radius: 11px !important; } /* ------------------------------------------------------------ PER IMAGE ACTIONS Download | Upscale | Edit | Tag ------------------------------------------------------------ */ .pictag-generated-batch-card .pictag-v1832-card-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: 10px 0 0 !important; gap: 8px !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ------------------------------------------------------------ GROUP FOOTER Tag All only. ------------------------------------------------------------ */ .pictag-generated-batch-footer { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin: -4px 0 0 !important; gap: 8px !important; } /* PICTAG_NATIVE_WORKSPACE_V1_8_36_LARGE_RESPONSIVE_GRID_END */ /* ============================================================ PICTAG_NATIVE_TOOLBAR_STARTUP_SPACING_FIX_20260901 ============================================================ */ @media (min-width: 769px) { /* Visible panel eyebrow */ #pictagToolPanel .pictag-tool-panel-eyebrow { text-transform: none !important; font-weight: 700 !important; } /* Funding -> prompt breathing room */ #pictagToolPanel .input-area { margin-top: 14px !important; } /* * Keep the area surrounding the textarea visually identical * to the detached dark panel. This removes the inherited * light-grey composer strip between textarea and Generate. */ #pictagToolPanel .input-area, #pictagToolPanel .input-container, #pictagToolPanel .input-wrapper, #pictagToolPanel .input-buttons { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; } } /* ============================================================ PICTAG_NATIVE_IMAGE_RESULTS_FINISH_V1838 ============================================================ */ @media (min-width: 769px) { /* * Funding -> prompt: * make #imageOptionsBar own the vertical spacing. */ #pictagToolPanel #imageOptionsBar { margin-bottom: 18px !important; } /* * Older workspace rules also gave the composer wrapper * its own margin. Remove that competition so the gap * above is deterministic. */ #pictagToolPanel .input-wrapper { margin-top: 0 !important; } /* * Requested Generate label size. */ #pictagToolPanel #sendBtn { font-size: 16px !important; } } /* * Safety for already-restored historical generated batches. * Source creation is removed below as well. */ .pictag-v1832-group-copy { display: none !important; } /* ============================================================ PICTAG_GENERATED_IMAGE_STABILITY_V1839 Active image-generation indicator ============================================================ */ body.pictag-image-generating::after { content: ""; position: fixed; z-index: 5000; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 3px solid rgba(215, 0, 83, .20); border-top-color: #d70053; border-right-color: rgba(215, 0, 83, .72); border-radius: 999px; box-sizing: border-box; box-shadow: 0 0 22px rgba(215, 0, 83, .22); pointer-events: none; animation: pictag-image-generation-spin-v1839 .72s linear infinite; } @keyframes pictag-image-generation-spin-v1839 { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body.pictag-image-generating::after { animation-duration: 1.8s; } } /* ============================================================ PICTAG_STABLE_GENERATED_GRID_V1841 ============================================================ */ @media (min-width: 769px) { .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; align-items: start !important; transition: none !important; animation: none !important; } .pictag-generated-batch-card { min-width: 0 !important; transition: none !important; animation: none !important; } .pictag-generated-batch-card img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; transition: none !important; animation: none !important; } } /* Mobile only: one column */ @media (max-width: 768px) { .pictag-generated-batch-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ------------------------------------------------------------ PER-IMAGE ACTION ROW Upscale | Edit | Download | Tag ------------------------------------------------------------ */ .pictag-v1832-card-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; white-space: nowrap !important; } .pictag-v1832-card-actions [data-pictag-action="upscale"] { order: 1 !important; } .pictag-v1832-card-actions [data-pictag-action="edit"] { order: 2 !important; } .pictag-v1832-card-actions [data-pictag-action="download"] { order: 3 !important; } .pictag-v1832-card-actions [data-pictag-action="tag"] { order: 4 !important; } /* ------------------------------------------------------------ BATCH FOOTER ------------------------------------------------------------ */ .pictag-generated-batch-footer { grid-column: 1 / -1 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* Copy is permanently suppressed */ .pictag-v1832-group-copy, [data-pictag-action="copy"] { display: none !important; } /* ============================================================ PICTAG_NATIVE_CHAT_RENDER_BRIDGE_V1842 ============================================================ */ /* * Generated-image actions are stable, always visible, and in * the requested final order. */ .pictag-generated-batch-card .pictag-v1832-card-actions { opacity: 1 !important; visibility: visible !important; } .pictag-generated-batch-card .pictag-v1832-card-actions [data-pictag-action="upscale"] { order: 1 !important; } .pictag-generated-batch-card .pictag-v1832-card-actions [data-pictag-action="edit"] { order: 2 !important; } .pictag-generated-batch-card .pictag-v1832-card-actions [data-pictag-action="download"] { order: 3 !important; } .pictag-generated-batch-card .pictag-v1832-card-actions [data-pictag-action="tag"] { order: 4 !important; } /* * Never show Copy inside generated-image batches. */ .pictag-generated-batch-grid button[data-pictag-action="copy"], .pictag-generated-batch-grid .pictag-v1832-group-copy { display: none !important; } /* ============================================================ PICTAG_AUTHORITATIVE_GENERATED_PIPELINE_V1843 Pending generation loader ============================================================ */ /* * v1.8.39 used a viewport-centred body spinner. * Disable it completely. */ body.pictag-image-generating::after { display: none !important; content: none !important; } /* * The loader now belongs to the actual pending generation * message and therefore stays with the generation itself. * * Position: * directly below the generating text, * left aligned with that text. */ body.pictag-image-generating .message.pictag-pending-image-message .message-text::after { content: ""; display: block; width: 28px; height: 28px; margin: 14px 0 2px 0; box-sizing: border-box; border: 3px solid rgba(215, 0, 83, .20); border-top-color: #d70053; border-right-color: rgba(215, 0, 83, .72); border-radius: 999px; box-shadow: 0 0 16px rgba(215, 0, 83, .18); animation: pictag-image-generation-spin-v1839 .72s linear infinite; } /* ============================================================ FINAL ACTION CONTRACT Upscale | Edit | Download | Tag ============================================================ */ .pictag-v1832-card-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; } .pictag-v1832-card-actions [data-pictag-action="upscale"] { order: 1 !important; } .pictag-v1832-card-actions [data-pictag-action="edit"] { order: 2 !important; } .pictag-v1832-card-actions [data-pictag-action="download"] { order: 3 !important; } .pictag-v1832-card-actions [data-pictag-action="tag"] { order: 4 !important; } /* ============================================================ PICTAG_ATOMIC_GENERATED_RESULTS_V1844 ============================================================ */ /* * Never show the raw/native generated-image state while * showChat() and the final generated-result pipeline settle. * * visibility preserves space without exposing intermediate * buttons/layouts. */ #messages.pictag-generated-render-pending .pictag-generated-image-message { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; animation: none !important; } #messages.pictag-generated-render-pending .pictag-generated-batch-grid { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transition: none !important; animation: none !important; } /* * Once ready, results appear directly in final form. */ #messages:not(.pictag-generated-render-pending) .pictag-generated-image-message, #messages:not(.pictag-generated-render-pending) .pictag-generated-batch-grid { visibility: visible; opacity: 1; } /* * Final permanent action line. */ .pictag-v1832-card-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; opacity: 1 !important; visibility: visible !important; } .pictag-v1832-card-actions [data-pictag-action="upscale"] { order: 1 !important; } .pictag-v1832-card-actions [data-pictag-action="edit"] { order: 2 !important; } .pictag-v1832-card-actions [data-pictag-action="download"] { order: 3 !important; } .pictag-v1832-card-actions [data-pictag-action="tag"] { order: 4 !important; } /* ============================================================ PICTAG_GENERATED_SINGLE_OWNER_V1849 Final generated-result presentation only. ============================================================ */ #messages .pictag-generated-batch-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; align-items: start !important; } #messages .pictag-generated-batch-card { min-width: 0 !important; } #messages .pictag-v1849-card-actions { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 8px !important; visibility: visible !important; opacity: 1 !important; } #messages .pictag-v1849-card-actions > .pictag-v1849-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; } #messages .pictag-v1849-batch-footer { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; visibility: visible !important; opacity: 1 !important; } @media (max-width: 768px) { #messages .pictag-generated-batch-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* END PICTAG_GENERATED_SINGLE_OWNER_V1849 */ /* ============================================================ PICTAG_GENERATED_CLEAN_STRUCTURE_V1850 ============================================================ */ #messages .pictag-generated-batch-grid[ data-pictag-generated-owner="1850" ] { display: grid !important; width: 100% !important; max-width: 1760px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; align-items: start !important; gap: 22px 22px !important; box-sizing: border-box !important; } #messages .pictag-generated-batch-grid[ data-pictag-generated-owner="1850" ] > .pictag-generated-batch-card { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; grid-column: auto !important; visibility: visible !important; opacity: 1 !important; } #messages .pictag-generated-batch-grid[ data-pictag-generated-owner="1850" ] .pictag-generated-batch-card .generated-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; } #messages .pictag-v1850-card-actions { display: flex !important; width: 100% !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 8px !important; margin-top: 10px !important; visibility: visible !important; opacity: 1 !important; } #messages .pictag-v1850-card-actions > button { display: inline-flex !important; flex: 0 0 auto !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; } #messages .pictag-generated-batch-grid[ data-pictag-generated-owner="1850" ] > .pictag-v1850-batch-footer { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; margin-top: 2px !important; } @media (max-width: 768px) { #messages .pictag-generated-batch-grid[ data-pictag-generated-owner="1850" ] { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } } /* END PICTAG_GENERATED_CLEAN_STRUCTURE_V1850 */ /* ============================================================ PICTAG_GENERATED_LAYOUT_V1851 Final result proportions and shared left alignment. Desktop: - result rail = 80% of previous available width - comfortable gutter from detached Toolbar - two-column batches remain two columns - a one-image batch occupies column 1 - text and Tag All share the same left edge Mobile: - retain near-full-width single-column behavior ============================================================ */ #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] { width: 80% !important; max-width: 1408px !important; margin-left: 32px !important; margin-right: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; column-gap: 24px !important; row-gap: 20px !important; justify-content: start !important; align-items: start !important; } #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] > .pictag-generated-batch-card { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; justify-self: start !important; align-self: start !important; grid-column: auto !important; } #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] > .pictag-generated-batch-card img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* * Tag All belongs to the complete batch and starts on the * exact same left edge as column 1. */ #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] > .pictag-v1850-batch-footer { grid-column: 1 / -1 !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; justify-content: flex-start !important; text-align: left !important; } /* * Text messages sitting between generated batches use the * same visual rail instead of floating in the middle. */ #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) { width: 80% !important; max-width: 1408px !important; margin-left: 32px !important; margin-right: auto !important; align-self: flex-start !important; text-align: left !important; } #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) .message-content, #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) .message-body, #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) .message-text { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* * Keep mobile behavior spacious and one-column. */ @media (max-width: 768px) { #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] { width: calc(100% - 32px) !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 18px !important; } #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) { width: calc(100% - 32px) !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; } } /* ============================================================ PICTAG_GENERATED_LAYOUT_PERSISTENCE_V1852 Generated image presentation must be identical whether the detached Toolbar is open, closed or switched to another mode. ============================================================ */ #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] { width: 80% !important; max-width: 1408px !important; margin-left: 32px !important; margin-right: auto !important; justify-content: start !important; align-items: start !important; } #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] > .pictag-generated-batch-card { justify-self: start !important; align-self: start !important; margin-left: 0 !important; margin-right: 0 !important; } #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] > .pictag-v1850-batch-footer { grid-column: 1 / -1 !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; text-align: left !important; } /* * Chat/user text between image batches follows the same visual * rail regardless of Toolbar state. */ #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) { width: 80% !important; max-width: 1408px !important; margin-left: 32px !important; margin-right: auto !important; align-self: flex-start !important; text-align: left !important; } #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) .message-content, #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) .message-body, #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) .message-text { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } @media (max-width: 768px) { #messages.pictag-generated-layout-active > .pictag-generated-batch-grid[data-pictag-generated-owner="1850"] { width: calc(100% - 32px) !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; } #messages.pictag-generated-layout-active > .message:not(.pictag-generated-image-message) { width: calc(100% - 32px) !important; max-width: none !important; margin-left: 16px !important; margin-right: 16px !important; } } /* END PICTAG_GENERATED_LAYOUT_PERSISTENCE_V1852 */