/* Cygnuss Marketing — Edição automática de vídeo (SP12)
   Split preview: prévia fixa à esquerda, receita à direita.
   Tokens repetidos aqui porque media.css os declara sob #media-videos-page;
   sem isso as classes .media-btn-* herdadas ficariam sem cor nesta página. */

#media-auto-page {
    --media-bg: #0a0a0a;
    --media-surface: #141414;
    --media-surface-2: #1a1a1a;
    --media-surface-3: #1e1e1e;
    --media-border: #262626;
    --media-border-hover: #3a3a3a;
    --media-text: #f5f5f5;
    --media-text-muted: #a0a0a0;
    --media-text-dim: #666;
    --media-accent: #b65378;
    --media-accent-hover: color-mix(in srgb, var(--media-accent) 82%, #ece7f0);
    --media-accent-soft: rgba(182, 83, 120, 0.12);
    --media-accent-ring: rgba(182, 83, 120, 0.28);
    --media-cta: var(--media-accent);
    --media-cta-hover: var(--media-accent-hover);
    --media-cta-soft: var(--media-accent-soft);
    --media-cta-ring: rgba(182, 83, 120, 0.4);
    --media-danger: var(--dash-red-strong, var(--dash-red));
    --media-danger-soft: color-mix(in srgb, var(--media-danger) 12%, transparent);
    --media-success: #168765;
    --media-success-soft: rgba(22, 135, 101, 0.12);
    --media-warning: var(--dash-orange-strong, var(--dash-orange));
    --media-warning-soft: color-mix(in srgb, var(--media-warning) 10%, transparent);
    --media-info: var(--dash-blue-strong, var(--dash-blue));

    --media-font-sans: 'Poppins', 'Segoe UI', sans-serif;
    --media-font-mono: 'JetBrains Mono', Consolas, monospace;

    --media-radius-sm: 6px;
    --media-radius-md: 10px;
    --media-radius-lg: 12px;
    --media-radius-xl: 18px;

    --media-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
    --media-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5);
    --media-ease: cubic-bezier(0.4, 0, 0.2, 1);

    margin: -24px;
    padding: 32px 40px 48px;
    min-height: 100vh;
    background: var(--media-bg);
    color: var(--media-text);
    font-family: var(--media-font-sans);
}

#media-auto-page .media-page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    animation: autoFadeIn 0.4s var(--media-ease);
}

#media-auto-page .auto-wrap--split { max-width: 1440px; }

@keyframes autoFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes autoSpin {
    to { transform: rotate(360deg); }
}

.auto-spin {
    animation: autoSpin 1s linear infinite;
    display: inline-block;
}

/* =========================================================
   SPLIT: palco (prévia) + painel (receita)
   ========================================================= */
.auto-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 452px;
    gap: 32px;
    align-items: start;
}

.auto-stage {
    position: sticky;
    top: 24px;
    background: #050505;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-height: 520px;
    justify-content: center;
}

/* Altura fixa em vez de max-height: antes de carregar a metadata o <video>
   assume 300x150 e a prévia aparece minúscula por um instante. Amarrando
   pela altura, o palco já nasce no tamanho certo e o vídeo (vertical ou
   horizontal) só se ajusta na largura. */
.auto-stage-video {
    height: calc(100vh - 240px);
    max-height: 720px;
    width: auto;
    max-width: 100%;
    border-radius: var(--media-radius-lg);
    background: #000;
    box-shadow: var(--media-shadow-lg);
}

.auto-stage-back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--media-border);
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(8px);
    color: var(--media-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s var(--media-ease);
    z-index: 2;
}
.auto-stage-back:hover {
    background: var(--media-accent);
    border-color: var(--media-accent);
}

.auto-stage-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- painel lateral: cabeça / miolo / rodapé próprios da coluna ---- */
.auto-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.auto-side-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--media-border);
}

.auto-side-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Folga para o último card não ficar embaixo do rodapé sticky. */
    padding-bottom: 12px;
}

.auto-side-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--media-border);
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--media-bg) 62%, transparent);
    padding-bottom: 8px;
}

.auto-foot-info { flex: 1; min-width: 0; font-size: 12px; }

.auto-foot-blocked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--media-text-dim);
}
.auto-foot-blocked .material-symbols-outlined { font-size: 15px; }

.auto-foot-ready { color: var(--media-text-muted); }

.auto-foot-cta { flex-shrink: 0; text-decoration: none; }
.media-btn-primary:disabled,
.media-btn-secondary:disabled,
.media-btn-small:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   CARDS DE BLOCO
   ========================================================= */
.auto-card {
    background: var(--media-surface);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-lg);
    overflow: hidden;
    transition: border-color 0.18s var(--media-ease), background 0.18s var(--media-ease);
}
.auto-card.is-on {
    border-color: var(--media-accent-ring);
    background: var(--media-surface-2);
}

.auto-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.auto-card-icon {
    font-size: 20px;
    color: var(--media-text-dim);
    transition: color 0.18s var(--media-ease);
}
.auto-card.is-on .auto-card-icon { color: var(--media-accent); }

.auto-card-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.auto-card-titles strong { font-size: 13px; font-weight: 600; }
.auto-card-titles span { font-size: 11px; color: var(--media-text-dim); }

.auto-card-body { padding: 0 16px 16px; }
.auto-card.is-on .auto-card-body { padding-top: 2px; }

.auto-card-off {
    font-size: 12px;
    color: var(--media-text-dim);
    padding: 2px 0 2px 32px;
}

.auto-card-text {
    font-size: 12px;
    color: var(--media-text-muted);
    line-height: 1.5;
    margin: 0 0 12px;
}

