.ai-platform-image-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--aip-surface);color:var(--aip-text);z-index:2}
.ai-platform-image-view[hidden]{display:none!important}
.ai-platform-image-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;border-bottom:1px solid var(--aip-border)}
.ai-platform-image-title{font-size:20px;font-weight:700}
.ai-platform-image-subtitle{margin-top:4px;color:var(--aip-muted);font-size:12px}
.ai-platform-image-status{font-size:11px;color:var(--aip-muted)}
.ai-platform-image-status.is-working{color:#f59e0b}
.ai-platform-image-body{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:28px;min-height:0;flex:1;overflow:auto;padding:28px}
.ai-platform-image-controls{padding:20px;border:1px solid var(--aip-border);border-radius:14px;background:var(--aip-surface-2)}
.ai-platform-image-field{display:block;margin-bottom:18px}
.ai-platform-image-field>span{display:block;margin-bottom:7px;font-size:12px;font-weight:600}
.ai-platform-image-field small{color:var(--aip-muted);font-weight:400}
.ai-platform-image-field select,.ai-platform-image-field textarea{display:block;width:100%;border:1px solid var(--aip-border);border-radius:9px;background:var(--aip-surface);color:var(--aip-text);padding:10px;font:inherit;font-size:13px;outline:none}
.ai-platform-image-field textarea{resize:vertical;min-height:110px}
.ai-platform-image-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ai-platform-image-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:150px;border:1.5px dashed var(--aip-border);border-radius:12px;color:var(--aip-muted);cursor:pointer;text-align:center;background:var(--aip-surface)}
.ai-platform-image-upload:hover,.ai-platform-image-upload.is-dragover{border-color:var(--aip-text);background:var(--aip-hover)}
.ai-platform-image-upload-icon{font-size:24px;margin-bottom:6px}
.ai-platform-image-upload strong{font-size:12px;color:var(--aip-text)}
.ai-platform-image-upload small{margin-top:4px;font-size:10px}
.ai-platform-image-reference{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--aip-border);border-radius:10px;background:var(--aip-surface)}
.ai-platform-image-reference img{width:76px;height:76px;object-fit:cover;border-radius:7px}
.ai-platform-image-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ai-platform-image-generate{min-height:42px;border:0;border-radius:9px;background:var(--aip-avatar);color:var(--aip-bg);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ai-platform-image-generate:disabled{opacity:.4;cursor:not-allowed}
.ai-platform-image-note{margin:9px 0 0;color:var(--aip-muted);font-size:9px;text-align:center}
.ai-platform-image-result-wrap{min-width:0}
.ai-platform-image-result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:13px;font-weight:700}
.ai-platform-image-result{padding:14px;border:1px solid var(--aip-border);border-radius:14px;background:var(--aip-surface-2)}
.ai-platform-image-placeholder{display:grid;place-items:center;min-height:420px;color:var(--aip-muted);font-size:12px;text-align:center}
.ai-platform-image-result-img{display:block;max-width:100%;max-height:70vh;margin:auto;border-radius:9px;object-fit:contain}
.ai-platform-image-result-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:10px}
.ai-platform-image-result-actions button,.ai-platform-image-download{border:1px solid var(--aip-border);border-radius:7px;padding:6px 9px;background:var(--aip-surface);color:var(--aip-text);font:inherit;font-size:10px;text-decoration:none;cursor:pointer}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-generate{background:#f5f5f5;color:#171717}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-field select,.ai-platform-generator[data-theme="dark"] .ai-platform-image-field textarea{background:#2f2f2f;color:#ececec}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-upload strong{color:#ececec}
.ai-platform-generator__mode-nav{display:flex;gap:4px;margin:12px 0 4px;padding:3px;border-radius:9px;background:var(--aip-surface-2)}
.ai-platform-generator__mode-button{flex:1;border:0;border-radius:7px;padding:7px 8px;background:transparent;color:var(--aip-muted);font:inherit;font-size:12px;cursor:pointer}
.ai-platform-generator__mode-button:hover,.ai-platform-generator__mode-button.is-active{background:var(--aip-hover);color:var(--aip-text)}
@media(max-width:900px){.ai-platform-image-body{grid-template-columns:1fr;padding:18px}}

.ai-platform-image-view [hidden]{display:none!important}
.ai-platform-image-title{color:var(--aip-text,#202123)!important}
.ai-platform-image-subtitle{color:var(--aip-muted,#6b7280)!important}
.ai-platform-image-view .ai-platform-image-field>span{color:var(--aip-text,#202123)}
.ai-platform-image-view .ai-platform-image-help,
.ai-platform-image-view .ai-platform-image-note{color:var(--aip-muted,#6b7280)}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-title,
.ai-platform-generator[data-theme="dark"] .ai-platform-image-view .ai-platform-image-field>span{color:#ececec!important}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-subtitle,
.ai-platform-generator[data-theme="dark"] .ai-platform-image-help,
.ai-platform-generator[data-theme="dark"] .ai-platform-image-note{color:#a1a1aa!important}
.ai-platform-image-reference[hidden]{display:none!important}

.ai-platform-image-upload + .ai-platform-image-reference{margin-top:0}

/* Module 6.2.1 — Image UI refinement */
.ai-platform-image-controls{box-shadow:0 8px 30px rgba(0,0,0,.06)}
.ai-platform-image-field{margin-bottom:16px}
.ai-platform-image-field>span{letter-spacing:.01em}
.ai-platform-image-upload{min-height:132px;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.ai-platform-image-upload:hover{transform:translateY(-1px)}
.ai-platform-image-upload-icon{line-height:1}
.ai-platform-image-reference{min-height:78px}
.ai-platform-image-reference img{flex:0 0 76px}
.ai-platform-image-generate{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s ease,transform .15s ease}
.ai-platform-image-generate:not(:disabled):hover{transform:translateY(-1px)}
.ai-platform-image-generate.is-working{cursor:wait}
.ai-platform-image-generate.is-working:before{content:"";width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:aip-image-spin .7s linear infinite}
.ai-platform-image-note{line-height:1.45}
.ai-platform-image-error{margin-top:10px;padding:9px 10px;border:1px solid rgba(239,68,68,.35);border-radius:8px;background:rgba(239,68,68,.08);color:#ef4444;font-size:10px;line-height:1.45}
.ai-platform-image-result-wrap{display:flex;flex-direction:column;min-height:0}
.ai-platform-image-result-header{flex:0 0 auto}
.ai-platform-image-result{min-height:0;overflow:auto}
.ai-platform-image-placeholder{min-height:360px;gap:6px;padding:30px}
.ai-platform-image-placeholder-icon{font-size:25px;opacity:.6}
.ai-platform-image-placeholder strong{font-size:12px;font-weight:600}
.ai-platform-image-placeholder span{font-size:10px;color:var(--aip-muted)}
.ai-platform-image-result-img{box-shadow:0 8px 28px rgba(0,0,0,.12)}
.ai-platform-image-result-actions{padding-top:3px}
.ai-platform-image-result-actions button,.ai-platform-image-download{transition:background .15s ease,border-color .15s ease}
.ai-platform-image-result-actions button:hover,.ai-platform-image-download:hover{background:var(--aip-hover);border-color:var(--aip-text)}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-controls,
.ai-platform-generator[data-theme="dark"] .ai-platform-image-result{box-shadow:0 8px 30px rgba(0,0,0,.18)}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-placeholder span{color:#a1a1aa}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-error{background:rgba(239,68,68,.10)}
@keyframes aip-image-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
    .ai-platform-image-body{gap:16px}
    .ai-platform-image-controls{padding:16px}
    .ai-platform-image-placeholder{min-height:260px}
}

/* Workspace rail alignment: Image view belongs to the content area, not the rail.
 * Reset theme section margins so no WordPress/theme rule creates a left gap.
 */
.ai-platform-image-view{
    left:76px !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
}
@media(max-width:520px){
    .ai-platform-image-view{
        left:0 !important;
    }
}

/* Module 6.2.5 — Image history on the right */
.ai-platform-image-body{
    grid-template-columns:minmax(300px,420px) minmax(0,1fr) minmax(220px,280px);
}
.ai-platform-image-history-panel{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    overflow:hidden;
    padding:14px;
    border:1px solid var(--aip-border);
    border-radius:14px;
    background:var(--aip-surface-2);
}
.ai-platform-image-history-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    margin:0 0 12px;
    color:var(--aip-text);
    font-size:12px;
    font-weight:700;
}
.ai-platform-image-history-panel .ai-platform-generator__image-history{
    flex:1 1 auto;
    min-height:0;
    height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:2px;
    scrollbar-gutter:stable;
}
.ai-platform-image-history-panel .ai-platform-generator__image-history-item{
    background:var(--aip-surface);
}

.ai-platform-generator__image-history-show-all{
    display:block;
    width:100%;
    margin-top:10px;
    padding:8px 10px;
    border:1px solid var(--aip-border);
    border-radius:8px;
    background:var(--aip-surface);
    color:var(--aip-text);
    font:inherit;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
}
.ai-platform-generator__image-history-show-all:hover{
    background:var(--aip-hover);
    border-color:var(--aip-text);
}
@media(max-width:1100px){
    .ai-platform-image-body{
        grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    }
    .ai-platform-image-history-panel{
        grid-column:1 / -1;
        min-height:220px;
    }
}
@media(max-width:700px){
    .ai-platform-image-body{
        grid-template-columns:1fr;
    }
}

/* Keep the persistent chat history visible while Image is active. */
.ai-platform-image-view{
    left:356px !important;
}
@media(max-width:900px){
    .ai-platform-image-view{
        left:312px !important;
    }
}
@media(max-width:700px){
    .ai-platform-image-view{
        left:72px !important;
    }
}

/* Image mode uses the full content area after Chat History is hidden. */
.ai-platform-generator:has([data-mode="image"].is-active) .ai-platform-image-view{
    left:76px !important;
}
@media(max-width:520px){
    .ai-platform-generator:has([data-mode="image"].is-active) .ai-platform-image-view{
        left:0 !important;
    }
}

.ai-platform-image-generate-row{align-items:center;justify-content:flex-end;gap:10px;}
.ai-platform-image-generate-row .ai-platform-image-generate{flex:1;margin-top:0}
.ai-platform-image-generate-cost{}

/* 0.7.6 generation cost above action button */
.ai-platform-image-generate-row{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin-top:10px}
.ai-platform-image-generate-cost{display:block;text-align:right;font-size:12px;font-weight:600;color:var(--aip-muted);white-space:nowrap}
.ai-platform-image-generate{width:100%}

.ai-platform-image-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ai-platform-image-result-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;}
.ai-platform-image-result-card{position:relative;overflow:hidden;border:1px solid var(--aip-border);border-radius:12px;background:var(--aip-surface-2);aspect-ratio:1/1;}
.ai-platform-image-result-card img{display:block;width:100%;height:100%;object-fit:contain;background:var(--aip-surface-2);cursor:zoom-in;}
@media (max-width:900px){.ai-platform-image-grid-3{grid-template-columns:1fr;}}
@media (max-width:640px){.ai-platform-image-result-gallery{grid-template-columns:1fr;}}

.ai-platform-image-result-download{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;padding:5px 8px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(0,0,0,.62);color:#fff;text-decoration:none;font-size:11px;line-height:1;}
.ai-platform-image-result-download:hover{background:rgba(0,0,0,.78);color:#fff;}

/* Image result loading state + history close button */
.ai-platform-image-result-header{position:relative}
.ai-platform-image-result-close{
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--aip-muted);
    font:inherit;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}
.ai-platform-image-result-close:hover{
    background:var(--aip-hover);
    color:var(--aip-text);
}
.ai-platform-image-result-close:focus-visible{
    outline:2px solid var(--aip-accent);
    outline-offset:1px;
}
.ai-platform-image-loading{
    min-height:360px;
    padding:40px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--aip-text);
    text-align:center;
}
.ai-platform-image-loading strong{
    font-size:13px;
    font-weight:600;
}
.ai-platform-image-loading span{
    max-width:320px;
    color:var(--aip-muted);
    font-size:10px;
    line-height:1.5;
}
.ai-platform-image-progress{
    width:min(520px,80%);
    margin:14px auto 0;
}
.ai-platform-image-progress-track{
    width:100%;
    height:8px;
    border-radius:999px;
    background:rgba(148,163,184,.16);
    overflow:hidden;
    border:1px solid rgba(148,163,184,.18);
}
.ai-platform-image-progress-bar{
    height:100%;
    width:0;
    border-radius:inherit;
    background:linear-gradient(90deg,#13c6e8,#6b4cff);
    transition:width .8s ease;
}
.ai-platform-image-progress-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:8px;
    color:var(--aip-muted);
    font-size:11px;
    text-align:left;
}
.ai-platform-image-progress-meta strong{
    color:var(--aip-text);
    font-size:13px;
    white-space:nowrap;
}
.ai-platform-image-loading-spinner{
    width:28px;
    height:28px;
    margin-bottom:4px;
    border:3px solid color-mix(in srgb,var(--aip-text) 16%,transparent);
    border-top-color:var(--aip-text);
    border-radius:50%;
    animation:aip-image-spin .75s linear infinite;
}
.ai-platform-generator[data-theme="dark"] .ai-platform-image-loading-spinner{
    border-color:rgba(255,255,255,.16);
    border-top-color:#fff;
}
@media(max-width:900px){
    .ai-platform-image-loading{min-height:260px}
}

/* 0.8.4 — Multi-reference image input */
.ai-platform-image-upload.is-limit-reached{opacity:.55;cursor:not-allowed}
.ai-platform-image-reference-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.ai-platform-image-reference-card{display:flex;align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid var(--aip-border);border-radius:10px;background:var(--aip-surface-2);overflow:hidden}
.ai-platform-image-reference-thumb{width:52px;height:52px;flex:0 0 52px;border-radius:7px;background:var(--aip-surface)}
.ai-platform-image-reference-card.is-uploading .ai-platform-image-reference-state{color:var(--aip-accent)}
.ai-platform-image-reference-card.is-error .ai-platform-image-reference-state{color:#ef4444}
.ai-platform-image-reference-remove{top:4px;right:4px;width:20px;height:20px;border-radius:6px;background:transparent;color:var(--aip-muted);font-size:16px;line-height:20px;}
.ai-platform-image-reference-remove:hover{background:var(--aip-hover);color:var(--aip-text)}
.ai-platform-image-reference-hint{margin-top:8px;color:var(--aip-muted);font-size:9px;line-height:1.45}
.ai-platform-image-reference-hint strong{color:var(--aip-text)}
@media(max-width:900px){.ai-platform-image-reference-list{grid-template-columns:1fr}}

/* v0.9.4-Fix18 — Image result vertical scrolling at all responsive widths.
 * Keep the workspace itself usable when a multi-image result grows beyond the viewport.
 * Desktop may scroll inside Result; Tab/Mobile use the Image body as the vertical scroll surface.
 */
.ai-platform-image-body{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
}
.ai-platform-image-result-wrap{
    min-width:0 !important;
    min-height:0 !important;
}
.ai-platform-image-result{
    min-width:0 !important;
    min-height:0 !important;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
}
@media (min-width:1200px){
    .ai-platform-image-result{
        max-height:calc(100dvh - 150px);
    }
}
@media (min-width:521px) and (max-width:1199px){
    .ai-platform-image-body{
        display:grid !important;
        grid-template-columns:1fr !important;
        grid-auto-rows:max-content !important;
        align-content:start !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        touch-action:pan-y;
    }
    .ai-platform-image-result{
        max-height:none !important;
        overflow:visible !important;
    }
}
@media (max-width:520px){
    .ai-platform-image-body{
        display:grid !important;
        grid-template-columns:1fr !important;
        grid-auto-rows:max-content !important;
        align-content:start !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        touch-action:pan-y;
    }
    .ai-platform-image-result{
        max-height:none !important;
        overflow:visible !important;
    }
    .ai-platform-image-result-gallery{
        touch-action:pan-y;
    }
}


/* v0.9.4-Fix19 — Responsive Image workspace must use one reliable scroll surface.
 * Mobile/Tab use the Image view itself as the scroll container. This avoids nested
 * flex/grid overflow chains that can swallow touch scrolling on compact layouts.
 */
@media (min-width:521px) and (max-width:1199px), (max-width:520px){
    .ai-platform-image-view{
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior-y:auto !important;
        touch-action:pan-y !important;
    }
    .ai-platform-image-topbar{
        position:sticky !important;
        top:0 !important;
        z-index:30 !important;
        background:var(--aip-surface) !important;
    }
    .ai-platform-image-body{
        display:block !important;
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        flex:0 0 auto !important;
        overflow:visible !important;
        padding:18px !important;
        box-sizing:border-box !important;
        touch-action:pan-y !important;
    }
    .ai-platform-image-controls,
    .ai-platform-image-result-wrap,
    .ai-platform-image-history-panel{
        width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }
    .ai-platform-image-result-wrap{
        margin-top:16px !important;
    }
    .ai-platform-image-result{
        max-height:none !important;
        height:auto !important;
        overflow:visible !important;
    }
    .ai-platform-image-result-gallery{
        touch-action:pan-y !important;
    }
}
@media (max-width:520px){
    .ai-platform-image-body{
        padding:14px 12px 24px !important;
    }
}

/* Fix40 — Transparent reference drag area stays visually invisible while providing a larger drop target. */
.ai-platform-image-upload-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
}
.ai-platform-image-upload.has-references{
    display:flex;
    width:100%;
    max-width:none;
    min-height:76px;
    padding:0;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    border:0 !important;
    border-radius:0;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    overflow:visible;
    box-sizing:border-box;
}
.ai-platform-image-upload.has-references:hover,
.ai-platform-image-upload.has-references.is-dragover{
    transform:none;
    border:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
}
.ai-platform-image-upload-empty[hidden]{display:none!important}
.ai-platform-image-reference-list{
    display:flex;
    align-items:center;
    gap:7px;
    width:100%;
}
.ai-platform-image-upload.has-references .ai-platform-image-reference-list{
    width:auto;
    max-width:100%;
    margin:0;
}
.ai-platform-image-reference-card{
    position:relative;
    flex:0 0 64px;
    width:64px;
    height:64px;
    min-height:64px;
    padding:0;
    border:0;
    border-radius:9px;
    background:transparent;
    overflow:visible;
}
.ai-platform-image-reference-card.is-uploading{opacity:.65}
.ai-platform-image-reference-thumb{
    display:block;
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:9px;
    background:transparent;
}
.ai-platform-image-reference-remove{
    position:absolute;
    top:-2px;
    right:-2px;
    z-index:2;
    width:17px;
    height:17px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:12px;
    line-height:17px;
    text-align:center;
    cursor:pointer;
}
.ai-platform-image-reference-remove:hover{background:rgba(0,0,0,.90);color:#fff}
.ai-platform-image-reference-add{
    flex:0 0 42px;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    background:transparent;
    color:var(--aip-muted);
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.ai-platform-image-reference-add span{font-size:19px;font-weight:300;line-height:1}
.ai-platform-image-reference-add:hover{
    border-color:rgba(255,255,255,.34);
    background:transparent;
    color:var(--aip-text);
    transform:none;
}
.ai-platform-image-upload.has-references.is-limit-reached{cursor:default}
.ai-platform-image-upload.has-references + .ai-platform-image-reference-hint{margin-top:4px}
@media(max-width:520px){
    .ai-platform-image-upload.has-references{padding:0;overflow:visible}
}