:root{--aip-send-text:#111111} .ai-platform-generator{--aip-sidebar-width:230px;--aip-bg:#fff;--aip-sidebar:#f7f7f8;--aip-border:#e5e7eb;--aip-text:#202123;--aip-muted:#6b7280;--aip-accent:#111827;--aip-user:#f4f4f4;--aip-surface:#fff;--aip-surface-2:#f7f7f8;--aip-hover:#f3f4f6;--aip-input-border:#515152;--aip-shadow:0 12px 40px rgba(0,0,0,.08);--aip-avatar:#111827;--aip-avatar-user:#e5e7eb;--aip-error:#b91c1c;width:100%;max-width:1180px;height:min(780px,calc(100vh - 80px));min-height:620px;margin:24px auto;border:1px solid var(--aip-border);border-radius:16px;overflow:hidden;background:var(--aip-bg);color:var(--aip-text);font-family:inherit;box-shadow:var(--aip-shadow);box-sizing:border-box} .ai-platform-generator *{box-sizing:border-box} .ai-platform-generator__app{display:grid;grid-template-columns:260px minmax(0,1fr);} .ai-platform-generator__sidebar{display:flex;flex-direction:column;min-width:0;background:var(--aip-sidebar);border-right:1px solid var(--aip-border);padding:14px 12px} .ai-platform-generator__brand{display:flex;align-items:center;gap:9px;padding:8px 9px 16px;font-size:14px;font-weight:700} .ai-platform-generator__brand-mark{display:flex;align-items:center;justify-content:flex-start;width:42px;height:42px;border-radius:0;color:inherit;font-size:13px;overflow:visible} .ai-platform-generator__brand-mark img{display:block;width:42px;height:42px;object-fit:contain;object-position:center;background:transparent} .ai-platform-generator__new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;border:1px solid var(--aip-input-border);border-radius:10px;background:var(--aip-surface);color:var(--aip-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .ai-platform-generator__new:hover{background:var(--aip-hover)} .ai-platform-generator__sidebar-title{margin:20px 9px 8px;color:var(--aip-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .ai-platform-generator__chats{flex:1;min-height:0;overflow:auto} .ai-platform-generator__chat-item{padding:10px 11px;color:#374151;} .ai-platform-generator__chat-item:hover,.ai-platform-generator__chat-item.is-active{background:var(--aip-hover);color:var(--aip-text)} .ai-platform-generator__sidebar-bottom{padding-top:10px;border-top:1px solid var(--aip-border)} .ai-platform-generator__credit-preview{padding:10px 11px;color:var(--aip-muted);font-size:12px} .ai-platform-generator__credit-preview strong{display:block;margin-top:3px;color:var(--aip-text);font-size:14px} .ai-platform-generator__main{display:flex;flex-direction:column;background:var(--aip-surface)} .ai-platform-generator__topbar{display:flex;align-items:center;justify-content:center;position:relative;min-height:64px;padding:10px 18px;border-bottom:1px solid var(--aip-border)} .ai-platform-generator__model-wrap{display:flex;align-items:center;gap:8px} .ai-platform-generator__model-label{font-size:14px;font-weight:600} .ai-platform-generator__model-select{appearance:none;min-width:220px;padding:8px 30px 8px 10px;border:0;border-radius:8px;background:var(--aip-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%236b7280' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--aip-text);font:inherit;font-size:14px;cursor:pointer} .ai-platform-generator__status{position:absolute;right:18px;display:inline-flex;align-items:center;gap:6px;color:#6b7280;font-size:11px} .ai-platform-generator__status-dot{width:7px;height:7px;border-radius:50%;background:#10b981} .ai-platform-generator__status.is-error{color:var(--aip-error)}.ai-platform-generator__status.is-error .ai-platform-generator__status-dot{background:#ef4444} .ai-platform-generator__status.is-working{color:#92400e}.ai-platform-generator__status.is-working .ai-platform-generator__status-dot{background:#f59e0b} .ai-platform-generator__messages{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;padding:30px 24px 150px} .ai-platform-generator__empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:72px;color:#6b7280;text-align:center} .ai-platform-generator__empty-inner{max-width:520px} .ai-platform-generator__empty h2{margin:0 0 10px;color:#202123;font-size:28px;line-height:1.2;font-weight:600} .ai-platform-generator__empty p{margin:0;font-size:14px;line-height:1.6} .ai-platform-generator__message{max-width:780px;margin:0 auto 26px;display:flex;gap:14px;line-height:1.65;font-size:15px} .ai-platform-generator__message-avatar{flex:0 0 30px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--aip-avatar);color:#929292;font-size:11px;font-weight:700} .ai-platform-generator__message.is-user .ai-platform-generator__message-avatar{background:var(--aip-avatar-user);color:var(--aip-text)} .ai-platform-generator__message-content{min-width:0;flex:1;white-space:pre-wrap;overflow-wrap:anywhere} .ai-platform-generator__message-column{min-width:0;max-width:78%;flex:0 1 auto} .ai-platform-generator__message-column .ai-platform-generator__message-content{max-width:100%} .ai-platform-generator__message-role{margin-bottom:3px;color:var(--aip-text);font-size:12px;font-weight:700} .ai-platform-generator__message.is-user .ai-platform-generator__message-content{background:var(--aip-user);padding:10px 14px;border-radius:14px} .ai-platform-generator__message.is-error .ai-platform-generator__message-content{color:var(--aip-error)} .ai-platform-generator__message-meta{margin-top:7px;color:#9ca3af;font-size:10px;line-height:1.4} .ai-platform-generator__composer-wrap{position:relative;padding:0 24px 20px;background:linear-gradient(to top,var(--aip-bg) 72%,rgba(255,255,255,0))} .ai-platform-generator__composer{max-width:780px;margin:0 auto;position:relative;border:1.5px solid #414141;border-radius:16px;background:var(--aip-surface);box-shadow:var(--aip-shadow)} .ai-platform-generator__prompt{display:block;margin:0} .ai-platform-generator__prompt textarea{display:block;width:100%;min-height:58px;max-height:180px;padding:16px 54px 16px 16px;border:0;border-radius:16px;outline:0;background:transparent;color:var(--aip-text);font:inherit;font-size:14px;line-height:1.5;resize:none} .ai-platform-generator button.ai-platform-generator__send{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:0;border-radius:8px;background:var(--aip-avatar);color:var(--aip-send-text,#111111) !important;cursor:pointer;line-height:1;box-shadow:none} .ai-platform-generator__send:hover{background:#000}.ai-platform-generator__send:disabled{opacity:.35;cursor:not-allowed} .ai-platform-generator__composer-hint{max-width:780px;margin:8px auto 0;text-align:center;color:#9ca3af;font-size:10px} .ai-platform-generator__composer-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 56px 9px 10px;border-top:1px solid var(--aip-border)} .ai-platform-generator__composer-left,.ai-platform-generator__composer-right{display:flex;align-items:center;gap:6px}.ai-platform-generator__composer-right{min-width:0}.ai-platform-generator__composer-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-platform-generator__tool{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--aip-muted);font:inherit;font-size:11px;cursor:pointer} .ai-platform-generator__tool:hover{background:var(--aip-hover);color:var(--aip-text)} .ai-platform-generator__tool:disabled{opacity:.45;cursor:not-allowed} .ai-platform-generator__tool--attachment{display:none} .ai-platform-generator__stop{display:none;color:var(--aip-error)} .ai-platform-generator.is-generating .ai-platform-generator__stop{display:inline-flex} .ai-platform-generator.is-generating .ai-platform-generator__send{display:none} .ai-platform-generator__composer-note{color:var(--aip-muted);font-size:10px} .ai-platform-generator__retry{display:none;margin:0 auto 8px;padding:7px 11px;border:1px solid var(--aip-input-border);border-radius:8px;background:var(--aip-surface);color:var(--aip-text);font:inherit;font-size:11px;cursor:pointer} .ai-platform-generator__retry.is-visible{display:block} .ai-platform-login{max-width:700px;margin:30px auto;padding:20px;border:1px solid #e5e7eb;border-radius:14px;background:#f9fafb} .ai-platform-generator button.ai-platform-generator__theme-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:4px;padding:7px 9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--aip-text);font:inherit;font-size:12px;cursor:pointer;text-align:left;box-shadow:none} .ai-platform-generator button.ai-platform-generator__theme-toggle:hover{background:var(--aip-hover);color:var(--aip-text)}.ai-platform-generator button.ai-platform-generator__theme-toggle:hover .ai-platform-generator__theme-label,.ai-platform-generator button.ai-platform-generator__theme-toggle:hover .ai-platform-generator__theme-mode{color:var(--aip-text)} .ai-platform-generator__theme-icon{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--aip-surface-2);font-size:13px} .ai-platform-generator__theme-label{flex:1} .ai-platform-generator__theme-mode{color:var(--aip-muted);font-size:10px} .ai-platform-generator[data-theme="dark"]{--aip-sidebar-width:230px;--aip-send-text:#ffffff;--aip-bg:#212121;--aip-sidebar:#171717;--aip-border:#3a3a3a;--aip-text:#ececec;--aip-muted:#a1a1aa;--aip-accent:#f5f5f5;--aip-user:#2f2f2f;--aip-surface:#212121;--aip-surface-2:#2f2f2f;--aip-hover:#2a2a2a;--aip-input-border:#4a4a4a;--aip-shadow:0 12px 40px rgba(0,0,0,.35);--aip-avatar:#f5f5f5;--aip-avatar-user:#3f3f46;--aip-error:#f87171} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__brand-mark{background:transparent;color:#f5f5f5} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__new{background:var(--aip-surface-2);border-color:var(--aip-input-border);color:var(--aip-text)} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__new:hover{background:#3a3a3a} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__model-select{background-color:var(--aip-surface-2);color:var(--aip-text)} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__send:hover{background:#fff;color:#171717} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__prompt textarea::placeholder{color:#71717a} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__message.is-user .ai-platform-generator__message-avatar{color:#e4e4e7} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__composer-hint{color:#71717a} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__empty h2{color:var(--aip-text)} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__status.is-error{color:#f87171} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__status.is-working{color:#fbbf24} .ai-platform-generator button.ai-platform-generator__collapse{position:absolute;left:14px;display:grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border:1px solid var(--aip-border);border-radius:7px;background:var(--aip-surface);color:var(--aip-text);cursor:pointer;font-size:14px;line-height:1;box-shadow:none} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__app{grid-template-columns:72px minmax(0,1fr)} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__brand-text,.ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__sidebar-title,.ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__credit-preview,.ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__chat-item{display:none} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__sidebar{align-items:center;padding-left:9px;padding-right:9px} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__brand{padding-left:0;padding-right:0} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__new{width:44px;font-size:0} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__new::before{content:'+';font-size:22px} .ai-platform-generator__message-content{white-space:normal} .ai-platform-generator__message-content p{margin:0 0 10px}.ai-platform-generator__message-content p:last-child{margin-bottom:0} .ai-platform-generator__message-content pre{margin:10px 0;padding:12px 14px;overflow:auto;border-radius:10px;background:#111827;color:#f9fafb;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;position:relative} .ai-platform-generator__message-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.92em}.ai-platform-generator__message-content :not(pre)>code{padding:2px 5px;border-radius:5px;background:var(--aip-hover)} .ai-platform-generator__copy{float:right;margin:-5px -5px 6px 10px;padding:4px 7px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;font-size:10px;cursor:pointer} .ai-platform-generator__message-content ul,.ai-platform-generator__message-content ol{margin:6px 0 10px 20px}.ai-platform-generator__message-content a{color:#2563eb;text-decoration:underline} .ai-platform-generator__message-content h1, .ai-platform-generator__message-content h2, .ai-platform-generator__message-content h3, .ai-platform-generator__message-content h4, .ai-platform-generator__message-content h5, .ai-platform-generator__message-content h6, .ai-platform-generator__message-content p, .ai-platform-generator__message-content li, .ai-platform-generator__message-content strong, .ai-platform-generator__message-content em, .ai-platform-generator__message-content blockquote, .ai-platform-generator__message-content span{color:inherit} .ai-platform-generator__chat-item{position:relative;padding-right:30px}.ai-platform-generator__chat-item.is-active{} .ai-platform-generator__chat-item-wrap{position:relative;display:block;margin:2px 0;border-radius:9px} .ai-platform-generator__chat-item-wrap:hover{background:var(--aip-hover)} .ai-platform-generator__chat-item{display:block;width:100%;padding:9px 64px 9px 11px;border:0;border-radius:9px;background:transparent;color:var(--aip-text);text-align:left;font:inherit;font-size:13px;line-height:1.35;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-platform-generator__chat-item:hover{background:transparent} .ai-platform-generator__chat-item.is-active{font-weight:600;background:var(--aip-hover)} .ai-platform-generator__chat-item-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2px;padding:2px;border-radius:7px;background:var(--aip-hover);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease} .ai-platform-generator__chat-item-wrap:hover .ai-platform-generator__chat-item-actions, .ai-platform-generator__chat-item-wrap:focus-within .ai-platform-generator__chat-item-actions{opacity:1;visibility:visible;pointer-events:auto} .ai-platform-generator__chat-action{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--aip-muted);font:inherit;font-size:14px;line-height:1;cursor:pointer} .ai-platform-generator__chat-action:hover{background:var(--aip-bg);color:var(--aip-text)} .ai-platform-generator__chat-action:focus-visible{outline:2px solid var(--aip-accent);outline-offset:-1px} .ai-platform-generator__message-actions{display:flex;gap:6px;margin-top:8px;opacity:0;transition:opacity .15s} .ai-platform-generator__message:hover .ai-platform-generator__message-actions{opacity:1} .ai-platform-generator__message-action{border:1px solid var(--aip-border);background:var(--aip-bg);color:var(--aip-muted);border-radius:7px;padding:4px 8px;font-size:11px;cursor:pointer} .ai-platform-generator__message-action:hover{color:var(--aip-text);background:var(--aip-hover)} @media(max-width:520px){.ai-platform-generator__message-actions{opacity:1}} .ai-platform-generator__modal[hidden]{display:none} .ai-platform-generator__modal{position:absolute;inset:0;z-index:50;display:grid;place-items:center} .ai-platform-generator__modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(2px)} .ai-platform-generator__modal-dialog{position:relative;width:min(420px,calc(100% - 32px));border:1px solid var(--aip-border);border-radius:14px;background:var(--aip-surface);color:var(--aip-text);box-shadow:0 24px 70px rgba(0,0,0,.24);overflow:hidden} .ai-platform-generator__modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--aip-border)} .ai-platform-generator__modal-title{margin:0;color:var(--aip-text);font:600 15px/1.3 inherit} .ai-platform-generator__modal-close{width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--aip-muted);font:inherit;font-size:20px;line-height:1;cursor:pointer} .ai-platform-generator__modal-close:hover{background:var(--aip-hover);color:var(--aip-text)} .ai-platform-generator__modal-body{padding:18px} .ai-platform-generator__modal-field{display:block;color:var(--aip-muted);font-size:11px;font-weight:600} .ai-platform-generator__modal-field span{display:block;margin-bottom:7px} .ai-platform-generator__modal-field input{display:block;width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid var(--aip-input-border);border-radius:8px;background:var(--aip-bg);color:var(--aip-text);font:inherit;font-size:13px;outline:none} .ai-platform-generator__modal-field input:focus{border-color:var(--aip-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--aip-accent) 18%,transparent)} .ai-platform-generator__modal-message{margin:0;color:var(--aip-text);font-size:13px;line-height:1.55} .ai-platform-generator__modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--aip-border)} .ai-platform-generator__modal-button{padding:8px 13px;border:1px solid var(--aip-input-border);border-radius:8px;background:var(--aip-surface);color:var(--aip-text);font:inherit;font-size:12px;cursor:pointer} .ai-platform-generator__modal-button:hover{background:var(--aip-hover)} .ai-platform-generator__modal-button--primary{border-color:var(--aip-accent);background:var(--aip-accent);color:var(--aip-bg)} .ai-platform-generator__modal-button--primary:hover{filter:brightness(.94)} .ai-platform-generator__modal-button--primary.is-danger{background:#dc2626;border-color:#dc2626;color:#fff} .ai-platform-generator__modal-button:focus-visible,.ai-platform-generator__modal-close:focus-visible{outline:2px solid var(--aip-accent);outline-offset:2px} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__modal-button--primary{color:#171717} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__modal-button--primary.is-danger{color:#fff} .ai-platform-generator__mobile-menu{display:none} .ai-platform-generator[data-theme="dark"] .ai-platform-generator__message-content pre{background:#09090b}.ai-platform-generator[data-theme="dark"] .ai-platform-generator__message-content a{color:#93c5fd} @media(max-width:820px){.ai-platform-generator{height:min(760px,calc(100vh - 30px));min-height:560px;margin:15px auto;border-radius:12px}.ai-platform-generator__app{grid-template-columns:72px minmax(0,1fr)}.ai-platform-generator__brand-text,.ai-platform-generator__sidebar-title,.ai-platform-generator__credit-preview,.ai-platform-generator__chat-item{display:none}.ai-platform-generator__sidebar{align-items:center;padding:12px 9px}.ai-platform-generator__brand{padding:5px 0 16px}.ai-platform-generator__new{width:44px;height:42px;font-size:0}.ai-platform-generator__new::before{content:'+';font-size:22px}.ai-platform-generator__sidebar-bottom{width:100%}.ai-platform-generator__topbar{justify-content:flex-start;padding-left:16px}.ai-platform-generator__model-select{min-width:180px}.ai-platform-generator__status{right:12px}.ai-platform-generator__messages{padding-left:16px;padding-right:16px}.ai-platform-generator__composer-wrap{padding-left:12px;padding-right:12px}} @media(max-width:520px){.ai-platform-generator{height:calc(100vh - 12px);min-height:500px;margin:6px 0;border-radius:0;border-left:0;border-right:0}.ai-platform-generator__app{grid-template-columns:0 minmax(0,1fr)}.ai-platform-generator__sidebar{display:none}.ai-platform-generator__status{display:none}.ai-platform-generator__model-select{min-width:0;max-width:180px}.ai-platform-generator__messages{padding-top:20px;padding-bottom:130px}.ai-platform-generator__message{gap:9px;font-size:14px}.ai-platform-generator__message-avatar{flex-basis:26px;width:26px;height:26px;border-radius:8px}.ai-platform-generator__composer-hint{display:none}} /* Send button: compact surface with a readable arrow in both themes. */ .ai-platform-generator button.ai-platform-generator__send, .ai-platform-generator button.ai-platform-generator__send:hover, .ai-platform-generator button.ai-platform-generator__send:focus, .ai-platform-generator button.ai-platform-generator__send:active { background: var(--aip-avatar) !important; color: #ffffff !important; border: 0 !important; outline: none; box-shadow: none !important; } .ai-platform-generator button.ai-platform-generator__send *, .ai-platform-generator button.ai-platform-generator__send svg, .ai-platform-generator button.ai-platform-generator__send svg *, .ai-platform-generator button.ai-platform-generator__send span { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send, .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send:hover, .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send:focus, .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send:active { background: #ffffff !important; color: #020202 !important; } .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send *, .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send svg, .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send svg *, .ai-platform-generator[data-theme="dark"] button.ai-platform-generator__send span { color: #050505 !important; fill: #000000 !important; stroke: #070707 !important; } /* Custom modal: native hidden attribute must win over component display rules. */ .ai-platform-generator__modal-field[hidden], .ai-platform-generator__modal-message[hidden] { display: none !important; } /* Frontend App Shell: full-viewport AI Platform */ body:has([data-ai-platform-generator]) { overflow: hidden; } .ai-platform-generator { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; max-width: none !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .ai-platform-generator__app { width: 100%; height: 100%; min-height: 0; } .ai-platform-generator__main { min-height: 0; } /* Keep the application inside the viewport when WordPress has an admin bar. */ body.admin-bar .ai-platform-generator { top: 32px !important; height: calc(100dvh - 32px) !important; min-height: calc(100dvh - 32px) !important; } @media (max-width: 782px) { body.admin-bar .ai-platform-generator { top: 46px !important; height: calc(100dvh - 46px) !important; min-height: calc(100dvh - 46px) !important; } } @media (max-width: 520px) { .ai-platform-generator { width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; inset: 0 !important; } body.admin-bar .ai-platform-generator { top: 46px !important; height: calc(100dvh - 46px) !important; min-height: calc(100dvh - 46px) !important; } } /* Module 6.2.3 workspace navigation */ .ai-platform-generator__workspace{display:flex;flex-direction:column;gap:3px;margin-top:12px} .ai-platform-generator__workspace-item{gap:9px;width:100%;min-height:36px;padding:7px 9px;border:0;border-radius:8px;background:transparent;font:inherit;text-align:left;} .ai-platform-generator__workspace-item.is-active{font-weight:600} .ai-platform-generator__workspace-icon{display:grid;place-items:center;width:18px;font-size:13px;opacity:.8} .ai-platform-generator__workspace-item small{margin-left:auto;color:var(--aip-muted);font-size:9px;font-weight:500} .ai-platform-generator__workspace-item.is-disabled{cursor:not-allowed} .ai-platform-generator__workspace-item.is-disabled:hover{background:transparent} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__workspace{width:44px} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__workspace-item span:last-of-type, .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__workspace-item small{display:none} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__workspace-item{justify-content:center;padding:7px} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__workspace-icon{width:22px} @media(max-width:820px){ .ai-platform-generator__workspace{margin-top:10px} .ai-platform-generator__workspace-item span:last-of-type, .ai-platform-generator__workspace-item small{display:none} .ai-platform-generator__workspace-item{justify-content:center;padding:7px} } @media(max-width:520px){ .ai-platform-generator__workspace{display:none} } /* Compact workspace rail + flyout panels */ .ai-platform-generator__app{grid-template-columns:76px minmax(0,1fr);position:relative} .ai-platform-generator__sidebar{align-items:center;padding:16px 8px} .ai-platform-generator__brand{padding:2px 0 42px} .ai-platform-generator__brand-mark{width:52px;height:46px;border:1px solid var(--aip-input-border);border-radius:10px;background:transparent;color:var(--aip-text);font-size:15px;font-weight:700} .ai-platform-generator__workspace{width:60px;margin:0 auto} .ai-platform-generator__workspace-item{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:60px;min-height:58px;margin:0 auto;padding:7px 2px;border-radius:0;color:var(--aip-text);font-size:12px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer} .ai-platform-generator__workspace-item:hover{background:var(--aip-hover)} .ai-platform-generator__workspace-item.is-active{background:var(--aip-hover)} .ai-platform-generator__workspace-icon{width:auto;font-size:26px;line-height:1} .ai-platform-generator__workspace-item.is-disabled{opacity:.45} .ai-platform-generator__workspace-item small{display:none} .ai-platform-generator__sidebar-bottom{width:100%;margin-top:auto;padding-top:18px} .ai-platform-generator__sidebar-icon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-height:58px;padding:6px 2px;border:0;border-radius:9px;background:transparent;color:var(--aip-text);font:inherit;font-size:10px;cursor:pointer} .ai-platform-generator__sidebar-icon-button:hover{background:var(--aip-hover)} .ai-platform-generator__account-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--aip-muted);color:var(--aip-sidebar);font-size:0;position:relative} .ai-platform-generator__account-avatar::before{content:'';width:13px;height:13px;border-radius:50%;background:var(--aip-sidebar);position:absolute;top:8px} .ai-platform-generator__account-avatar::after{content:'';width:25px;height:13px;border-radius:15px 15px 0 0;border:4px solid var(--aip-sidebar);border-bottom:0;position:absolute;bottom:7px} .ai-platform-generator__account-button strong{font-size:10px;color:var(--aip-text)} .ai-platform-generator__sidebar-credit-balance{display:flex;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--aip-text)} .ai-platform-generator__sidebar-credit-balance .ai-platform-generator__credit-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px} .ai-platform-generator__sidebar-credit-balance .ai-platform-generator__credit-icon img{display:block;width:15px;height:15px;object-fit:contain} .ai-platform-generator__appearance-button{margin-top:10px;border-top:1px solid var(--aip-border);border-radius:0;padding-top:14px} .ai-platform-generator__sidebar-menu-icon{font-size:25px;line-height:1;color:var(--aip-muted)} .ai-platform-generator__side-panel{left:76px;width:248px;background:var(--aip-sidebar);border-right:1px solid var(--aip-border);box-shadow:14px 0 30px rgba(0,0,0,.12);display:flex;flex-direction:column} .ai-platform-generator__side-panel[hidden]{display:none} .ai-platform-generator__side-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 14px;border-bottom:1px solid var(--aip-border);font-size:15px} .ai-platform-generator__side-panel-close{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--aip-muted);font-size:18px;cursor:pointer} .ai-platform-generator__side-panel-close:hover{background:var(--aip-hover);color:var(--aip-text)} .ai-platform-generator__side-panel-content{display:flex;flex-direction:column;min-height:0;flex:1;padding:14px 12px} .ai-platform-generator__side-panel-content[hidden]{display:none} .ai-platform-generator__side-panel .ai-platform-generator__new{min-height:40px} .ai-platform-generator__side-panel .ai-platform-generator__sidebar-title{margin:20px 9px 8px} .ai-platform-generator__side-panel .ai-platform-generator__chats{overflow:auto} .ai-platform-generator__appearance-title{margin:4px 4px 10px;color:var(--aip-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .ai-platform-generator__appearance-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 10px;border:0;border-radius:8px;background:transparent;color:var(--aip-text);font:inherit;font-size:13px;text-align:left;cursor:pointer} .ai-platform-generator__appearance-option:hover,.ai-platform-generator__appearance-option.is-active{background:var(--aip-hover)} .ai-platform-generator__appearance-option span:last-child{color:var(--aip-muted);font-size:12px} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__app{grid-template-columns:76px minmax(0,1fr)} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__side-panel{left:76px} .ai-platform-generator__topbar .ai-platform-generator__collapse{display:none} @media(max-width:820px){ .ai-platform-generator__app{grid-template-columns:76px minmax(0,1fr)} .ai-platform-generator__side-panel{left:76px;width:min(248px,calc(100vw - 76px))} .ai-platform-generator__workspace-item span:last-of-type{display:block} } @media(max-width:520px){ .ai-platform-generator__sidebar{display:flex} .ai-platform-generator__workspace{display:block} .ai-platform-generator__workspace-item span:last-of-type{display:block} .ai-platform-generator__side-panel{left:76px;width:calc(100vw - 76px)} .ai-platform-generator__brand-mark{width:48px} } /* Workspace Rail navigation fix */ .ai-platform-generator__side-panel{ position:absolute; top:0; bottom:0; left:72px; width:280px; z-index:30; overflow:hidden; } .ai-platform-generator__side-panel[hidden]{display:none!important} .ai-platform-generator__side-panel-content[hidden]{display:none!important} .ai-platform-generator__workspace-item[aria-expanded="true"]{ background:var(--aip-hover); } @media(max-width:700px){ .ai-platform-generator__side-panel{ left:0; width:min(280px,calc(100vw - 72px)); } } /* Module 6.2.4 — History UI */ .ai-platform-generator__history-heading{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px;color:var(--aip-text);font-size:12px;font-weight:700} .ai-platform-generator__history-refresh{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--aip-border);border-radius:7px;background:var(--aip-surface);color:var(--aip-muted);font:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;box-sizing:border-box} .ai-platform-generator__history-refresh svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ai-platform-generator__history-refresh:hover{background:var(--aip-hover);border-color:var(--aip-text);color:var(--aip-text)} .ai-platform-generator__image-history{display:flex;flex-direction:column;gap:8px} .ai-platform-generator__history-empty{padding:20px 8px;color:var(--aip-muted);font-size:11px;text-align:center;line-height:1.5} .ai-platform-generator__image-history-item{cursor:pointer;display:flex;gap:9px;align-items:center;padding:7px;border:1px solid var(--aip-border);border-radius:9px;background:var(--aip-surface);min-width:0} .ai-platform-generator__image-history-thumb{flex:0 0 58px;width:58px;height:58px;padding:0;border:0;border-radius:7px;overflow:hidden;background:var(--aip-surface-2);cursor:pointer} .ai-platform-generator__image-history-thumb img{display:block;width:100%;height:100%;object-fit:cover} .ai-platform-generator__image-history-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px} .ai-platform-generator__image-history-time{color:var(--aip-muted);font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-platform-generator__image-history-prompt{overflow:hidden;color:var(--aip-text);font-size:10px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .ai-platform-generator__image-history-meta{color:var(--aip-muted);font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-platform-generator__image-history-delete{align-self:flex-start;padding:0;border:0;background:transparent;color:#ef4444;font:inherit;font-size:9px;cursor:pointer} .ai-platform-generator__image-history-delete:hover{text-decoration:underline} /* Module 6.2.5 — Persistent chat history + right-side image history */ .ai-platform-generator__app{ grid-template-columns:76px 280px minmax(0,1fr) !important; } .ai-platform-generator__chat-history-panel{ grid-column:2; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:var(--aip-sidebar); border-right:1px solid var(--aip-border); } .ai-platform-generator__chat-history-header{ flex:0 0 auto; display:flex; align-items:center; min-height:58px; padding:16px; border-bottom:1px solid var(--aip-border); color:var(--aip-text); font-size:15px; } .ai-platform-generator__chat-history-content{ display:flex; flex-direction:column; min-height:0; flex:1; padding:14px 12px; } .ai-platform-generator__chat-history-content .ai-platform-generator__chats{ flex:1; min-height:0; overflow:auto; } .ai-platform-generator__chat-history-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .ai-platform-generator__chat-history-toolbar .ai-platform-generator__sidebar-title{ margin:20px 0 8px 9px; } .ai-platform-generator__chat-search-toggle{ width:30px; height:30px; margin:10px 2px 0 0; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:var(--aip-muted); font:inherit; font-size:20px; line-height:1; cursor:pointer; } .ai-platform-generator__chat-search-toggle:hover, .ai-platform-generator__chat-search-toggle[aria-expanded="true"]{ background:var(--aip-hover); color:var(--aip-text); } .ai-platform-generator__chat-search-wrap{ display:flex; width:100%; margin:0 0 8px; } .ai-platform-generator__chat-search-wrap[hidden]{ display:none; } .ai-platform-generator__chat-search{ width:100%; min-height:40px; box-sizing:border-box; padding:9px 12px; border:1px solid var(--aip-border); border-radius:7px; background:var(--aip-surface); color:var(--aip-text); font:inherit; outline:none; } .ai-platform-generator__chat-search:focus{ border-color:var(--aip-muted); box-shadow:0 0 0 2px rgba(127,127,127,.12); } .ai-platform-generator__main{ grid-column:3; grid-row:1; min-width:0; } .ai-platform-generator__side-panel{ left:76px !important; width:280px !important; } /* Chat history is intentionally always visible; the rail button no longer toggles it. */ .ai-platform-generator__chat-history-panel .ai-platform-generator__sidebar-title{ margin-top:20px; } @media(max-width:900px){ .ai-platform-generator__app{ grid-template-columns:72px 240px minmax(0,1fr) !important; } } @media(max-width:700px){ .ai-platform-generator__app{ grid-template-columns:72px minmax(0,1fr) !important; } .ai-platform-generator__chat-history-panel{ display:none; } .ai-platform-generator__main{ grid-column:2; } } /* Hide persistent Chat History while working in Image or Video mode. */ .ai-platform-generator:has([data-mode="image"].is-active) .ai-platform-generator__chat-history-panel, .ai-platform-generator:has([data-mode="video"].is-active) .ai-platform-generator__chat-history-panel{ display:none; } /* v0.6.6 shared model picker */ .ai-platform-model-picker{position:relative;width:100%;min-width:0} .ai-platform-model-picker > select[data-model-picker-select]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important} .ai-platform-model-picker__trigger{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:7px 40px 7px 11px;border:1px solid var(--aip-border);border-radius:9px;background:var(--aip-surface-2);color:var(--aip-text);font:inherit;text-align:left;cursor:pointer;box-sizing:border-box} .ai-platform-model-picker__trigger:hover,.ai-platform-model-picker__trigger[aria-expanded="true"]{border-color:var(--aip-text);background:var(--aip-hover)} .ai-platform-model-picker__trigger:disabled{opacity:.55;cursor:not-allowed} .ai-platform-model-picker__trigger-icon,.ai-platform-model-picker__option-icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;border-radius:9px;background:var(--aip-surface);border:1px solid var(--aip-border);font-size:18px;line-height:1} .ai-platform-model-picker__trigger-icon img,.ai-platform-model-picker__option-icon img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit} .ai-platform-model-picker__trigger-copy,.ai-platform-model-picker__option-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px} .ai-platform-model-picker__trigger-copy strong,.ai-platform-model-picker__option-copy strong{font-size:13px;font-weight:650;line-height:1.25;color:var(--aip-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-platform-model-picker__trigger-copy small,.ai-platform-model-picker__option-copy small{font-size:11px;line-height:1.25;color:var(--aip-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ai-platform-model-picker__chevron{position:absolute;top:0;right:12px;bottom:0;display:flex;align-items:center;justify-content:center;width:20px;height:auto;margin:0;color:var(--aip-text);font-size:20px;font-weight:700;line-height:1;transform:none;pointer-events:none} .ai-platform-model-picker__menu{position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;max-height:280px;padding:5px;overflow:auto;border:1px solid var(--aip-border);border-radius:11px;background:var(--aip-surface);box-shadow:0 12px 30px rgba(0,0,0,.22)} /* v0.8.4: fast model-picker open/close animation. */ .ai-platform-model-picker__menu.is-opening{animation:aip-model-picker-in .13s ease-out both} .ai-platform-model-picker__menu.is-closing{animation:aip-model-picker-out .105s ease-in both} @keyframes aip-model-picker-in{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes aip-model-picker-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-3px) scale(.985)}} @media (prefers-reduced-motion:reduce){.ai-platform-model-picker__menu.is-opening,.ai-platform-model-picker__menu.is-closing{animation:none}} .ai-platform-model-picker__option{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--aip-text);font:inherit;text-align:left;cursor:pointer} .ai-platform-model-picker__option:hover,.ai-platform-model-picker__option.is-selected{background:var(--aip-hover)} .ai-platform-model-picker__provider-heading{display:block;height:1px;margin:7px 9px;background:var(--aip-border);opacity:.85} .ai-platform-model-picker__check{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;color:var(--aip-text);font-size:13px;opacity:0} .ai-platform-model-picker__option.is-selected .ai-platform-model-picker__check{opacity:1} .ai-platform-generator__model-wrap .ai-platform-model-picker{min-width:350px} .ai-platform-generator__model-wrap .ai-platform-model-picker__trigger{min-width:350px} @media(max-width:820px){.ai-platform-generator__model-wrap .ai-platform-model-picker,.ai-platform-generator__model-wrap .ai-platform-model-picker__trigger{min-width:280px}} @media(max-width:520px){} /* v0.8.0: prevent mouse-click focus from leaving persistent blue focus styles. */ .ai-platform-generator button:focus:not(:focus-visible), .ai-platform-generator a:focus:not(:focus-visible), .ai-platform-generator [role="button"]:focus:not(:focus-visible){ outline:none !important; box-shadow:none !important; } /* v0.8.0: vertically center the model-picker chevron within the full trigger. */ .ai-platform-model-picker__trigger > .ai-platform-model-picker__chevron{ top:0; bottom:0; right:12px; width:18px; height:auto; margin:0; padding:0; display:flex; align-items:center; justify-content:center; font-size:0; line-height:0; transform:none; } .ai-platform-model-picker__trigger > .ai-platform-model-picker__chevron::before{ content:""; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transform-origin:center; } /* v0.8.4 Chat upload UX */ .ai-platform-generator__message-actions{margin-top:5px} .ai-platform-generator__message.is-user .ai-platform-generator__message-actions{justify-content:flex-end} .ai-platform-generator__tool--attachment:disabled{opacity:.35;cursor:not-allowed} .ai-platform-generator--attachments-disabled .ai-platform-generator__tool--attachment{opacity:.35} .ai-platform-generator__message.is-user .ai-platform-generator__message-column{width:auto!important;max-width:78%;min-width:0;flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end} .ai-platform-generator__message.is-user .ai-platform-generator__message-content{display:block;width:auto!important;max-width:100%;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere} .ai-platform-generator__message.is-user .ai-platform-generator__message-content > div{min-width:0} .ai-platform-generator__message.is-user .ai-platform-generator__message-actions{width:auto;align-self:flex-end} @media(max-width:520px){.ai-platform-generator__message-column{max-width:82%}.ai-platform-generator__message.is-user .ai-platform-generator__message-column{max-width:82%}.ai-platform-generator__model-wrap .ai-platform-model-picker,.ai-platform-generator__model-wrap .ai-platform-model-picker__trigger{min-width:0;max-width:100%;width:100%}} /* 0.8.4 hotfix: keep user bubbles content-sized without collapsing characters */ .ai-platform-generator__message.is-user .ai-platform-generator__message-column{ flex:0 1 auto!important; width:fit-content!important; max-width:78%!important; min-width:0!important; } .ai-platform-generator__message.is-user .ai-platform-generator__message-content{ display:block!important; width:fit-content!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; white-space:pre-wrap!important; overflow-wrap:anywhere!important; word-break:normal!important; } .ai-platform-generator__message.is-user .ai-platform-generator__message-content > div{ width:auto!important; max-width:100%!important; min-width:0!important; } @media(max-width:520px){ .ai-platform-generator__message.is-user .ai-platform-generator__message-column{max-width:82%!important} } /* ChatGPT-style scrollbars: thin, rounded, unobtrusive */ .ai-platform-generator, .ai-platform-generator *{ scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.28) transparent; } .ai-platform-generator::-webkit-scrollbar, .ai-platform-generator *::-webkit-scrollbar{ width:6px; height:6px; } .ai-platform-generator::-webkit-scrollbar-track, .ai-platform-generator *::-webkit-scrollbar-track{ background:transparent; } .ai-platform-generator::-webkit-scrollbar-thumb, .ai-platform-generator *::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.28); border-radius:999px; } .ai-platform-generator::-webkit-scrollbar-thumb:hover, .ai-platform-generator *::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.45); } .ai-platform-generator[data-theme="dark"], .ai-platform-generator[data-theme="dark"] *{ scrollbar-color:rgba(255,255,255,.28) transparent; } .ai-platform-generator[data-theme="dark"]::-webkit-scrollbar-thumb, .ai-platform-generator[data-theme="dark"] *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); } .ai-platform-generator[data-theme="dark"]::-webkit-scrollbar-thumb:hover, .ai-platform-generator[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.45); } .ai-platform-credit-inline{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.ai-platform-credit-amount{font-weight:800}.ai-platform-credit-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;color:currentColor;flex:0 0 17px}.ai-platform-credit-icon img{display:block;width:17px;height:17px;object-fit:contain}.ai-platform-credit-unit{font-weight:700}.ai-platform-credit-free-label{font-weight:800} .ai-platform-generator__credit-icon{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--aip-text);font-size:10px;line-height:1}.ai-platform-generator__credit-icon img{display:block;width:100%;height:100%;object-fit:contain} /* Mobile-only controls are hidden on desktop. */ .ai-platform-mobile-history-close{display:none !important;} @media(max-width:520px){ .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{ 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; margin:0 !important; box-sizing:border-box !important; z-index:100100 !important; left:0 !important; right:0 !important; border-left:0 !important; border-radius:0 !important; overflow:auto !important; } } /* v0.8.6 mobile workspace branding and compact icons */ .ai-platform-generator__brand-mark{ display:grid !important; place-items:center !important; overflow:hidden !important; } .ai-platform-generator__brand-mark img{ width:100% !important; height:100% !important; border-radius:inherit !important; } .ai-platform-generator__workspace-icon svg{ display:block !important; width:16px !important; height:16px !important; color:currentColor !important; } @media(max-width:520px){ .ai-platform-generator__workspace-icon svg{ width:15px !important; height:15px !important; } .ai-platform-generator__brand-mark{ width:44px !important; height:44px !important; border-radius:10px !important; background:#000 !important; } } /* v0.8.6 Mobile Stable Fix6 — workspace icon sizing */ .ai-platform-generator__workspace-icon svg{ width:22px !important; height:22px !important; } @media(max-width:520px){ .ai-platform-generator__workspace-icon svg{ width:20px !important; height:20px !important; } } /* v0.8.6 Mobile Stable Fix7 */ .ai-platform-generator__brand-mark{ } .ai-platform-generator__brand-mark img{ } @media(max-width:520px){ .ai-platform-generator__brand-mark{ width:48px !important; height:48px !important; border:0 !important; border-radius:0 !important; } .ai-platform-generator__workspace-icon svg{ width:24px !important; height:24px !important; } } @media(max-width:520px){ .ai-platform-generator.is-mobile-workspace-open .ai-platform-generator__sidebar{ z-index:100050 !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{ z-index:100200 !important; } } /* v0.8.8 Fix1 — Workspace home navigation */ .ai-platform-generator__workspace-home{cursor:pointer} .ai-platform-generator__workspace-home:hover{color:var(--aip-text);text-decoration:none} .ai-platform-generator__workspace-home .ai-platform-generator__workspace-icon{width:auto;font-size:26px;line-height:1} /* v0.8.8 Fix2 — transparent AIGC Motion branding in workspace sidebar */ .ai-platform-generator__brand-mark img{} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__brand-mark{width:42px;height:42px;justify-content:center;overflow:hidden} .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__brand-mark img{width:164px;max-width:none;flex:none;object-fit:contain;object-position:left center} /* v0.8.8 Fix2 final branding override — no logo background on any viewport. */ .ai-platform-generator__brand-mark{ justify-content:flex-start !important; width:164px !important; height:42px !important; border-radius:0 !important; } .ai-platform-generator__brand-mark img{ width:164px !important; height:42px !important; max-width:none !important; max-height:none !important; object-position:left center !important; border-radius:0 !important; } @media(max-width:520px){ .ai-platform-generator__brand-mark{ width:164px !important; height:42px !important; margin:0 !important; background:transparent !important; } .ai-platform-generator__brand-mark img{ width:164px !important; height:42px !important; } } .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__brand-mark{ width:42px !important; height:42px !important; justify-content:flex-start !important; overflow:hidden !important; } .ai-platform-generator.is-sidebar-collapsed .ai-platform-generator__brand-mark img{ width:164px !important; height:42px !important; max-width:none !important; flex:0 0 auto !important; object-fit:contain !important; object-position:left center !important; } /* v0.8.8 Fix4 — Sidebar uses the standalone AIGC icon; remove link underline from Home. */ .ai-platform-generator__brand-mark{width:44px !important;height:44px !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:visible !important;background:transparent !important;border:0 !important;padding:0 !important;box-shadow:none !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;border:0 !important;box-shadow:none !important;} .ai-platform-generator__workspace-home,.ai-platform-generator__workspace-home:hover,.ai-platform-generator__workspace-home:focus,.ai-platform-generator__workspace-home:active{color:var(--aip-text) !important;text-decoration:none !important;} .ai-platform-generator__workspace-home span:last-child{text-decoration:none !important;} .ai-platform-generator__workspace-home svg{text-decoration:none !important;} /* v0.8.8 Fix17 — prevent the WordPress theme shell from reappearing at compact widths. * The AI Workspace is its own app surface; at <=1199px keep the app full-viewport and * neutralize common Astra/theme chrome without affecting normal site pages. */ @media (max-width:1199px){ body.ai-platform-workspace-page{ margin:0 !important; padding:0 !important; min-width:0 !important; overflow:hidden !important; background:var(--aip-bg,#111214) !important; } body.ai-platform-workspace-page #masthead, body.ai-platform-workspace-page header.site-header, body.ai-platform-workspace-page .site-header, body.ai-platform-workspace-page .ast-primary-header-bar, body.ai-platform-workspace-page .ast-mobile-header-wrap, body.ai-platform-workspace-page .ast-above-header-wrap, body.ai-platform-workspace-page .ast-below-header-wrap, body.ai-platform-workspace-page #colophon, body.ai-platform-workspace-page footer.site-footer, body.ai-platform-workspace-page .site-footer, body.ai-platform-workspace-page .entry-header{ display:none !important; } body.ai-platform-workspace-page .site-content, body.ai-platform-workspace-page .content-area, body.ai-platform-workspace-page .site-main, body.ai-platform-workspace-page .ast-container, body.ai-platform-workspace-page .entry-content{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; } body.ai-platform-workspace-page .ai-platform-generator{ position:fixed !important; inset:0 !important; width:100vw !important; max-width:none !important; margin:0 !important; border-radius:0 !important; z-index:2147483000 !important; } } /* v0.8.8 Fix22 — responsive model picker/status polish. */ .ai-platform-image-status, .ai-platform-video-status{ position:absolute !important; right:18px; display:inline-flex !important; align-items:center !important; gap:6px !important; color:#6b7280; font-size:11px; line-height:1; white-space:nowrap; z-index:170; } .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.9.4-Fix5 — prevent a Chat flash while a deep-linked workspace is booting. * The server-rendered root mode is available before footer scripts execute. * Keep the requested workspace visible/hidden during the JS initialization gap; * normal [hidden] state is restored by the workspace scripts immediately after. */ .ai-platform-generator.is-image-mode .ai-platform-generator__main, .ai-platform-generator.is-video-mode .ai-platform-generator__main, .ai-platform-generator.is-voice-mode .ai-platform-generator__main{display:none !important;} .ai-platform-generator.is-image-mode .ai-platform-image-view, .ai-platform-generator.is-video-mode .ai-platform-video-view, .ai-platform-generator.is-voice-mode .ai-platform-voice-view{display:block !important;} .ai-platform-generator.is-image-mode .ai-platform-video-view, .ai-platform-generator.is-video-mode .ai-platform-image-view{display:none !important;} .ai-platform-generator.is-chat-mode .ai-platform-voice-view,.ai-platform-generator.is-image-mode .ai-platform-voice-view,.ai-platform-generator.is-video-mode .ai-platform-voice-view{display:none !important;} /* Only the active tool owns the top-right status label. */ .ai-platform-generator.is-chat-mode .ai-platform-image-status, .ai-platform-generator.is-chat-mode .ai-platform-video-status, .ai-platform-generator.is-chat-mode .ai-platform-voice-status, .ai-platform-generator.is-image-mode .ai-platform-generator__status, .ai-platform-generator.is-image-mode .ai-platform-video-status, .ai-platform-generator.is-video-mode .ai-platform-generator__status, .ai-platform-generator.is-video-mode .ai-platform-image-status, .ai-platform-generator.is-video-mode .ai-platform-voice-status, .ai-platform-generator.is-voice-mode .ai-platform-generator__status, .ai-platform-generator.is-voice-mode .ai-platform-image-status, .ai-platform-generator.is-voice-mode .ai-platform-video-status{ display:none !important; } @media (min-width:521px) and (max-width:1199px){ .ai-platform-generator__model-wrap{ justify-content:center !important; width:100%; } .ai-platform-generator__model-wrap .ai-platform-model-picker, .ai-platform-generator__model-wrap .ai-platform-model-picker__trigger{ min-width:0 !important; width:min(520px,58vw) !important; max-width:520px !important; } .ai-platform-generator__status{ right:56px !important; z-index:160 !important; } .ai-platform-image-status, .ai-platform-video-status{ right:56px !important; top:50% !important; transform:translateY(-50%); max-width:calc(100% - 150px); overflow:hidden; text-overflow:ellipsis; } } @media (max-width:520px){ .ai-platform-image-status, .ai-platform-video-status{ right:56px !important; top:16px !important; transform:none !important; max-width:calc(100% - 142px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* v0.8.8 Fix23 — final status positioning and desktop green indicator. */ @media (min-width:1200px){ .ai-platform-image-topbar, .ai-platform-video-topbar{ position:relative !important; } .ai-platform-generator .ai-platform-image-status, .ai-platform-generator .ai-platform-video-status{ position:absolute !important; top:50% !important; right:18px !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) !important; display:inline-flex !important; align-items:center !important; gap:6px !important; white-space:nowrap !important; z-index:20 !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;} } /* v0.8.9 Short Tab Scroll Fix1 — allow very short Tab layouts (e.g. phone landscape) to scroll vertically. */ @media (min-width:521px) and (max-width:1199px) and (max-height:600px){ body.ai-platform-workspace-page{ overflow:hidden !important; } body.ai-platform-workspace-page .ai-platform-generator{ position:fixed !important; inset:0 !important; height:100dvh !important; min-height:0 !important; max-height:none !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body.ai-platform-workspace-page .ai-platform-generator__app{ height:auto !important; min-height:100dvh !important; } body.ai-platform-workspace-page .ai-platform-generator__main{ min-height:100dvh !important; overflow:visible !important; } body.ai-platform-workspace-page .ai-platform-image-body, body.ai-platform-workspace-page .ai-platform-video-body{ overflow:visible !important; min-height:0 !important; } } /* 0.9.4-F TestFix25 — media history detail modal. Breakpoints are intentionally * independent: Mobile <=520px, Tab 521–1199px, Desktop >=1200px. */ .ai-platform-history-detail-overlay{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:24px;background:rgba(3,7,12,.72);backdrop-filter:blur(10px);opacity:1;visibility:visible} .ai-platform-history-detail-overlay[hidden]{display:none} .ai-platform-history-detail-backdrop{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer} .ai-platform-history-detail-dialog{position:relative;z-index:1;width:min(1040px,calc(100vw - 48px));max-height:min(88dvh,860px);display:grid;grid-template-columns:minmax(0,1.22fr) minmax(340px,.78fr);grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border:1px solid var(--aip-border);border-radius:18px;background:var(--aip-surface);color:var(--aip-text);box-shadow:0 30px 100px rgba(0,0,0,.45)} .ai-platform-history-detail-close{position:absolute;right:14px;top:12px;z-index:4;width:34px;height:34px;border:1px solid var(--aip-border);border-radius:10px;background:rgba(10,14,22,.72);color:var(--aip-text);font-size:22px;line-height:1;cursor:pointer} .ai-platform-history-detail-media{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.08));overflow:auto} .ai-platform-history-detail-image-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center;cursor:zoom-in}.ai-platform-history-detail-image-grid.is-single{grid-template-columns:minmax(0,1fr)} .ai-platform-history-detail-image-grid img{display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:12px;background:#070b11;border:1px solid var(--aip-border);cursor:zoom-in}.ai-platform-history-detail-image-grid.is-single img{max-width:88%;max-height:68dvh;margin:0 auto} .ai-platform-history-detail-media > video{display:block;width:100%;max-height:68dvh;object-fit:contain;border-radius:12px;background:#05080d;border:1px solid var(--aip-border)} .ai-platform-history-detail-content{min-width:0;min-height:0;overflow:auto;padding:34px 28px 20px;border-left:1px solid var(--aip-border)} .ai-platform-history-detail-content{scrollbar-width:thin;scrollbar-color:rgba(120,140,165,.58) transparent} .ai-platform-history-detail-content::-webkit-scrollbar{width:7px;height:7px} .ai-platform-history-detail-content::-webkit-scrollbar-track{background:transparent} .ai-platform-history-detail-content::-webkit-scrollbar-thumb{background:rgba(120,140,165,.58);border-radius:999px;border:2px solid transparent;background-clip:padding-box} .ai-platform-history-detail-content::-webkit-scrollbar-thumb:hover{background:rgba(160,180,205,.78);border:2px solid transparent;background-clip:padding-box} .ai-platform-history-detail-media{scrollbar-width:thin;scrollbar-color:rgba(120,140,165,.45) transparent} .ai-platform-history-detail-media::-webkit-scrollbar{width:7px;height:7px} .ai-platform-history-detail-media::-webkit-scrollbar-track{background:transparent} .ai-platform-history-detail-media::-webkit-scrollbar-thumb{background:rgba(120,140,165,.45);border-radius:999px;border:2px solid transparent;background-clip:padding-box} .ai-platform-history-detail-media::-webkit-scrollbar-thumb:hover{background:rgba(160,180,205,.68);border:2px solid transparent;background-clip:padding-box} .ai-platform-history-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px} .ai-platform-history-detail-kicker{display:block;color:var(--aip-accent);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase} .ai-platform-history-detail-head h2{margin:.3rem 0 0;font-size:22px;line-height:1.2;color:var(--aip-text)} .ai-platform-history-detail-date-row{display:flex;align-items:center;min-height:16px;margin:-8px 0 18px}.ai-platform-history-detail-date{display:block;color:var(--aip-muted);font-size:11px;line-height:1.4;white-space:nowrap} .ai-platform-history-detail-section{margin-top:18px} .ai-platform-history-detail-label{margin-bottom:7px;color:var(--aip-muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .ai-platform-history-detail-prompt{white-space:pre-wrap;color:var(--aip-text);font-size:13px;line-height:1.58;word-break:break-word} .ai-platform-history-detail-meta{margin-top:18px;color:var(--aip-muted);font-size:11px;line-height:1.5;word-break:break-word} .ai-platform-history-detail-options{margin-top:10px;color:var(--aip-muted);font-size:11px;line-height:1.5;min-height:0} .ai-platform-history-detail-references{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .ai-platform-history-detail-reference{min-width:0} .ai-platform-history-detail-reference img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;border:1px solid var(--aip-border);background:#070b11} .ai-platform-history-detail-reference span{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--aip-muted);font-size:9px} .ai-platform-history-detail-actions{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--aip-border);background:var(--aip-surface-2)} .ai-platform-history-detail-badges{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;flex-wrap:wrap}.ai-platform-history-detail-badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.045);color:#d9e3ee;font-size:10px;line-height:1;white-space:nowrap}.ai-platform-history-detail-badge strong{color:var(--aip-muted);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ai-platform-history-detail-badge span{color:var(--aip-text);font-weight:600}.ai-platform-history-detail-download,.ai-platform-history-detail-use{min-height:42px;padding:0 17px;border-radius:10px;text-decoration:none;font:600 12px/38px inherit;cursor:pointer} .ai-platform-history-detail-download{border:1px solid var(--aip-border);background:transparent;color:var(--aip-text)} .ai-platform-history-detail-use{border:0;background:var(--aip-accent);color:#07111a} .ai-platform-history-image-lightbox{position:fixed;inset:0;z-index:2147483650;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.86);backdrop-filter:blur(8px);box-sizing:border-box}.ai-platform-history-image-lightbox[hidden]{display:none}.ai-platform-history-image-lightbox-backdrop{position:absolute;inset:0;border:0;background:transparent}.ai-platform-history-image-lightbox-inner{position:relative;z-index:1;max-width:94vw;max-height:94dvh;display:flex;align-items:center;justify-content:center}.ai-platform-history-image-lightbox-img{display:block;max-width:94vw;max-height:90dvh;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 30px 100px rgba(0,0,0,.65)}body.ai-platform-history-detail-open{overflow:hidden} /* Tab: 521–1199px — intentionally distinct from Desktop. */ @media (min-width:521px) and (max-width:1199px){ .ai-platform-history-detail-overlay{padding:20px} .ai-platform-history-detail-dialog{width:min(92vw,900px);grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)} .ai-platform-history-detail-media{padding:18px} .ai-platform-history-detail-image-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .ai-platform-history-detail-content{padding:30px 22px 18px} .ai-platform-history-detail-head h2{font-size:20px} } /* Mobile: <=520px — stacked, touch-first modal rather than the Tab split layout. */ @media (max-width:520px){ .ai-platform-history-detail-dialog{max-height:94dvh;} .ai-platform-history-detail-media{max-height:42dvh;padding:12px} .ai-platform-history-detail-image-grid{grid-template-columns:1fr 1fr;gap:7px} .ai-platform-history-detail-image-grid img{max-height:38dvh;border-radius:9px} .ai-platform-history-detail-media > video{max-height:38dvh;border-radius:9px} .ai-platform-history-detail-content{flex:1 1 auto;border-top:1px solid var(--aip-border);padding:18px 15px 12px} .ai-platform-history-detail-head{margin-bottom:14px;gap:8px} .ai-platform-history-detail-prompt{line-height:1.5} .ai-platform-history-detail-reference span{display:none} .ai-platform-history-detail-actions{padding:10px 12px;gap:7px} .ai-platform-history-detail-download,.ai-platform-history-detail-use{flex:1;text-align:center;min-height:40px;font-size:11px} } /* TestFix36 — History Detail download-all, date placement, lightbox, and mobile image layout. */ .ai-platform-history-detail-overlay{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease} .ai-platform-history-detail-overlay.is-open{opacity:1;visibility:visible} .ai-platform-history-detail-overlay.is-closing{opacity:0;visibility:hidden} .ai-platform-history-detail-dialog{transform:translateY(10px) scale(.985);opacity:0;transition:transform .22s cubic-bezier(.2,.75,.2,1),opacity .18s ease} .ai-platform-history-detail-overlay.is-open .ai-platform-history-detail-dialog{transform:translateY(0) scale(1);opacity:1} .ai-platform-history-detail-overlay.is-closing .ai-platform-history-detail-dialog{transform:translateY(8px) scale(.985);opacity:0} .ai-platform-history-detail-actions{justify-content:flex-end} .ai-platform-history-detail-badges{order:1;margin-right:auto} .ai-platform-history-detail-download{order:2} .ai-platform-history-detail-use{order:3} .ai-platform-history-detail-reference img{cursor:zoom-in} .ai-platform-history-detail-reference img:hover{border-color:rgba(79,209,255,.55);box-shadow:0 0 0 2px rgba(79,209,255,.10)} .ai-platform-history-image-lightbox{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease} .ai-platform-history-image-lightbox.is-open{opacity:1;visibility:visible} .ai-platform-history-image-lightbox.is-closing{opacity:0;visibility:hidden} .ai-platform-history-image-lightbox-inner{transform:scale(.96);opacity:0;transition:transform .22s cubic-bezier(.2,.75,.2,1),opacity .18s ease} .ai-platform-history-image-lightbox.is-open .ai-platform-history-image-lightbox-inner{transform:scale(1);opacity:1} .ai-platform-history-image-lightbox.is-closing .ai-platform-history-image-lightbox-inner{transform:scale(.97);opacity:0} .ai-platform-history-image-lightbox-backdrop{cursor:zoom-out} @media (min-width:521px) and (max-width:1199px){ .ai-platform-history-detail-dialog{width:min(94vw,920px);max-height:90dvh} .ai-platform-history-detail-actions{padding:12px 16px} } @media (max-width:520px){ .ai-platform-history-detail-overlay{place-items:end center;padding:0} .ai-platform-history-detail-dialog{width:100%;max-height:96dvh;height:auto;border-radius:18px 18px 0 0;display:flex;flex-direction:column;transform:translateY(18px)} .ai-platform-history-detail-overlay.is-open .ai-platform-history-detail-dialog{transform:translateY(0)} .ai-platform-history-detail-media{display:block;flex:0 1 auto;max-height:46dvh;padding:10px;overflow:auto} .ai-platform-history-detail-image-grid{grid-template-columns:1fr;gap:8px;align-content:start} .ai-platform-history-detail-image-grid.is-single{grid-template-columns:1fr} .ai-platform-history-detail-image-grid img,.ai-platform-history-detail-image-grid.is-single img{width:100%;max-width:100%;height:auto;max-height:none;margin:0 auto;border-radius:10px} .ai-platform-history-detail-content{flex:0 1 auto;max-height:34dvh;overflow:auto;padding:16px 14px 10px;border-left:0;border-top:1px solid rgba(255,255,255,.10)} .ai-platform-history-detail-head{margin-bottom:12px} .ai-platform-history-detail-head h2{font-size:18px} .ai-platform-history-detail-date-row{margin:-6px 0 12px} .ai-platform-history-detail-date{font-size:10px} .ai-platform-history-detail-section{margin-top:12px} .ai-platform-history-detail-prompt{font-size:12px;line-height:1.52} .ai-platform-history-detail-references{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .ai-platform-history-detail-actions{order:3;display:flex;flex-wrap:wrap;justify-content:stretch;padding:10px 12px 12px;gap:8px} .ai-platform-history-detail-download{order:1;flex:1 1 calc(50% - 4px);min-width:0} .ai-platform-history-detail-use{order:2;flex:1 1 calc(50% - 4px);min-width:0} .ai-platform-history-detail-badges{order:3;width:100%;flex:0 0 100%;margin:0;gap:6px} .ai-platform-history-detail-badge{min-height:28px;padding:5px 8px;font-size:9px} .ai-platform-history-detail-badge strong{font-size:7px} .ai-platform-history-image-lightbox{padding:12px} .ai-platform-history-image-lightbox-inner{max-width:100vw;max-height:100dvh} .ai-platform-history-image-lightbox-img{max-width:100vw;max-height:92dvh;border-radius:8px} } /* v0.9.4-Fix6 — mobile multi-image History Detail uses a horizontal swipe carousel. */ @media (max-width:520px){ .ai-platform-history-detail-image-grid:not(.is-single){ display:flex; width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior-x:contain; align-content:stretch; } .ai-platform-history-detail-image-grid:not(.is-single)::-webkit-scrollbar{display:none} .ai-platform-history-detail-image-grid:not(.is-single) img{ flex:0 0 100%; width:100%; max-width:100%; height:40dvh; max-height:40dvh; margin:0; object-fit:contain; scroll-snap-align:center; scroll-snap-stop:always; } } /* Fix50 — Site-wide subtle micro-interactions (buttons, links, focus, loading). Additive only: no existing colors/layout are changed. This only smooths the transitions between states that already existed (e.g. a button's own :hover background), adds a light press/focus state, and provides opt-in utility classes (.aip-is-loading, [data-aip-reveal]) that do nothing unless a template/script explicitly uses them. Scoped to this plugin's own screens (.ai-platform-generator, .ai-platform-login) so the surrounding theme/site is never affected. Respects prefers-reduced-motion throughout. */ :root{--aip-ease:.18s cubic-bezier(.2,.75,.2,1)} .ai-platform-generator button,.ai-platform-generator a,.ai-platform-generator input[type="submit"],.ai-platform-generator input[type="button"],.ai-platform-generator select,.ai-platform-login button,.ai-platform-login a,.ai-platform-login input[type="submit"]{transition:background-color var(--aip-ease),color var(--aip-ease),border-color var(--aip-ease),box-shadow var(--aip-ease),transform var(--aip-ease),opacity var(--aip-ease)} .ai-platform-generator button:not(:disabled):active,.ai-platform-generator input[type="submit"]:not(:disabled):active,.ai-platform-generator input[type="button"]:not(:disabled):active,.ai-platform-login button:not(:disabled):active,.ai-platform-login input[type="submit"]:not(:disabled):active{transform:translateY(1px) scale(.985)} .ai-platform-generator a:not(.ai-platform-generator__chat-item):hover{opacity:.82} .ai-platform-generator button:focus-visible,.ai-platform-generator a:focus-visible,.ai-platform-generator input:focus-visible,.ai-platform-generator select:focus-visible,.ai-platform-login button:focus-visible,.ai-platform-login a:focus-visible,.ai-platform-login input:focus-visible{outline:2px solid var(--aip-accent,#111827);outline-offset:2px} /* Entrance fade for the main shell — pure CSS, never depends on JS running, so a blocked/slow script can never leave the page stuck invisible. */ .ai-platform-generator,.ai-platform-login{animation:aip-shell-in .28s cubic-bezier(.2,.75,.2,1) both} @keyframes aip-shell-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* Reusable loading utilities. Opt-in only — adding the class is up to the template/script; nothing above applies these automatically. */ .aip-is-loading{position:relative;pointer-events:none;color:transparent!important} .aip-is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(0,0,0,.18);border-top-color:var(--aip-accent,#111827);border-radius:50%;animation:aip-spin .7s linear infinite} @keyframes aip-spin{to{transform:rotate(360deg)}} /* Reusable scroll-entrance utility. An element needs both the attribute and, once a script adds it, the .is-visible class — until then it renders exactly as it would have without this rule, so nothing changes unless a template opts in. */ [data-aip-reveal]{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.75,.2,1)} [data-aip-reveal].is-visible{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .ai-platform-generator button,.ai-platform-generator a,.ai-platform-generator input[type="submit"],.ai-platform-generator input[type="button"],.ai-platform-generator select,.ai-platform-login button,.ai-platform-login a,.ai-platform-login input[type="submit"],.ai-platform-generator,.ai-platform-login,[data-aip-reveal]{animation:none!important;transition:none!important} .ai-platform-generator button:not(:disabled):active,.ai-platform-generator input[type="submit"]:not(:disabled):active,.ai-platform-generator input[type="button"]:not(:disabled):active,.ai-platform-login button:not(:disabled):active,.ai-platform-login input[type="submit"]:not(:disabled):active{transform:none} [data-aip-reveal]{opacity:1;transform:none} .aip-is-loading::after{animation:none;border-top-color:rgba(0,0,0,.18)} } /* Fix51 — More animation coverage + a touch more visual polish, building on Fix50. Still additive-only and scoped to .ai-platform-generator / .ai-platform-login: no base colors change, only added motion/shadow on interaction, plus new opt-in tokens (--aip-shadow-sm/md, --aip-gradient-*) that existing rules don't reference, so nothing already on screen shifts. */ /* Newest chat message eases in. Scoped to :last-child only (not every message) so re-rendering a long chat history never replays the animation on every bubble at once. */ .ai-platform-generator__message:last-child{animation:aip-message-in .32s cubic-bezier(.2,.75,.2,1) both} @keyframes aip-message-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* Sidebar chat items get a small nudge on hover (background hover already existed). */ .ai-platform-generator__chat-item:hover{transform:translateX(2px)} /* "Working" status dot gets a gentle pulse instead of sitting static. */ .ai-platform-generator__status.is-working .ai-platform-generator__status-dot{animation:aip-pulse 1.3s ease-in-out infinite} @keyframes aip-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}} /* Composer gets a soft focus glow instead of a flat static border. */ .ai-platform-generator__composer{transition:box-shadow var(--aip-ease),border-color var(--aip-ease)} .ai-platform-generator__composer:focus-within{border-color:var(--aip-accent);box-shadow:var(--aip-shadow),0 0 0 3px rgba(17,24,39,.08)} /* Send button: a little lift and depth on hover instead of a flat color swap. */ .ai-platform-generator button.ai-platform-generator__send:hover:not(:disabled){background:linear-gradient(135deg,#1f2430,#000);box-shadow:0 6px 16px rgba(0,0,0,.35);transform:translateY(-1px)} /* Model picker trigger lifts slightly on hover, matching the send button. */ .ai-platform-model-picker__trigger:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.07)} /* New-chat / retry buttons get the same subtle lift-and-shadow treatment. */ .ai-platform-generator__new:hover,.ai-platform-generator__retry:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)} /* Empty-state welcome copy eases in with a small stagger for a touch more life. */ .ai-platform-generator__empty-inner{animation:aip-shell-in .45s cubic-bezier(.2,.75,.2,1) both} .ai-platform-generator__empty-inner h2{animation:aip-shell-in .45s cubic-bezier(.2,.75,.2,1) .06s both} .ai-platform-generator__empty-inner p{animation:aip-shell-in .45s cubic-bezier(.2,.75,.2,1) .12s both} /* History thumbnails get a subtle zoom on hover, on top of the existing border/shadow hover. */ .ai-platform-history-detail-reference img{transition:transform var(--aip-ease),border-color var(--aip-ease),box-shadow var(--aip-ease)} .ai-platform-history-detail-reference img:hover{transform:scale(1.015)} @media (prefers-reduced-motion:reduce){ .ai-platform-generator__message:last-child,.ai-platform-generator__status.is-working .ai-platform-generator__status-dot,.ai-platform-generator__empty-inner,.ai-platform-generator__empty-inner h2,.ai-platform-generator__empty-inner p{animation:none!important} .ai-platform-generator__chat-item:hover,.ai-platform-generator button.ai-platform-generator__send:hover:not(:disabled),.ai-platform-model-picker__trigger:hover,.ai-platform-generator__new:hover,.ai-platform-generator__retry:hover,.ai-platform-history-detail-reference img:hover{transform:none} }