.auto-card-hint {
    font-size: 11px;
    color: var(--media-text-dim);
    line-height: 1.5;
    margin: 10px 0 0;
}

/* Descrição do estilo escolhido, logo abaixo dos chips. */
.auto-hint--tight { margin: -4px 0 12px; }

/* Conexão da chave da OpenAI (transcrição). */
.auto-key {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.auto-key-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--media-border);
    background: var(--media-surface);
    color: var(--media-text);
    font: inherit;
    font-size: 12px;
    font-family: var(--media-font-mono);
    letter-spacing: 0.5px;
}

.auto-key-input:focus {
    outline: none;
    border-color: var(--media-accent);
}

.auto-key--on {
    font-size: 11.5px;
    color: var(--media-text-dim);
}

.auto-key--on .material-symbols-outlined {
    font-size: 16px;
    color: var(--media-success);
}

.auto-key--on span:nth-of-type(2) { flex: 1; }

/* Aviso de custo (segunda passada do whisper) dentro da descrição. */
.auto-hint-nota {
    display: block;
    margin-top: 3px;
    font-style: normal;
    color: var(--media-text-dim);
    opacity: 0.75;
}

.auto-sublabel {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--media-text-dim);
    margin-bottom: 7px;
}

.auto-chip--sm { padding: 5px 11px; font-size: 10.5px; }

/* =========================================================
   INTERRUPTOR
   ========================================================= */
.auto-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.auto-toggle-track {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #2e2e2e;
    border: 1px solid var(--media-border-hover);
    position: relative;
    transition: background 0.18s var(--media-ease), border-color 0.18s var(--media-ease);
}

.auto-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8a8a8a;
    transition: transform 0.18s var(--media-ease), background 0.18s var(--media-ease);
}

.auto-toggle.is-on .auto-toggle-track {
    background: var(--media-accent);
    border-color: var(--media-accent);
}
.auto-toggle.is-on .auto-toggle-thumb {
    transform: translateX(18px);
    background: #fff;
}
.auto-toggle:focus-visible .auto-toggle-track {
    outline: 2px solid var(--media-accent);
    outline-offset: 2px;
}

/* =========================================================
   CHIPS (presets de legenda)
   ========================================================= */
.auto-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.auto-chip {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--media-border-hover);
    background: var(--media-surface-3);
    color: var(--media-text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s var(--media-ease);
}
.auto-chip:hover { border-color: var(--media-accent-ring); color: var(--media-text); }
.auto-chip.is-selected {
    background: var(--media-accent);
    border-color: var(--media-accent);
    color: #fff;
}

/* =========================================================
   VARIANTES DE CORTE
   ========================================================= */
.auto-variants { display: flex; flex-direction: column; gap: 8px; }

.auto-variant {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 11px 14px;
    border-radius: var(--media-radius-md);
    border: 1px solid var(--media-border-hover);
    background: var(--media-surface-3);
    color: var(--media-text);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s var(--media-ease);
}
.auto-variant:hover { border-color: var(--media-accent-ring); }
.auto-variant.is-selected {
    border-color: var(--media-accent);
    background: var(--media-accent-soft);
}
/* Lista do que VAI ser renderizado — não há o que clicar aqui, a escolha
   acontece depois, na galeria, olhando o vídeo pronto. */
.auto-variant.is-preview { cursor: default; }
.auto-variant.is-preview:hover { border-color: var(--media-border-hover); }

.auto-variant-title { font-size: 12px; font-weight: 600; }
.auto-variant-why { font-size: 11px; color: var(--media-text-dim); line-height: 1.45; }

/* =========================================================
   LINHAS DE LEGENDA
   ========================================================= */
.auto-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--media-text-dim);
}

.auto-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.auto-line {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 6px;
}

.auto-line-time {
    font-size: 10px;
    color: var(--media-text-dim);
    font-variant-numeric: tabular-nums;
}

.auto-line-text {
    background: var(--media-surface-3);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-sm);
    color: var(--media-text);
    font-family: inherit;
    font-size: 12px;
    padding: 7px 10px;
    min-width: 0;
    transition: border-color 0.15s var(--media-ease);
}
.auto-line-text:focus {
    outline: none;
    border-color: var(--media-accent);
}

.auto-line-del {
    background: none;
    border: none;
    color: var(--media-text-dim);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--media-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auto-line-del:hover { color: var(--media-danger); }
.auto-line-del .material-symbols-outlined { font-size: 16px; }

/* =========================================================
   CAMPOS DO CARTÃO FINAL
   ========================================================= */
.auto-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; flex: 1; min-width: 0; }
.auto-field--narrow { max-width: 110px; }
.auto-field-row { display: flex; gap: 10px; align-items: flex-end; }

.auto-field label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--media-text-dim);
}

.auto-field input {
    background: var(--media-surface-3);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-sm);
    color: var(--media-text);
    font-family: inherit;
    font-size: 12px;
    padding: 9px 11px;
    min-width: 0;
    transition: border-color 0.15s var(--media-ease);
}
.auto-field input:focus { outline: none; border-color: var(--media-accent); }

/* =========================================================
   AVISOS
   ========================================================= */
.auto-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--media-radius-md);
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.auto-alert .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.auto-alert code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
}

.auto-alert--danger {
    background: var(--media-danger-soft);
    border-color: color-mix(in srgb, var(--media-danger) 30%, transparent);
    color: var(--media-danger);
}
.auto-alert--info {
    background: color-mix(in srgb, var(--media-info) 12%, transparent);
    border-color: color-mix(in srgb, var(--media-info) 28%, transparent);
    color: var(--media-text-muted);
}
.auto-alert-detail { color: var(--media-text-dim); font-size: 11px; }

