/* Vídeo mode: gallery from the videos folder, clip dialog, prompt and the real generation job. */
.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%; 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-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-start { display: block; margin: 0 0 12px; }
.video-start input[type="range"] { width: 100%; margin-top: 8px; accent-color: var(--purple); }
.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; gap: 14px; margin: 11px 0 18px; }
.cast-item { display: grid; gap: 8px; padding: 10px; border: 1px solid #2e2b34; border-radius: 10px; background: #1c1b20; }
.video-configurator .cast-item .cast-row { margin: 0; }
.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 { 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; }