/* ft-file-viewer — pré-visualização de arquivo (imagem, PDF, vídeo, áudio, texto e JSON), inline ou num <dialog> ampliado.
   Renderizado por Scripts/Components/ft-file-viewer.js; o contrato (atributos, opts, eventos) está no cabeçalho dele.

   Entra em TRÊS bundles — fixtres-components (telas do tema), ft-layout (o Balcão do assistente, em toda página do app) e
   home-ft (o Balcão na Home) — porque o <dialog> ampliado abre também onde o tema não está carregado: a Home e a tela
   legada não têm ft-light/ft-dark nem ft-theme. Por isso o bloco logo abaixo é o ÚNICO lugar com valor literal: cada
   token do tema ganha um fallback (o valor do tema claro, ft-light.css) e o resto do arquivo só lê --fv-*. Na tela do
   tema, claro ou escuro, quem vale é o token. Mesmo padrão de ft-assistant-desk.css (fallback de token) e dos
   ícones SVG inline do Balcão (o sprite __Icons também não existe na Home).

   Nomes: ft-file-viewer__* é o componente (a raiz recebe .ft-file-viewer--inline ou --dialog, e --<tipo>); o <dialog> do modo
   ampliado é ft-file-viewer-dialog__*. Estado sem prefixo (is-loaded, is-failed, is-loading, is-expandable, is-json). */