.auto-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.auto-alert-close:hover { opacity: 1; }
.auto-alert-close .material-symbols-outlined { font-size: 16px; }

.auto-inline-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--media-text-muted);
    padding: 4px 0;
}

/* =========================================================
   TELA DE UPLOAD — o que dá pra pedir
   ========================================================= */
.auto-blocks-preview { margin-top: 32px; }

.auto-blocks-preview-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--media-text-dim);
    margin-bottom: 12px;
}

.auto-blocks-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.auto-block-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--media-surface);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-lg);
}
.auto-block-hint .material-symbols-outlined {
    font-size: 20px;
    color: var(--media-accent);
    flex-shrink: 0;
}
.auto-block-hint div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.auto-block-hint strong { font-size: 12px; font-weight: 600; }
.auto-block-hint span { font-size: 11px; color: var(--media-text-dim); line-height: 1.45; }

/* =========================================================
   PROGRESSO E LOG
   ========================================================= */
.auto-run-card {
    background: var(--media-surface);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-xl);
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auto-prog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--media-text-muted);
}
.auto-prog-head strong {
    font-size: 18px;
    color: var(--media-text);
    font-variant-numeric: tabular-nums;
}

#media-auto-page .media-progress-bar {
    height: 6px;
    background: var(--media-surface-3);
    border-radius: 999px;
    overflow: hidden;
}
#media-auto-page .media-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--media-accent), var(--media-cta));
    border-radius: 999px;
    transition: width 0.3s var(--media-ease);
}

.auto-log {
    background: #050505;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-md);
    padding: 12px 14px;
    max-height: 260px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.65;
    color: var(--media-text-muted);
    font-family: var(--media-font-mono);
}

.auto-log-row { display: flex; gap: 10px; }
.auto-log-time {
    color: var(--media-text-dim);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   RESUMO FINAL
   ========================================================= */
.auto-summary { display: flex; flex-direction: column; gap: 10px; }

.auto-summary-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--media-surface);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-lg);
}
.auto-summary-row .material-symbols-outlined {
    font-size: 19px;
    color: var(--media-accent);
    flex-shrink: 0;
}
.auto-summary-row div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auto-summary-row strong { font-size: 12px; font-weight: 600; }
.auto-summary-row span { font-size: 11px; color: var(--media-text-dim); }

/* =========================================================
   RESPONSIVO — empilha com a prévia em cima
   ========================================================= */
@media (max-width: 1100px) {
    .auto-split { grid-template-columns: 1fr; gap: 24px; }
    .auto-stage { position: static; min-height: 0; }
    .auto-stage-video { max-height: 56vh; }
    .auto-side-foot { position: static; background: none; }
}

@media (max-width: 640px) {
    #media-auto-page { padding: 24px 16px 40px; }
    #media-auto-page .media-page-title { font-size: 22px; }
    .auto-field-row { flex-direction: column; align-items: stretch; }
    .auto-field--narrow { max-width: none; }
    .auto-side-foot { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------------------
   Galeria de cortes — reaproveita os cartões do variantGallery (media.css)
   e só ajusta o que o editor automático precisa. Tudo escopado em
   .auto-galeria para a galeria antiga do mediaManager não mudar.
   --------------------------------------------------------------------------- */

.auto-galeria .media-variants-grid {
    /* Uma coluna por montagem, mas sem espremer: abaixo de ~260px por card
       o vídeo vertical fica ilegível, então quebra a linha. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.auto-galeria .media-variant-preview {
    /* Vídeo de anúncio é vertical. O teto em vh evita que quatro cartões
       9:16 empurrem o resto da página para fora da tela. */
    aspect-ratio: 9 / 16;
    max-height: 52vh;
}

.auto-galeria .media-variant-video {
    /* contain, não cover: cortar a lateral esconderia justamente a legenda,
       que é o que se está comparando. */
    object-fit: contain;
    background: #000;
}

.auto-galeria .media-variant-action {
    width: 100%;
    justify-content: center;
    text-decoration: none;
}

.auto-galeria .media-variant-reasoning {
    /* Duas linhas fixas mantêm os cartões do mesmo tamanho mesmo quando a
       I.A. escreve justificativas de tamanhos diferentes. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* ---------------------------------------------------------------------------
   Biblioteca de takes — os pedacos reaproveitaveis, embaixo das montagens.
   Cartao mais leve que o da montagem de proposito: take e materia-prima,
   nao entregavel; roubar o mesmo peso visual competiria com o resultado.
   --------------------------------------------------------------------------- */

.auto-takes {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--media-border);
}

/* #84: titulo a esquerda e a contagem na MESMA linha, em vez de gastar
   uma faixa so pra ela. */
.auto-takes-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.auto-takes-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--media-text);
    margin: 0;
}
.auto-takes-conta {
    font-size: 11px;
    color: var(--media-text-dim);
}

/* Filtro na faixa morta a direita do titulo (#84). Nao gasta linha
   propria, e a contagem ao lado do nome ja responde "tem o que ver ali?"
   sem precisar clicar. */
.auto-filtro {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--media-surface-2);
    border: 1px solid var(--media-border);
    border-radius: 999px;
}
.auto-filtro-b {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--media-text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--media-ease), color 0.15s var(--media-ease);
}
.auto-filtro-b:hover { color: var(--media-text); }
/* Aba escolhida = fundo no acento e texto claro. O acento marca UM item
   (v4, regra 4b); os outros ficam neutros. */
