/* Image creation follows the same scrolling model as a text conversation. */
.image-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  animation: page-in 0.22s ease;
}
.image-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 30px 32px 36px;
}
.image-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.image-header-actions {
  display: flex;
  gap: 8px;
}
.image-feed {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1;
}
.image-empty {
  margin: auto;
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
}
.image-empty > .icon {
  width: 32px;
  height: 32px;
  color: var(--brand);
  margin-bottom: 12px;
}
.image-empty h2 {
  color: var(--ink);
  font-size: 20px;
  margin: 0 0 8px;
}
.image-empty p {
  max-width: 310px;
  font-size: 13px;
  line-height: 1.65;
}
.image-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.image-user-prompt {
  align-self: flex-end;
  max-width: min(85%, 600px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--web-panel);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}
.image-result-body {
  width: min(100%, 520px);
  min-width: 0;
}
.image-result-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}
.image-result-label .icon {
  color: var(--brand);
  width: 17px;
  height: 17px;
}
.image-result-preview {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 19px;
}
.image-result-preview img {
  display: block;
  width: 100%;
  max-height: min(64vh, 600px);
  object-fit: cover;
}
.image-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.image-composer-zone {
  flex: 0 0 auto;
  max-height: min(52%, 340px);
  overflow-y: auto;
}
@media (max-width: 760px) {
  .image-scroll {
    padding: 23px 16px 28px;
  }
  .image-content .page-head {
    align-items: flex-start;
  }
  .image-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .image-header-actions .secondary-button {
    min-height: 36px;
    padding: 7px 9px;
  }
  .image-result-body {
    width: min(100%, 440px);
  }
  .image-result-preview img {
    max-height: 52vh;
  }
}
@media (max-width: 380px) {
  .image-content .page-head {
    gap: 10px;
    flex-wrap: wrap;
  }
  .image-content .page-head h1 {
    font-size: 23px;
  }
  .image-header-actions .secondary-button {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .image-workspace {
    animation: none;
  }
}
@media (max-width: 760px) and (max-height: 700px) {
  .image-empty p {
    display: none;
  }
}
/* Reuse the chat composer and its model-trigger surface for image controls. */
.image-composer .composer-toolbar {
  gap: 8px;
}
.image-model-trigger > span {
  white-space: nowrap;
}
.image-model-trigger .image-model-icon {
  width: 18px;
  height: 18px;
}
.image-ratio-trigger {
  gap: 7px;
}
.ratio-mark {
  display: inline-block;
  flex: 0 0 auto;
  border: 1.3px solid currentColor;
  border-radius: 2px;
  color: var(--muted);
}
.image-count-inline {
  background: var(--web-panel);
  border-color: var(--pearl-edge);
  border-radius: 14px;
}
.image-count-trigger {
  display: none;
}
.image-picker-menu {
  min-width: 230px;
  max-width: min(280px, calc(100vw - 20px));
}
.image-option {
  min-height: 48px;
}
.image-option > span:not(.ratio-mark-slot) {
  flex: 1;
}
.image-option strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
}
.image-option small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}
.image-option[aria-checked="true"] {
  background: var(--soft);
}
.ratio-picker-menu {
  min-width: 190px;
}
.ratio-mark-slot {
  display: grid;
  place-items: center;
  width: 30px;
  flex: 0 0 30px;
}
.image-option .ratio-mark {
  color: var(--ink);
}
.image-count-menu {
  min-width: 144px;
}
.image-count-popover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px;
}
.image-count-popover output {
  font-size: 14px;
}
.image-quality-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}
.image-quality-pills .choice-button {
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  padding: 8px 10px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .image-composer .composer-toolbar {
    gap: 5px;
  }
  .image-count-inline {
    display: none;
  }
  .image-count-trigger {
    display: flex;
    gap: 2px;
    justify-content: center;
    min-width: 31px;
    padding: 5px;
  }
  .image-model-trigger .image-model-icon {
    display: none;
  }
  .image-composer .model-trigger {
    font-size: 10px;
    padding-inline: 7px;
    gap: 4px;
  }
  .image-composer .composer-spacer {
    min-width: 0;
  }
}
@media (max-width: 370px) {
  .image-composer .composer-toolbar {
    gap: 3px;
  }
  .image-composer .model-trigger {
    padding-inline: 5px;
  }
  .image-composer .image-count-trigger {
    min-width: 27px;
    padding-inline: 3px;
  }
  .image-composer .composer-spacer {
    display: none;
  }
  .image-composer .send-button {
    margin-left: auto;
  }
  .image-quality-pills {
    gap: 5px;
  }
  .image-quality-pills .secondary-button {
    padding-inline: 7px;
    font-size: 11px;
  }
}
#create-image.send-button {
  min-height: 34px;
}
.image-composer-zone .composer-note span {
  display: inline;
}

/* Shared Sunburst settings replace the old preview-only pickers. */
#demo-image-controls{--image-controls-bg:rgba(15,17,27,.94);color:var(--text);padding-top:5px}
.image-composer .image-ratio-trigger,.image-composer .image-count-inline,.image-composer .image-count-trigger{display:none!important}
.image-composer .image-model-trigger{pointer-events:none;cursor:default}
.image-composer .image-model-trigger>svg:last-child{display:none}