/* =====================================================================
 * atendimento.css — o único CSS nosso. Vem DEPOIS do tema.
 * ---------------------------------------------------------------------
 * Não redesenha nada: só troca a fonte e corrige o que o tema deixa
 * solto no nosso uso. Qualquer regra aqui precisa de um porquê escrito.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FONTE ÚNICA: ROBOTO, SERVIDA LOCAL
 * ---------------------------------------------------------------------
 * O tema traz `hkgrotesk` por @font-face. Como o arquivo chega depois do
 * primeiro parágrafo pintado, o texto aparece numa fonte e TROCA quando
 * a real carrega — é a "re-renderização" que se vê.
 *
 * `font-display: swap` continuaria trocando. `optional` manda o
 * navegador desistir se a fonte não estiver pronta a tempo: ou pinta já
 * com Roboto (que é o caso, porque o arquivo é local e tem 22 KB), ou
 * pinta com a fallback e NÃO troca depois. Uma pintura só, sempre.
 * ------------------------------------------------------------------- */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url('/assets/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: optional;
    src: url('/assets/fonts/roboto-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    src: url('/assets/fonts/roboto-700.woff2') format('woff2');
}

/* Sobrepõe o hkgrotesk do tema em todo lugar. `:not()` nas classes de
 * ícone porque elas são fontes de símbolo — trocar quebraria os ícones. */
body,
body *:not([class*="ri-"]):not([class*="bx"]):not([class*="mdi"]):not([class*="las"]):not([class*="lab"]) {
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * A CAIXA DE TEXTO DA CONVERSA
 * ---------------------------------------------------------------------
 * O `chat-input-section` do tema não tem borda superior nem fundo
 * próprio: ele conta com o cartão que o envolve na demonstração. No
 * nosso layout a conversa ocupa a altura toda, então sem isto a caixa
 * fica "solta" sobre o padrão de fundo, desalinhada da lista ao lado.
 * ------------------------------------------------------------------- */
.chat-input-section {
    border-top: 1px solid var(--vz-border-color);
    background-color: var(--vz-secondary-bg);
}

/* ---------------------------------------------------------------------
 * ALTURA DO CHAT COM O MENU EM CIMA
 * ---------------------------------------------------------------------
 * O tema calcula a altura da lista e da conversa com números fixos
 * (`calc(100vh - 296px)` e afins), medidos para o layout de lateral. Com
 * o menu horizontal existe uma barra a mais de 45 px que esses números
 * não conhecem: a caixa de texto sai da tela e a lista passa do rodapé.
 *
 * Em vez de repetir os números com outro valor — e errar de novo no
 * próximo ponto de quebra — o wrapper recebe a altura e os filhos se
 * esticam. `min-height:0` é obrigatório: sem ele um filho com rolagem
 * dentro de um flex não encolhe e estoura o pai.
 * ------------------------------------------------------------------- */
[data-layout="horizontal"] .page-cheia .chat-wrapper {
    height: calc(100vh - var(--vz-header-height, 70px) - 45px - 0.5rem);
}
[data-layout="horizontal"] .page-cheia .chat-leftsidebar,
[data-layout="horizontal"] .page-cheia .user-chat,
[data-layout="horizontal"] .page-cheia .user-chat .chat-content,
[data-layout="horizontal"] .page-cheia .user-chat .chat-content > .w-100,
[data-layout="horizontal"] .page-cheia .user-chat .chat-content > .w-100 > .position-relative {
    height: 100%;
    min-height: 0;
}
[data-layout="horizontal"] .page-cheia .chat-leftsidebar,
[data-layout="horizontal"] .page-cheia .user-chat .chat-content > .w-100 > .position-relative {
    display: flex;
    flex-direction: column;
}
[data-layout="horizontal"] .page-cheia .chat-room-list,
[data-layout="horizontal"] .page-cheia .chat-conversation {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
}

/* A tela de chat é a única que quer a largura inteira. O horizontal do
 * Velzon centra o conteúdo em 90% — bom para um relatório, ruim para
 * duas colunas que já disputam espaço. */
[data-layout="horizontal"] .page-cheia > .container-fluid {
    max-width: 100%;
}

/* ---------------------------------------------------------------------
 * MÍDIA DENTRO DO BALÃO
 * ---------------------------------------------------------------------
 * Sem um teto, uma foto de 3000 px vinda do celular do cliente estoura a
 * conversa e empurra o resto para fora da tela.
 * ------------------------------------------------------------------- */
.msg-midia {
    max-width: min(320px, 60vw);
    max-height: 320px;
    border-radius: .5rem;
    display: block;
    cursor: zoom-in;
}
.msg-audio {
    width: min(260px, 55vw);
    height: 40px;
    display: block;
}
/* O player nativo é claro por dentro. No tema escuro ele fica um bloco
 * branco no meio de balões escuros; o filtro devolve o contraste sem
 * precisar de player próprio em JavaScript. */
[data-bs-theme="dark"] .msg-audio {
    filter: invert(88%) hue-rotate(180deg);
}

/* A conversa arquivada usa os balões do tema, mas não a altura deles: em
 * /resolvidos quem rola é a página, não um painel interno. Sem isto o
 * `calc(100vh - 299px)` do tema corta o histórico no meio. */
.conversa-arquivo.chat-conversation {
    height: auto;
    overflow: visible;
}

/* ---------------------------------------------------------------------
 * PAINEL DA CONVERSA — a terceira coluna
 * ---------------------------------------------------------------------
 * `flex-shrink:0` para ele não ser espremido quando a conversa cresce, e
 * largura fixa porque o conteúdo é sempre o mesmo (etiqueta, agente,
 * observação). `min-height:0` no corpo é o que permite a rolagem própria
 * dentro de um flex — sem isso ele empurra o pai e a caixa de texto sai
 * da tela.
 * ------------------------------------------------------------------- */
.painel-conversa {
    width: 20rem;
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--vz-border-color);
    background-color: var(--vz-secondary-bg);
}
.painel-conversa-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* Escondido pelo botão do cabeçalho, ou automaticamente em tela estreita:
 * abaixo de 1400 px a conversa ficaria com menos de 500 px e as bolhas
 * quebrariam em duas palavras por linha. */
.painel-oculto .painel-conversa { display: none; }
@media (max-width: 1399.98px) {
    .painel-conversa { display: none; }
    .painel-visivel .painel-conversa { display: flex; }
}

/* ---------------------------------------------------------------------
 * MENSAGEM QUE CHEGA SOZINHA
 * ---------------------------------------------------------------------
 * Um piscar curto no balão novo. Sem isso, quem estava olhando para outro
 * ponto da tela não percebe que chegou algo — e o cliente fica esperando.
 * ------------------------------------------------------------------- */
@keyframes balaoNovo {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.chat-list.balao-novo { animation: balaoNovo .25s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .chat-list.balao-novo { animation: none; }
}