.auto-filtro-b.is-on {
    background: var(--media-accent);
    color: #f7f2f4;
}
.auto-filtro-n {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}
.auto-filtro-b.is-on .auto-filtro-n { opacity: 0.85; }

.auto-takes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.auto-take {
    position: relative;
    background: var(--media-surface-2);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s var(--media-ease);
}
.auto-take:hover { border-color: var(--media-border-hover); }

/* Acento marca so o que e raro: os takes deste video entre os antigos.
   Se todo cartao levasse cor, cor pararia de significar. */
.auto-take.is-novo { border-color: var(--media-accent-ring); }

.auto-take-preview {
    aspect-ratio: 9 / 16;
    max-height: 260px;
    background: #0b0b0b;
}
.auto-take-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.auto-take-body {
    padding: 9px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.auto-take-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
/* Badge neutro: o tipo se repete em todo cartao, logo nao leva acento. */
.auto-take-tipo {
    font-size: 10px;
    font-weight: 600;
    color: var(--media-text-dim);
    background: var(--media-surface-3);
    border-radius: 999px;
    padding: 2px 8px;
}
.auto-take-dur { font-size: 10px; color: var(--media-text-dim); }

.auto-take-desc {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--media-text);
}
.auto-take-fala {
    margin: 0;
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    color: var(--media-text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lixeira so no hover/foco: apagar nao e a acao do dia a dia aqui, e o
   cartao pequeno nao tem espaco pra ela competindo com o texto. */
.auto-take-lixo {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.72);
    color: var(--media-text-dim);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s var(--media-ease), color 0.15s var(--media-ease);
}
.auto-take:hover .auto-take-lixo,
.auto-take-lixo:focus-visible { opacity: 1; }
.auto-take-lixo:hover { color: var(--media-danger); }
.auto-take-lixo .material-symbols-outlined { font-size: 17px; }

.auto-take-confirma {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--media-text-dim);
}
.auto-take-sim { color: var(--media-danger); }

/* Estado vazio (#16): icone, tom de gente e o que vai acontecer sozinho. */
.auto-takes-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 30px 20px;
    color: var(--media-text-dim);
    font-size: 12px;
    line-height: 1.5;
}
.auto-takes-vazio strong { color: var(--media-text); font-size: 13px; }
.auto-takes-vazio span { max-width: 460px; }
.auto-takes-vazio-icone { font-size: 38px; opacity: 0.5; }
.auto-takes-vazio-nota { font-size: 11px; opacity: 0.7; }

/* Esqueleto (#14): a forma do que vem, nao um spinner solto. */
.auto-take.is-skeleton { pointer-events: none; }
.auto-take.is-skeleton .auto-take-preview,
.auto-take-linha {
    background: linear-gradient(90deg,
        var(--media-surface-3) 25%, #262626 37%, var(--media-surface-3) 63%);
    background-size: 400% 100%;
    animation: auto-take-brilho 1.3s ease-in-out infinite;
}
.auto-take-linha { height: 9px; border-radius: 4px; }
.auto-take-linha--curta { width: 60%; }

@keyframes auto-take-brilho {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .auto-take.is-skeleton .auto-take-preview,
    .auto-take-linha { animation: none; }
}

/* Comando pronto para copiar. Existe porque o Higgsfield nao se conecta
   colando um endereco: quem loga e o Guifa, no terminal. Mostrar o
   comando exato e o que transforma "nao esta pronto" em uma acao. */
.auto-comando {
    display: block;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-sm);
    background: var(--media-surface-3);
    color: var(--media-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    user-select: all;
    overflow-x: auto;
    white-space: nowrap;
}

/* =========================================================
   VIDEO JA EDITADO (na mesma grade dos takes)
   ========================================================= */

/* Video pronto e take sao naturezas diferentes: um e produto, o outro e
   materia-prima. Na mesma grade eles precisam de FORMA diferente, nao so
   de etiqueta (#26). O video leva moldura marcada, fundo um passo acima e
   sombra; o take fica raso, como sempre foi. */
.auto-vid {
    background: var(--media-surface-3);
    border: 1.5px solid var(--media-border-hover);
    box-shadow: var(--media-shadow-md);
}
.auto-vid:hover { border-color: var(--media-accent-ring); }

/* Aberto ocupa duas colunas E vira duas regioes: video a esquerda,
   dados e limpeza a direita. Empilhar dentro de um cartao ja largo
   deixaria metade da area vazia — mobile jogado no desktop (#82). */
.auto-vid.is-aberto {
    grid-column: span 2;
    border-color: var(--media-accent-ring);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.auto-vid.is-aberto .auto-vid-faixa { grid-column: 1 / -1; }
/* O video atravessa as duas linhas da direita: assim ele encosta no
   rodape do cartao e nao sobra faixa morta embaixo dele.

   Sem `height`: com `aspect-ratio` no elemento, mandar a altura faz a
   LARGURA ser derivada dela, e o video invadia a coluna de texto ao
   lado. A largura manda; a altura sai da proporcao. */
.auto-vid.is-aberto .auto-take-preview {
    grid-column: 1;
    grid-row: 2 / span 2;
    min-width: 0;
    max-height: 340px;
}
.auto-vid.is-aberto .auto-take-body,
.auto-vid.is-aberto .auto-vid-acoes { min-width: 0; }
.auto-vid.is-aberto .auto-take-body {
    grid-column: 2;
    grid-row: 2;
    padding: 10px 12px 4px;
}
/* Aberto, as acoes saem de cima do video e viram a linha de baixo da
   coluna direita. Flutuando ali elas cobriam justamente o titulo. */
.auto-vid.is-aberto .auto-vid-acoes {
    position: static;
    grid-column: 2;
    grid-row: 3;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 10px 10px;
    opacity: 1;
}

.auto-vid-faixa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 6px;
    border-bottom: 1px solid var(--media-border);
}
/* Neutro de proposito: a faixa se repete em TODO cartao de video, e o que
   se repete nao leva acento (v4, regra 3). */
.auto-vid-marca {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--media-text-muted);
}
.auto-vid-marca .material-symbols-outlined { font-size: 15px; }

