/* * AI Platform — Mobile responsive layer * Loaded last so mobile presentation is independent from the desktop grid. * Desktop layout is intentionally untouched. */ @media (min-width: 1200px) { .ai-platform-mobile-backdrop, .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle { display: none !important; } } @media (max-width: 1199px) { html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; } .ai-platform-generator.is-mobile-portal { position: fixed !important; left: 0 !important; top: var(--aip-mobile-top, 0px) !important; right: auto !important; width: 100vw !important; max-width: none !important; min-width: 0 !important; height: calc(100dvh - var(--aip-mobile-top, 0px)) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; z-index: 100000 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__app { display: block !important; position: relative !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Shared mobile workspace navigation. */ .ai-platform-mobile-backdrop { position: fixed !important; inset: 0 !important; z-index: 9990 !important; background: rgba(0,0,0,.30) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ai-platform-mobile-backdrop[hidden] { display: none !important; } .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle { position: fixed !important; top: 8px !important; z-index: 160 !important; width: 38px !important; height: 38px !important; padding: 0 !important; display: grid !important; place-items: center !important; border: 1px solid var(--aip-border) !important; border-radius: 9px !important; background: var(--aip-surface) !important; color: var(--aip-text) !important; font: inherit !important; font-size: 19px !important; line-height: 1 !important; box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; cursor: pointer !important; } .ai-platform-mobile-workspace-toggle { } .ai-platform-mobile-history-toggle { right: 8px !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar { position: absolute !important; top: 0 !important; height: 100% !important; z-index: 150 !important; box-shadow: 10px 0 26px rgba(0,0,0,.26) !important; } .ai-platform-generator__sidebar { display: none !important; } .ai-platform-generator__sidebar .ai-platform-generator__workspace-item span:last-of-type { display: none !important; } .ai-platform-generator__sidebar .ai-platform-generator__workspace-item { justify-content: center !important; } /* Chat mobile presentation. */ .ai-platform-generator.is-mobile-portal .ai-platform-generator__main { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; grid-column: auto !important; grid-row: auto !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__topbar { flex: 0 0 58px !important; width: 100% !important; min-height: 58px !important; box-sizing: border-box !important; padding: 6px 54px 6px 54px !important; justify-content: center !important; border-bottom: 1px solid var(--aip-border) !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__model-wrap { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__model-label { display: none !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker { width: 100% !important; min-width: 0 !important; max-width: none !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker__trigger { width: 100% !important; min-width: 0 !important; min-height: 46px !important; padding: 5px 34px 5px 8px !important; gap: 8px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker__trigger-icon { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker__trigger-copy { min-width: 0 !important; overflow: hidden !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker__trigger-copy strong { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 12px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker__trigger-copy small { display: none !important; } .ai-platform-generator.is-mobile-portal .ai-platform-model-picker__trigger-cost { flex: 0 0 auto !important; max-width: 78px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 10px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__messages { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; box-sizing: border-box !important; overflow-y: auto !important; padding: 18px 12px 130px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__empty-inner { max-width: 340px !important; padding: 0 14px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__empty h2 { font-size: 27px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__empty p { font-size: 13px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__composer-wrap { flex: 0 0 auto !important; width: 100% !important; box-sizing: border-box !important; padding: 0 12px 12px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__composer { width: 100% !important; max-width: none !important; margin: 0 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__composer-note { display: none !important; } /* Chat history becomes a right-side drawer instead of disappearing. */ .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel { position:absolute !important; right:0 !important; left:auto !important; top:0 !important; bottom:0 !important; width:min(320px, 88vw) !important; height:100% !important; z-index:150 !important; box-shadow:-12px 0 30px rgba(0,0,0,.28) !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel .ai-platform-generator__chat-history-header { min-height:58px !important; } .ai-platform-generator__chat-history-panel { display:none !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel { } /* Image and Video: one vertical flow so Result and History never compete for columns. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-view, .ai-platform-generator.is-mobile-portal .ai-platform-video-view, .ai-platform-generator.is-mobile-portal .ai-platform-voice-view { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:20 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-music-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar { flex:0 0 auto !important; min-height:58px !important; padding:12px 54px 12px 52px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-body, .ai-platform-generator.is-mobile-portal .ai-platform-video-body, .ai-platform-generator.is-mobile-portal .ai-platform-voice-body { display:grid !important; grid-template-columns:1fr !important; grid-auto-rows:max-content !important; gap:14px !important; align-content:start !important; flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; padding:14px 12px 24px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-controls, .ai-platform-generator.is-mobile-portal .ai-platform-video-controls, .ai-platform-generator.is-mobile-portal .ai-platform-voice-controls { min-width:0 !important; width:100% !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-result-wrap, .ai-platform-generator.is-mobile-portal .ai-platform-video-result-wrap, .ai-platform-generator.is-mobile-portal .ai-platform-voice-result-wrap { min-width:0 !important; width:100% !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-result, .ai-platform-generator.is-mobile-portal .ai-platform-video-result, .ai-platform-generator.is-mobile-portal .ai-platform-voice-result { min-width:0 !important; width:100% !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-result-img { max-width:100% !important; max-height:none !important; height:auto !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-portal .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-portal .ai-platform-voice-history-panel { grid-column:1 !important; grid-row:auto !important; min-width:0 !important; width:100% !important; max-height:420px !important; min-height:220px !important; overflow:hidden !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__image-history, .ai-platform-generator.is-mobile-portal .ai-platform-generator__video-history { min-height:0 !important; overflow:auto !important; } /* Keep the workspace menu usable without moving the page. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle { left:84px !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle { right:84px !important; } } /* v0.8.6 Mobile Stable — consolidated overrides */ @media (min-width: 1200px) { .ai-platform-mobile-history-close{display:none !important;} } @media (max-width: 1199px) { html, body { overflow-x: hidden !important; } /* WordPress/admin toolbar-safe mobile controls. JS updates --aip-mobile-top. */ .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice { position: fixed !important; top: calc(var(--aip-mobile-top, 0px) + 8px) !important; z-index: 100110 !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } .ai-platform-mobile-workspace-toggle { left: 8px !important; right: auto !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice { } /* Workspace/history controls animate with the drawer. */ .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice { transition: transform .20s cubic-bezier(.22,.8,.24,1), opacity .15s ease, background-color .15s ease !important; will-change: transform, opacity; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle { transform: translateX(4px) !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle { transform: translateX(-4px) !important; } /* History drawer must sit above the floating menu button on Tab/mobile. */ .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-mobile-workspace-toggle { z-index: 99990 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-history-toggle--video { z-index: 99990 !important; } /* Workspace drawer: clear overlay, no backdrop/blur. */ .ai-platform-mobile-backdrop, .ai-platform-mobile-backdrop[hidden] { display: none !important; pointer-events: none !important; opacity: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ai-platform-generator__sidebar { transform: translateX(-100%) !important; transition: transform .20s cubic-bezier(.22,.8,.24,1) !important; will-change: transform; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar { transform: translateX(0) !important; display: flex !important; position: fixed !important; left: 0 !important; top: var(--aip-mobile-top, 0px) !important; bottom: 0 !important; width: 76px !important; height: calc(100dvh - var(--aip-mobile-top, 0px)) !important; z-index: 100100 !important; } /* History is always a right-side drawer on mobile. */ .ai-platform-generator__chat-history-panel, .ai-platform-image-history-panel, .ai-platform-video-history-panel, .ai-platform-voice-history-panel { position: fixed !important; top: var(--aip-mobile-top, 0px) !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(320px, 88vw) !important; height: calc(100dvh - var(--aip-mobile-top, 0px)) !important; max-height: none !important; min-height: 0 !important; z-index: 100100 !important; overflow: auto !important; background: var(--aip-surface-2) !important; border-left: 1px solid var(--aip-border) !important; border-right: 0 !important; border-radius: 0 !important; box-shadow: -18px 0 40px rgba(0,0,0,.35) !important; transition: transform .20s cubic-bezier(.22,.8,.24,1), opacity .15s ease !important; will-change: transform, opacity; pointer-events: auto !important; } .ai-platform-generator__chat-history-panel, .ai-platform-image-history-panel, .ai-platform-video-history-panel, .ai-platform-voice-history-panel { transform: translateX(100%) !important; opacity: .98 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel { } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-history-toggle--video { display: none !important; } .ai-platform-generator__chat-history-header, .ai-platform-image-history-header, .ai-platform-video-history-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; position: sticky !important; top: 0 !important; z-index: 2 !important; min-height: 58px !important; padding: 12px 14px !important; background: var(--aip-surface-2) !important; border-bottom: 1px solid var(--aip-border) !important; box-sizing: border-box !important; } .ai-platform-image-history-tools, .ai-platform-video-history-tools { display: flex !important; align-items: center !important; gap: 6px !important; margin-left: auto !important; } /* Mobile Chat History content. */ .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-content { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-toolbar { display: flex !important; visibility: visible !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chats { display: block !important; flex: 1 1 auto !important; min-height: 120px !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; visibility: visible !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-item-wrap { display: flex !important; visibility: visible !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-item { display: block !important; visibility: visible !important; opacity: 1 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__new, .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__new { width: 100% !important; min-height: 44px !important; margin: 0 0 12px !important; box-sizing: border-box !important; border-radius: 10px !important; text-align: left !important; } /* Mobile account menu opens inward from the workspace rail. */ .ai-platform-generator__account-menu { position: fixed !important; left: 84px !important; right: auto !important; bottom: 8px !important; top: auto !important; width: min(290px, calc(100vw - 92px)) !important; max-height: calc(100dvh - 16px) !important; overflow: auto !important; transform-origin: left bottom !important; z-index: 100160 !important; } /* Keep result/history images clean on narrow screens. */ .ai-platform-generator__image-history-item img, .ai-platform-image-result-card img { display: block !important; max-width: 100% !important; height: auto !important; object-fit: cover !important; } /* Credit/Billing dialogs sit above every mobile drawer. */ .ai-platform-generator__credit-modal, .ai-platform-generator__billing-modal { z-index: 100200 !important; } .ai-platform-generator__credit-modal-dialog, .ai-platform-generator__billing-modal-dialog { z-index: 100201 !important; } } @media(max-width:520px){ /* History drawer: full-screen mobile sheet. It must cover the entire AI workspace, not leave the underlying Image/Video controls exposed beside or below the drawer. */ .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel{ position:fixed !important; inset:var(--aip-mobile-top, 0px) 0 0 0 !important; width:100vw !important; max-width:none !important; min-width:100vw !important; height:calc(100dvh - var(--aip-mobile-top, 0px)) !important; max-height:none !important; min-height:0 !important; margin:0 !important; border-left:0 !important; border-radius:0 !important; box-sizing:border-box !important; z-index:100100 !important; overflow:auto !important; } /* Keep the drawer animation full-width. */ .ai-platform-generator__chat-history-panel, .ai-platform-image-history-panel, .ai-platform-video-history-panel, .ai-platform-voice-history-panel{ width:100vw !important; max-width:none !important; min-width:100vw !important; right:0 !important; left:0 !important; box-sizing:border-box !important; transform:translateX(100%) !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel{ transform:translateX(0) !important; } } @media(max-width:520px){ /* White document + clock history icon. */ .ai-platform-mobile-history-icon{ display:block !important; width:20px !important; height:20px !important; color:#fff !important; flex:0 0 20px !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ } /* Image / Video top bars: title + description stack naturally. The corner buttons are fixed outside this flow. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar{ position:relative !important; display:block !important; flex:0 0 auto !important; min-height:86px !important; padding:14px 54px 10px 50px !important; box-sizing:border-box !important; text-align:left !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar > div, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar > div{ display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; text-align:left !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-title, .ai-platform-generator.is-mobile-portal .ai-platform-video-title{ display:block !important; margin:0 !important; line-height:1.12 !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-subtitle, .ai-platform-generator.is-mobile-portal .ai-platform-video-subtitle{ display:block !important; margin:7px 0 0 !important; max-width:100% !important; line-height:1.45 !important; text-align:left !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ position:absolute !important; left:50px !important; bottom:9px !important; font-size:10px !important; line-height:1 !important; } /* Corner controls stay at the top edge and never participate in the title/description alignment. */ .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ top:8px !important; transform:none !important; } .ai-platform-mobile-workspace-toggle{ left:8px !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ } } @media(max-width:520px){ /* Force the history control to render our page+clock glyph. Remove any theme/plugin pseudo content or text that could replace it. */ .ai-platform-mobile-history-toggle::before, .ai-platform-mobile-history-toggle::after, .ai-platform-mobile-history-toggle--image::before, .ai-platform-mobile-history-toggle--image::after, .ai-platform-mobile-history-toggle--video::before, .ai-platform-mobile-history-toggle--video::after, .ai-platform-mobile-history-toggle--voice::after{ content:none !important; display:none !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ font-size:0 !important; line-height:0 !important; text-indent:0 !important; color:#fff !important; } .ai-platform-mobile-history-glyph{ position:relative !important; display:block !important; width:23px !important; height:23px !important; color:#fff !important; flex:0 0 23px !important; } .ai-platform-mobile-history-page{ position:absolute !important; left:2px !important; top:1px !important; width:14px !important; height:19px !important; border:2px solid #fff !important; border-radius:2px !important; box-sizing:border-box !important; } .ai-platform-mobile-history-page::before{ content:"" !important; position:absolute !important; left:2px !important; top:4px !important; width:8px !important; height:2px !important; background:#fff !important; border-radius:2px !important; box-shadow:0 4px 0 #fff !important; } .ai-platform-mobile-history-clock{ position:absolute !important; right:0 !important; bottom:0 !important; display:block !important; width:10px !important; height:10px !important; border:2px solid #fff !important; border-radius:50% !important; background:var(--aip-surface) !important; box-sizing:border-box !important; } .ai-platform-mobile-history-clock::before{ content:"" !important; position:absolute !important; left:3px !important; top:1px !important; width:2px !important; height:4px !important; background:#fff !important; border-radius:2px !important; } .ai-platform-mobile-history-clock::after{ content:"" !important; position:absolute !important; left:3px !important; top:4px !important; width:4px !important; height:2px !important; background:#fff !important; border-radius:2px !important; transform:rotate(25deg) !important; transform-origin:left center !important; } } @media(max-width:520px){ /* Final explicit history icon override. This is a background SVG so no theme/font/icon rule can replace it with the old hamburger glyph. */ .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%3Cpath%20d%3D%22M5%203.5h9l4.5%204.5v12H5z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M14%203.5V8h4.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M7.5%2011h6M7.5%2014h4.5%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Ccircle%20cx%3D%2216.5%22%20cy%3D%2216.5%22%20r%3D%223.2%22%20fill%3D%22%231f2022%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%2F%3E%0A%3Cpath%20d%3D%22M16.5%2014.9v1.8l1.1.7%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:24px 24px !important; } .ai-platform-mobile-history-toggle > *, .ai-platform-mobile-history-toggle--image > *, .ai-platform-mobile-history-toggle--video > *, .ai-platform-mobile-history-toggle--voice > *{ display:none !important; } } @media(max-width:520px){ /* Workspace menu: transparent click-catcher over the rest of the viewport. No dimming/blur; the sidebar remains the only visible drawer. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-backdrop{ display:block !important; position:fixed !important; z-index:100090 !important; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Hide the top menu button while the workspace sidebar is open. */ /* Sidebar stays above the click-catcher and remains fully interactive. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar{ } /* Prevent the invisible backdrop from covering the sidebar. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar{ clip-path:none !important; } } @media(max-width:520px){ /* Workspace sidebar animation + dim backdrop. */ .ai-platform-generator__sidebar{ transform:translateX(-100%) !important; transition:transform .24s cubic-bezier(.22,.8,.24,1) !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar{ transform:translateX(0) !important; } /* The backdrop is transparent to the sidebar but slightly darkens the rest of the page and fades with the drawer. */ .ai-platform-mobile-backdrop{ position:fixed !important; inset:var(--aip-mobile-top, 0px) 0 0 0 !important; z-index:100090 !important; background:rgba(0,0,0,.22) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .24s ease, visibility .24s ease !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-backdrop{ } /* Keep the sidebar above the dim layer and keep its own controls clickable. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar{ z-index:100100 !important; } /* Workspace toggle stays out of the way while the drawer is open. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle{ display:none !important; pointer-events:none !important; } } @media(max-width:520px){ /* FINAL MOBILE LAYER Keep the workspace rail in the render tree while closed so transform transitions can actually animate. Keep History above the rail. */ .ai-platform-generator__sidebar{ display:flex !important; position:fixed !important; left:0 !important; top:var(--aip-mobile-top, 0px) !important; bottom:0 !important; width:76px !important; height:calc(100dvh - var(--aip-mobile-top, 0px)) !important; z-index:100050 !important; transform:translate3d(-100%,0,0) !important; transition:transform .26s cubic-bezier(.22,.8,.24,1) !important; will-change:transform !important; pointer-events:none !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar{ transform:translate3d(0,0,0) !important; pointer-events:auto !important; z-index:100050 !important; } /* Transparent/dimmed click catcher stays between content and sidebar. */ .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-backdrop{ z-index:100040 !important; inset:var(--aip-mobile-top, 0px) 0 0 76px !important; background:rgba(0,0,0,.22) !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transition:opacity .26s ease, visibility .26s ease !important; } /* History drawers must always win over the workspace rail. */ .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel{ z-index:100200 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-history-toggle--video, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-mobile-history-toggle--voice, .ai-platform-mobile-history-toggle--voice{ z-index:100210 !important; } /* Menu toggle sits below a full-screen history drawer. */ .ai-platform-mobile-workspace-toggle{ z-index:100060 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-mobile-workspace-toggle{ z-index:100060 !important; } /* Ensure the history drawer's own content is above any fixed controls. */ .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel *, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel *, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel *{ position:relative; z-index:auto; } } @media(max-width:520px){ /* Image/Video status mirrors Chat: top-right, immediately left of History. */ .ai-platform-image-topbar, .ai-platform-video-topbar{ position:relative !important; min-height:96px !important; padding-top:14px !important; padding-bottom:22px !important; } .ai-platform-image-topbar > div, .ai-platform-video-topbar > div{ padding-right:86px !important; } .ai-platform-image-status, .ai-platform-video-status{ position:absolute !important; left:auto !important; right:56px !important; top:16px !important; bottom:auto !important; display:inline-flex !important; align-items:center !important; gap:6px !important; font-size:10px !important; line-height:1 !important; white-space:nowrap !important; z-index:170 !important; } } /* v0.8.8 Fix4 — Keep the standalone AIGC sidebar icon visible on mobile. */ @media(max-width:520px){ .ai-platform-generator__brand-mark{ display:flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; margin:0 auto !important; padding:0 !important; border:0 !important; background:transparent !important; overflow:visible !important; } .ai-platform-generator__brand-mark img{ display:block !important; width:40px !important; height:40px !important; max-width:40px !important; max-height:40px !important; object-fit:contain !important; background:transparent !important; } .ai-platform-generator__workspace-home, .ai-platform-generator__workspace-home:hover, .ai-platform-generator__workspace-home:focus, .ai-platform-generator__workspace-home:active{ text-decoration:none !important; } } /* v0.8.8 Fix21 — define the three workspace layouts: phone, tab, desktop. */ @media (min-width: 521px) and (max-width: 1199px){ /* Keep Chat Ready visible beside the fixed History button. */ .ai-platform-generator.is-mobile-portal .ai-platform-generator__status{ right: 56px !important; z-index: 170 !important; white-space: nowrap !important; } /* Match Image/Video status with Chat: green dot + text. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; margin-left:auto !important; margin-right:56px !important; white-space:nowrap !important; z-index:170 !important; } } /* Keep the compact status controls clear of the fixed History button. */ @media (max-width: 1199px){ .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-status, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-status, .ai-platform-generator.is-mobile-history-open .ai-platform-generator__status{ z-index:100 !important; } /* Image/Video use the same green-ready indicator as Chat. */ .ai-platform-image-status::before, .ai-platform-video-status::before{ content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#10b981; } .ai-platform-image-status.is-working::before, .ai-platform-video-status.is-working::before{ background:#f59e0b; } .ai-platform-image-status.is-error::before, .ai-platform-video-status.is-error::before{ background:#ef4444; } } /* v0.8.8 Fix19 — unify all <1200px workspace history behavior with the mobile template. */ @media (max-width: 1199px) { /* Image must occupy the full workspace viewport; never reserve the desktop rail. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-view, .ai-platform-generator.is-mobile-portal .ai-platform-video-view { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* History buttons use the same icon treatment at every compact width. */ .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice { font-size: 0 !important; line-height: 0 !important; color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h9l4.5 4.5v12H5z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5V8h4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M7.5 11h6M7.5 14h4.5' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='16.5' cy='16.5' r='3.2' fill='%231f2022' stroke='%23fff' stroke-width='1.7'/%3E%3Cpath d='M16.5 14.9v1.8l1.1.7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important; } .ai-platform-mobile-history-toggle > *, .ai-platform-mobile-history-toggle--image > *, .ai-platform-mobile-history-toggle--video > * { display: none !important; } /* History is a true full-screen drawer and always sits above the rail and top controls. */ .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel { position: fixed !important; inset: var(--aip-mobile-top, 0px) 0 0 0 !important; width: 100vw !important; max-width: none !important; min-width: 100vw !important; height: calc(100dvh - var(--aip-mobile-top, 0px)) !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 14px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 0 !important; z-index: 100300 !important; overflow: hidden !important; background: var(--aip-surface-2) !important; box-shadow: none !important; transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important; } .ai-platform-generator__chat-history-panel, .ai-platform-image-history-panel, .ai-platform-video-history-panel, .ai-platform-voice-history-panel { z-index: 100300 !important; } /* Keep the entire history header inside the drawer, including its close button. */ .ai-platform-generator__chat-history-header, .ai-platform-image-history-header, .ai-platform-video-history-header, .ai-platform-voice-history-header { flex: 0 0 auto !important; position: sticky !important; top: 0 !important; z-index: 3 !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-history-toggle--video, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-mobile-history-toggle--voice, .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-workspace-toggle { z-index: 100 !important; } /* Video history: compact card grid instead of tall full-width previews. */ .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; align-content: start !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px !important; } .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-item { min-width: 0 !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box !important; } .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-thumb { width: 100% !important; aspect-ratio: 16 / 9 !important; } .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-info { padding-top: 5px !important; min-width: 0 !important; } .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-title, .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-meta, .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-prompt { font-size: 9px !important; } .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-actions { gap: 4px !important; margin-top: 5px !important; } .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history-actions button { min-width: 0 !important; padding: 4px 5px !important; font-size: 8px !important; } } @media (max-width: 700px) { .ai-platform-generator.is-mobile-video-history-open .ai-platform-generator__video-history { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* v0.8.8 Fix20 — compact Image routing + reliable History drawer state. */ @media (max-width:1199px) { /* Image has older :has() rules with higher specificity that reserve the desktop/chat rail. Explicitly override them for the compact portal. */ .ai-platform-generator.is-mobile-portal:has([data-mode="image"].is-active) .ai-platform-image-view, .ai-platform-generator.is-mobile-portal .ai-platform-image-view { left:0 !important; right:0 !important; width:100vw !important; max-width:none !important; min-width:0 !important; margin:0 !important; } .ai-platform-generator.is-mobile-portal:has([data-mode="video"].is-active) .ai-platform-video-view, .ai-platform-generator.is-mobile-portal .ai-platform-video-view { left:0 !important; right:0 !important; width:100vw !important; max-width:none !important; min-width:0 !important; margin:0 !important; } .ai-platform-generator.is-mobile-portal:has([data-mode="voice"].is-active) .ai-platform-voice-view, .ai-platform-generator.is-mobile-portal .ai-platform-voice-view { left:0 !important; right:0 !important; width:100vw !important; max-width:none !important; min-width:0 !important; margin:0 !important; } /* Closed drawers must actually leave the viewport. Fix19 made the drawer transform always zero, which prevented selection/close from taking effect. */ .ai-platform-generator__chat-history-panel, .ai-platform-image-history-panel, .ai-platform-video-history-panel, .ai-platform-voice-history-panel { transform:translateX(100%) !important; opacity:.98 !important; visibility:visible !important; pointer-events:none !important; } .ai-platform-generator.is-mobile-history-open .ai-platform-generator__chat-history-panel, .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel { transform:translateX(0) !important; opacity:1 !important; pointer-events:auto !important; } } /* v0.8.8 Fix22 — final status override; prevent duplicate/offset compact status rendering. */ @media (max-width:1199px){ .ai-platform-image-status::before, .ai-platform-video-status::before{ content:"" !important; width:7px !important; height:7px !important; flex:0 0 7px !important; border-radius:50% !important; background:#10b981 !important; } .ai-platform-image-status.is-working::before, .ai-platform-video-status.is-working::before{background:#f59e0b !important;} .ai-platform-image-status.is-error::before, .ai-platform-video-status.is-error::before{background:#ef4444 !important;} } /* v0.8.8 Fix23 — definitive phone/tab status placement. */ @media (max-width:1199px){ .ai-platform-generator .ai-platform-image-topbar, .ai-platform-generator .ai-platform-video-topbar{ position:relative !important; overflow:visible !important; } /* Keep the title/description clear of the fixed History control. */ .ai-platform-generator .ai-platform-image-topbar > div, .ai-platform-generator .ai-platform-video-topbar > div{ min-width:0 !important; max-width:100% !important; } .ai-platform-generator .ai-platform-image-status, .ai-platform-generator .ai-platform-video-status{ position:absolute !important; top:16px !important; right:56px !important; left:auto !important; bottom:auto !important; transform:none !important; display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; margin:0 !important; white-space:nowrap !important; max-width:calc(100% - 142px) !important; overflow:hidden !important; text-overflow:ellipsis !important; z-index:180 !important; } .ai-platform-generator .ai-platform-image-status::before, .ai-platform-generator .ai-platform-video-status::before{ content:"" !important; width:7px !important; height:7px !important; flex:0 0 7px !important; border-radius:50% !important; background:#10b981 !important; } .ai-platform-generator .ai-platform-image-status.is-working::before, .ai-platform-generator .ai-platform-video-status.is-working::before{background:#f59e0b !important;} .ai-platform-generator .ai-platform-image-status.is-error::before, .ai-platform-generator .ai-platform-video-status.is-error::before{background:#ef4444 !important;} } @media (min-width:521px) and (max-width:1199px){ /* Tab: keep Image/Video Ready slightly below the title/description line, but not as low as the phone layout. */ .ai-platform-generator .ai-platform-image-topbar, .ai-platform-generator .ai-platform-video-topbar{ min-height:64px !important; } .ai-platform-generator .ai-platform-image-status, .ai-platform-generator .ai-platform-video-status{ top:calc(50% - 7px) !important; transform:translateY(-50%) !important; right:56px !important; } /* Reserve room so the status never collides with the title area. */ .ai-platform-generator .ai-platform-image-topbar > div, .ai-platform-generator .ai-platform-video-topbar > div{ padding-right:150px !important; } } @media (max-width:520px){ /* Phone: keep Ready on the top-right, clear of title/subtitle and History. */ .ai-platform-generator .ai-platform-image-topbar, .ai-platform-generator .ai-platform-video-topbar{ min-height:92px !important; padding-right:96px !important; } .ai-platform-generator .ai-platform-image-topbar > div, .ai-platform-generator .ai-platform-video-topbar > div{ padding-right:0 !important; } .ai-platform-generator .ai-platform-image-status, .ai-platform-generator .ai-platform-video-status{ top:16px !important; right:56px !important; max-width:88px !important; } } /* v0.8.8 Fix24 — definitive phone Image/Video Ready positioning. Keep the status on the top-right, clear of the title/description and the fixed History button. This intentionally overrides older mobile-portal rules that placed the status at the bottom-left. */ @media (max-width:520px){ .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ position:fixed !important; top:16px !important; right:56px !important; left:auto !important; bottom:auto !important; transform:none !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; max-width:88px !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; z-index:2147483002 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status::before, .ai-platform-generator.is-mobile-portal .ai-platform-video-status::before{ content:"" !important; width:7px !important; height:7px !important; flex:0 0 7px !important; border-radius:50% !important; background:#10b981 !important; } } /* v0.8.9 Workspace History Drawer Font Size — mobile + tab */ @media (max-width:1199px) { .ai-platform-generator__chat-history-panel, .ai-platform-image-history-panel, .ai-platform-video-history-panel, .ai-platform-voice-history-panel { font-size: 13px !important; } .ai-platform-generator__chat-history-header, .ai-platform-image-history-header, .ai-platform-video-history-header { font-size: 15px !important; } .ai-platform-generator__chat-history-content .ai-platform-generator__sidebar-title, .ai-platform-generator__chat-history-toolbar .ai-platform-generator__sidebar-title { font-size: 13px !important; } .ai-platform-generator__chat-item { font-size: 14px !important; line-height: 1.45 !important; } .ai-platform-generator__chat-item-actions button { font-size: 12px !important; } .ai-platform-generator__chat-search { font-size: 13px !important; } .ai-platform-generator__history-empty { font-size: 12px !important; } .ai-platform-generator__image-history-prompt { font-size: 13px !important; line-height: 1.4 !important; } .ai-platform-generator__image-history-meta, .ai-platform-generator__image-history-delete { font-size: 11px !important; } .ai-platform-generator__video-history-title { font-size: 13px !important; } .ai-platform-generator__video-history-meta, .ai-platform-generator__video-history-prompt { font-size: 11px !important; line-height: 1.4 !important; } .ai-platform-generator__video-history-actions button { font-size: 11px !important; } .ai-platform-video-history-search input { font-size: 13px !important; } } /* v0.8.9 Mobile/Tab navigation visual polish. * Phone + Tab use the same branded compact controls as the Homepage CTA. * Desktop navigation is intentionally untouched. */ @media (max-width:1199px){ .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ --aip-nav-bg: rgba(8,12,20,.96); --aip-nav-border-cyan: #2bd9ff; --aip-nav-border-blue: #246bff; --aip-nav-border-purple: #7b3ff2; --aip-nav-border-pink: #ff2fb3; --aip-nav-border-orange: #ff9a3c; position: fixed !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 10px !important; background: linear-gradient(var(--aip-nav-bg),var(--aip-nav-bg)) padding-box, linear-gradient(120deg, var(--aip-nav-border-cyan) 0%, var(--aip-nav-border-blue) 24%, var(--aip-nav-border-purple) 48%, var(--aip-nav-border-pink) 74%, var(--aip-nav-border-orange) 100%) border-box !important; color:#f8fafc !important; box-shadow:0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; z-index:100210 !important; } .ai-platform-mobile-workspace-toggle:hover, .ai-platform-mobile-history-toggle:hover, .ai-platform-mobile-history-toggle--image:hover, .ai-platform-mobile-history-toggle--video:hover{ background: linear-gradient(rgba(12,18,30,.98),rgba(12,18,30,.98)) padding-box, linear-gradient(120deg, var(--aip-nav-border-cyan) 0%, var(--aip-nav-border-blue) 24%, var(--aip-nav-border-purple) 48%, var(--aip-nav-border-pink) 74%, var(--aip-nav-border-orange) 100%) border-box !important; box-shadow:0 10px 26px rgba(0,0,0,.34), 0 0 16px rgba(83,83,255,.14) !important; } .ai-platform-mobile-workspace-toggle:focus, .ai-platform-mobile-workspace-toggle:focus-visible, .ai-platform-mobile-history-toggle:focus, .ai-platform-mobile-history-toggle:focus-visible, .ai-platform-mobile-history-toggle--image:focus, .ai-platform-mobile-history-toggle--image:focus-visible, .ai-platform-mobile-history-toggle--video:focus, .ai-platform-mobile-history-toggle--video:focus-visible{ outline:none !important; box-shadow:0 10px 26px rgba(0,0,0,.34), 0 0 0 2px rgba(43,217,255,.12), 0 0 18px rgba(123,63,242,.16) !important; } /* The compact workspace sidebar keeps the same visual weight as the branded navigation controls without changing its geometry. */ .ai-platform-generator__sidebar{ background:#0a0f18 !important; border-right:1px solid rgba(120,150,190,.24) !important; box-shadow:14px 0 32px rgba(0,0,0,.38) !important; opacity:1 !important; } .ai-platform-generator__sidebar .ai-platform-generator__workspace-item{ color:#e6edf7 !important; } .ai-platform-generator__sidebar .ai-platform-generator__workspace-item:hover, .ai-platform-generator__sidebar .ai-platform-generator__workspace-item:focus-visible{ background:rgba(67,98,150,.16) !important; } .ai-platform-generator__sidebar .ai-platform-generator__workspace-item.is-active, .ai-platform-generator__sidebar .ai-platform-generator__workspace-item[aria-current="page"]{ background:rgba(86,65,160,.18) !important; box-shadow:inset 2px 0 0 #8a45ff !important; } } /* v0.8.9 mobile/tab history controls final alignment + icon override */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-generator__topbar, .ai-platform-image-topbar, .ai-platform-video-topbar{ position:relative !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ border-radius:10px !important; border:1px solid transparent !important; color:#fff !important; box-shadow:0 0 0 1px rgba(33,212,253,.05),0 8px 22px rgba(0,0,0,.22) !important; overflow:hidden !important; } .ai-platform-mobile-history-toggle:hover, .ai-platform-mobile-history-toggle--image:hover, .ai-platform-mobile-history-toggle--video:hover{ box-shadow:0 0 18px rgba(91,76,255,.18),0 8px 22px rgba(0,0,0,.22) !important; } /* Reliable History controls: preserve the branded button surface and draw the history glyph independently so the icon cannot replace the gradient-border background. */ .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ font-size:0 !important; line-height:0 !important; text-indent:-9999px !important; background: linear-gradient(#101722,#101722) padding-box, linear-gradient(135deg,#21d4fd 0%,#2f80ff 35%,#7b2cff 60%,#ff2ca3 82%,#ff9a3d 100%) border-box !important; background-repeat:no-repeat !important; background-position:center !important; background-size:100% 100% !important; z-index:100230 !important; } .ai-platform-mobile-history-toggle::before, .ai-platform-mobile-history-toggle--image::before, .ai-platform-mobile-history-toggle--video::before{ content:""; display:block; width:22px; height:22px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h9l4.5 4.5v12H5z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5V8h4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M7.5 11h6M7.5 14h4.5' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='16.5' cy='16.5' r='3.2' fill='%23101722' stroke='%23fff' stroke-width='1.7'/%3E%3Cpath d='M16.5 14.9v1.8l1.1.7' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 22px no-repeat; } .ai-platform-mobile-history-toggle > *, .ai-platform-mobile-history-toggle--image > *, .ai-platform-mobile-history-toggle--video > *, .ai-platform-mobile-history-toggle--voice > *{ display:none !important; } /* Keep Image / Video titles centered on phone + tab headers. */ .ai-platform-image-topbar > div, .ai-platform-video-topbar > div{ width:100% !important; text-align:center !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-title, .ai-platform-generator.is-mobile-portal .ai-platform-video-title{ } .ai-platform-generator.is-mobile-portal .ai-platform-image-subtitle, .ai-platform-generator.is-mobile-portal .ai-platform-video-subtitle{ margin-left:auto !important; margin-right:auto !important; max-width:70% !important; } /* Do not move the history control with the drawer animation. */ .ai-platform-generator.is-mobile-history-open .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-image-history-open .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-video-history-open .ai-platform-mobile-history-toggle--video, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-mobile-history-toggle--voice, .ai-platform-mobile-history-toggle--voice{ transform:translateY(-50%) !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix4 — stable header history controls. */ @media (max-width: 1199px) { /* Keep the header controls inside their actual tool header and vertically centered. */ .ai-platform-generator__topbar, .ai-platform-image-topbar, .ai-platform-video-topbar { position: relative !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice { position: absolute !important; top: 50% !important; right: 8px !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 30 !important; display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 9px !important; background: linear-gradient(var(--aip-surface), var(--aip-surface)) padding-box, linear-gradient(135deg, #25c8ff 0%, #4656ff 34%, #7a2cff 56%, #ef2ccf 78%, #ff9e3b 100%) border-box !important; color: var(--aip-text) !important; box-shadow: 0 6px 16px rgba(0,0,0,.22) !important; overflow: visible !important; } /* Do not rely on a font/icon glyph. Render the history icon from the existing markup. */ .ai-platform-mobile-history-toggle::before, .ai-platform-mobile-history-toggle::after, .ai-platform-mobile-history-toggle--image::before, .ai-platform-mobile-history-toggle--image::after, .ai-platform-mobile-history-toggle--video::before, .ai-platform-mobile-history-toggle--video::after { content: none !important; display: none !important; } .ai-platform-mobile-history-glyph { position: relative !important; display: block !important; width: 23px !important; height: 23px !important; flex: 0 0 23px !important; color: #fff !important; } .ai-platform-mobile-history-page { position: absolute !important; left: 2px !important; top: 1px !important; width: 14px !important; height: 19px !important; border: 2px solid currentColor !important; border-radius: 2px !important; box-sizing: border-box !important; } .ai-platform-mobile-history-page::before { content: "" !important; position: absolute !important; left: 2px !important; top: 4px !important; width: 8px !important; height: 2px !important; background: currentColor !important; border-radius: 2px !important; box-shadow: 0 4px 0 currentColor !important; } .ai-platform-mobile-history-clock { position: absolute !important; right: 0 !important; bottom: 0 !important; display: block !important; width: 10px !important; height: 10px !important; border: 2px solid currentColor !important; border-radius: 50% !important; background: var(--aip-surface) !important; box-sizing: border-box !important; } .ai-platform-mobile-history-clock::before { content: "" !important; position: absolute !important; left: 3px !important; top: 1px !important; width: 2px !important; height: 4px !important; background: currentColor !important; border-radius: 2px !important; } .ai-platform-mobile-history-clock::after { content: "" !important; position: absolute !important; left: 3px !important; top: 4px !important; width: 4px !important; height: 2px !important; background: currentColor !important; border-radius: 2px !important; transform: rotate(25deg) !important; transform-origin: left center !important; } .ai-platform-mobile-history-toggle > *, .ai-platform-mobile-history-toggle--image > *, .ai-platform-mobile-history-toggle--video > * { display: block !important; } .ai-platform-mobile-history-toggle:hover, .ai-platform-mobile-history-toggle--image:hover, .ai-platform-mobile-history-toggle--video:hover { box-shadow: 0 8px 22px rgba(66,87,255,.24) !important; } /* Reserve room so centered Image/Video headers never collide with the control. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-title, .ai-platform-generator.is-mobile-portal .ai-platform-video-title { padding-inline: 54px !important; box-sizing: border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-subtitle, .ai-platform-generator.is-mobile-portal .ai-platform-video-subtitle { padding-inline: 54px !important; box-sizing: border-box !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix5 — centered Image/Video headers without squeezing text. */ @media (max-width: 1199px) { .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar { padding-left: 50px !important; padding-right: 54px !important; box-sizing: border-box !important; text-align: center !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar > div, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar > div { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-title, .ai-platform-generator.is-mobile-portal .ai-platform-video-title, .ai-platform-generator.is-mobile-portal .ai-platform-image-subtitle, .ai-platform-generator.is-mobile-portal .ai-platform-video-subtitle { padding-inline: 0 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; box-sizing: border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-title, .ai-platform-generator.is-mobile-portal .ai-platform-video-title { width: 100% !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-subtitle, .ai-platform-generator.is-mobile-portal .ai-platform-video-subtitle { width: 100% !important; max-width: 100% !important; } } /* v0.9.5-Fix27 — Tab workspace shell root-cause fix. * The compact portal must own the viewport at 521–1199px. If an older * initialization path leaves the generator in document flow, fixed corner * controls remain at the viewport edge while the active workspace can render * hundreds of pixels lower. Keep the shell fixed at the Tab breakpoint and * let the JS-supplied --aip-mobile-top account for the WP admin bar. */ @media (min-width:521px) and (max-width:1199px){ .ai-platform-generator.is-mobile-portal, .ai-platform-generator{ position:fixed !important; left:0 !important; right:auto !important; top:var(--aip-mobile-top, 0px) !important; width:100vw !important; max-width:none !important; min-width:0 !important; height:calc(100dvh - var(--aip-mobile-top, 0px)) !important; min-height:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; } .ai-platform-generator.is-mobile-portal .ai-platform-generator__app, .ai-platform-generator .ai-platform-generator__app{ position:relative !important; width:100% !important; height:100% !important; min-height:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; } .ai-platform-mobile-workspace-toggle, .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ top:calc(var(--aip-mobile-top, 0px) + 42px) !important; transform:translateY(-50%) !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix6 — final header button positioning. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-generator__topbar, .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar{ position:relative !important; overflow:visible !important; } /* Keep the compact menu button in the Workspace header, not inside the WP admin bar. */ .ai-platform-mobile-workspace-toggle{ top:calc(var(--aip-mobile-top, 0px) + 42px) !important; transform:translateY(-50%) !important; } /* History belongs to the active Workspace header and is vertically centered there. */ .ai-platform-generator__topbar .ai-platform-mobile-history-toggle, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video, .ai-platform-voice-topbar .ai-platform-mobile-history-toggle--voice{ position:absolute !important; top:50% !important; right:8px !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) !important; z-index:100220 !important; display:grid !important; place-items:center !important; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; border:1px solid transparent !important; border-radius:10px !important; background: linear-gradient(#101722,#101722) padding-box, linear-gradient(135deg,#21d4fd 0%,#2f80ff 35%,#7b2cff 60%,#ff2ca3 82%,#ff9a3d 100%) border-box !important; color:#fff !important; overflow:visible !important; text-indent:0 !important; font-size:0 !important; line-height:0 !important; } /* Always show the real history glyph in all three responsive layouts. */ .ai-platform-generator__topbar .ai-platform-mobile-history-toggle .ai-platform-mobile-history-glyph, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image .ai-platform-mobile-history-glyph, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video .ai-platform-mobile-history-glyph, .ai-platform-voice-topbar .ai-platform-mobile-history-toggle--voice .ai-platform-mobile-history-glyph{ display:block !important; visibility:visible !important; opacity:1 !important; position:relative !important; width:23px !important; height:23px !important; color:#fff !important; } .ai-platform-generator__topbar .ai-platform-mobile-history-toggle .ai-platform-mobile-history-page, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image .ai-platform-mobile-history-page, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video .ai-platform-mobile-history-page, .ai-platform-voice-topbar .ai-platform-mobile-history-toggle--voice .ai-platform-mobile-history-page{ position:absolute !important; left:2px !important; top:1px !important; right:auto !important; bottom:auto !important; width:14px !important; height:19px !important; border:2px solid currentColor !important; border-radius:2px !important; background:transparent !important; box-sizing:border-box !important; } .ai-platform-generator__topbar .ai-platform-mobile-history-toggle .ai-platform-mobile-history-clock, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image .ai-platform-mobile-history-clock, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video .ai-platform-mobile-history-clock, .ai-platform-voice-topbar .ai-platform-mobile-history-toggle--voice .ai-platform-mobile-history-clock{ position:absolute !important; right:0 !important; bottom:0 !important; left:auto !important; top:auto !important; width:10px !important; height:10px !important; border:2px solid currentColor !important; border-radius:50% !important; background:#101722 !important; box-sizing:border-box !important; } .ai-platform-generator__topbar .ai-platform-mobile-history-toggle .ai-platform-mobile-history-clock::before, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image .ai-platform-mobile-history-clock::before, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video .ai-platform-mobile-history-clock::before{ content:"" !important; position:absolute !important; left:3px !important; top:1px !important; width:2px !important; height:4px !important; background:currentColor !important; border-radius:2px !important; } .ai-platform-generator__topbar .ai-platform-mobile-history-toggle .ai-platform-mobile-history-clock::after, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image .ai-platform-mobile-history-clock::after, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video .ai-platform-mobile-history-clock::after{ content:"" !important; position:absolute !important; left:3px !important; top:4px !important; width:4px !important; height:2px !important; background:currentColor !important; border-radius:2px !important; transform:rotate(25deg) !important; transform-origin:left center !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix7 — align compact controls with the actual workspace header. */ @media (max-width:1199px){ /* The compact menu button is a sibling of the main content, so its fixed position must be offset from the WordPress admin bar to the center of the 58px workspace header. */ .ai-platform-mobile-workspace-toggle{ top:calc(var(--aip-mobile-top, 0px) + 10px) !important; bottom:auto !important; z-index:100220 !important; } /* Chat history is rendered inside the chat topbar. Keep it in that header instead of letting older fixed-position rules place it near the WP bar. */ .ai-platform-generator__topbar .ai-platform-mobile-history-toggle, .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image, .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ position:absolute !important; top:50% !important; right:8px !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) !important; z-index:100220 !important; } /* Keep the actual header/title area clear of the floating controls. */ .ai-platform-generator.is-mobile-portal .ai-platform-generator__topbar, .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar{ position:relative !important; box-sizing:border-box !important; } } /* v0.8.9 Mobile/Tab Navigation Fix8 — keep Image/Video Ready aligned to the tool header. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ top:50% !important; right:56px !important; left:auto !important; transform:translateY(-50%) !important; justify-content:flex-end !important; gap:6px !important; max-width:88px !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; z-index:120 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar > div, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar > div{ padding-right:104px !important; } } @media (max-width:520px){ .ai-platform-generator.is-mobile-portal .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ top:10px !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix9 — header control positioning */ @media (max-width:1199px){ /* Keep the mobile/tablet workspace header controls centered inside the app header, not relative to the WordPress/admin toolbar. */ .ai-platform-mobile-workspace-toggle{ position:fixed !important; top:calc(var(--aip-mobile-top, 0px) + 24px) !important; left:8px !important; right:auto !important; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; margin:0 !important; transform:none !important; z-index:100140 !important; display:grid !important; place-items:center !important; } .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:100140 !important; } .ai-platform-mobile-history-icon, .ai-platform-mobile-history-glyph{ display:block !important; width:21px !important; height:21px !important; opacity:1 !important; visibility:visible !important; } /* Image/video headers: keep the title centered and place Ready under the description. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar{ min-height:88px !important; padding:13px 56px 20px !important; box-sizing:border-box !important; text-align:center !important; overflow:visible !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar > div, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar > div{ width:100% !important; max-width:none !important; margin:0 auto !important; padding:0 !important; text-align:center !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-title, .ai-platform-generator.is-mobile-portal .ai-platform-video-title{ display:block !important; margin:0 !important; max-width:100% !important; line-height:1.15 !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-subtitle, .ai-platform-generator.is-mobile-portal .ai-platform-video-subtitle{ display:block !important; margin:6px auto 0 !important; max-width:100% !important; line-height:1.35 !important; text-align:center !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ bottom:7px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; font-size:10px !important; line-height:1 !important; z-index:100130 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status::before, .ai-platform-generator.is-mobile-portal .ai-platform-video-status::before{ content:"" !important; width:6px !important; height:6px !important; margin-right:5px !important; border-radius:50% !important; background:#16c784 !important; box-shadow:0 0 7px rgba(22,199,132,.45) !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status.is-working::before, .ai-platform-generator.is-mobile-portal .ai-platform-video-status.is-working::before{ background:#f59e0b !important; box-shadow:0 0 7px rgba(245,158,11,.42) !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix10 — align History with Menu and lower Ready. */ @media (max-width:1199px){ /* Keep History at exactly the same vertical coordinate as the Menu button. Both are viewport-level controls on compact layouts. */ .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ position:fixed !important; top:calc(var(--aip-mobile-top, 0px) + 24px) !important; right:8px !important; left:auto !important; bottom:auto !important; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; margin:0 !important; padding:0 !important; transform:none !important; z-index:100220 !important; display:grid !important; place-items:center !important; box-sizing:border-box !important; } /* Keep Image/Video Ready below the description, but nudge it slightly lower. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ bottom:2px !important; } } @media (max-width:520px){ /* Same exact vertical anchor on phone; preserve the header's right spacing. */ .ai-platform-mobile-history-toggle, .ai-platform-mobile-history-toggle--image, .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ top:calc(var(--aip-mobile-top, 0px) + 24px) !important; right:8px !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix11 — one shared header centerline. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ top:calc(var(--aip-mobile-top, 0px) + 29px) !important; } .ai-platform-generator.is-mobile-portal .ai-platform-mobile-workspace-toggle{ } .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ } } /* v0.8.9 Mobile / Tab Navigation Visual Fix12 — move Image/Video Ready below the description. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ bottom:-9px !important; } } /* v0.8.9 Tab Sidebar Toggle Fix1 — move the menu control with the opened tab rail. */ @media (min-width:521px) and (max-width:1199px){ .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle{ left:84px !important; right:auto !important; } } /* v0.8.9 clean-base follow-up — phone/tab Image + Video Ready placement. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar{ position:relative !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ position:absolute !important; top:78px !important; left:50% !important; right:auto !important; bottom:auto !important; transform:translateX(-50%) !important; margin:0 !important; z-index:20 !important; } } @media (max-width:520px){ .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar{ min-height:108px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ top:79px !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix13 — anchor compact controls to the real header center. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-mobile-workspace-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ position:fixed !important; transform:translateY(-50%) !important; z-index:100220 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-mobile-workspace-toggle{ } .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--video, .ai-platform-mobile-history-toggle--voice{ left:auto !important; right:8px !important; } } /* v0.8.9 Mobile / Tab Navigation Visual Fix14 — raise Tab Image/Video Ready. */ @media (min-width:521px) and (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-image-status, .ai-platform-generator.is-mobile-portal .ai-platform-video-status{ top:68px !important; bottom:auto !important; } } /* v0.8.9 Workspace History Layer Fix2 — Image/Video history drawers must escape their lower-z-index view stacking contexts so the drawer sits above the Tab sidebar/menu. */ @media (min-width:521px) and (max-width:1199px){ .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-view, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-view, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-view{ z-index:100300 !important; } .ai-platform-generator.is-mobile-image-history-open .ai-platform-image-history-panel, .ai-platform-generator.is-mobile-video-history-open .ai-platform-video-history-panel, .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel{ z-index:100301 !important; } } /* v0.8.9 Tab Sidebar Toggle Fix2 — move the menu control beside the open sidebar. */ @media (min-width: 521px) and (max-width: 1199px) { .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle { } } /* Tab landscape / short-height safety: keep the opened sidebar fully usable and move the menu toggle outside it. */ @media (min-width: 521px) and (max-width: 1199px) { .ai-platform-generator.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle { left: 84px !important; transform: none !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar { box-sizing: border-box !important; overflow-y: auto !important; overflow-x: hidden !important; } } /* Very short Tab landscape screens: compact the sidebar so its contents are never clipped. */ @media (min-width: 521px) and (max-width: 1199px) and (max-height: 600px) { .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar { padding: 8px 6px !important; min-height: 0 !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__brand { padding: 2px 0 8px !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__workspace-item { min-height: 42px !important; padding: 4px 2px !important; } .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar-bottom { margin-top: 8px !important; padding-top: 8px !important; } } /* v0.9.4-Fix20 — Compact Image/Video workspace must scroll as a whole page. * The responsive portal is intentionally fixed to the viewport. On Image/Video, * make the portal itself the scroll surface instead of relying on an absolute * child scroll container. This restores touch scrolling even before a result * exists and avoids nested overflow/touch conflicts on Mobile and Tab. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal.is-image-mode, .ai-platform-generator.is-mobile-portal.is-video-mode, .ai-platform-generator.is-mobile-portal.is-voice-mode{ overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; overscroll-behavior-y:auto !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-generator__app, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-generator__app, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-generator__app{ height:auto !important; min-height:100% !important; overflow:visible !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-view, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-view, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-view{ position:relative !important; inset:auto !important; left:0 !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; min-width:0 !important; height:auto !important; min-height:100dvh !important; overflow:visible !important; touch-action:auto !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-topbar, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-topbar{ position:sticky !important; top:0 !important; z-index:30 !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-body, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-body, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-body{ display:block !important; width:100% !important; height:auto !important; min-height:0 !important; overflow:visible !important; padding-bottom:32px !important; touch-action:auto !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-result, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-result, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-result{ height:auto !important; max-height:none !important; overflow:visible !important; } } /* v0.9.4-Fix21 — Responsive workspace scrolling. * Phone uses the portal as the single vertical scroll surface. Tab keeps the * proven absolute workspace shell and lets each tool body scroll inside it. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll{ height:100dvh !important; min-height:100dvh !important; max-height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; overscroll-behavior-y:auto !important; } .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-generator__app{ height:auto !important; min-height:100dvh !important; overflow:visible !important; } .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-image-view, .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-video-view, .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-voice-view{ position:relative !important; inset:auto !important; width:100% !important; min-width:0 !important; height:auto !important; min-height:100dvh !important; overflow:visible !important; touch-action:auto !important; } .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-image-body, .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-video-body, .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll .ai-platform-voice-body{ height:auto !important; min-height:0 !important; overflow:visible !important; touch-action:auto !important; } } /* v0.9.5-Fix26 — Tab workspace shell restoration. * The large blank area came from turning the absolute workspace view into a * normal grid item. That made it flow below the existing chat/sidebar grid. * Keep the view over the app at 521–1199px and let its body scroll. */ @media (min-width:521px) and (max-width:1199px){ .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-view, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-view, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-view{ position:absolute !important; inset:0 !important; left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; overflow:hidden !important; touch-action:auto !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-topbar, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-topbar{ flex:0 0 auto !important; position:relative !important; top:auto !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-body, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-body, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-body{ flex:1 1 auto !important; min-height:0 !important; height:auto !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; } } /* v0.9.5 Fix6 — Voice header uses the exact same Mobile/Tab alignment rules as Image/Video. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar{ position:relative !important; min-height:88px !important; padding:13px 56px 20px !important; box-sizing:border-box !important; text-align:center !important; overflow:visible !important; } .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar > div{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 auto !important; padding:0 !important; text-align:center !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-voice-title{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; line-height:1.15 !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .ai-platform-generator.is-mobile-portal .ai-platform-voice-subtitle{ display:block !important; width:100% !important; max-width:100% !important; margin:6px auto 0 !important; line-height:1.35 !important; text-align:center !important; } .ai-platform-generator.is-mobile-portal .ai-platform-voice-status{ position:absolute !important; left:50% !important; right:auto !important; top:auto !important; bottom:7px !important; margin:0 !important; transform:translateX(-50%) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; font-size:10px !important; line-height:1 !important; z-index:100130 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-voice-status::before{ content:"" !important; width:6px !important; height:6px !important; margin-right:5px !important; border-radius:50% !important; background:#16c784 !important; box-shadow:0 0 7px rgba(22,199,132,.45) !important; } } @media (max-width:520px){ .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar{ min-height:108px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-voice-status{ bottom:9px !important; } } /* v0.9.5-Fix25 — Consolidated compact workspace visibility + menu animation. * Keep one authoritative rule set here; Voice uses the same mechanics as Image/Video. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-generator__main, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-generator__main, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-generator__main{ display:none !important; visibility:hidden !important; pointer-events:none !important; } .ai-platform-generator.is-mobile-portal.is-chat-mode .ai-platform-image-view, .ai-platform-generator.is-mobile-portal.is-chat-mode .ai-platform-video-view, .ai-platform-generator.is-mobile-portal.is-chat-mode .ai-platform-voice-view{ display:none !important; visibility:hidden !important; pointer-events:none !important; } .ai-platform-generator.is-mobile-portal.is-image-mode .ai-platform-image-view, .ai-platform-generator.is-mobile-portal.is-video-mode .ai-platform-video-view, .ai-platform-generator.is-mobile-portal.is-voice-mode .ai-platform-voice-view{ display:flex !important; visibility:visible !important; pointer-events:auto !important; } /* Compact Voice drawer: same bounded flex column as Image/Video drawers. */ .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history-panel{ display:flex !important; flex-direction:column !important; overflow:hidden !important; pointer-events:auto !important; } .ai-platform-generator.is-mobile-voice-history-open .ai-platform-voice-history{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; scrollbar-width:thin !important; scrollbar-color:rgba(148,163,184,.42) transparent !important; } /* Sliding workspace rail; keep it mounted so transform animates instead of blinking. */ .ai-platform-generator.is-mobile-portal .ai-platform-generator__sidebar{ display:flex !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; transform:translateX(-100%) !important; transition:transform .22s cubic-bezier(.22,.8,.24,1),opacity .16s ease,visibility 0s linear .22s !important; will-change:transform,opacity; } .ai-platform-generator.is-mobile-portal.is-mobile-workspace-open .ai-platform-generator__sidebar{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform:translateX(0) !important; transition:transform .22s cubic-bezier(.22,.8,.24,1),opacity .16s ease,visibility 0s linear 0s !important; } .ai-platform-generator.is-mobile-portal.is-mobile-workspace-open .ai-platform-mobile-workspace-toggle{ transform:translateX(76px) translateY(-50%) !important; } } /* v0.9.5-Fix29 — responsive controls canonical positioning. * Mobile/Tab controls belong to the compact workspace shell. Keep them out of * viewport-relative JS positioning so WordPress admin-bar height and scroll * transforms cannot push them outside the visible header. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-mobile-workspace-toggle{ position:absolute !important; top:54px !important; left:8px !important; right:auto !important; bottom:auto !important; transform:translateY(-50%) !important; z-index:100220 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--video, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--music, .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--voice{ position:absolute !important; top:8px !important; right:8px !important; left:auto !important; bottom:auto !important; transform:none !important; z-index:100220 !important; } /* History controls inside the active workspace header use that header's own box as their containing block. */ .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar, .ai-platform-generator.is-mobile-portal .ai-platform-generator__topbar{ position:relative !important; overflow:visible !important; } .ai-platform-generator.is-mobile-portal .ai-platform-image-topbar .ai-platform-mobile-history-toggle--image, .ai-platform-generator.is-mobile-portal .ai-platform-video-topbar .ai-platform-mobile-history-toggle--video, .ai-platform-generator.is-mobile-portal .ai-platform-voice-topbar .ai-platform-mobile-history-toggle--voice, .ai-platform-generator.is-mobile-portal .ai-platform-generator__topbar .ai-platform-mobile-history-toggle{ top:50% !important; right:8px !important; transform:translateY(-50%) !important; } } /* v0.9.5-Fix41 — Recover phone workspace scrolling after virtual-keyboard close. * Keep the portal as the single touch scroll surface; the JS reset handles * browser compositor state without changing the workspace architecture. */ @media (max-width:520px){ .ai-platform-generator.is-mobile-portal.is-compact-workspace-scroll{ overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; overscroll-behavior-y:auto !important; } } /* v0.9.6 Music — use the same responsive workspace shell as Image / Video / Voice. */ @media (max-width:1199px){ .ai-platform-generator.is-mobile-portal .ai-platform-music-view{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:20 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-topbar{ position:relative !important; flex:0 0 auto !important; min-height:88px !important; padding:13px 56px 20px !important; box-sizing:border-box !important; text-align:center !important; overflow:visible !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-topbar > div{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 auto !important; padding:0 !important; text-align:center !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-title{ display:block !important; width:100% !important; max-width:100% !important; margin:0 !important; line-height:1.15 !important; text-align:center !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-subtitle{ display:block !important; width:100% !important; max-width:100% !important; margin:6px auto 0 !important; line-height:1.35 !important; text-align:center !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-status{ position:absolute !important; left:50% !important; right:auto !important; top:auto !important; bottom:7px !important; margin:0 !important; transform:translateX(-50%) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; font-size:10px !important; line-height:1 !important; z-index:100130 !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-status::before{ content:"" !important; width:6px !important; height:6px !important; margin-right:5px !important; border-radius:50% !important; background:#16c784 !important; box-shadow:0 0 7px rgba(22,199,132,.45) !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-body{ display:grid !important; grid-template-columns:1fr !important; grid-auto-rows:max-content !important; gap:14px !important; align-content:start !important; flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; padding:14px 12px 24px !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-controls, .ai-platform-generator.is-mobile-portal .ai-platform-music-result-wrap{ min-width:0 !important; width:100% !important; box-sizing:border-box !important; } .ai-platform-generator.is-mobile-portal .ai-platform-mobile-history-toggle--music{ position:absolute !important; top:50% !important; right:8px !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) !important; z-index:100220 !important; } } @media (max-width:520px){ .ai-platform-generator.is-mobile-portal .ai-platform-music-topbar{ min-height:108px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-status{ bottom:9px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-body{ padding:14px 12px 24px !important; } .ai-platform-generator.is-mobile-portal .ai-platform-music-controls{ padding:14px !important; } }