body[data-page="image"] { height: var(--image-viewport-height, 100dvh); min-height: 540px; display: flex; flex-direction: column; overflow: hidden; }
body[data-page="image"] .site-header { flex-shrink: 0; }
/* Keep scrolling available while hiding its visual tracks in the Image workspace. */
body[data-page="image"] :where(.image-canvas, .image-composer textarea, .image-composer-controls, .image-model-list, .image-option-list, .image-dialog) { scrollbar-width: none; }
body[data-page="image"] :where(.image-canvas, .image-composer textarea, .image-composer-controls, .image-model-list, .image-option-list, .image-dialog)::-webkit-scrollbar { display: none; width: 0; height: 0; }
.image-main { position: relative; width: 100%; max-width: none; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.image-main:has(.image-results:not([hidden])) .image-canvas { padding: 0 10px 24px; }
.image-workspace-label { display: flex; align-items: center; gap: 9px; color: #858585; font-size: 8px; font-weight: 550; letter-spacing: 1.7px; }
.image-workspace-label > span:first-child { width: 4px; height: 4px; border-radius: 50%; background: #dedede; box-shadow: 0 0 8px #ffffff40; }
.image-mode { margin-left: 8px; padding: 5px 7px; border: 1px solid #303030; border-radius: 4px; color: #c2c2c2; font-size: 7px; letter-spacing: 1px; }
.image-canvas { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 0 32px 24px; }
.image-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 18px 48px; min-height: 360px; animation: image-reveal 750ms ease both; }
.image-emblem { width: 190px; height: 166px; position: relative; display: grid; place-items: center; margin-bottom: 22px; isolation: isolate; }
.image-emblem img { display: block; width: 112px; height: 112px; filter: drop-shadow(0 0 24px #ffffff25); z-index: 1; animation: image-logo-breathe 6s ease-in-out infinite; }
.image-emblem-halo { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(ellipse, #ffffff13 0%, #ffffff06 36%, #ffffff00 69%); animation: image-halo-breathe 6s ease-in-out infinite; }
.image-emblem-orbit { position: absolute; width: 158px; height: 158px; border: 1px solid #ffffff0a; border-radius: 50%; }
.image-emblem-orbit::before { content: ""; position: absolute; width: 3px; height: 3px; top: 23px; right: 20px; border-radius: 50%; background: #ffffff48; box-shadow: 0 0 8px #ffffff30; }
.image-eyebrow { margin: 0 0 17px; font-size: 8px; font-weight: 500; letter-spacing: 2px; color: #8d8d8d; }
.image-empty h1 { font-size: clamp(32px, 3.2vw, 47px); font-weight: 620; line-height: 1.17; letter-spacing: -2px; margin: 0; }
.image-empty h1 span { color: #7f7f7f; }
.image-empty-description { color: #878787; font-size: 12px; line-height: 1.8; margin: 20px 0 0; }
.image-empty-rule { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 30px; color: #545454; font-size: 6px; letter-spacing: 3.4px; }
.image-empty-rule span { display: block; width: 28px; height: 1px; background: #242424; }
.image-composer-area { flex-shrink: 0; width: min(880px, calc(100% - 64px)); align-self: center; padding-bottom: 21px; position: relative; z-index: 2; }
.image-composer { display: flex; gap: 18px; padding: 12px; border: 4px solid #1c1c1c; border-radius: 20px; background: #272727; box-shadow: 0 8px 25px #0003; transition: border-color 180ms ease; }
.image-composer:focus-within { border-color: #353535; }
.image-composer-writing { flex: 1; min-width: 0; }
.image-composer textarea { display: block; width: 100%; height: 60px; min-height: 60px; max-height: 180px; resize: none; padding: 4px 4px 12px; color: #f1f1f1; background: transparent; border: 0; outline: 0; font-size: 14px; line-height: 1.6; }
.image-composer textarea::placeholder { color: #868686; opacity: 1; }
.image-composer-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; padding-block: 4px; margin-block: -4px; }
.image-composer-controls > * { flex-shrink: 0; }
.image-composer-controls > .image-model-trigger { flex: 0 0 auto; min-width: 0; }
.image-composer button:focus-visible, .image-composer select:focus-visible { outline-offset: 3px; }
.image-reference-actions { display: flex; align-items: center; flex-shrink: 0; height: 32px; border-radius: 9px; background: #353535; overflow: hidden; }
.image-add-reference { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; padding: 0; border: 0; border-radius: 0; color: #bdbdbd; background: transparent; }
.image-add-reference:hover:not(:disabled) { color: #fff; background: #454545; }
.image-control-divider { height: 14px; width: 1px; background: #4c4c4c; margin: 0; }
.image-model-trigger { display: flex; gap: 8px; align-items: center; min-width: 0; height: 32px; max-width: 260px; padding: 0 12px; border: 0; border-radius: 9px; background: #353535; color: #fff; font-size: 14px; font-weight: 600; }
.image-model-trigger > span:not(.image-model-glyph) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.image-model-trigger svg { flex-shrink: 0; color: #9c9c9c; }
.image-model-glyph { color: #fff; flex-shrink: 0; }
.image-model-trigger:hover:not(:disabled) { background: #414141; }
.image-select-control { display: inline-flex; align-items: center; gap: 6px; height: 32px; background: #353535; border: 0; border-radius: 9px; padding: 0 12px; color: #fff; }
.image-select-control:focus-visible { outline: 1px solid #aaa; }
.image-select-control svg { flex-shrink: 0; }
.image-select-control select { max-width: 99px; width: auto; min-height: 30px; margin: 0; padding: 0 6px; border: 0; outline-offset: 1px; border-radius: 5px; font: inherit; font-size: 10px; font-weight: 500; cursor: pointer; background: #222; color: #ddd; }
.image-select-control select option { background: #181818; }
.image-count-control { display: flex; align-items: center; justify-content: center; height: 32px; min-width: 98px; padding-inline: 6px; background: #353535; border: 0; border-radius: 9px; color: #bebebe; gap: 0; }
.image-count-control button { background: transparent; border: 0; border-radius: 4px; padding: 0; width: 24px; height: 28px; font-size: 17px; color: #a8a8a8; }
.image-count-control button:hover:not(:disabled) { color: #fff; background: #333; }
.image-count-control output { min-width: 9px; color: #fff; text-align: center; font-size: 14px; font-weight: 600; }
#image-count-max { color: #b0b0b0; font-size: 14px; font-weight: 600; margin: 0 7px 0 0; }
.image-generate { flex: 0 0 120px; height: 80px; display: grid; grid-template-columns: 1fr; gap: 3px; align-content: center; align-self: end; padding: 12px 8px; border: 0; border-radius: 12px; background: #fff; color: #111; text-align: center; font-size: 11px; font-weight: 650; box-shadow: 0 3px 0 #bcbcbc, 0 5px 8px #0004; transition: background 180ms, box-shadow 180ms; }
.image-generate:hover:not(:disabled) { background: #f2f2f2; box-shadow: 0 3px 0 #a5a5a5, 0 5px 12px #0005; }
#image-generate-label { text-transform: uppercase; }
.image-generate-price { grid-column: 1 / -1; font-size: 10px; line-height: 1.4; font-weight: 500; color: #333; margin: 0; }
.image-generate-price::before { content: '✦'; margin-right: 4px; font-size: 11px; }
.image-generate:disabled { cursor: default; background: #fff; color: #777; }
.image-generate:disabled .image-generate-price { color: #888; }
.image-composer button:disabled:not(.image-generate), .image-composer select:disabled { opacity: .45; cursor: default; }
.image-composer-caption { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 4px 0; color: #666; font-size: 8px; line-height: 1.7; }
.image-keyboard-hint { flex-shrink: 0; color: #646464; }
.image-keyboard-hint kbd { font-family: inherit; font-size: 7px; padding: 2px 3px; border: 1px solid #292929; border-radius: 3px; color: #8b8b8b; }
.image-notice { max-width: 100%; padding: 11px 14px; margin-bottom: 12px; border: 1px solid #3d3d3d; border-radius: 8px; background: #111; color: #c6c6c6; font-size: 11px; line-height: 1.6; }
.image-notice[data-kind="error"] { border-style: dashed; color: #eee; }
.image-reference-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 6px 11px; }
.image-reference-chip { display: flex; gap: 7px; align-items: center; max-width: 100%; padding: 4px 7px; border: 1px solid #454545; border-radius: 5px; font-size: 9px; color: #bbb; }
.image-reference-chip > span { max-width: 180px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.image-reference-chip button { display: grid; place-items: center; border: 0; background: transparent; color: #ccc; padding: 0 2px; font-size: 15px; }
.image-results { container: image-gallery / inline-size; flex: none; display: flex; flex-wrap: wrap; align-items: start; align-content: start; gap: 8px; width: 100%; min-width: 0; margin: 0; padding: 0 0 12px; }
.image-result { flex: 0 0 100%; min-width: 0; width: 100%; max-width: 100%; animation: image-reveal 350ms ease both; padding: 18px; border: 1px solid #252525; border-radius: 12px; background: #080808; }
.image-result[data-has-images="true"], .image-result[data-state="pending"], .image-result[data-state="failed"], .image-result-gallery { display: contents; }
.image-result-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 14px; }
.image-result-heading > div { min-width: 0; }
.image-result-heading .image-result-prompt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.image-result-prompt { margin: 0; color: #e7e7e7; font-size: 12px; font-weight: 450; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.image-result-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; color: #777; font-size: 8px; line-height: 1.7; }
.image-result-meta > span + span::before { content: "·"; margin-right: 6px; color: #555; }
.image-result-status { flex-shrink: 0; display: inline-flex; gap: 6px; align-items: center; font-size: 8px; line-height: 1.6; color: #adadad; }
.image-result-status[data-active="true"]::before { content: ""; width: 7px; height: 7px; border: 1px solid #555; border-top-color: #fff; border-radius: 50%; animation: image-spin 1s linear infinite; }
.image-result-progress { height: 2px; margin: 16px 0 5px; background: #242424; border-radius: 3px; overflow: hidden; }
.image-result-progress span { display: block; height: 100%; background: #aaa; transition: width 500ms; }
.image-result-message { color: #929292; font-size: 11px; line-height: 1.7; margin: 12px 0 0; }
.image-result-message[data-error="true"] { color: #dedede; }
.image-output { --image-card-fallback-width: calc((100% - 24px) / 4); position: relative; flex: 0 0 var(--image-layout-width, var(--image-card-fallback-width)); min-width: 0; min-height: 0; width: var(--image-layout-width, var(--image-card-fallback-width)); max-width: 100%; height: var(--image-layout-height, auto); aspect-ratio: var(--image-aspect-ratio, 1); margin: 0; overflow: hidden; border: 0; border-radius: 14px; outline: 1px solid #ffffff10; outline-offset: -1px; background: #111; box-shadow: 0 4px 16px #0002; }
@container image-gallery (max-width: 700px) { .image-output { --image-card-fallback-width: calc((100% - 8px) / 2); } }
@container image-gallery (max-width: 380px) { .image-output { --image-card-fallback-width: 100%; } }
.image-output--pending { isolation: isolate; background: #222; }
.image-output--error { display: flex; flex-direction: column; padding: 16px; border: 1px solid #303030; background: linear-gradient(145deg, #1c1c1c, #141414); }
.image-error-heading { display: flex; flex: none; justify-content: space-between; align-items: flex-start; gap: 8px; }
.image-error-close { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid #ffffff18; border-radius: 50%; color: #bbb; background: #ffffff05; font-size: 20px; line-height: 1; }
.image-error-close:hover { color: #fff; background: #ffffff12; border-color: #ffffff30; }
.image-error-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.image-error-badge { min-width: 0; padding: 5px 8px; border: 1px solid #ffffff0a; border-radius: 999px; color: #bbb; background: #ffffff05; font-size: 10px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-error-copy { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 8px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.image-error-copy:focus-visible { outline-offset: -2px; }
.image-error-copy > .image-result-message { flex: none; margin: auto 0; padding: 8px 0; color: #d0d0d0; text-align: center; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.image-output--pending::before { content: ""; position: absolute; inset: -45%; z-index: -1; background: radial-gradient(ellipse at 25% 20%, #ffffff15 0%, #ffffff07 25%, transparent 55%); animation: image-generating-glow 4.8s ease-in-out infinite alternate; }
.image-output--pending::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 15%, #ffffff04 38%, #ffffff09 50%, #ffffff04 62%, transparent 85%); transform: translateX(-100%); animation: image-generating-shimmer 3.8s ease-in-out infinite; }
.image-generating-badge.image-result-status { position: absolute; top: 16px; left: 16px; z-index: 1; display: inline-flex; gap: 8px; max-width: calc(100% - 32px); padding: 8px 11px; border: 1px solid #ffffff06; border-radius: 999px; background: #ffffff04; color: #fff; font-size: 12px; line-height: 18px; font-weight: 600; }
.image-generating-badge.image-result-status[data-active="true"]::before { flex-shrink: 0; width: 12px; height: 12px; border: 2px solid #ffffff18; border-top-color: currentColor; animation-duration: .9s; }
.image-output-preview { display: block; position: relative; width: 100%; height: 100%; background: #111; }
.image-output img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-output-preview:focus-visible { outline-offset: -3px; }
.image-output-preview > .image-result-message { padding: 18px; }
.image-output-label { position: absolute; bottom: 10px; left: 10px; padding: 5px 7px; border-radius: 4px; background: #000b; color: #ddd; font-size: 8px; pointer-events: none; }
.image-result[data-has-images="true"] > .image-result-feedback { flex: 0 0 100%; min-width: 0; max-width: 100%; padding: 18px; border: 1px solid #252525; border-radius: 10px; background: #080808; }
.image-result > .image-result-message { flex: 0 0 100%; }
.image-dialog { color: #fff; background: #111; border: 1px solid #3a3a3a; border-radius: 15px; box-shadow: 0 20px 100px #0008; padding: 0; width: min(470px, calc(100% - 32px)); max-height: min(710px, calc(100dvh - 48px)); }
.image-dialog::backdrop { background: #0008; backdrop-filter: blur(5px); }
.image-dialog[open] { animation: image-dialog-enter 180ms ease both; }
.image-dialog-heading { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 25px 25px 20px; }
.image-dialog-eyebrow { color: #777; font-size: 7px; letter-spacing: 1.5px; margin: 0 0 9px; }
.image-dialog h2 { color: #eee; font-size: 21px; font-weight: 550; line-height: 1.3; letter-spacing: -.7px; margin: 0; }
.image-dialog-close { flex-shrink: 0; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #333; border-radius: 50%; background: #1d1d1d; color: #bdbdbd; font-size: 19px; }
.image-dialog-close:hover { background: #333; color: #fff; }
.image-model-menu { position: fixed; inset: auto; margin: 0; padding: 0; width: min(402px, calc(100vw - 24px)); max-width: none; max-height: var(--image-model-max-height, 650px); overflow: hidden; border: 1px solid #303030; border-radius: 16px; background: linear-gradient(155deg, #252525, #191919 80%); color: #eee; box-shadow: 0 16px 50px #0006; }
.image-model-menu:popover-open { display: flex; flex-direction: column; animation: image-dialog-enter 140ms ease both; }
.image-model-menu::backdrop { background: transparent; }
.image-model-search { flex-shrink: 0; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 10px; border: 0; border-bottom: 1px solid #ffffff05; color: #929292; }
.image-model-search:focus-within { color: #d4d4d4; }
.image-model-search svg { flex-shrink: 0; }
.image-model-search input { min-width: 0; width: 100%; border: 0; background: transparent; color: #eee; outline: 0; padding-block: 13px; font-size: 12px; line-height: 18px; }
.image-model-search input::placeholder { color: #969696; }
.image-model-section { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 9px 12px 7px; color: #969696; font-size: 11px; line-height: 16px; }
.image-model-menu .image-model-list { flex: 1; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; padding: 0 12px 10px; }
.image-model-option { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 56px; padding: 8px 6px; border: 0; border-radius: 12px; background: transparent; color: #eee; text-align: left; }
.image-model-option:hover:not([aria-disabled="true"]) { background: #ffffff07; }
.image-model-option[aria-pressed="true"] { background: #ffffff0a; }
.image-model-option:focus-visible { outline: 1px solid #888; outline-offset: -2px; }
.image-model-option[aria-disabled="true"] { opacity: .45; cursor: default; }
.image-model-option-glyph { display: grid; place-items: center; height: 40px; width: 40px; border: 0; border-radius: 8px; background: #ffffff05; color: #999999; }
.image-model-option[aria-pressed="true"] .image-model-option-glyph { color: #eee; }
.image-company-logo { display: block; flex-shrink: 0; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--company-logo) center / contain no-repeat; mask: var(--company-logo) center / contain no-repeat; }
.image-company-logo[data-brand="google"] { --company-logo: url('/assets/model-brands/google.svg'); }
.image-company-logo[data-brand="openai"] { --company-logo: url('/assets/model-brands/openai.svg'); }
.image-company-logo[data-brand="bytedance"] { --company-logo: url('/assets/model-brands/bytedance.svg'); }
.image-company-logo[data-brand="alibabacloud"] { --company-logo: url('/assets/model-brands/alibabacloud.svg'); }
.image-company-logo[data-brand="bfl"] { --company-logo: url('/assets/model-brands/bfl.svg'); }
.image-company-logo[data-brand="xai"] { --company-logo: url('/assets/model-brands/xai.svg'); }
.image-company-logo[data-brand="microsoft"] { --company-logo: url('/assets/model-brands/microsoft.svg'); }
.image-company-logo[data-brand="midjourney"] { --company-logo: url('/assets/model-brands/midjourney.svg'); }
.image-company-logo[data-brand="generic"] { --company-logo: url('/assets/model-brands/model.svg'); }
.image-model-option-copy { min-width: 0; }
.image-model-option-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 18px; }
.image-model-option-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #929292; font-size: 10px; line-height: 16px; margin-top: 2px; }
.image-model-option-check { color: #eee; font-size: 13px; text-align: right; }
.image-model-no-match { padding: 25px 15px; color: #999; font-size: 12px; text-align: center; }
.image-setting-trigger { gap: 6px; padding: 0 12px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.image-setting-trigger > svg:not(.image-setting-chevron) { width: 16px; height: 16px; }
.image-setting-trigger:hover:not(:disabled), .image-setting-trigger[aria-expanded="true"] { background: #414141; color: #fff; }
.image-setting-chevron { display: none; }
.image-option-menu { position: fixed; inset: auto; margin: 0; padding: 8px; width: min(302px, calc(100vw - 24px)); max-width: none; max-height: var(--image-model-max-height, 600px); overflow: hidden; border: 1px solid #303030; border-radius: 13px; background: linear-gradient(140deg, #262626, #1c1c1c); color: #eee; box-shadow: 0 14px 45px #0006; }
.image-option-menu:popover-open { display: flex; flex-direction: column; animation: image-dialog-enter 140ms ease both; }
.image-option-menu::backdrop { background: transparent; }
.image-option-menu-title { flex-shrink: 0; margin: 0; padding: 9px 8px 12px; color: #959595; font-size: 11px; font-weight: 500; line-height: 15px; }
.image-option-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.image-setting-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; color: #eee; text-align: left; }
.image-setting-option:hover { background: #ffffff06; }
.image-setting-option[aria-selected="true"] { background: #ffffff0a; }
.image-setting-option:focus-visible { outline: 1px solid #777; outline-offset: -1px; }
.image-setting-option-copy { min-width: 0; }
.image-setting-option-label { display: block; font-size: 12px; font-weight: 550; line-height: 18px; }
.image-setting-option-description { display: block; margin-top: 2px; color: #949494; font-size: 11px; line-height: 16px; }
.image-setting-check { flex-shrink: 0; margin-left: auto; padding-left: 6px; color: #eee; font-size: 13px; }
.image-ratio-menu .image-setting-option { min-height: 38px; padding-block: 8px; }
.image-ratio-icon { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; color: #ddd; }
.image-ratio-icon > span { display: block; border: 1.2px solid currentColor; border-radius: 2px; }
.image-reference-dialog { padding-bottom: 26px; }
.image-reference-dialog > p { margin: 0 25px 24px; color: #999; font-size: 12px; line-height: 1.8; }
.image-reference-dialog form { padding-inline: 25px; }
.image-reference-dialog label { display: block; font-size: 10px; color: #aaa; margin-bottom: 10px; }
.image-reference-dialog input { display: block; width: 100%; padding: 12px; border: 1px solid #424242; border-radius: 7px; color: #fff; background: #1c1c1c; font-size: 12px; }
.image-reference-dialog .button { width: 100%; margin-top: 19px; min-height: 43px; font-size: 11px; justify-content: space-between; }
.image-reference-error { font-size: 11px; line-height: 1.7; color: #ddd; }
@keyframes image-halo-breathe { 0%, 100% { opacity: .55; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes image-logo-breathe { 0%, 100% { filter: drop-shadow(0 0 18px #ffffff17); transform: translateY(1px); } 50% { filter: drop-shadow(0 0 31px #ffffff37); transform: translateY(-3px); } }
@keyframes image-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes image-dialog-enter { from { opacity: 0; transform: translateY(5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes image-spin { to { transform: rotate(360deg); } }
@keyframes image-generating-glow { from { opacity: .5; transform: translate(-6%, -4%) scale(.94); } to { opacity: 1; transform: translate(9%, 6%) scale(1.08); } }
@keyframes image-generating-shimmer { 0%, 15% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@media (max-width: 700px) { .image-generating-badge.image-result-status { top: 10px; left: 10px; max-width: calc(100% - 20px); gap: 6px; padding: 6px 8px; font-size: 10px; line-height: 16px; } }
@media (min-width: 900px) and (max-height: 930px) { .image-empty { padding-bottom: 27px; } .image-emblem { width: 160px; height: 137px; margin-bottom: 20px; } .image-emblem img { width: 99px; height: 99px; } .image-emblem-orbit { width: 144px; height: 144px; } .image-empty h1 { font-size: 40px; } .image-empty-rule { margin-top: 23px; } }
@media (min-width: 1600px) { .image-workspace-label { font-size: 9px; } .image-composer-area { width: min(880px, calc(100% - 80px)); padding-bottom: 25px; } .image-empty { padding-bottom: 65px; } }
@media (max-width: 1000px) { .image-composer-area { width: min(880px, calc(100% - 48px)); } }
@media (max-width: 700px) { body[data-page="image"] { min-height: 500px; } .image-workspace-label { font-size: 7px; letter-spacing: 1px; gap: 7px; } .image-mode { margin-left: 2px; font-size: 6px; } .image-canvas { padding: 0 15px 18px; } .image-empty { min-height: 290px; padding: 8px 12px 29px; } .image-emblem { width: 138px; height: 120px; margin-bottom: 22px; } .image-emblem img { width: 86px; height: 86px; } .image-emblem-orbit { width: 122px; height: 122px; } .image-emblem-orbit::before { top: 19px; right: 13px; } .image-eyebrow { font-size: 6px; letter-spacing: 1.6px; margin-bottom: 15px; } .image-empty h1 { font-size: clamp(28px, 7.1vw, 38px); letter-spacing: -1.4px; line-height: 1.2; } .image-empty-description { font-size: 10px; margin-top: 16px; } .image-empty-rule { display: none; } .image-composer-area { width: calc(100% - 26px); padding-bottom: max(13px, env(safe-area-inset-bottom)); } .image-composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 18px; } .image-composer textarea { min-height: 56px; max-height: 110px; font-size: 16px; padding: 3px 3px 10px; line-height: 1.6; resize: none; } .image-composer-controls { gap: 5px; } .image-model-trigger { max-width: calc(100% - 69px); height: 32px; font-size: 12px; } .image-setting-trigger { padding-inline: 10px; font-size: 12px; } .image-add-reference { height: 32px; width: 32px; } .image-select-control { height: 32px; } .image-select-control select { min-height: 28px; font-size: 10px; max-width: 87px; } .image-count-control { height: 32px; min-width: 92px; margin-left: auto; } .image-count-control button { width: 19px; } .image-generate { display: flex; flex-basis: auto; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; height: 48px; min-height: 48px; border-radius: 10px; font-size: 11px; }  .image-generate-price { margin: 0 0 0 auto; font-size: 8px; } .image-composer-caption { font-size: 7px; justify-content: center; text-align: center; padding: 9px 5px 0; } .image-keyboard-hint { display: none; } .image-notice { font-size: 10px; padding: 9px 11px; margin-bottom: 8px; } .image-reference-chips { margin-left: 0; margin-right: 0; } .image-result { padding: 12px; border-radius: 9px; } .image-result-heading { gap: 10px; flex-wrap: wrap; } .image-result-prompt { font-size: 11px; } .image-result-status { font-size: 8px; } .image-dialog-heading { padding: 23px 20px 19px; } .image-dialog h2 { font-size: 20px; } .image-model-search input { font-size: 16px; } .image-model-list { max-height: calc(100dvh - 300px); } .image-reference-dialog input { font-size: 16px; } .image-dialog { max-height: calc(100dvh - 30px); } }
@media (max-width: 380px) { .image-select-control { padding-left: 4px; } .image-select-control svg { display: none; } .image-select-control select { max-width: 82px; padding-inline: 3px; } .image-count-control { min-width: 76px; padding-inline: 0; gap: 0; } .image-count-control output, #image-count-max { font-size: 12px; } .image-count-control button { width: 17px; } .image-composer-controls { gap: 4px; } }
@media (max-height: 640px) { body[data-page="image"] { min-height: 0; } .image-empty { min-height: 230px; padding-bottom: 18px; } .image-emblem { height: 75px; margin-bottom: 15px; } .image-emblem img { width: 62px; height: 62px; } .image-emblem-orbit { width: 88px; height: 88px; } .image-empty h1 { font-size: 27px; letter-spacing: -1px; } .image-empty-description { margin-top: 11px; font-size: 9px; } .image-eyebrow { margin-bottom: 10px; font-size: 6px; } .image-empty-rule { display: none; } }
@media (prefers-reduced-motion: reduce) { .image-emblem img { filter: drop-shadow(0 0 22px #ffffff25); } .image-emblem-halo { opacity: .8; } .image-output--pending::before, .image-output--pending::after, .image-generating-badge.image-result-status[data-active="true"]::before { animation: none; } .image-output--pending::before { opacity: .75; transform: none; } .image-output--pending::after { opacity: 0; } }