.auto-vid-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 10px;
    color: var(--media-text-dim);
    font-variant-numeric: tabular-nums;
}

.auto-vid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* Verde semantico, nao um matiz novo: e o unico estado que muda o
   arquivo entregue, entao merece se distinguir dos outros chips. */
.auto-take-tipo.is-limpo {
    color: var(--media-success);
    background: rgba(16, 185, 129, 0.12);
}

/* As tres acoes juntas no canto, so no hover/foco: baixar e a do dia a
   dia, as outras sao raras, e nenhuma delas precisa roubar a area do
   titulo (#84). */
.auto-vid-acoes {
    position: absolute;
    top: 34px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s var(--media-ease);
}
.auto-vid:hover .auto-vid-acoes,
.auto-vid.is-aberto .auto-vid-acoes,
.auto-vid-acoes:focus-within { opacity: 1; }

.auto-vid-b {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.78);
    color: var(--media-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s var(--media-ease), background 0.15s var(--media-ease);
}
.auto-vid-b:hover { color: var(--media-text); background: rgba(10, 10, 10, 0.92); }
.auto-vid-b.is-on { color: var(--media-accent); }
.auto-vid-b--risco:hover { color: var(--media-danger); }
.auto-vid-b .material-symbols-outlined { font-size: 17px; }

/* ------------------------------------------------ painel de ruido -- */

.auto-ruido {
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--media-border);
}
.auto-ruido .auto-sublabel { margin-bottom: 5px; }
.auto-chips--mini { margin-bottom: 8px; }

.auto-ruido-vai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.auto-ruido-vai .material-symbols-outlined { font-size: 15px; }

/* Passou de 3 segundos e nao ha porcentagem confiavel: barra em movimento,
   nunca spinner solto (#14). */
.auto-ruido-barra {
    margin-top: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--media-surface-2);
    overflow: hidden;
}
.auto-ruido-barra i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 999px;
    background: var(--media-accent);
    animation: auto-ruido-anda 1.15s ease-in-out infinite;
}
@keyframes auto-ruido-anda {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* Antes/depois lado a lado: comparar dois estados vira o proprio par de
   botoes, nao um paragrafo explicando a diferenca (#204). */
.auto-ruido-ab {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--media-surface-2);
    border: 1px solid var(--media-border);
    border-radius: 999px;
    margin-bottom: 7px;
}
.auto-ruido-b {
    flex: 1;
    padding: 6px 10px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--media-text-dim);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--media-ease), color 0.15s var(--media-ease);
}
.auto-ruido-b:hover { color: var(--media-text); }
.auto-ruido-b.is-on {
    background: var(--media-surface);
    color: var(--media-text);
}

.auto-ruido-nota {
    margin: 0 0 7px;
    font-size: 10.5px;
    color: var(--media-text-dim);
}
.auto-ruido-desfaz { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .auto-ruido-barra i { animation: none; width: 100%; opacity: 0.5; }
}

/* Cartao aberto ocupando duas colunas nao cabe numa grade de duas: no
   estreito ele volta a ocupar uma, e as duas regioes empilham. */
@media (max-width: 620px) {
    .auto-vid.is-aberto {
        grid-column: span 1;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Montar video so com o acervo (sem upload).
   --------------------------------------------------------------------------- */

/* Segundo caminho na tela de entrada. Fica abaixo do upload, nao ao lado:
   enviar um video e o caminho principal, e dois blocos do mesmo tamanho
   lado a lado nao diriam qual e qual. */
.auto-caminho-b {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-lg);
    background: var(--media-surface);
    cursor: pointer;
    transition: border-color 0.15s var(--media-ease), background 0.15s var(--media-ease);
}
.auto-caminho-b:hover,
.auto-caminho-b:focus-visible {
    border-color: var(--media-accent-ring);
    background: var(--media-surface-2);
}
.auto-caminho-b > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auto-caminho-b strong { font-size: 13px; font-weight: 600; }
.auto-caminho-b span { font-size: 11px; color: var(--media-text-dim); }
.auto-caminho-b > .material-symbols-outlined { font-size: 20px; color: var(--media-text-dim); }
.auto-caminho-b-seta { transition: transform 0.15s var(--media-ease); }
.auto-caminho-b:hover .auto-caminho-b-seta { transform: translateX(3px); }

/* Sem take nenhum o caminho continua visivel, mas rebaixado: esconder
   deixaria a funcao invisivel pra sempre. */
.auto-caminho-b.is-vazio { opacity: 0.55; }

/* Briefing e acao na mesma linha do cabecalho. */
.auto-compor { display: flex; align-items: center; gap: 8px; }

.auto-briefing {
    width: 260px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--media-border);
    background: var(--media-surface);
    color: var(--media-text);
    font: inherit;
    font-size: 12px;
}
.auto-briefing:focus {
    outline: none;
    border-color: var(--media-accent);
}
.auto-briefing::placeholder { color: var(--media-text-dim); }

.auto-propostas { margin-top: 22px; }
.auto-propostas .auto-variants { margin-top: 12px; }

