/* User-requested Jimeng-inspired visual layer; product scope stays independent. */
:root {
  color-scheme: dark;
  --color-bg: #111214;
  --color-surface: #1b1d21;
  --color-ink: #f1f2f5;
  --color-muted: #a6a8b0;
  --color-subtle: #858892;
  --color-line: #2d3036;
  --color-accent: #a5e7ee;
  --color-accent-hover: #c5f5fa;
  --color-accent-soft: #243639;
  --color-warning: #dfbe82;
  --color-warning-bg: #332d23;
  --color-error: #eba6a0;
  --color-error-bg: #382927;
  --shadow-dock: 0 12px 52px #00000055;
}
::selection { background: #38616b; color: #f1fdff; }
.topbar { border-bottom-color: #25272d; }
.brand { font-size: 21px; color: #f1f2f5; letter-spacing: -.5px; }
.brand-mark, .brand-version { color: #f1f2f5; }
.brand-version { opacity: .8; }
.preview-label { color: #a6a8b0; }
.avatar { background: #303238; color: #e4e6ed; }
.avatar:hover { background: #3c4048; }
.workspace { padding-top: 30px; scrollbar-color: #41434b transparent; }
.workspace-heading { margin-bottom: 25px; }
h1 { font-size: 25px; font-weight: 600; letter-spacing: 0; }
.workspace-heading p { color: #9598a2; font-size: 12px; margin-top: 9px; }
.model-note { color: #9c9faa; }
.model-note .icon { color: #c5d4df; }
.note-separator { color: #5d626d; }
.list-toolbar { border-bottom: 0; }
.filters { gap: 8px; }
.filter { padding: 8px 14px; min-height: 36px; border-radius: 8px; color: #aaadb7; gap: 7px; }
.filter.active { background: #2c2e34; color: #f5f6fa; }
.filter.active::after { display: none; }
.filter span { background: transparent; color: #9297a2; padding: 0; font-size: 11px; }
.filter.active span { background: transparent; color: #b1b5bf; }
.filter:hover { background: #24272d; color: white; }
.sort-button { padding-bottom: 8px; min-height: 36px; color: #a6a8b0; }
.date-line { margin-top: 23px; color: #969aa4; }
.task-list { gap: 14px; }
.task-card { background: #1a1c20; border-color: #292c33; padding: 23px; gap: 32px; border-radius: 14px; }
.task-prompt { color: #e4e5eb; font-size: 14px; line-height: 1.85; }
.task-time, .task-parameters { color: #979ca7; }
.task-parameters i { background: #606670; }
.task-action { color: #afb4bf; }
.task-action:hover { color: #d3f6fc; }
.status { background: #233333; color: #a4d3cc; }
.status.running { background: #302c25; color: #dcc190; }
.status.failed { background: #342727; color: #dea19a; }
.task-visual { background: #24282d; }
.preview-symbol { color: #f4f6fb; background: #141b22b8; }
.visual-duration { background: #0c1115d9; color: white; }
.status-visual { background: #24272d; color: #a7b0be; }
.processing-mark { color: #839fab; }
.failed-visual { background: #2b2628; color: #cba6a3; }
.failure-note { color: #dca29c; }
.list-end p { color: #838a95; }
.composer-dock { padding-top: 13px; padding-bottom: 14px; background: #111214; }
.composer { padding: 21px 23px 17px; border-radius: 20px; background: #22272d; box-shadow: var(--shadow-dock); }
.composer::before { content: ""; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; border: 1px solid #3b434b; }
.composer:focus-within { box-shadow: 0 12px 52px #00000055; }
.composer:focus-within::before { border-color: #718891; }
.composer-topline { margin: 0; }
.composer-main { display: flex; align-items: flex-start; gap: 20px; min-height: 108px; padding-bottom: 14px; }
.attachment-actions { display: flex; gap: 9px; flex: 0 0 auto; padding-top: 1px; }
.attachment-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 67px; height: 77px; min-height: 77px; border: 1px dashed #59606b; border-radius: 10px; padding: 8px 4px; color: #b9bec8; background: #2b3038; position: relative; }
.attachment-button .icon { width: 20px; height: 20px; color: #c7ccd5; stroke-width: 1.5; }
.attachment-button .attachment-title { color: #bbc1cc; font-size: 11px; white-space: nowrap; }
.attachment-button > span:not(.attachment-title):not(:empty) { color: #b4edf2; position: absolute; top: -5px; right: -5px; padding: 2px 4px; background: #344c53; font-size: 11px; border-radius: 4px; }
.attachment-button:hover { color: #ecf7ff; background: #343c46; border-color: #8cabb7; }
.attachment-button:hover .attachment-title { color: white; }
#prompt { min-height: 90px; max-height: 160px; color: #f0f2f6; font-size: 14px; line-height: 1.9; margin-top: 0; flex: 1 1 auto; padding: 3px 0 0; }
#prompt::placeholder { color: #a8adb7; }
.composer-bottom { border: 0; padding-top: 0; gap: 18px; min-height: 42px; }
.parameters { display: flex; gap: 12px; flex-wrap: wrap; min-width: 0; align-items: center; }
.creation-type, .form-model { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 20px; min-height: 36px; white-space: nowrap; }
.creation-type { color: #9cdeef; margin-right: 3px; }
.creation-type .icon { width: 13px; height: 13px; }
.form-model { color: #e6eaf3; font-weight: 550; }
.form-model .icon { width: 14px; height: 14px; color: #ccd7e2; }
.resolution { color: #d4dce8; background: transparent; font-size: 11px; padding: 0 2px; font-weight: 500; }
.select-wrap { color: #d3dbe6; min-height: 36px; gap: 5px; }
.select-wrap select { font-size: 12px; padding-top: 9px; padding-bottom: 9px; min-height: 36px; min-width: 45px; }
.select-wrap .icon { color: #c5ced9; }
.ratio-select { padding-right: 15px; }
.ratio-select select { padding-right: 0; min-width: 37px; }
.ratio-select .chevron { right: 0; }
.select-wrap option { color: #e6eaf1; background: #2b3038; }
.submit-actions { display: flex; align-items: center; gap: 17px; flex: 0 0 auto; }
.char-count { color: #a0a7b3; font-size: 11px; white-space: nowrap; }
#generate-button { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; padding: 0; background: #b4e8f0; color: #1c3942; }
#generate-button:hover { background: #d5f7fc; }
#generate-button .icon { width: 21px; height: 21px; stroke-width: 2.4; transform: rotate(-90deg); }
#generate-button:disabled { background: #63747d; color: #c4d5dd; opacity: 1; }
.dock-note { color: #8f95a1; font-size: 11px; margin-top: 12px; }
.dock-note button { color: #a7aebb; font-size: 11px; }
.reference-tray { scrollbar-color: #59616b transparent; max-height: 120px; padding-bottom: 16px; }
.reference-item { background: #343c45; }
.reference-remove { color: #f0f5fb; background: #1b2029e6; }
.audio-reference { background: #303943; }
.audio-reference .audio-play { color: #e7fbff; background: #465563; }
.audio-info, .audio-reference .audio-info { color: #cad2dd; }
.reference-item > span { background: #17212cdb; }
.form-feedback { color: #eba6a0; padding-top: 12px; }
.empty-state > .icon { color: #8aafbe; }
dialog { background: #23272e; color: #f0f3fa; box-shadow: 0 20px 90px #00000075; }
dialog::backdrop { background: #03060cd6; }
.icon-button { color: #bbc6d4; }
.icon-button:hover { background: #35404c; color: white; }
.preview-media { background: #131820; }
.dialog-content > p { color: #c5cdda; }
.about-dialog p { color: #b5c0cd; }
.about-dialog > .generate-button { color: #17313b; }
.toast { background: #334851; color: #f1fbff; box-shadow: 0 8px 30px #00000040; }
@media(max-width:800px) {
  .task-card { padding: 19px; gap: 20px; }
  .parameters { gap: 11px; }
  .creation-type { display: none; }
  .submit-actions .char-count { display: none; }
}
@media(max-width:560px) {
  .app-shell { grid-template-rows: 62px minmax(0,1fr) auto; }
  .brand { font-size: 19px; }
  .workspace { padding: 18px 16px 12px; }
  .workspace-heading { margin-bottom: 16px; }
  h1 { font-size: 23px; }
  .filters { gap: 6px; }
  .filter { font-size: 12px; padding: 8px 10px; min-height: 36px; }
  .sort-button { font-size: 11px; }
  .date-line { margin-top: 15px; margin-bottom: 12px; }
  .task-card { padding: 16px; gap: 13px; }
  .task-prompt { font-size: 13px; }
  .composer-dock { padding: 10px 12px calc(11px + env(safe-area-inset-bottom)); }
  .composer { padding: 16px 15px 13px; border-radius: 17px; }
  .composer-main { gap: 13px; min-height: 109px; padding-bottom: 14px; }
  .attachment-actions { gap: 7px; }
  .attachment-button { width: 48px; height: 65px; min-height: 65px; border-radius: 8px; gap: 7px; padding: 6px 0; }
  .attachment-button .icon { width: 18px; height: 18px; }
  .attachment-button .attachment-title { font-size: 11px; }
  #prompt { font-size: 13px; line-height: 1.85; min-height: 93px; max-height: 142px; padding-top: 1px; }
  .composer-bottom { gap: 9px; align-items: center; }
  .parameters { gap: 5px 11px; }
  .form-model { font-size: 11px; min-height: 32px; }
  .form-model .icon { width: 12px; height: 12px; }
  .select-wrap { min-height: 36px; }
  .select-wrap select { min-width: 40px; font-size: 11px; padding-right: 12px; min-height: 36px; }
  .ratio-select { padding-right: 13px; gap: 3px; }
  .ratio-select select { min-width: 31px; padding-right: 0; }
  .ratio-select .resolution { font-size: 11px; padding: 0; }
  #generate-button { width: 40px; height: 40px; flex: 0 0 40px; }
  .dock-note { font-size: 11px; margin-top: 10px; }
  .dock-note > span { display: none; }
  .dock-note { max-width: 350px; }
  .reference-item { width: 61px; height: 61px; }
  .audio-reference { width: 154px; }
}
@media(max-width:370px) {
  .form-model { flex-basis: 100%; }
  .parameters { gap: 0 11px; }
  .composer-main { min-height: 95px; }
  #prompt { min-height: 80px; }
}
@media(max-height:650px) and (max-width:560px) {
  .composer-main { min-height: 82px; padding-bottom: 8px; }
  #prompt { min-height: 70px; max-height: 90px; }
  .attachment-button { min-height: 60px; height: 60px; }
}

/* The user's screenshot supersedes the previous split-upload composer. */
:root {
  --color-bg: #111111;
  --color-surface: #1b1b1b;
  --color-line: #2b2b2b;
  --color-accent: #90d7fa;
  --color-accent-hover: #b4e6ff;
}
.workspace { padding-left: max(32px, calc((100% - 800px) / 2)); padding-right: max(32px, calc((100% - 800px) / 2)); }
.workspace-heading { margin-bottom: 23px; }
h1 { font-size: 23px; }
.workspace-heading p { display: none; }
.task-card { grid-template-columns: minmax(0, 1fr) 228px; padding: 19px; gap: 24px; background: #191919; border-color: #292929; }
.task-prompt { font-size: 13px; }
.task-parameters { flex-wrap: wrap; gap: 7px; }
.model-note { display: none; }
.composer-dock { background: #111111; padding-top: 14px; padding-bottom: 13px; }
.composer { width: min(800px, 100%); padding: 13px 17px 15px; border-radius: 21px; background: #202020; box-shadow: 0 10px 36px #00000024; }
.composer::before { border-color: #2b2b2b; }
.composer:focus-within { box-shadow: 0 10px 36px #00000024; }
.composer:focus-within::before { border-color: #555555; }
.reference-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 31px; margin-bottom: 12px; }
.reference-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.reference-filter { font-size: 11px; min-height: 30px; padding: 6px 10px; border-radius: 7px; color: #a8a8a8; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.reference-filter.active { background: #333333; color: #f0f0f0; }
.reference-filter:hover { color: white; background: #2d2d2d; }
.reference-tools { display: flex; align-items: center; gap: 13px; color: #b6b6b6; flex: 0 0 auto; }
#clear-references { font-size: 11px; padding: 6px 0; min-height: 30px; }
#clear-references:hover { color: #fff; }
#clear-references:disabled { cursor: default; color: #777777; opacity: 1; }
#expand-composer { width: 28px; height: 30px; color: #a6a6a6; border-radius: 5px; }
#expand-composer .icon { width: 13px; height: 13px; }
#expand-composer:hover { color: white; background: #343434; }
.reference-tray { display: flex; align-items: center; gap: 6px; padding: 0 0 2px; max-height: 80px; overflow-x: auto; scrollbar-color: #555555 transparent; scrollbar-width: thin; margin-bottom: 13px; }
.reference-item { width: 48px; height: 64px; border-radius: 3px; background: #3a3a3a; flex: 0 0 auto; }
.reference-item img { object-fit: cover; }
.reference-item > span { font-size: 11px; bottom: 2px; left: 2px; padding: 1px 3px; background: #000000b0; }
.reference-remove { width: 18px; height: 18px; top: 2px; right: 2px; background: #121212c9; color: white; opacity: 0; transition: opacity 140ms ease; }
.reference-item:hover .reference-remove, .reference-item:focus-within .reference-remove { opacity: 1; }
.reference-remove .icon { width: 11px; height: 11px; }
.reference-add { width: 48px; height: 64px; border-radius: 3px; color: #b8b8b8; background: #3b3b3b; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 5px 0; }
.reference-add .icon { width: 20px; height: 20px; stroke-width: 1.35; }
.reference-add span { font-size: 11px; white-space: nowrap; }
.reference-add:hover { background: #4a4a4a; color: white; }
.audio-reference { width: 144px; padding: 10px; gap: 8px; }
.audio-reference .audio-play { background: #515151; color: #f1f1f1; }
.audio-reference .audio-info { color: #d2d2d2; }
.composer-main { display: block; min-height: 77px; padding: 0 0 8px; }
#prompt { width: 100%; min-height: 68px; max-height: 170px; font-size: 13px; line-height: 1.9; padding: 0; }
#prompt::placeholder { color: #a3a3a3; }
.composer-bottom { min-height: 32px; align-items: center; gap: 10px; }
.parameters { gap: 12px; }
.creation-type, .form-model { font-size: 11px; min-height: 32px; line-height: 18px; }
.creation-type { color: #66c4f5; margin: 0; }
.creation-type .icon { width: 12px; height: 12px; }
.form-model .icon { color: #c5c5c5; }
.form-model { color: #e7e7e7; }
.select-wrap { color: #d5d5d5; min-height: 32px; }
.select-wrap .icon { color: #c6c6c6; width: 13px; height: 13px; }
.select-wrap select { font-size: 11px; padding-top: 6px; padding-bottom: 6px; min-height: 32px; }
.select-wrap option { background: #303030; color: white; }
.resolution { color: #d5d5d5; }
.submit-actions { gap: 12px; }
.char-count { color: #999999; font-size: 11px; }
#generate-button { width: 32px; height: 32px; min-height: 32px; background: #f0f0f0; color: #282828; }
#generate-button .icon { width: 19px; height: 19px; stroke-width: 2.2; }
#generate-button:hover { background: white; }
#generate-button:disabled { background: #626262; color: #b7b7b7; }
.composer.composer-expanded { max-height: min(70dvh, 520px); overflow-y: auto; }
.composer.composer-expanded #prompt { min-height: 190px; }
.dock-note { color: #979797; font-size: 11px; margin-top: 9px; }
#reference-menu { margin: 0; inset: auto; position: fixed; padding: 6px; width: 220px; background: #303030; border: 1px solid #4a4a4a; border-radius: 10px; color: #eee; box-shadow: 0 8px 28px #00000055; }
#reference-menu > button { display: flex; align-items: center; gap: 8px; padding: 11px 9px; width: 100%; min-height: 42px; font-size: 12px; border-radius: 5px; text-align: left; }
#reference-menu > button:hover { background: #414141; }
#reference-menu > button .icon { width: 16px; height: 16px; }
#reference-menu > button span { margin-left: auto; color: #b2b2b2; font-size: 11px; }
@media(max-width:900px) {
  .workspace { padding-left: 24px; padding-right: 24px; }
}
@media(max-width:800px) {
  .parameters { gap: 9px; }
  .creation-type { display: inline-flex; }
}
@media(max-width:560px) {
  .workspace { padding: 18px 16px 12px; }
  .workspace-heading { margin-bottom: 16px; }
  .task-card { grid-template-columns: 1fr; padding: 16px; gap: 13px; }
  .composer-dock { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .composer { padding: 10px 12px 9px; border-radius: 16px; }
  .reference-toolbar { gap: 7px; margin-bottom: 8px; }
  .reference-tabs { gap: 0; }
  .reference-filter { padding: 6px 7px; min-height: 28px; }
  .reference-tools { gap: 7px; }
  #clear-references { font-size: 11px; }
  #expand-composer { width: 24px; height: 32px; }
  .reference-tray { margin-bottom: 8px; }
  .reference-item, .reference-add { width: 44px; height: 56px; }
  .audio-reference { width: 144px; }
  .reference-remove { opacity: 1; width: 19px; height: 19px; }
  .composer-main { min-height: 57px; padding-bottom: 5px; }
  #prompt { min-height: 50px; max-height: 110px; font-size: 13px; }
  .composer-bottom { gap: 9px; }
  .parameters { gap: 4px 10px; }
  .creation-type { display: none; }
  .form-model { min-height: 32px; }
  .select-wrap { min-height: 32px; }
  .select-wrap select { min-height: 32px; }
  #generate-button { width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; }
  .composer.composer-expanded { max-height: 60dvh; }
  .composer.composer-expanded #prompt { min-height: 145px; }
  .dock-note { font-size: 11px; margin-top: 9px; }
}