.ft-file-viewer,
dialog.ft-file-viewer-dialog {
    --fv-surface: var(--ft-bg-surface, #ffffff);
    --fv-muted: var(--ft-bg-muted, #f1f3f5);
    --fv-border: var(--ft-border-color, #dee2e6);
    --fv-text: var(--ft-text-primary, #212529);
    --fv-text-2: var(--ft-text-secondary, #6c757d);
    --fv-text-3: var(--ft-text-muted, #868e96);
    --fv-primary: var(--ft-color-primary, #0d6efd);
    --fv-on-primary: var(--ft-text-inverse, #ffffff);
    --fv-focus: var(--ft-focus-ring, rgba(13, 110, 253, 0.25));
    --fv-warn-bg: var(--ft-bg-warning-subtle, #fffbeb);
    --fv-radius: var(--ft-radius-lg, 0.5rem);
    --fv-radius-sm: var(--ft-radius-sm, 0.25rem);
    --fv-shadow: var(--ft-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
    /* JSON colorido: um token do tema por classe de token. Claro e escuro saem certos porque ft-dark.css redefine os cinco. */
    --fv-tok-key: var(--ft-color-amber, #a16207);
    --fv-tok-string: var(--ft-color-success, #198754);
    --fv-tok-number: var(--ft-color-purple, #6f42c1);
    --fv-tok-boolean: var(--ft-color-primary, #0d6efd);
    --fv-tok-null: var(--ft-color-danger, #dc3545);
}

.ft-file-viewer,
.ft-file-viewer *,
.ft-file-viewer *::before,
.ft-file-viewer *::after,
.ft-file-viewer-dialog,
.ft-file-viewer-dialog *,
.ft-file-viewer-dialog *::before,
.ft-file-viewer-dialog *::after {
    box-sizing: border-box;
}

/* O display dos filhos venceria o [hidden] do navegador onde o tema (que o força) não está carregado. */
.ft-file-viewer [hidden],
.ft-file-viewer-dialog [hidden] {
    display: none !important;
}

/* ---- Inline -------------------------------------------------------------- */
/* A raiz é uma coluna: a barra do canto (absoluta) e o palco. Altura: a do contêiner (flex) ou, sem ela, o mínimo abaixo. */
.ft-file-viewer {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 15rem;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius);
    background: var(--fv-muted);
    color: var(--fv-text);
    overflow: hidden;
}

/* Dentro do <dialog>: preenche o corpo, sem moldura. */
.ft-file-viewer--dialog {
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
}

.ft-file-viewer__stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* A mídia preenche o palco por flex (sem altura em %, que não resolve em contêiner sem altura definida). */
.ft-file-viewer__media {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

/* Imagem contida na área: no inline, sem ampliar além do tamanho dela; no ampliado, ocupa o que couber — é o ponto do Ampliar. */
.ft-file-viewer__img {
    display: block;
    object-fit: scale-down;
}

.ft-file-viewer--dialog .ft-file-viewer__img {
    object-fit: contain;
}

.ft-file-viewer__img.is-expandable {
    cursor: zoom-in;
}

.ft-file-viewer__frame {
    display: block;
    border: 0;
    background: var(--fv-surface);
}

/* Sem preto literal: a faixa ao redor do vídeo é o fundo do palco. */
.ft-file-viewer__video {
    display: block;
    object-fit: contain;
}

.ft-file-viewer__audio {
    flex: none;
    width: min(30rem, calc(100% - 2rem));
    margin: auto;
}

/* ---- Texto e JSON -------------------------------------------------------- */
.ft-file-viewer__text {
    margin: 0;
    padding: 0.875rem 1rem;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--fv-surface);
    color: var(--fv-text);
    font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
}

.ft-file-viewer__text.is-loading {
    color: var(--fv-text-3);
    font-family: inherit;
    font-style: italic;
}

.ft-file-viewer__text:focus {
    outline: 0;
}

.ft-file-viewer__text:focus-visible {
    box-shadow: inset 0 0 0 0.2rem var(--fv-focus);
}

.ft-file-viewer__tok--key {
    color: var(--fv-tok-key);
    font-weight: 600;
}

.ft-file-viewer__tok--string {
    color: var(--fv-tok-string);
}

.ft-file-viewer__tok--number {
    color: var(--fv-tok-number);
}

.ft-file-viewer__tok--boolean {
    color: var(--fv-tok-boolean);
}

.ft-file-viewer__tok--null {
    color: var(--fv-tok-null);
}

/* O aviso de arquivo cortado no teto de leitura: uma faixa embaixo do texto, que continua rolando. */
.ft-file-viewer__note {
    flex: none;
    padding: 0.4rem 0.875rem;
    border-top: 1px solid var(--fv-border);
    background: var(--fv-warn-bg);
    color: var(--fv-text);
    font-size: 0.78rem;
}

/* ---- Barra do canto (só inline): Ampliar e Baixar ------------------------- */
.ft-file-viewer__bar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius);
    background: var(--fv-surface);
    background: color-mix(in srgb, var(--fv-surface) 90%, transparent);
    box-shadow: var(--fv-shadow);
}

/* PDF com a barra nativa do visualizador: ela mora no alto, à direita (baixar, imprimir) — a nossa desce para o canto de baixo. */
.ft-file-viewer--toolbar .ft-file-viewer__bar {
    top: auto;
    right: 1.75rem;
    bottom: 1rem;
}

.ft-file-viewer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 1.875rem;
    height: 1.875rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--fv-radius-sm);
    background: transparent;
    color: var(--fv-text-2);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.ft-file-viewer__btn:hover {
    background: var(--fv-muted);
    color: var(--fv-text);
    text-decoration: none;
}

.ft-file-viewer__btn:focus {
    outline: 0;
}

.ft-file-viewer__btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--fv-focus);
}

/* O × do cabeçalho do ampliado: redondo, como o do player do Balcão que ele substitui. */
.ft-file-viewer__btn--icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    background: var(--fv-muted);
}

.ft-file-viewer__btn--icon:hover {
    background: var(--fv-border);
}

.ft-file-viewer__btn--solid {
    height: 2.25rem;
    padding: 0 1rem;
    background: var(--fv-primary);
    color: var(--fv-on-primary);
}

.ft-file-viewer__btn--solid:hover {
    background: var(--fv-primary);
    color: var(--fv-on-primary);
    filter: brightness(0.92);
}

.ft-file-viewer__icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

/* ---- Quadro: tipo sem prévia ou arquivo que não carregou -------------------- */
.ft-file-viewer__empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 0;
    padding: 1.5rem;
    overflow: auto;
    background: var(--fv-surface);
    color: var(--fv-text-2);
    text-align: center;
}

.ft-file-viewer__empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--fv-text-3);
}

.ft-file-viewer__empty-name {
    max-width: 100%;
    color: var(--fv-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ft-file-viewer__empty-msg {
    max-width: 32rem;
    margin: 0;
    font-size: 0.8125rem;
}

.ft-file-viewer__empty .ft-file-viewer__btn {
    margin-top: 0.5rem;
}

/* ---- Ampliado: <dialog> nativo, ~90vw × 90vh -------------------------------- */
/* O UA dá ao dialog:modal max-width/max-height, padding, borda e overflow próprios: todos reescritos. Sem display aqui — o do
   UA (none fechado) é o que fecha; aberto vira coluna logo abaixo. */
dialog.ft-file-viewer-dialog {
    position: fixed;
    inset: 0;
    z-index: 1100;
    width: 90vw;
    max-width: none;
    height: 90vh;
    height: 90dvh;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--ft-radius-xl, 0.75rem);
    overflow: hidden;
    background: var(--fv-surface);
    color: var(--fv-text);
    box-shadow: var(--ft-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
    font-family: var(--ft-font-body, var(--ft-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
    font-size: 14.4px;
    line-height: 1.5;
    text-align: left;
}

dialog.ft-file-viewer-dialog[open] {
    display: flex;
    flex-direction: column;
}

/* ::backdrop não herda o --fv-* do dialog em todo navegador: lê o token direto. */
dialog.ft-file-viewer-dialog::backdrop {
    background: var(--ft-bg-backdrop, rgba(15, 23, 42, 0.55));
}

.ft-file-viewer-dialog__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--fv-border);
    background: var(--fv-surface);
}

.ft-file-viewer-dialog__title {
    min-width: 0;
    margin: 0;
    color: var(--fv-text);
    font-family: var(--ft-font-display, inherit);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ft-file-viewer-dialog__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

.ft-file-viewer-dialog__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* Links extras do consumidor (ex.: "Abrir em página inteira" do Balcão). */
.ft-file-viewer-dialog__foot {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.625rem 1.25rem 0.75rem;
    border-top: 1px solid var(--fv-border);
    background: var(--fv-surface);
}

.ft-file-viewer-dialog__link {
    color: var(--fv-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Celular: a tela toda. */
@media (max-width: 600px) {
    dialog.ft-file-viewer-dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    .ft-file-viewer-dialog__head {
        padding: 0.625rem 0.75rem 0.625rem 1rem;
    }

    .ft-file-viewer-dialog__title {
        font-size: 1rem;
    }

    .ft-file-viewer-dialog__foot {
        padding: 0.625rem 1rem 0.75rem;
    }
}