.auto-variant-meta {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 400;
    color: var(--media-text-dim);
}

@media (max-width: 900px) {
    .auto-compor { flex-wrap: wrap; }
    .auto-briefing { width: 100%; }
}

/* Por que o trecho de abertura e gancho. Fica abaixo da justificativa da
   montagem porque responde outra pergunta: a de cima diz por que a ORDEM
   funciona, esta diz por que aquele trecho PRENDE. */
.auto-variant-gancho {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--media-text-muted);
}
.auto-variant-gancho .material-symbols-outlined {
    font-size: 13px;
    color: var(--media-accent);
    flex-shrink: 0;
}

/* Esqueleto das propostas (ENTRADA #14: forma conhecida pede esqueleto,
   nao spinner). Repete a geometria do cartao real (medido: 69px contra
   60-76px do conteudo final) para a troca quase nao deslocar a pagina. */
.auto-variant--esqueleto {
    gap: 7px;
    cursor: default;
    pointer-events: none;
}
.auto-variant--esqueleto:hover { border-color: var(--media-border-hover); }

.auto-esqueleto {
    display: block;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--media-surface-2) 25%, #2b2b2b 37%, var(--media-surface-2) 63%);
    background-size: 400% 100%;
    animation: auto-take-brilho 1.3s ease-in-out infinite;
}
/* Altura casada com a do texto que vai substituir cada barra. */
.auto-esqueleto--titulo { height: 12px; width: 34%; }
.auto-esqueleto--linha { height: 10px; width: 100%; }
.auto-esqueleto--curta { width: 62%; }

/* Escalona o brilho: tres barras iguais piscando juntas viram estrobo. */
.auto-variant--esqueleto:nth-child(2) .auto-esqueleto { animation-delay: 0.12s; }
.auto-variant--esqueleto:nth-child(3) .auto-esqueleto { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    .auto-esqueleto { animation: none; }
}

/* ---------------------------------------------------------------------------
   Trilha do video montado. Fica acima das propostas porque a escolha muda
   o que a I.A. deve montar, nao so o resultado.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Trilha do video. Era a UNICA area da tela sem casca de card, e o filho
   (o bloco de voz) e que tinha — aninhamento invertido. Agora e card, e
   por dentro trabalha no eixo horizontal: lista a esquerda, a escolhida a
   direita (ENTRADA #82, desktop e um retangulo deitado).
   --------------------------------------------------------------------------- */

.auto-trilha {
    margin-bottom: 22px;
    background: var(--media-surface);
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-lg);
}

.auto-trilha-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-bottom: 1px solid var(--media-border);
}
.auto-trilha-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.auto-trilha-marca > .material-symbols-outlined {
    font-size: 19px;
    color: var(--media-accent);
    flex: none;
}
.auto-trilha-titulos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auto-trilha-titulos strong { font-size: 13.5px; font-weight: 600; }
.auto-trilha-titulos span { font-size: 11px; color: var(--media-text-dim); }
.auto-trilha-corpo { padding: 14px 16px 16px; }

/* Seletor de MODO. Separado da lista de proposito: "audio dos takes" nao
   e uma trilha, e um modo — e coisa de natureza diferente nao pode ter a
   mesma forma nem o mesmo espacamento (ENTRADA #26). */
.auto-modo {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--media-surface-3);
    border: 1px solid var(--media-border);
    border-radius: 999px;
}
.auto-modo button {
    padding: 7px 15px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: transparent;
    color: var(--media-text-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    transition: background 0.16s var(--media-ease), color 0.16s var(--media-ease);
}
.auto-modo button:hover { color: var(--media-text); }
.auto-modo button.is-on { background: var(--media-accent); color: var(--media-text); }
.auto-modo button:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 2px; }

/* Lista a esquerda, escolhida a direita. */
.auto-trilha-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 16px;
    align-items: start;
    margin-top: 14px;
}
.auto-trilha-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 306px;
    overflow-y: auto;
    padding-right: 4px;
}
.auto-trilha-lista::-webkit-scrollbar { width: 6px; }
.auto-trilha-lista::-webkit-scrollbar-thumb {
    background: var(--media-border-hover);
    border-radius: 3px;
}

/* Ouvir e escolher sao dois alvos IRMAOS. Botao dentro de botao nao
   existe em HTML: o navegador fecha o de fora e o conteudo vaza. */
.auto-linha {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 1px solid var(--media-border-hover);
    border-radius: var(--media-radius-md);
    background: var(--media-surface-3);
    transition: border-color 0.15s var(--media-ease), background 0.15s var(--media-ease);
}
.auto-linha:hover { border-color: var(--media-accent-ring); }
.auto-linha.is-selected { border-color: var(--media-accent); background: var(--media-accent-soft); }

.auto-linha-esc {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--media-text);
    font-family: inherit;
}
.auto-linha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auto-linha-tit {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auto-linha-fala {
    font-size: 10.5px;
    color: var(--media-text-dim);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auto-linha-dir { display: flex; align-items: center; gap: 8px; flex: none; }

.auto-selo {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--media-surface-3);
    color: var(--media-text-dim);
    flex: none;
}
.auto-selo--voz { background: var(--media-accent-soft); color: var(--media-accent); }
.auto-dur {
    font-size: 10.5px;
    color: var(--media-text-dim);
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* Painel da escolhida. Sticky para nao sumir enquanto a lista rola
   (Design System v4, item 9: congelar o contexto). */
.auto-trilha-det {
    padding: 14px;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-md);
    background: var(--media-surface-2);
    position: sticky;
    top: 16px;
}
.auto-det-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.auto-det-tit { font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0; }
.auto-det-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.auto-det-toca { display: flex; align-items: center; gap: 11px; margin: 13px 0 12px; }
.auto-det-fala {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--media-text-muted);
    max-height: 112px;
    overflow-y: auto;
    margin: 0;
    padding-top: 11px;
    border-top: 1px solid var(--media-border);
}
.auto-det-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    padding: 30px 14px;
    color: var(--media-text-dim);
    font-size: 11.5px;
    line-height: 1.55;
}
.auto-det-vazio .material-symbols-outlined { font-size: 32px; opacity: 0.45; }
.auto-det-vazio strong { color: var(--media-text); font-size: 12.5px; }

