.creation-mode-switch { display: flex; gap: 6px; width: 100%; margin: 0 0 16px; }
.creation-mode { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 8px 6px; border: 1px solid #294561; border-radius: 6px; background: #0a1627; color: #9bb6d0; font: inherit; cursor: pointer; }
.creation-mode.active { border-color: #1598ff; background: #113560; color: #eef7ff; }
.creation-mode:focus-visible, .image-model-select:focus-visible, .image-icon-button:focus-visible, .image-result-open:focus-visible, .image-task:focus-visible, .image-reference-open:focus-visible { outline: 2px solid #7bd7ff; outline-offset: 2px; }
#videoCreationControls[hidden], #imageCreationPanel[hidden] { display: none !important; }
.image-creation-panel { min-width: 0; }
.image-model-select { display: block; width: 100%; min-width: 0; height: 56px; padding: 12px 10px; border: 1px solid #1598ff; border-radius: 8px; background: #0b1a2d; color: #eef7ff; font: 700 18px "Microsoft YaHei", system-ui, sans-serif; cursor: pointer; }
.image-model-select option { font: inherit; }
.image-ratios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.image-ratios .chip { min-width: 0; padding: 10px 6px; }
.image-reference-zone { position: relative; }
.image-reference-preview { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; padding-bottom: 34px; }
.image-reference-preview:empty { display: none; }
.image-reference-preview .thumb { flex: 0 0 58px; }
.image-reference-preview .thumb .image-reference-open { position: static; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: zoom-in; }
.image-reference-open img { display: block; }
.image-reference-preview .image-reference-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; padding: 2px; border: 1px solid #2b5a88; border-radius: 50%; background: #102640; color: #eef7ff; cursor: pointer; }
.image-reference-number { position: absolute; bottom: 1px; left: 1px; padding: 1px 4px; border-radius: 3px; background: #030912cf; color: #fff; font-size: 10px; pointer-events: none; }
.image-generation-status { min-height: 18px; margin: 0; color: #9cb7d0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.image-generation-status[data-error="true"] { color: #ff9eae; }
#imageCost { display: block; margin: 9px 0; color: #9cb7d0; font-size: 12px; }
.image-creation-panel .upload-tabs-section h2 { justify-content: flex-start; }
#imageGenerateButton:disabled { cursor: wait; opacity: .65; }
.image-workspace .left { overflow-y: auto !important; scrollbar-width: none; }
.image-workspace #preview, .image-workspace #previewMediaActions, .image-workspace .right > .history { display: none !important; }
body:not(.image-workspace) #imagePreview, body:not(.image-workspace) #imageTaskHistory { display: none !important; }
.image-workspace #enhancePromptButton, .image-workspace #promptTranslationOption { display: none !important; }
/* The shared video frame is a grid. Give the image frame a scoped flex
   override so result cards receive the full available height. */
.image-workspace #imagePreview { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; min-width: 0; overflow: hidden; }
.image-preview::before { display: none; }
.image-preview-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 12px; border-bottom: 1px solid #193a62; }
.image-preview-heading strong { min-width: 0; overflow: hidden; color: #dcefff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-heading span { flex: 0 0 auto; color: #8ca7c4; font-size: 12px; }
.image-results { display: grid; flex: 1 1 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 12px; width: 100%; min-width: 0; min-height: 0; padding: 12px; }
.image-results[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; }
.image-results[data-count="3"], .image-results[data-count="4"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.image-result { display: flex; min-width: 0; min-height: 0; flex-direction: column; margin: 0; border: 1px solid #234866; border-radius: 7px; background: #071424; overflow: hidden; }
.image-result-open { position: relative; display: grid; flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; place-items: center; overflow: hidden; padding: 0; border: 0; background: #030912; color: #8ca7c4; cursor: zoom-in; }
.image-result-open img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.image-result-open span { max-width: 100%; padding: 10px; text-align: center; font-size: 12px; }
.image-result-open[data-error="true"] { cursor: pointer; color: #e9ba8b; }
.image-result-footer { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; padding: 5px 8px 5px 12px; color: #9cb7d0; font-size: 12px; }
.image-result-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.image-modal-actions [hidden] { display: none; }
.image-icon-button { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border: 1px solid #2b5a88; border-radius: 6px; background: #0b1a2d; color: #9fdcff; cursor: pointer; }
.image-icon-button:hover { border-color: #1598ff; background: #113560; }
.image-icon-button:disabled { cursor: wait; opacity: .5; }
.image-icon-button svg, .image-reference-remove svg, .image-reference-trigger svg { display: block; width: 18px; height: 18px; }
.image-reference-trigger { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 5px; }
.image-preview-message { display: grid; flex: 1 1 auto; place-content: center; gap: 8px; min-height: 150px; padding: 20px; text-align: center; }
.image-preview-message strong { color: #c7e5ff; font-size: 18px; }
.image-preview-message.is-generating strong { 
  color: transparent; 
  background: linear-gradient(100deg, #c7e5ff 20%, #ffffff 45%, #42b9ff 60%, #c7e5ff 80%); 
  background-size: 240% 100%; 
  background-clip: text; 
  -webkit-background-clip: text; 
  animation: image-generation-shimmer 1.8s linear infinite, float-text 3s ease-in-out infinite; 
}
@keyframes image-generation-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@keyframes float-text { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.image-preview-message p { max-width: 520px; margin: 0; color: #8ca7c4; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.image-preview-message[data-tone="error"] strong { color: #ff9eae; }
.image-history { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
.image-history-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.image-history-header h2 { margin: 0; font-size: 18px; }
.image-history-header .image-icon-button { flex-basis: 30px; width: 30px; height: 30px; padding: 5px; }
.image-task-list { display: grid; grid-auto-rows: min-content; min-width: 0; gap: 9px; align-content: start; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.image-history-state { margin: 0; padding: 8px 10px; border: 1px solid #234866; border-radius: 6px; color: #9cb7d0; font-size: 12px; line-height: 1.5; }
.image-history-state[hidden] { display: none; }
.image-task { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; min-height: 96px; padding: 9px; border: 1px solid #183754; border-radius: 7px; background: #071424; color: #dcefff; font: inherit; text-align: left; cursor: pointer; }
.image-task.active { border-color: #1598ff; background: #0b2036; }
.image-task-thumb { display: grid; width: 72px; height: 72px; align-self: center; place-items: center; overflow: hidden; border-radius: 5px; background: #030912; color: #5782aa; }
.image-task-thumb svg { width: 26px; height: 26px; }
.image-task-thumb img { width: 100%; height: 100%; object-fit: contain; }
.image-task-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; }
.image-task-copy b { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.image-task-copy small, .image-task-copy time { color: #7892b4; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.image-task-copy .status { display: flex; flex-wrap: wrap; margin: 0; color: #43b8ff; }
.image-task-state, .image-task-account { white-space: nowrap; }
.image-task-copy .status[data-terminal="error"] { color: #ff9eae; }
.image-modal { width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 1px solid #315b7d; border-radius: 8px; background: #071221; color: #eef7ff; }
.image-modal[open] { display: flex; flex-direction: column; }
.image-modal-header, .image-modal-footer, .image-modal > .image-video-reference-status { flex: 0 0 auto; }
.image-modal .image-modal-stage { flex: 1 1 auto; min-height: 0; }
.image-modal::backdrop { background: #020710e8; }
.image-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #193a62; }
.image-modal-heading { min-width: 0; flex: 1 1 auto; text-align: center; }
.image-modal-title { min-width: 0; margin: 0; font-size: 14px; }
.image-modal-note { margin: 3px 0 0; color: #c9e7ff; font-size: 12px; line-height: 1.4; text-align: center; }
.image-video-reference-status { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; color: #c9e7ff; font-size: 13px; line-height: 1.5; background: #0b2036; }
.image-video-reference-status[hidden] { display: none; }
.image-video-reference-status[data-state="loading"]::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #315b7d; border-top-color: #9fdcff; border-radius: 50%; animation: image-reference-transfer-spin .8s linear infinite; }
.image-video-reference-status[data-state="error"] { color: #ff9eae; }
#videoReferenceTransferStatus { margin-top: 8px; border-radius: 6px; }
@keyframes image-reference-transfer-spin { to { transform: rotate(360deg); } }
.image-modal-actions { display: flex; flex: 0 0 auto; gap: 6px; align-items: center; }
.image-modal-stage { display: grid; width: 100%; height: min(74dvh, 900px); place-items: center; overflow: hidden; background: #030912; }
.image-modal-stage img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.image-modal-stage > span { padding: 24px; color: #9cb7d0; font-size: 13px; text-align: center; }
.image-modal-footer { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 8px; border-top: 1px solid #193a62; }
.image-modal-counter { min-width: 42px; color: #9cb7d0; text-align: center; font-size: 12px; }
.image-creation-panel, .image-creation-panel *, .image-preview *, .image-history *, .image-modal * { letter-spacing: 0; }
@media (max-width: 1100px) {
  html.image-workspace, body.image-workspace { height: auto !important; overflow-y: auto !important; }
  .image-workspace .studio { height: auto !important; min-height: 0; }
  .image-workspace .studio > .left, .image-workspace .studio > .center, .image-workspace .studio > .right { flex: 0 0 auto; }
  .image-workspace #previewPromptResizer { display: none !important; }
  .image-workspace .center .image-preview { min-height: 340px !important; height: min(70dvh, 620px) !important; max-height: none; flex-basis: auto !important; aspect-ratio: auto; }
}
@media (max-width: 1100px) {
  .image-workspace .studio > .left { order: 0 !important; }
  .image-workspace .studio > .center { order: 1 !important; }
  .image-workspace .studio > .right { order: 2 !important; }
}
@media (max-width: 700px) {
  .creation-mode-switch { margin-bottom: 12px; }
  .creation-mode { min-height: 36px; font-size: 13px; }
  .image-model-select { height: 46px; padding: 10px 8px; font-size: 14px; }
  .image-ratios { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .image-ratios .chip { width: 100%; padding: 8px 2px !important; font-size: 12px; }
  .left .prompt { min-height: 0 !important; margin: 0 0 10px !important; padding: 10px !important; }
  .left .prompt h3 { margin-bottom: 7px !important; font-size: 15px !important; }
  .left .prompt textarea { height: 108px; min-height: 108px; flex: 0 1 auto !important; resize: vertical !important; padding: 10px !important; }
  .image-results { gap: 8px; padding: 8px; }
  .image-result-footer { padding-left: 8px; }
  .image-preview-heading { padding: 8px; }
  .image-history { height: auto; max-height: 520px; }
  .image-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .image-modal-stage { height: 66dvh; }
  .image-modal-title { font-size: 13px; }
  .image-workspace .left { overflow: visible !important; }
}
@media (prefers-reduced-motion: reduce) {
  .image-video-reference-status[data-state="loading"]::before { animation: none; }
  .image-creation-panel .submit-spinner { animation: none; }
  .image-preview-message.is-generating strong { animation: none; color: #c7e5ff; background: none; }
}