/* v0.9.13 — Image workspace: bottom composer layout.
 *
 * The prompt, reference images, model and options live in one composer docked
 * at the bottom (like Chat), the result gets the main area, and Recent images
 * stays on the right on Desktop / in the drawer on Tab and Mobile.
 *
 * Loaded after image.css, mobile.css and workspace-visual.css. Every rule is
 * scoped to .ai-platform-image-view--composer so nothing else changes. Colours
 * reuse the AIGC Motion workspace tokens from workspace-visual.css.
 */

.ai-platform-generator .ai-platform-image-view--composer .screen-reader-text{
  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;
}

/* ---------- Shared: stage, result, composer ---------- */

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-stage{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  min-height:0;
}

.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-wrap{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-header{
  min-height:28px;
  margin-bottom:8px;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result{
  flex:1 1 auto !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-result-gallery:not(:empty),
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-result-img:not([hidden]){
  margin-top:0;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-placeholder,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-loading{
  min-height:240px;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer-wrap{
  flex:0 0 auto;
  width:100%;
  max-width:1040px;
  margin:0 auto;
  box-sizing:border-box;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 12px 10px;
  border:1px solid var(--aip-theme-border-strong,rgba(100,181,255,.22));
  border-radius:16px;
  background:linear-gradient(180deg,rgba(17,24,35,.96),rgba(11,16,24,.98));
  box-shadow:0 18px 50px rgba(0,0,0,.24),0 0 28px rgba(39,225,255,.035);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer:focus-within{
  border-color:rgba(124,77,255,.42);
  box-shadow:0 18px 50px rgba(0,0,0,.25),0 0 0 2px rgba(124,77,255,.11);
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__input{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

/* Reference tile (empty) and thumbnails (filled). image.js toggles .has-references. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload{
  flex:0 0 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  width:auto;
  min-width:64px;
  min-height:64px;
  height:64px;
  margin:0;
  padding:0;
  border:1.5px dashed rgba(119,157,255,.28) !important;
  border-radius:12px;
  background:radial-gradient(circle at 50% 0%,rgba(39,225,255,.06),transparent 60%),rgba(10,15,23,.86) !important;
  box-sizing:border-box;
  cursor:pointer;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload:hover,
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload.is-dragover{
  transform:none;
  border-color:rgba(39,225,255,.45) !important;
  background:radial-gradient(circle at 50% 0%,rgba(39,225,255,.10),transparent 60%),rgba(12,18,28,.92) !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload.has-references{
  height:auto;
  min-height:64px;
  border:0 !important;
  background:transparent !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-upload-empty{
  width:64px;
  gap:1px;
  color:var(--aip-work-muted,#a8b0bd);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-upload-icon{
  margin:0;
  font-size:18px;
  color:var(--aip-work-text,#f7f9fc);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-upload strong{
  font-size:10px;
  font-weight:600;
  color:var(--aip-work-text,#f7f9fc) !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-upload small{
  margin:0;
  font-size:9px;
  color:var(--aip-work-muted,#a8b0bd);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-list{
  flex-wrap:wrap;
  gap:8px;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-card,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-thumb{
  width:56px;
  height:56px;
  min-height:56px;
  flex-basis:56px;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-thumb{
  border:1px solid rgba(255,255,255,.10);
  box-sizing:border-box;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-add{
  width:40px;
  height:40px;
  flex-basis:40px;
  border-color:rgba(119,157,255,.28);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-add:hover{
  border-color:rgba(39,225,255,.45);
}

/* Prompt */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer textarea[data-image-prompt]{
  flex:1 1 auto;
  min-width:0;
  min-height:64px;
  max-height:220px;
  margin:0;
  padding:6px 4px;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--aip-work-text,#f7f9fc) !important;
  font:inherit;
  font-size:14px;
  line-height:1.5;
  resize:none;
  outline:none;
  overflow-y:auto;
}
.ai-platform-generator .ai-platform-image-view--composer textarea[data-image-prompt]::placeholder{
  color:#7f8897;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-hint{
  margin:-2px 0 0;
  font-size:10px;
}

/* Bottom bar: model, option chips, cost, generate */
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__model{
  position:relative;
  flex:0 1 260px;
  min-width:0;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-composer__model .ai-platform-model-picker__trigger{
  min-height:38px !important;
  height:38px;
  padding:4px 32px 4px 6px !important;
  gap:8px !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-composer__model .ai-platform-model-picker__trigger-icon{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:7px !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-composer__model .ai-platform-model-picker__trigger-copy small{
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-composer__model .ai-platform-model-picker__trigger-copy strong{
  font-size:12.5px !important;
}
/* The generate cost is already shown next to the button. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-composer__model .ai-platform-model-picker__trigger-cost{
  display:none !important;
}
/* Menu opens upwards from the bottom composer. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-composer__model .ai-platform-model-picker__menu{
  top:auto !important;
  bottom:calc(100% + 8px) !important;
  left:0 !important;
  right:auto !important;
  width:min(380px,calc(100vw - 32px)) !important;
  max-height:min(360px,60vh) !important;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:38px;
  margin:0;
  padding:0 8px 0 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
  color:var(--aip-work-text,#f7f9fc);
  box-sizing:border-box;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip:hover,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip:focus-within{
  border-color:rgba(124,77,255,.38);
  background:linear-gradient(90deg,rgba(39,225,255,.07),rgba(124,77,255,.08));
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip svg{
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:#9fd8ff;
  pointer-events:none;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-chip select{
  -webkit-appearance:none;
  appearance:none;
  width:auto;
  min-width:0;
  height:36px;
  margin:0;
  padding:0 16px 0 0 !important;
  border:0 !important;
  border-radius:0;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a8b0bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 10px !important;
  box-shadow:none !important;
  color:var(--aip-work-text,#f7f9fc) !important;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  outline:none;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip select option{
  background:#111823;
  color:#f7f9fc;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__submit{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-generate-cost{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  color:var(--aip-work-muted,#a8b0bd);
  white-space:nowrap;
  text-align:right;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-generate{
  width:auto !important;
  min-width:150px;
  height:40px;
  min-height:40px;
  margin:0 !important;
  padding:0 18px;
  border-radius:11px;
  white-space:nowrap;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-error{
  margin:0 0 8px;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-note{
  margin:6px 0 0;
  font-size:10px;
  text-align:center;
}

/* ---------- Desktop ≥1200px ---------- */
@media (min-width:1200px){
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-body{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(240px,280px) !important;
    gap:24px !important;
    padding:22px 28px 18px !important;
    overflow:hidden !important;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-stage{
    grid-column:1;
    grid-row:1;
    height:100%;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result{
    max-height:none !important;
    overflow-y:auto !important;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-history-panel{
    grid-column:2 !important;
    grid-row:1 !important;
    min-height:0 !important;
  }
}

/* ---------- Tab 521–1199px and Mobile ≤520px ----------
 * The composer sticks to the bottom of whichever element scrolls (the Image
 * body on Tab, the whole portal on Mobile). Recent images stays in the drawer.
 */
@media (max-width:1199px){
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer{
    display:flex !important;
    flex-direction:column !important;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-body{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    padding-bottom:0 !important;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-stage{
    flex:1 0 auto;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-wrap{
    flex:1 0 auto !important;
    margin-top:0 !important;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__submit{
    flex:1 1 100%;
    justify-content:center;
    margin-left:0;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer-wrap{
    position:sticky;
    bottom:0;
    z-index:25;
    max-width:none;
    padding:10px 0 12px;
    background:linear-gradient(180deg,rgba(9,13,20,0),rgba(9,13,20,.92) 22%,#0a0e15 100%);
  }
}

@media (min-width:521px) and (max-width:1199px){
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-body{
    padding:16px 18px 0 !important;
  }
}

@media (max-width:520px){
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-body{
    padding:12px 12px 0 !important;
  }
  /* Phone: the portal scrolls, so give the view at least one screen of height. */
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-stage{
    min-height:calc(100dvh - 110px);
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer{
    gap:8px;
    padding:10px 10px 9px;
    border-radius:14px;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__input{
    gap:10px;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload,
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-upload-empty{
    min-width:52px;
    width:52px;
    min-height:52px;
    height:52px;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload.has-references{
    width:auto;
    height:auto;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-upload small{
    display:none;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-card,
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-thumb{
    width:48px;
    height:48px;
    min-height:48px;
    flex-basis:48px;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer textarea[data-image-prompt]{
    min-height:52px;
    max-height:140px;
    font-size:16px; /* 16px stops iOS zooming into the field */
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__bar{
    gap:6px;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__model{
    flex:1 1 100%;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip{
    flex:1 1 0;
    min-width:0;
    height:36px;
    padding:0 6px 0 8px;
    gap:4px;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-chip select{
    width:100%;
    font-size:12px;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip svg{
    display:none;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-generate{
    min-width:0;
    width:min(240px,60%) !important;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-note{
    display:none;
  }
}

/* v0.9.13 — cost size on Desktop/Tab (14px, 17px icon since 0.9.13-Fix2); centred bar and roomier Generate row on Tab/Mobile. */
@media (min-width:521px){
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-generate-cost{
    font-size:14px;
    color:var(--aip-work-text,#f7f9fc);
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-generate-cost .ai-platform-credit-inline{
    gap:5px;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-generate-cost .ai-platform-credit-icon,
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-generate-cost .ai-platform-credit-icon img{
    width:17px;
    height:17px;
    flex:0 0 17px;
  }
}
@media (min-width:521px) and (max-width:1199px){
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__bar{
    justify-content:center;
  }
}
@media (max-width:1199px){
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__submit{
    margin-top:10px;
  }
}

/* v0.9.13-Fix1 — "@" mentions: highlight layer behind the prompt + mention menu.
 * The highlight layer must match the textarea's box and text metrics exactly;
 * marks only change colour/background (never weight or padding) so wrapping and
 * the caret stay aligned.
 */
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-field{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  display:flex;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-highlight{
  display:none;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-field.has-mention-highlight .ai-platform-image-prompt-highlight{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
  padding:6px 4px;
  border:0;
  box-sizing:border-box;
  overflow:hidden;
  scrollbar-gutter:stable;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  word-break:normal;
  font:inherit;
  font-size:14px;
  line-height:1.5;
  letter-spacing:normal;
  color:var(--aip-work-text,#f7f9fc);
  pointer-events:none;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-prompt-field.has-mention-highlight textarea[data-image-prompt]{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  scrollbar-gutter:stable;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  letter-spacing:normal;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  caret-color:var(--aip-work-text,#f7f9fc);
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-prompt-field.has-mention-highlight textarea[data-image-prompt]::placeholder{
  color:#7f8897;
  -webkit-text-fill-color:#7f8897;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-highlight mark{
  border-radius:4px;
  background:rgba(39,225,255,.14);
  box-shadow:0 0 0 1px rgba(39,225,255,.30);
  color:#5fe6ff;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-highlight mark.is-missing{
  background:rgba(239,68,68,.12);
  box-shadow:0 0 0 1px rgba(239,68,68,.30);
  color:#fca5a5;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  z-index:60;
  width:min(300px,calc(100vw - 48px));
  max-height:300px;
  overflow-y:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:radial-gradient(circle at 95% 0%,rgba(228,92,255,.07),transparent 30%),radial-gradient(circle at 5% 0%,rgba(39,225,255,.06),transparent 28%),linear-gradient(180deg,#111823 0%,#0b1119 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 34px rgba(88,72,255,.08);
  box-sizing:border-box;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-menu[hidden]{
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-head{
  padding:4px 8px 8px;
  color:var(--aip-work-muted,#a8b0bd);
  font-size:11px;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:6px 8px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--aip-work-text,#f7f9fc);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-item:hover,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-item.is-active{
  background:linear-gradient(90deg,rgba(39,225,255,.08),rgba(124,77,255,.10));
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-thumb{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  overflow:hidden;
  border-radius:7px;
  background:rgba(255,255,255,.05);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-thumb.is-add{
  background:transparent;
  font-size:18px;
  color:var(--aip-work-text,#f7f9fc);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:1px;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-copy strong{
  font-size:13px;
  font-weight:650;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-copy small{
  overflow:hidden;
  color:var(--aip-work-muted,#a8b0bd);
  font-size:11px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
@media (max-width:520px){
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-field.has-mention-highlight .ai-platform-image-prompt-highlight{
    font-size:16px;
  }
  /* Phone: once references exist they get their own row above the prompt. */
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-composer__input{
    flex-wrap:wrap;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-upload.has-references{
    flex:1 1 100%;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-prompt-field{
    flex:1 1 0;
  }
  /* Menu spans the prompt so it never sticks out past the screen edge. */
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-mention-menu{
    left:0;
    right:0;
    width:auto;
    max-height:240px;
  }
}

/* v0.9.13-Fix2 — Option chips use a styled menu (like the model picker) instead of
 * the browser's native dropdown. The native <select> stays hidden in the chip as the
 * source of truth; image.js builds the trigger and menu.
 */
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip.is-enhanced{
  padding:0;
  gap:0;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-chip.is-enhanced select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip.is-enhanced svg{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip__trigger{
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
  min-width:0;
  margin:0;
  padding:0 26px 0 32px;
  border:0;
  border-radius:inherit;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a8b0bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px;
  color:var(--aip-work-text,#f7f9fc);
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  outline:none;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip.is-open .ai-platform-image-chip__trigger{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 7.5 6 4.5 9 7.5' fill='none' stroke='%23f7f9fc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip.is-open{
  border-color:rgba(124,77,255,.45);
  background:linear-gradient(90deg,rgba(39,225,255,.08),rgba(124,77,255,.10));
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip__trigger:focus-visible{
  box-shadow:0 0 0 2px rgba(124,77,255,.45);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip__trigger:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip__label{
  overflow:hidden;
  text-overflow:ellipsis;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  z-index:70;
  min-width:max(100%,168px);
  max-height:min(320px,60vh);
  overflow-y:auto;
  padding:5px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:radial-gradient(circle at 95% 0%,rgba(228,92,255,.07),transparent 30%),radial-gradient(circle at 5% 0%,rgba(39,225,255,.06),transparent 28%),linear-gradient(180deg,#111823 0%,#0b1119 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 34px rgba(88,72,255,.08);
  box-sizing:border-box;
  cursor:default;
  animation:aip-chip-menu-in .13s ease-out both;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-menu[hidden]{
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip.is-align-right .ai-platform-image-chip-menu{
  left:auto;
  right:0;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-menu__head{
  padding:5px 9px 7px;
  color:var(--aip-work-muted,#a8b0bd);
  font-size:11px;
  font-weight:500;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:36px;
  margin:0;
  padding:0 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--aip-work-text,#f7f9fc);
  font:inherit;
  font-size:13px;
  font-weight:600;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option:hover,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option.is-active{
  background:linear-gradient(90deg,rgba(39,225,255,.08),rgba(124,77,255,.10));
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option.is-selected{
  color:#5fe6ff;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option__text{
  flex:1 1 auto;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-option__check{
  flex:0 0 14px;
  color:#5fe6ff;
  font-size:12px;
  text-align:right;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-ratio{
  display:grid;
  place-items:center;
  flex:0 0 18px;
  width:18px;
  height:18px;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-ratio i{
  display:block;
  border:1.5px solid currentColor;
  border-radius:2px;
  box-sizing:border-box;
  opacity:.85;
}
@keyframes aip-chip-menu-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip-menu{animation:none}
}
@media (max-width:520px){
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-chip__trigger{
    padding:0 22px 0 10px;
    font-size:12px;
    background-position:right 7px center;
  }
}

/* v0.9.13-Fix3 — Result block in the style of a creation feed: a prompt + settings
 * line, the images in one row at a moderate size (their own ratio, no letterbox
 * bars), then Download / Regenerate underneath. The result area has size
 * containment (its height comes from the layout, not the images) and image.js
 * passes its measured size as --aip-result-w/-h, so the block always fits above
 * the composer without scrolling.
 */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result{
  container-type:size;
  min-height:240px !important;
  overflow:hidden !important;
  justify-content:flex-start;
  gap:10px;
}
/* Empty and loading states keep filling the area, centred. */
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-placeholder,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-loading{
  flex:1 1 auto;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-result-meta,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-result-gallery,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result > .ai-platform-image-result-actions{
  width:100%;
  max-width:1040px;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}

.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
  font-size:13px;
  line-height:1.4;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta[hidden]{
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta__prompt{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  color:var(--aip-work-text,#f7f9fc);
  font-weight:600;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta__tags{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  color:var(--aip-work-muted,#a8b0bd);
  font-size:12px;
  white-space:nowrap;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta__tags span + span::before{
  content:"";
  display:inline-block;
  width:1px;
  height:11px;
  margin:0 8px;
  background:rgba(255,255,255,.18);
  vertical-align:-1px;
}

.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery{
  --aip-cols:1;
  --aip-rows:1;
  --aip-cap:420px;
  --aip-gap:6px;
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
  gap:var(--aip-gap);
  touch-action:auto !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery:empty,
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[hidden]{
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="2"]{
  --aip-cols:2;
  --aip-cap:340px;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="3"]{
  --aip-cols:3;
  --aip-cap:280px;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="4"]{
  /* Four images: 2×2 on every breakpoint. */
  --aip-cols:2;
  --aip-rows:2;
  --aip-cap:260px;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-card{
  position:relative;
  display:block !important;
  flex:0 0 auto;
  width:auto !important;
  height:auto !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-card img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  /* Both limits are max-*, so the browser keeps the image's own ratio. Height leaves
     room for the meta line (~28px), the button row (~46px) and the gaps. */
  max-width:calc((min(1040px, var(--aip-result-w, 100cqw)) - (var(--aip-cols) - 1) * var(--aip-gap)) / var(--aip-cols)) !important;
  max-height:min(var(--aip-cap), calc((var(--aip-result-h, 100cqh) - 96px - (var(--aip-rows) - 1) * var(--aip-gap)) / var(--aip-rows))) !important;
  object-fit:contain !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:zoom-in;
}

/* Per-image download: a small icon on the image (on hover; always shown on touch). */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-download{
  position:absolute !important;
  right:8px !important;
  bottom:8px !important;
  top:auto !important;
  left:auto !important;
  display:grid !important;
  place-items:center;
  width:32px;
  height:32px;
  margin:0;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:9px !important;
  background:rgba(9,13,20,.72) !important;
  color:#fff !important;
  opacity:0;
  transition:opacity .15s ease,background .15s ease;
  backdrop-filter:blur(6px);
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-card:hover .ai-platform-image-result-download,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-download:focus-visible{
  opacity:1;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-download:hover{
  background:rgba(9,13,20,.9) !important;
}
@media (hover:none){
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-download{opacity:1}
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-download svg{
  width:16px;
  height:16px;
}
/* With one image the row below already has Download. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="1"] .ai-platform-image-result-download{
  display:none !important;
}

/* Button row under the images. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
  padding:0 !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-actions[hidden]{
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-actions .ai-platform-image-download,
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-actions button{
  display:inline-flex !important;
  align-items:center;
  gap:7px;
  height:36px;
  margin:0;
  padding:0 14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04)) !important;
  box-shadow:none !important;
  color:var(--aip-work-text,#f7f9fc) !important;
  font:inherit;
  font-size:12.5px !important;
  font-weight:600;
  line-height:1;
  text-decoration:none !important;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-actions .ai-platform-image-download:hover,
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-actions button:hover{
  border-color:rgba(124,77,255,.40) !important;
  background:linear-gradient(90deg,rgba(39,225,255,.08),rgba(124,77,255,.10)) !important;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-actions svg{
  flex:0 0 15px;
  width:15px;
  height:15px;
}
/* Several images: each has its own download icon, so the row keeps Regenerate only. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery:not([data-count="1"]) ~ .ai-platform-image-result-actions .ai-platform-image-download{
  display:none !important;
}

/* Phone: 3 images also wrap into two per row; the meta line stacks. */
@media (max-width:520px){
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="3"],
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="4"]{
    --aip-cols:2;
    --aip-rows:2;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-result-meta__prompt{
    max-width:100%;
  }
  .ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-card img{
    max-height:min(var(--aip-cap), calc((var(--aip-result-h, 100cqh) - 112px - (var(--aip-rows) - 1) * var(--aip-gap)) / var(--aip-rows))) !important;
  }
}

/* Uploaded reference thumbnails open a preview. */
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-card{
  cursor:zoom-in;
}
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-remove,
.ai-platform-generator .ai-platform-image-view--composer .ai-platform-image-reference-add{
  cursor:pointer;
}
/* Four images: a real 2×2 grid, so narrow (portrait) images never squeeze 4 into one row. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-gallery[data-count="4"]{
  display:grid !important;
  grid-template-columns:repeat(2,max-content);
  justify-content:start;
}
/* "Result" heading lines up with the centred result column. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-header{
  width:100%;
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
/* Empty/loading states fill the area but keep their content grouped in the centre. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-placeholder{
  align-content:center;
  justify-content:center;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-loading{
  justify-content:center;
}

/* v0.9.13-Fix5 — No "Result" heading: the prompt/settings line above the images does
 * that job. The heading row only appears when it has its close button (history view). */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-header > span{
  display:none;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-header:not(:has(.ai-platform-image-result-close:not([hidden]))){
  display:none !important;
}
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result-header{
  justify-content:flex-end;
  min-height:0;
  margin-bottom:4px;
}
/* The prompt/settings line only shows together with its images. */
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result:has(> .ai-platform-image-result-gallery[hidden]) > .ai-platform-image-result-meta,
.ai-platform-generator .ai-platform-image-view.ai-platform-image-view--composer .ai-platform-image-result:has(> .ai-platform-image-result-gallery:empty) > .ai-platform-image-result-meta{
  display:none !important;
}