/* Tocador desenhado aqui. O nativo estica de ponta a ponta e traz a
   identidade do navegador, nao a do painel. */
.auto-play {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid var(--media-accent-ring);
    background: var(--media-accent-soft);
    color: var(--media-accent);
    transition: background 0.16s var(--media-ease), color 0.16s var(--media-ease);
}
.auto-play:hover, .auto-play.is-tocando {
    background: var(--media-accent);
    color: var(--media-text);
    border-color: var(--media-accent);
}
.auto-play .material-symbols-outlined { font-size: 18px; }
.auto-play--g { width: 44px; height: 44px; }
.auto-play--g .material-symbols-outlined { font-size: 22px; }

/* Onda: silhueta estavel por trilha (derivada do id), com a parte ja
   tocada em destaque. Onda sorteada a cada repintura seria enfeite que
   pisca. */
.auto-onda { display: flex; align-items: flex-end; gap: 2px; height: 20px; flex: 1; min-width: 0; }
.auto-onda--g { height: 40px; gap: 3px; }
.auto-onda-b { width: 2px; border-radius: 1px; background: var(--media-border-hover); flex: 1; min-width: 0; }
.auto-onda--g .auto-onda-b { width: 3px; }
.auto-onda-b.is-passou { background: var(--media-accent); }

.auto-trilha-lixo {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--media-text-dim);
    transition: color 0.15s var(--media-ease), background 0.15s var(--media-ease);
}
.auto-trilha-lixo:hover { color: var(--media-danger); background: var(--media-surface-3); }
.auto-trilha-lixo .material-symbols-outlined { font-size: 17px; }

/* Alturas por CLASSE, nao por estilo solto no HTML (ENTRADA #28). Passo
   de 5%, que a olho nu nao se distingue de continuo. */
.auto-h20 { height: 20%; }
.auto-h25 { height: 25%; }
.auto-h30 { height: 30%; }
.auto-h35 { height: 35%; }
.auto-h40 { height: 40%; }
.auto-h45 { height: 45%; }
.auto-h50 { height: 50%; }
.auto-h55 { height: 55%; }
.auto-h60 { height: 60%; }
.auto-h65 { height: 65%; }
.auto-h70 { height: 70%; }
.auto-h75 { height: 75%; }
.auto-h80 { height: 80%; }
.auto-h85 { height: 85%; }
.auto-h90 { height: 90%; }
.auto-h95 { height: 95%; }
.auto-h100 { height: 100%; }

/* Nada aqui era responsivo: os dois botoes do topo espremiam o titulo. */
@media (max-width: 900px) {
    .auto-trilha-split { grid-template-columns: 1fr; }
    .auto-trilha-det { position: static; }
    .auto-trilha-lista { max-height: none; }
    .auto-trilha-head { align-items: flex-start; }
    .auto-trilha-acoes { width: 100%; }
    .auto-trilha-acoes .media-btn-small { flex: 1; }
    .auto-modo { width: 100%; }
    .auto-modo button { flex: 1; }
}

/* Lista de videos de onde tirar a trilha. Aparece so quando pedida
   (#84: informacao que cabe atras de um clique nao fica exposta). */
.auto-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.auto-video {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-md);
    background: var(--media-surface-2);
    color: var(--media-text-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s var(--media-ease), color 0.15s var(--media-ease);
}
.auto-video:hover {
    border-color: var(--media-accent-ring);
    color: var(--media-text);
}
.auto-video .material-symbols-outlined { font-size: 15px; flex-shrink: 0; }
.auto-video-id {
    flex: 1;
    font-family: var(--media-font-mono);
    letter-spacing: 0.3px;
}
.auto-video-peso { color: var(--media-text-dim); font-size: 10px; }

/* Geracao de voz. Abre dentro da secao de trilha, nao em tela propria:
   e uma forma de PRODUZIR trilha, entao mora onde a trilha se escolhe. */
.auto-trilha-acoes { display: inline-flex; gap: 8px; }

.auto-voz {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--media-border);
    border-radius: var(--media-radius-md);
    background: var(--media-surface);
}

.auto-texto-voz {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--media-radius-md);
    border: 1px solid var(--media-border);
    background: var(--media-surface-2);
    color: var(--media-text);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    resize: vertical;
}
.auto-texto-voz:focus { outline: none; border-color: var(--media-accent); }
.auto-texto-voz::placeholder { color: var(--media-text-dim); }

.auto-voz-rodape {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
/* A espera longa e explicada aqui em vez de virar barra falsa: nao ha
   porcentagem real do outro lado (ENTRADA #14). */
.auto-voz-nota {
    flex: 1;
    min-width: 200px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--media-text-dim);
}

/* Campo de tom da voz: uma linha, ao lado dos demais campos do bloco. */
.auto-tom { width: 100%; font-family: inherit; letter-spacing: normal; }

