/* Vídeo mode: gallery from the videos folder, clip dialog, prompt and the real generation job. */
/* Popularity is read across each row; columns would put older clips above ranked ones. */
.workspace-shell [data-public-gallery="videos"] .motion-masonry { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gallery-card-width, 230px)), 1fr)); gap: 14px; align-items: start; }
.workspace-shell [data-public-gallery="videos"] .motion-masonry > .motion-card { margin-bottom: 0; }
@media (max-width: 760px) {
  .workspace-shell [data-public-gallery="videos"] .motion-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 430px) {
  .workspace-shell [data-public-gallery="videos"] .motion-masonry { grid-template-columns: minmax(0, 1fr); }
}
.video-configurator .upload-zone.loading { cursor: progress; border-style: solid; }
.video-configurator .upload-zone.loading:hover { background: #211d29; border-color: #4d415f; }
.video-configurator .upload-zone.loading input { cursor: progress; }
/* Session checks retain the previous layout's dimensions with neutral, static content only. */
.studio-verification-content { display: grid; align-content: start; gap: 18px; }
.studio-verification-status { margin: 0; color: var(--muted); font-size: 12px; }
.studio-verification-lines { display: grid; gap: 12px; }
.studio-verification-lines span { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--surface-raised); }
.studio-verification-lines span:nth-child(2) { width: 82%; }
.studio-verification-lines span:nth-child(3) { width: 62%; }
.workspace-shell .video-configurator .studio-verification-footer { box-sizing: border-box; padding: 0 20px; display: grid; align-content: center; overflow: clip; }
.studio-verification-footer span { display: block; width: 100%; height: 42px; border-radius: 8px; background: var(--surface-raised); }
.studio-session-checking { min-width: 0; }
.workspace-shell main:has(.studio-session-result) { min-height: calc(100dvh - 72px); }
.workspace-shell:has(.studio-session-result) .minimal-footer { display: none; }
.studio-verification-stage { display: grid; align-content: start; gap: 20px; width: min(100%, 760px); margin: 0 auto; }
.studio-verification-media { width: 100%; aspect-ratio: 16 / 9; max-height: 360px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.upload-progress { display: grid; width: 100%; min-width: 0; gap: 6px; padding: 8px 0; color: #e2d6ec; text-align: left; }
.upload-progress .upload-progress-stage { color: #d4c5ed; font-size: 11px; font-weight: 600; }
.upload-progress-file { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 11px; }
.upload-progress-file > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-file small, .upload-progress .upload-progress-detail, .upload-progress .upload-progress-transfer { flex: none; margin: 0; font-size: 11px; color: #b1a6be; font-variant-numeric: tabular-nums; }
.upload-progress-detail[hidden] { display: none; }
.upload-progress-transfer[hidden] { display: none; }
.upload-progress-track { display: block; width: 100%; height: 5px; margin-top: 4px; overflow: hidden; border-radius: 5px; background: #40344f; }
.upload-progress-fill { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--purple); animation: upload-progress-travel 1.8s ease-in-out infinite alternate; }
.video-configurator .upload-zone .upload-progress { max-width: 240px; margin-top: 4px; }
@keyframes upload-progress-travel { from { transform: translateX(0); } to { transform: translateX(138%); } }
@media (prefers-reduced-motion: reduce) {
  .upload-progress-fill { animation: none; transform: translateX(69%); }
}
.upload-progress-track[data-upload-determinate="true"] .upload-progress-fill { width: var(--upload-percent, 0%); animation: none; transform: none; background: var(--accent); transition: width .14s linear; }
.source-clip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .upload-progress-track[data-upload-determinate="true"] .upload-progress-fill { transition: none; } }
.motion-card { cursor: pointer; transition: translate 450ms var(--ease), box-shadow 450ms var(--ease); }
.motion-card video, .motion-card:nth-child(n) video { aspect-ratio: auto; height: auto; transition: scale 500ms var(--ease), filter 350ms var(--ease); }
.motion-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffffff12; pointer-events: none; }
@media (hover: hover) {
  .motion-card:hover { translate: 0 -4px; box-shadow: 0 14px 30px #00000059; }
  .motion-card:hover video { scale: 1.045; filter: brightness(1.07); }
}
.selected-video { position: relative; }
.selected-video-remove { position: absolute; top: 8px; right: 8px; background: #17131bcc; }
.video-configurator .selected-video .source-clip { width: 100%; height: auto; max-height: 230px; object-fit: cover; border-radius: 10px; background: #0a0a0c; display: block; }
.video-meta { font-size: 11px; color: #a792b7; margin-top: 8px; }
.video-prompt-field { margin: 4px 0 6px; }
.video-prompt-label { display: flex; justify-content: space-between; align-items: baseline; color: #e2d6ec; font-size: 12px; font-weight: 600; }
.video-prompt-label small { color: #8d7d9b; font-weight: 500; font-size: 11px; font-variant-numeric: tabular-nums; }
.video-prompt-field textarea { display: block; width: 100%; margin-top: 8px; min-height: 120px; resize: vertical; border: 1px solid #3a363f; border-radius: 8px; background: #232227; padding: 10px 12px; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text); }
.video-prompt-field textarea::placeholder { color: #85798f; }
.video-prompt-field textarea:hover { border-color: #625471; }
.video-prompt-field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px #b5a0ff26; }
dialog.clip-dialog { width: min(470px, calc(100% - 32px)); }
.clip-dialog-media video { display: block; width: 100%; max-height: calc(100dvh - 240px); border-radius: 10px; background: #000; object-fit: contain; }
.clip-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.clip-dialog-actions .muted { font-size: 11px; }
.job-art { display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 35%, #2a2133, #141118 70%); }
.job-result { display: block; max-width: 100%; max-height: 72dvh; border-radius: 12px; background: #000; }
.job-pair { display: flex; align-items: center; gap: 14px; }
.job-pair .composition-plus { color: var(--purple); }
.job-art .job-pair .job-actor { flex: none; width: 150px; height: 200px; aspect-ratio: auto; border-radius: 12px; }
.job-source video, .job-source-empty { display: block; width: 150px; aspect-ratio: 9/16; object-fit: cover; border-radius: 12px; background: #0a0a0c; }
.job-source-empty { display: grid; place-items: center; color: #8d7d9b; }
.generation-stages li.current { color: #eadcff; font-weight: 600; }
.job-prompt { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--purple); font-size: 11px; color: #c4b2d2; max-height: 7.5em; overflow: auto; overflow-wrap: anywhere; }
.job-view .generation-buttons { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .motion-card, .motion-card video { transition: none; }
  .motion-card:hover { translate: none; }
  .motion-card:hover video { scale: 1; }
}
@media (max-width: 700px) {
  .job-art { padding: 18px; }
  .job-art .job-pair .job-actor, .job-source video, .job-source-empty { width: 110px; }
  .job-art .job-pair .job-actor { height: 147px; }
}
/* Generation options, director report and costs (proof of concept). */
/* Formato and Duração side by side when the panel is wide enough, one per row when it is not (Duração has 4 options). */
.video-options { display: flex; flex-wrap: wrap; column-gap: 10px; margin: 4px 0 10px; }
.video-options .video-option { flex: 1 1 150px; }
.video-options .video-option.format-option { flex-basis: 100%; }
.video-option { margin: 0 0 10px; border: 0; padding: 0; min-width: 0; }
.video-option legend { font-size: 12px; font-weight: 600; color: #e2d6ec; margin-bottom: 6px; }
.video-option .segmented button { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-option .segmented button:disabled { opacity: .35; cursor: not-allowed; }
.video-option .segmented button small { display: block; margin-top: 1px; font-size: 10px; color: #8f8a9a; }
.video-option .segmented button.selected small { color: #c9bdf0; }
.video-option .segmented button.selected:not(:disabled):not([aria-disabled="true"]) small { color: var(--brand-fill-ink); }
.video-option .segmented button[data-value="original"] { flex: 1.7; }
.modelb-note { display: block; margin: -2px 0 0; }
/* Modelo B: Formato and "Manter áudio original" stay visible but fixed, each with the reason under it. */
.video-options > .modelb-note { flex-basis: 100%; margin: -4px 0 10px; }
.toggle-row:has(input:disabled) { cursor: default; }
.toggle-row input:disabled + .switch { opacity: .55; }
.toggle-row + #modelb-audio-hint { margin: -6px 0 6px; }
/* Player of the chosen video and, under it, the timeline of the whole video with the swapped segment highlighted. */
.video-configurator .selected-video .source-player { object-fit: contain; max-height: 260px; }
.segment-timeline { margin-top: 10px; }
.segment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.segment-title { min-width: 0; color: #e2d6ec; font-size: 12px; font-weight: 600; }
.segment-play { display: inline-flex; flex: none; align-items: center; gap: 5px; min-height: 28px; white-space: nowrap; padding: 0 10px; border: 1px solid #3a363f; border-radius: 999px; background: #232227; color: #e2d6ec; font: inherit; font-size: 11px; cursor: pointer; }
.segment-play:hover { border-color: #625471; color: #fff; }
.segment-play:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px #b5a0ff40; }
.segment-play .icon { width: 12px; height: 12px; color: var(--purple); }
.segment-track { position: relative; height: 44px; border-radius: 8px; background: repeating-linear-gradient(90deg, #27242c 0 6px, #201d24 6px 12px); box-shadow: inset 0 0 0 1px #3a363f; touch-action: none; user-select: none; cursor: pointer; }
.segment-window { position: absolute; inset: 0 auto 0 var(--segment-start, 0%); width: var(--segment-width, 100%); min-width: 8px; border-radius: 8px; background: #b5a0ff33; box-shadow: inset 0 0 0 2px var(--purple); }
.segment-timeline.movable .segment-window { cursor: grab; }
.segment-track.dragging .segment-window { cursor: grabbing; background: #b5a0ff4d; }
.segment-window:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--purple), 0 0 0 3px #b5a0ff66; }
.segment-handle { position: absolute; top: 0; width: 24px; height: 100%; translate: -50% 0; z-index: 2; cursor: ew-resize; touch-action: none; border-radius: 6px; }
.segment-handle-start { left: var(--segment-start, 0%); }
.segment-handle-end { left: calc(var(--segment-start, 0%) + var(--segment-width, 100%)); }
.segment-handle::before { content: ''; position: absolute; inset: 6px 7px; border: 1px solid var(--violet-ink, #7D36EA); border-radius: 4px; background: var(--focus-ring, #CDB0FF); }
.segment-handle::after { content: ''; position: absolute; top: 16px; bottom: 16px; left: 11px; width: 2px; border-radius: 1px; background: var(--action-ink, #17151C); }
.segment-handle:hover::before, .segment-handle:focus-visible::before { background: var(--accent, #D7FF3F); }
.segment-handle:focus-visible { outline: 2px solid var(--focus-ring, #CDB0FF); outline-offset: 2px; }
.segment-track.resizing-start .segment-handle-start::before, .segment-track.resizing-end .segment-handle-end::before { background: var(--accent, #D7FF3F); }
.segment-duration-note { color: var(--focus-ring, #CDB0FF); font-variant-numeric: tabular-nums; }
.segment-playhead { position: absolute; top: -3px; bottom: -3px; left: var(--playhead, 0%); width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 0 1px #00000080; pointer-events: none; transition: left 250ms linear; }
.segment-scale { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 11px; color: #8d7d9b; font-variant-numeric: tabular-nums; }
.segment-scale strong { color: #d9ccf9; font-weight: 600; text-align: center; }
@media (pointer: coarse) { .segment-track { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .segment-playhead { transition: none; } }
.field-hint { display: block; margin-top: 6px; font-size: 11px; color: #8d7d9b; line-height: 1.45; }
.job-settings { margin: -6px 0 10px; font-size: 11px; color: #a792b7; font-variant-numeric: tabular-nums; }
.job-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 9px 11px; border-radius: 8px; background: #2a2133; color: #e2d6ec; font-size: 11px; line-height: 1.45; }
.job-note .icon { flex: none; width: 14px; height: 14px; color: var(--purple); margin-top: 1px; }
/* Assets: every finished video in the Vídeo gallery's masonry, full width; 16:9 cards fit the same columns. */
.asset-filters { flex: none; }
.asset-filters button { padding-inline: 12px; white-space: nowrap; }
.asset-filters button span { margin-left: 3px; color: #8d7d9b; font-variant-numeric: tabular-nums; }
.asset-filters button.selected span { color: #c9b8f0; }
.assets-masonry { columns: 4; }
.asset-card { text-align: left; }
.asset-tag { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 5px; background: #211729d9; color: #ddc1ee; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.asset-caption { position: absolute; inset: auto 0 0; display: grid; gap: 4px; padding: 38px 12px 12px; background: linear-gradient(transparent, rgba(17,11,21,.88)); color: white; opacity: 0; transition: opacity 250ms var(--ease); pointer-events: none; }
.asset-caption strong { font-size: 12px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.asset-caption span { font-size: 10px; color: #e5d7e8; font-variant-numeric: tabular-nums; }
.asset-pending-body { display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; background: radial-gradient(circle at 50% 35%, #2a2133, #141118 70%); color: #e2d6ec; }
.asset-pending-body .icon { width: 22px; height: 22px; color: var(--purple); animation: asset-spin 1.2s linear infinite; }
.asset-pending-body strong { font-size: 13px; }
.asset-refused .asset-pending-body .icon { animation: none; color: #e58a8a; }
.asset-pending-body small { padding-inline: 12px; font-size: 11px; color: #a792b7; text-align: center; }
.assets-status { display: flex; align-items: center; gap: 8px; color: #a792b7; font-size: 12px; }
.assets-status .icon { width: 16px; height: 16px; animation: asset-spin 1.2s linear infinite; }
.asset-prompt { margin-top: 14px; }
dialog.asset-dialog.landscape { width: min(860px, calc(100% - 32px)); }
@keyframes asset-spin { to { rotate: 360deg; } }
@media (hover: hover) { .asset-card:hover .asset-caption { opacity: 1; } }
.asset-card:focus-visible .asset-caption { opacity: 1; }
@media (min-width: 1800px) { .assets-masonry { columns: 5; } }
@media (max-width: 1200px) { .assets-masonry { columns: 3; } }
@media (max-width: 760px) {
  .assets-masonry { columns: 2; column-gap: 12px; }
  .assets-masonry .motion-card { margin-bottom: 12px; }
  .page-heading:has(.asset-filters) { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .asset-caption { transition: none; } .asset-pending-body .icon, .assets-status .icon { animation: none; } }
/* Characters of a video: the selected influencer (or an uploaded image) plus uploaded images, each with who it replaces. */
.cast-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; margin: 11px 0 18px; }
.cast-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; padding: 10px; border: 1px solid #2e2b34; border-radius: 10px; background: #1c1b20; }
.video-configurator .cast-item .cast-row { margin: 0; }
.video-configurator .cast-row > span:not(.genai-audio-icon) { min-width: 0; overflow-wrap: anywhere; }
.cast-item .video-prompt-field { margin: 0; }
.cast-item .video-prompt-field textarea { min-height: 64px; }
img.cast-upload { object-fit: cover; background: #232227; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input, .add-character input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.file-button:focus-within, .add-character:focus-within { outline: 2px solid var(--purple); outline-offset: 3px; }
.add-character { position: relative; justify-self: start; gap: 6px; font-size: 12px; min-height: 34px; }
/* Request screen with several characters: their images stacked beside the source clip. */
.job-actors { display: grid; gap: 8px; }
.job-art .job-pair .job-actors .job-actor { width: 96px; height: 128px; object-fit: cover; border-radius: 10px; }
img.job-actor { object-fit: cover; background: #232227; }
/* The sticky panel keeps the Gerar button in view: its middle scrolls when the characters list makes it taller than the screen. */
.video-configurator .video-config-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* At the top of the page the panel starts below the header (~106 px), so its height leaves room for it: the button is always on screen. */
.video-configurator.visual-configurator { max-height: calc(100dvh - 124px); }
@media (max-width: 720px) { .video-configurator.visual-configurator { max-height: none; } .video-configurator .video-config-body { overflow: visible; } }
/* Generation screen: everything centered in the copy column. */
.job-view .generation-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.job-view .generation-copy > p { margin-inline: auto; }
.job-view .generation-copy progress, .job-view .progress-label { width: 100%; max-width: 420px; }
.job-view .generation-buttons { justify-content: center; }
.job-view .progress-label { justify-content: center; gap: 8px; }
.hd-pending, .hd-ready, .hd-preview { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #241c32; color: #f0e6fb; font-size: 12px; }
.hd-pending .icon { animation: asset-spin 1.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hd-pending .icon { animation: none; } }

/* Diálogo de um envio da conta: só a ação de criar, centralizada. */
.clip-dialog-actions.centered { justify-content: center; }
/* Criar vídeo: o lado direito alterna entre vídeos, AI influencers e Meus personagens sem fechar a sidebar. */
.studio-browse { margin-bottom: 20px; }
.my-characters .portfolio-card { padding: 0; overflow: hidden; }
.my-characters .portfolio-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* "Trocar personagem | Gerar com IA" (Gen AI) */
.video-mode { margin: 0 0 14px; }
.video-mode button { font-size: 12px; font-weight: 600; }
.video-config-label small { display: block; margin-top: 2px; color: #8f8a9a; font-size: 11px; }

/* Sua criação: one centered stage from the wait through the final before/after. */
.workspace-shell main:has(> .job-view) { min-height: calc(100dvh - 72px); display: grid; place-items: center; }
.workspace-shell:has(.job-view) .minimal-footer { display: none; }
.job-view { --job-player-h: min(440px, max(240px, calc(100dvh - 400px))); width: min(860px, 100%); min-height: 0; margin-inline: auto; grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
.job-view .job-inputs { min-width: 0; padding: 28px; background: #1c1921; border-right: 1px solid #35303d; display: flex; flex-direction: column; justify-content: center; }
.job-view .job-input-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job-view .job-input-heading h3 { margin: 0; font: 600 13px/1.4 var(--font); color: #eee9f5; }
.job-view .job-input-heading > span { font-size: 11px; color: #aaa8b4; }
.job-view .job-input-heading .button { padding: 0; min-height: 24px; font-size: 11px; color: #cdbbfa; gap: 4px; }
.job-view .job-input-heading .button .icon { width: 13px; height: 13px; }
.job-view .job-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; margin-top: 18px; }
.job-view .job-reference { min-width: 0; }
.job-view .job-reference-button { position: relative; display: block; width: 100%; height: clamp(88px, 15dvh, 116px); padding: 0; background: #242228; border-radius: 8px; overflow: hidden; }
.job-view .job-reference-button:hover { background: #302939; }
.job-view .job-reference-button:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.job-view .job-reference-button .job-reference-preview, .job-view .job-reference-button .owned-preview-media { display: block; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: contain; }
.job-view .job-reference-button img { width: 100%; height: 100%; object-fit: contain; }
.job-view .job-reference-expand { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: grid; place-items: center; background: #111114cf; border-radius: 5px; color: var(--text); }
.job-view .job-reference-expand .icon { width: 12px; height: 12px; }
.job-view .job-reference-label { display: block; margin-top: 6px; font-size: 11px; color: #ccc5d4; }
.job-view .job-reference-hint { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; color: #aaa8b4; font-size: 11px; }
.job-view .job-reference-hint .icon { width: 13px; height: 13px; flex: none; }
.job-view .job-input-source { width: 100%; height: clamp(84px, 15dvh, 110px); margin: 12px 0 22px; border-radius: 8px; overflow: hidden; background: #111114; }
.job-view .job-input-source .owned-preview-media, .job-view .job-input-video { display: block; width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto !important; }
.job-view .job-input-prompt { margin-top: 22px; padding-top: 16px; border-top: 1px solid #35303d; }
.job-view .job-input-prompt > p { margin: 9px 0 0; color: #bbb2c7; font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.job-view .generation-copy.job-output { min-width: 0; padding: 28px 32px; gap: 0; }
.job-view .job-status { width: 100%; max-width: 380px; }
.job-view .job-mode { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #dac9ff; font-size: 11px; font-weight: 600; }
.job-view .job-mode .icon { width: 15px; height: 15px; }
.job-view .job-status h2 { font: 500 36px/1.17 var(--display); letter-spacing: -.03em; margin: 22px 0 12px; text-wrap: balance; }
.job-view .job-status > p { margin: 0 auto; max-width: 340px; color: #aaa8b4; font-size: 12px; line-height: 1.7; }
.job-view p.job-settings { max-width: none; font-size: 12px; color: #d3c6df; margin: 20px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.job-view .job-status-steps { list-style: none; padding: 0; margin: 28px auto 0; display: grid; gap: 13px; text-align: left; width: min(310px, 100%); }
.job-view .job-status-steps li { display: flex; align-items: center; gap: 10px; color: #aaa8b4; font-size: 12px; line-height: 1.5; }
.job-view .job-status-steps .icon { width: 20px; height: 20px; flex: none; color: #9584aa; }
.job-view .job-status-steps .current { color: #dfd0ff; }
.job-view .job-status-steps .current .icon { color: var(--purple); animation: asset-spin 1.5s linear infinite; }
.job-view .job-status-steps .complete .icon { color: #c9b2ed; }
.job-view .job-status progress { display: block; width: min(310px, 100%); height: 3px; margin: 20px auto 0; }
/* The production bar by time (job-progress.js): the upload bar itself, as wide as the stages above it, with the time left, the
   percentage and, only while the video waits behind others, the place in the queue. Between the ticks of a second the fill glides. */
.job-view .job-progress .job-eta { width: 100%; margin: 0; padding: 0; }
.job-view .job-eta-queue { margin: 0; color: #dfd0ff; font-size: 12px; font-weight: 600; line-height: 1.5; }
.job-view .job-eta-row { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.job-view .job-eta-percent { margin-left: auto; color: #b1a6be; font-size: 11px; font-variant-numeric: tabular-nums; }
.job-view .job-eta [hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .job-view .job-eta .upload-progress-track[data-upload-determinate="true"] .upload-progress-fill { transition: width 1s linear; } }
.job-view p.job-status-label { margin-top: 20px; color: #d6c5ee; }
.job-view .generation-buttons { margin: 28px 0 0; flex-direction: row; gap: 8px; }
.job-view .generation-buttons .button { min-height: 38px; font-size: 11px; padding: 9px 12px; }
.job-view .job-ready-title { font: 500 24px/1.3 var(--display); letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
.job-view .job-ready-title br { display: none; }
.job-view .job-player { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; }
.job-view .job-player .job-result { max-height: var(--job-player-h); max-width: 100%; width: auto; object-fit: contain; border-radius: 12px; }
.job-view .job-player > .hd-pending, .job-view .job-player > .hd-ready, .job-view .job-player > .hd-preview { left: 50%; translate: -50% 0; width: max-content; max-width: 100%; }
.job-view .job-player .ba { --ba-max-h: var(--job-player-h); }
.job-view .job-empty-result { width: min(100%, calc(var(--job-player-h) * var(--ba-ratio))); aspect-ratio: var(--ba-ratio); background: #000; border-radius: 12px; }
.job-view .job-progress { width: min(420px, 100%); margin-top: 24px; text-align: left; }
.job-view .job-wait-note { max-width: 48ch; margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
/* Modelo B 720p: under the 480p preview, the Full HD still being finalized, the "?" that explains the preview and the request's facts.
   A grid: the label, the bar beside the "?", then one cell shared by the facts and the explanation. The explanation always keeps its
   place in that cell and only its visibility changes, so showing it moves nothing: not the "?" under the pointer or the finger, not the
   card (centered on the page) and not the page's scroll anchor. Opened, it covers only the facts line of its own cell, never the
   player's controls, the label or the buttons, and it is as wide as the bar, which is never wider than the card. */
.job-view .hd-progress{position:relative;width:min(340px,100%);margin:14px auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:6px;text-align:left}
.hd-progress-label{grid-row:1;grid-column:1/-1;margin:0;color:#d4c5ed;font-size:11px;font-weight:600}
.job-view .hd-progress .upload-progress-track{grid-row:2;grid-column:1;min-width:0;margin-top:0}
.hd-help{display:contents}
.hd-help-button{grid-row:2;grid-column:2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--muted)}
.hd-help-button:hover,.hd-help[data-open] .hd-help-button{color:var(--purple);background:var(--purple-subtle)}
.hd-help-tip,.job-view.job-draft .hd-progress .job-settings{grid-row:3;grid-column:1/-1}
.job-view.job-draft .hd-progress .job-settings{align-self:center;margin:0;text-align:center}
/* ::before bridges the 6 px between the bar and the text, so the pointer goes from the "?" onto the text without leaving .hd-help. */
.hd-help-tip{position:relative;z-index:1;box-sizing:border-box;min-width:0;padding:8px 12px;border:1px solid var(--brand-card-line);border-radius:10px;background:#241c32;color:var(--text);font-size:12px;line-height:1.5;overflow-wrap:break-word;scroll-margin:16px;visibility:hidden}
.hd-help-tip::before{content:'';position:absolute;inset-inline:0;bottom:100%;height:6px}
.hd-help:hover .hd-help-tip,.hd-help:focus-within .hd-help-tip,.hd-help[data-open] .hd-help-tip{visibility:visible}
.hd-help[data-dismissed] .hd-help-tip{visibility:hidden}
@media (pointer:coarse){.hd-help-button{width:44px;height:44px}}
@media (max-width:420px){.job-view.job-draft .generation-buttons .button{white-space:normal;flex:1 1 100%}}
.job-view.job-complete .job-settings { margin-top: 14px; }
.job-view.job-complete .generation-buttons { margin-top: 18px; }
dialog.job-detail-dialog { width: min(850px, calc(100% - 32px)); }
.job-detail-image img, .job-detail-image video { display: block; width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 10px; }
.job-detail-prompt { color: #d4c7df; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 901px) and (max-height: 760px) {
  .job-view .job-inputs, .job-view .generation-copy.job-output { padding: 24px; }
  .job-view .job-status h2 { font-size: 32px; }
  .job-view .job-input-source { margin-bottom: 18px; }
  .job-view .job-input-prompt { margin-top: 18px; }
}
@media (max-width: 900px) {
  .workspace-shell main:has(> .job-view) { min-height: 0; display: block; }
  .job-view { --job-player-h: min(440px, 48dvh); grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .job-view .generation-copy.job-output { padding: 24px 18px; }
  .job-view .job-inputs { padding: 24px 22px; border-right: 0; }
  .job-view .job-status h2 { font-size: 28px; }
  .job-view .job-reference-button { height: clamp(86px, 23vw, 136px); }
}
@media (max-width: 420px) {
  .job-view .generation-copy.job-output { padding: 22px 12px; }
  .job-view .job-ready-title { font-size: 20px; margin-bottom: 18px; }
  .job-view .generation-buttons { width: 100%; }
  .job-view .generation-buttons .button { flex: 1 1 auto; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .job-view .job-status-steps .current .icon { animation: none; } }
/* Gerar com IA: references tagged @Imagem/@Audio, the three ways to add an image, the audios and the @ list of the description. */
.genai-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; background: #2d2340; color: #cdb8ff; font-size: 10px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.genai-add { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed #3a3442; border-radius: 10px; }
/* Recriar com Ginga: the recipe the panel was opened with and its roles, above the references. */
.genai-recipe { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #3b2f52; border-radius: 10px; background: #1f1a29; }
.genai-recipe-head { display: flex; align-items: center; gap: 8px; }
.genai-recipe-head > .icon { flex: none; width: 16px; height: 16px; color: var(--purple); }
.genai-recipe-head > span { flex: 1; min-width: 0; color: #8f8a9a; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.genai-recipe-head > span strong { display: block; margin-top: 1px; color: #f3f2f6; font-size: 13px; text-transform: none; letter-spacing: 0; }
.genai-recipe-roles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.genai-recipe-roles li { display: flex; align-items: flex-start; gap: 4px; color: #c9bcd6; font-size: 11px; line-height: 1.45; }
.genai-recipe-roles li strong { color: #e2d6ec; }
.genai-recipe-roles li small { display: block; color: #8f8a9a; font-size: 10px; }
.clip-dialog-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.genai-add > span { flex: 1; min-width: 0; color: #e2d6ec; font-size: 12px; font-weight: 600; }
.genai-add > span small { display: block; margin-top: 2px; color: #8f8a9a; font-size: 10px; font-weight: 500; line-height: 1.4; }
.genai-audio audio { display: block; width: 100%; min-width: 0; max-width: 100%; height: 34px; }
.video-configurator .cast-row > .genai-audio-icon { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 6px; background: #2a2133; color: var(--purple); }
.genai-audio-icon .icon { width: 18px; height: 18px; }
@media (max-width: 420px) {
  .video-configurator .cast-row { flex-wrap: wrap; }
  .video-configurator .cast-row > .cast-photo { flex: 0 0 43px; }
  .video-configurator .cast-row > span:not(.genai-audio-icon) { flex-basis: 100px; }
  .video-configurator .video-option .segmented { flex-wrap: wrap; }
}
.genai-prompt-field { position: relative; }
.genai-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.genai-tag-button { padding: 3px 8px; border-radius: 6px; background: #2a2531; color: #cdb8ff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.genai-tag-button:hover { background: #3a3046; }
.genai-tag-button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.mention-menu { position: absolute; z-index: 30; width: min(260px, calc(100% - 8px)); max-height: 220px; overflow-y: auto; padding: 4px; border: 1px solid #3a363f; border-radius: 10px; background: #1d1b22; box-shadow: 0 12px 28px #00000080; }
.mention-option { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 7px; color: var(--text); font-size: 12px; text-align: left; }
.mention-option strong { flex: none; color: #cdb8ff; font-weight: 700; }
.mention-option span { min-width: 0; overflow: hidden; color: #a99bb6; text-overflow: ellipsis; white-space: nowrap; }
.mention-option[aria-selected="true"], .mention-option:hover { background: #2f2839; }
.portfolio-card .genai-pick-tag { display: grid; width: auto; padding: 0 9px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.audio-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.audio-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #2e2b34; border-radius: 10px; background: #1c1b20; }
.audio-row.selected { border-color: var(--purple); }
.audio-row-name { flex: 1 1 200px; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.audio-row-name small { display: block; margin-top: 2px; color: #8f8a9a; font-size: 11px; font-weight: 500; }
.audio-row audio { flex: 1 1 240px; min-width: 180px; height: 36px; }
.audio-asset-body { display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 35%, #2a2133, #141118 70%); color: #e2d6ec; }
.audio-asset-body .icon { width: 28px; height: 28px; color: var(--purple); }
.audio-dialog-media { display: grid; gap: 10px; padding: 18px 4px; }
.audio-dialog-media audio { width: 100%; }
@media (max-width: 720px) { .audio-row { flex-wrap: wrap; } .audio-row audio { flex-basis: 100%; } }