/* ---------------------------------------------------------------------------
   Janela de conexao do motor de voz. Aparece so quando o motor escolhido
   precisa de um endereco e ele nao esta no ar.
   --------------------------------------------------------------------------- */

.auto-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 6, 6, 0.72);
    backdrop-filter: blur(3px);
    animation: autoFadeIn 0.18s var(--media-ease);
}

/* Duas colunas no desktop (ENTRADA #82): o passo a passo de um lado, a
   acao do outro, com o botao acima da dobra. Empilha no celular. */
.auto-modal-caixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 26px;
    width: min(760px, 100%);
    padding: 26px 28px;
    border: 1px solid var(--media-border-hover);
    border-radius: var(--media-radius-xl);
    background: var(--media-surface);
    box-shadow: var(--media-shadow-lg);
}

.auto-modal-titulo {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--media-text);
}
.auto-modal-texto {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--media-text-muted);
}
.auto-modal-passos {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--media-text-muted);
}
.auto-modal-passos li::marker { color: var(--media-accent); }

.auto-modal-acao {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.auto-modal-abrir { justify-content: center; text-decoration: none; }
.auto-modal-botoes { display: flex; gap: 8px; }
.auto-modal-botoes button { flex: 1; justify-content: center; }

.auto-modal-erro {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--media-danger);
}

/* Motor que precisa ser ligado avisa no proprio chip, antes do clique. */
.auto-chip-alerta {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    background: var(--media-surface-3);
    color: var(--media-text-dim);
}

@media (max-width: 760px) {
    .auto-modal-caixa { grid-template-columns: 1fr; gap: 18px; }
}

/* Rotulo do campo com a acao na mesma linha: o botao de escrever nao
   precisa de faixa propria (ENTRADA #84, aproveitar o espaco morto). */
.auto-label-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}


/* ---------------------------------------------------------------------------
   Ouvir o audio. Vale para a trilha escolhida e para a amostra de voz: os
   dois sao som, e som so se confere ouvindo. Player nativo de proposito —
   um controle proprio aqui seria enfeite, e o nativo ja tem barra, volume e
   teclado prontos.
   --------------------------------------------------------------------------- */

.auto-ouvir {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* Ainda usado pela AMOSTRA de voz, que e conferencia rapida e nao
   merece controle proprio. A trilha, essa, tem o tocador do painel. */
.auto-player {
    flex: 1;
    min-width: 0;
    height: 34px;
    border-radius: 999px;
    background: var(--media-surface-3);
    color-scheme: dark;
}

/* O lixo do take some ate o hover porque fica sobre a imagem; aqui ele
   esta numa linha propria, entao fica sempre a vista. */
.auto-ouvir-lixo {
    position: static;
    flex: none;
    opacity: 1;
}

.auto-ouvir-texto {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--media-text-dim);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Campo de arquivo escondido: quem clica no botao e que abre o seletor. */
.auto-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Recado do envio da amostra. Fica dentro do card, colado no que falhou,
   nao num alerta no topo da tela (ENTRADA #69): o olho tem que achar o
   problema onde ele aconteceu. Icone + texto, nunca so a cor. */
.auto-aviso {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid var(--media-border);
    background: var(--media-surface-3);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--media-text-muted);
}
/* Deu certo tem forma propria: quem acabou de mandar um arquivo precisa
   ler que deu certo, nao deduzir de um chip que mudou de cor. */
.auto-aviso--ok {
    border-color: color-mix(in srgb, var(--media-success) 45%, transparent);
    background: var(--media-success-soft);
    color: var(--media-text);
}
.auto-aviso--ok .material-symbols-outlined { color: var(--media-success); }

/* O sinal de escolhido no chip. Cor sozinha nao se ve em todo monitor
   nem em toda vista; o tique se ve sempre. */
.auto-chip-check {
    font-size: 14px;
    margin-right: 3px;
    vertical-align: -2px;
}

/* Recusa nao pode se parecer com informacao. Muda a borda, o fundo e o
   icone — nunca so a cor, que sozinha nao se ve em todo monitor nem em
   toda vista (ENTRADA #69). */
.auto-aviso--erro {
    border-color: var(--media-danger);
    background: var(--media-danger-soft);
    color: var(--media-text);
}
.auto-aviso--erro .material-symbols-outlined { color: var(--media-danger); }

.auto-aviso .material-symbols-outlined {
    font-size: 16px;
    flex: none;
    margin-top: 1px;
    color: var(--media-accent);
}

/* Os ajustes de voz em colunas: no desktop cabem lado a lado, e um
   embaixo do outro seria coluna de mobile jogada no largo (ENTRADA #82). */
.auto-ajustes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
    gap: 0 18px;
    margin-top: 4px;
}
.auto-ajuste .auto-sublabel { margin-bottom: 6px; }
.auto-ajuste .auto-chips { margin-bottom: 12px; }

/* O <audio> so carrega o arquivo; quem toca e o botao do painel. */
.auto-audio { display: none; }

/* Ressalva da janela de conexao: vale saber ANTES de abrir o Colab, mas
   nao e um passo — por isso fica fora da lista numerada. */
.auto-modal-nota {
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--media-border);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--media-text-dim);
}

/* O campo de endereco herdava flex:1 de .auto-key-input e, dentro da
   coluna do modal, crescia ate virar uma caixa alta e vazia. */
.auto-modal-acao .auto-key-input { flex: none; }

/* Copiar a amostra guardada para dentro do Voicebox: acao rara, entao
   botao pequeno e proprio, nao um CTA competindo com Gerar voz. */
.auto-copiar-vb { margin-top: 10px; }