/* Chat IA do WebSac (assistente dentro do sistema do cliente). O enquadramento (fundo escuro, caixa
   branca, cabecalho colorido) vem do Modal padrao do v3 — igual ao das outras telas. O que esta aqui e
   so o que e do chat: altura fixa da caixa, lista de bolhas com rolagem e o rodape de envio.
   Minimizar apenas esconde o modal (a conversa continua). */

/* Largura do painel: o modal-lg do Bootstrap e mais largo, e o chat cabe melhor em 700px. */
.ChatIaClienteModal .modal-dialog {
	max-width: 700px;
}
/* Altura fixa e conteudo em coluna: assim a lista rola por dentro e o rodape fica sempre a vista.
   Sem isto o modal cresceria junto com a conversa. */
.ChatIaClienteModal .modal-content {
	height: 640px;
	max-height: 88vh;
	/* A lista e o rodape pintam fundo proprio ate a borda: sem isto eles vazariam o canto arredondado. */
	overflow: hidden;
}
.ChatIaClienteModal .modal-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
}

/* Modo embed: o iframe do v1 cobre a viewport inteira, entao o DOCUMENTO carregado dentro dele nao pode
   pintar fundo — o cinza do .Body (#eee) tapava a tela do sistema atras. Aqui o fundo do body some so
   nesta pagina (a classe entra pela view chatia-cliente.php com embed=1); as demais telas do v3 seguem
   com o #eee de sempre. Duas classes para vencer a especificidade do .Body.
   Repare que quem escurece a tela no v1 e o fundo do PROPRIO modal (o .modal-backdrop desenhado dentro
   do iframe): com o documento transparente ele atravessa o iframe e escurece a pagina do sistema atras,
   igualzinho ao v3. */
.Body.ChatIaClienteEmbed {
	background-color: transparent;
	background-image: none;
}

/* Fundo escuro sobrando: com o chat aberto e um dialog por cima, o Bootstrap desenha um backdrop para
   cada modal e os dois (opacity 0.5) se somam fora dos paineis — a tela escurece duas vezes, e no v1
   isso bate na pagina do sistema atras do iframe. O JS marca os fundos DEPOIS do primeiro enquanto o
   chat esta na frente; o primeiro, que o fixModal sobe para cima do chat, continua escurecendo tudo uma
   vez so. Tres classes para vencer o .modal-backdrop.show do main.css sem precisar de !important. */
.modal-backdrop.show.ChatIaClienteFundoExtra {
	opacity: 0;
}

/* Lista de mensagens (rolagem). min-height:0 garante que o flex role em vez de crescer. */
.ChatIaClienteMensagens {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 14px;
	background: #f4f6f9;
}

/* Bolhas. */
.ChatIaClienteBolha {
	display: flex;
	margin-bottom: 10px;
}
/* Coluna nos dois: empilha o texto da bolha acima do horario (e, na IA, do indicador "Pensando..."
   tambem), que ficam abaixo em vez de ao lado. align-items manda o bloco todo (texto + horario) pro
   lado certo — direita no usuario, esquerda na IA — sem precisar alinhar o horario sozinho. */
.ChatIaClienteBolha-usuario { flex-direction: column; align-items: flex-end; }
.ChatIaClienteBolha-ia { flex-direction: column; align-items: flex-start; }
/* Horario da bolha: pequeno e discreto, embaixo do texto — esquerda na IA, direita no usuario (vem do
   align-items do pai acima, e do mesmo jeito para os dois papeis). */
.ChatIaClienteBolhaHorario {
	margin-top: 2px;
	padding: 0 4px;
	color: #9aa5b1;
	font-size: 11px;
}
.ChatIaClienteBolhaTexto {
	max-width: 80%;
	min-width: 0;
	padding: 9px 12px;
	border-radius: 12px;
	line-height: 1.4;
	word-wrap: break-word;
	white-space: normal;
}
/* Respostas com tabela usam toda a largura disponivel, sem aumentar bolhas de texto comum. */
.ChatIaClienteBolha-ia.ChatIaClienteBolha-comTabela .ChatIaClienteBolhaTexto {
	max-width: 100%;
}
/* Tabelas Markdown recebidas da IA rolam horizontalmente sem estourar a bolha. */
.ChatIaClienteTabela {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 8px 0;
	overflow-x: auto;
}
.ChatIaClienteTabela table {
	min-width: 520px;
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.ChatIaClienteTabela th,
.ChatIaClienteTabela td {
	border: 1px solid #dfe4e8;
	padding: 5px 7px;
	text-align: left;
	vertical-align: top;
}
.ChatIaClienteTabela th {
	background: #f2f5f7;
	font-weight: 600;
	white-space: nowrap;
}
.ChatIaClienteTabela tbody tr:nth-child(even) {
	background: #fafbfc;
}
.ChatIaClienteListaOrdenada {
	display: block;
	padding-left: 4px;
}
.ChatIaClienteListaNumero {
	display: inline-block;
	min-width: 22px;
	font-weight: 600;
}
/* Mesmo azul do cabecalho do modal: e o "primary" do tema do v3
   (v3/style/scss/default/variables.scss), aplicado pelo modal-header-primary. */
.ChatIaClienteBolha-usuario .ChatIaClienteBolhaTexto {
	background: #3d9be5;
	color: #ffffff;
	border-bottom-right-radius: 3px;
}
.ChatIaClienteBolha-ia .ChatIaClienteBolhaTexto {
	background: #ffffff;
	color: #333333;
	border: 1px solid #e2e6ea;
	border-bottom-left-radius: 3px;
}
/* Esconde o balao de texto enquanto vazio (antes do streaming comecar),
   evitando um quadradinho vazio acima do "Pensando...". */
.ChatIaClienteBolha-ia .ChatIaClienteBolhaTexto:empty { display: none; }
.ChatIaClienteErro { color: #c0392b; }
/* Aviso de "Parar IA" quando ja tinha texto acumulado (a bolha some vazia so quando NAO tem texto nenhum,
   ver ChatIaClienteErro acima) — tom discreto, nao e um erro, so um aviso do que aconteceu. */
.ChatIaClienteInterrompido {
	margin-top: 4px;
	color: #6c757d;
	font-size: 12px;
	font-style: italic;
}

/* Rodape em COLUNA: chips de anexo, campo de texto e, abaixo dele, a linha unica com aviso + botoes
   (.ChatIaClienteRodapeLinha). */
.ChatIaClienteRodape {
	display: flex;
	flex-direction: column;
	padding: 10px;
	background: #ffffff;
	border-top: 1px solid #e2e6ea;
	flex: 0 0 auto;
}
.ChatIaClienteInput {
	width: 100%;
	resize: none;
	border: 1px solid #ced4da;
	/* Campo reto, sem canto arredondado. */
	border-radius: 0;
	padding: 8px 14px;
	/* Teto = 4 linhas: 4 x 20px de linha + 16px de padding + 2px de borda. Este max-height e a FONTE
	   UNICA do limite: o JS le ele via getComputedStyle para crescer o campo ate aqui e so entao
	   ligar a rolagem interna (sem numero magico duplicado no JS). */
	line-height: 20px;
	max-height: 98px;
	overflow-y: hidden;
	outline: none;
}
/* O FormControl aplica fundo amarelo (#fffddd !important) e o Bootstrap aplica um brilho (box-shadow)
   no foco de qualquer campo. Aqui o campo de mensagem so deve escurecer a borda no foco, sem fundo
   amarelo nem brilho — por isso a selecao repete a cadeia de :not() do FormControl.css, so pra ganhar
   em especificidade e conseguir sobrescrever o !important dele. */
.ChatIaClienteInput.FormControl:focus:not(:disabled):not(.disabled):not(:read-only):not(.CheckText) {
	background-color: #ffffff !important;
	box-shadow: none;
}
.ChatIaClienteInput:focus { border-color: #2f80c4; }

/* Linha unica abaixo do campo de mensagem: quadro do aviso a esquerda, botoes a direita, os dois lado a
   lado e com a MESMA ALTURA MINIMA dos botoes (34px, ver min-height no .ChatIaClienteAcoesTexto abaixo —
   o quadro nunca passa de 2 linhas de texto, entao na pratica essa altura e sempre a mesma), entao
   align-items:center so garante que os dois fiquem no mesmo nivel se algum navegador arredondar a altura
   de forma diferente. justify-content:space-between empurra o quadro pra esquerda e os botoes pra
   direita, sem precisar de margem manual pra nenhum dos dois — na pratica quem ocupa o espaco entre eles
   e o flex:1 1 auto do proprio quadro (ver .ChatIaClienteAcoesTexto). gap:10px so evita os dois colarem
   se a janela ficar bem estreita. */
.ChatIaClienteRodapeLinha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	gap: 10px;
}
/* Botoes: limpar, parar, anexar e microfone a esquerda do enviar. Todos sao o Button padrao do v3 (btn
   do Bootstrap). O input de arquivo escondido fica no meio, mas com display:none nao gera caixa e nao
   entra no gap. O alinhamento do bloco INTEIRO (a direita, ao lado do aviso) vem do .ChatIaClienteRodapeLinha
   acima — aqui e so o espacamento ENTRE os botoes. */
.ChatIaClienteAcoes {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Nunca encolhe: numa janela estreita quem cede espaco e o aviso ao lado (ver flex no proprio
	   .ChatIaClienteAcoesTexto), senao os botoes espremeriam primeiro e ficariam ilegiveis. */
	flex-shrink: 0;
}
/* Aviso (duas linhas fixas: "se minimizar essa janela..." e "o icone Assistente vai
   sinalizar..."), num quadro ao lado da linha de botoes (ver .ChatIaClienteRodapeLinha acima).
   display:flex + flex-direction:column empilha os dois <span> do Text::draw (que sozinhos sao inline e
   ficariam um do lado do outro); justify-content:center centraliza o bloco das duas linhas na vertical.
   align-items:stretch (em vez de center) faz cada <span> ocupar a largura INTEIRA do quadro — e e disso
   que a regra .ChatIaClienteAcoesTexto .Text logo abaixo precisa pra poder truncar (ver la). flex:1 1
   auto + min-width:0 fazem o quadro esticar desde a borda esquerda do rodape (mesmo ponto de partida do
   campo .ChatIaClienteInput ao lado, ja que os dois dividem o padding:10px do .ChatIaClienteRodape sem
   margem propria) ate quase os botoes — o gap:10px do .ChatIaClienteRodapeLinha e quem garante o respiro
   ate .ChatIaClienteAcoes. min-height:34px iguala a altura do proprio botao (btn-md, ver .Button.btn-md
   no Button.css); e so MINIMA (nao height fixo) por seguranca, mas na pratica o quadro fica sempre
   exatamente nessas duas linhas — pedido explicito e que o bloco NUNCA passe de 2 linhas (uma por frase),
   entao quem evita estourar altura e a regra de baixo (nowrap + ellipsis), nao quebra de linha. Fundo no
   mesmo azul do botao "Parar IA" quando desabilitado: e o proprio $primary do tema (#3d9be5, mesmo dos
   botoes) com a opacity:0.65 padrao do Bootstrap para elementos disabled (ver $btn-disabled-opacity), so
   que aqui como cor solida (rgba sobre o fundo branco do rodape) em vez de opacity no elemento inteiro.
   Texto branco sem text-shadow (pedido explicito — a sombra escura que o texto ganhou antes, igual a dos
   botoes primary, foi removida). line-height:1.2 (em vez de 1.4) e de proposito menor que a altura do
   quadro: com 1.4 as duas linhas praticamente preenchiam os 34px inteiros e ficavam coladas no topo/base
   do fundo azul (pedido explicito do usuario pra "afastar" o texto da borda). Com 1.2 o bloco de texto
   fica mais baixo que o quadro e o justify-content:center acima sobra folga visivel em cima e embaixo,
   sem crescer o quadro (min-height continua 34px). */
.ChatIaClienteAcoesTexto {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 3px;
	background: rgba(61, 155, 229, 0.65);
	color: #ffffff;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}
/* Modo de indisponibilidade da IA (gate central do SAST, ver conversar.php/IaDisponibilidadeSnapshot):
   troca o azul do aviso normal pelo mesmo vermelho do ChatIaClienteErro, pra chamar atencao de que o
   envio esta bloqueado (nao e so a dica de sempre). */
.ChatIaClienteAcoesTexto-indisponivel {
	background: rgba(192, 57, 43, 0.85);
}
/* Cada frase (um <span class="Text"> do Text::draw) fica presa numa linha so: nowrap impede a quebra e,
   se mesmo assim a frase nao couber (janela bem estreita), overflow:hidden + text-overflow:ellipsis
   truncam com "..." em vez de deixar o texto vazar pra fora do quadro azul — assim o bloco INTEIRO nunca
   passa de 2 linhas (uma por frase), como foi pedido. So funciona por causa do align-items:stretch la em
   cima: sem ele cada <span> ficaria do tamanho do proprio texto (shrink-to-fit) e nunca teria uma largura
   pra estourar contra. */
.ChatIaClienteAcoesTexto .Text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* Largura fixa igual nos botoes: os icones tem larguras diferentes (borracha, clipe, microfone, aviao)
   e sem isso cada botao sai de um tamanho, o que faz o espaco entre eles parecer desigual. */
.ChatIaClienteAcoes .Button {
	width: 44px;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
}
/* A margem herdada do projeto (.Button + .Button:not(.btn-block), no Button.css) so vale entre botoes
   IRMAOS COLADOS, e o input de arquivo escondido fica no meio da linha: sem isso o vao depois do limpar
   sairia menor que os outros tres. Ela precisa ser zerada por um seletor PELO MENOS TAO especifico
   quanto o de la (3 classes) — por isso a regra e repetida aqui com o .ChatIaClienteAcoes na frente
   (4 classes). Assim o espaco entre os quatro botoes vem so do gap, igual em todos. */
.ChatIaClienteAcoes .Button + .Button:not(.btn-block) {
	margin-left: 0;
}

/* Enquanto grava, o microfone fica vermelho e piscando — o usuario ve que o audio esta sendo captado. */
.ChatIaClienteAcoes .ChatIaClienteGravando,
.ChatIaClienteAcoes .ChatIaClienteGravando:hover {
	background-color: #c0392b;
	border-color: #c0392b;
	animation: chatiacliente-piscar 1.4s infinite ease-in-out;
}

/* Chips dos anexos ainda nao enviados (some quando a lista esta vazia, via d-none). */
.ChatIaClienteAnexos {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.ChatIaClienteAnexo {
	display: flex;
	align-items: center;
	max-width: 100%;
	margin: 0 6px 6px 0;
	padding: 4px 8px;
	border: 1px solid #ced4da;
	border-radius: 12px;
	background: #f4f6f9;
	font-size: 12px;
}
.ChatIaClienteAnexoMiniatura {
	width: 24px;
	height: 24px;
	margin-right: 6px;
	object-fit: cover;
	border-radius: 4px;
}
.ChatIaClienteAnexoNome {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ChatIaClienteAnexoRemover {
	margin-left: 6px;
	color: #c0392b;
	cursor: pointer;
}
.ChatIaClienteAnexo .Icon { margin-right: 6px; }

/* Chip do audio pendente (gravado ou anexado, ainda ANTES de enviar): em vez do icone+nome, mostra o
   player de verdade (montarPlayerAudio) pra dar pra ouvir antes de mandar -- mesma ideia do player que ja
   aparece dentro da bolha enviada (.ChatIaClienteAnexoBolhaAudio, logo abaixo), so que aqui ao lado do "x"
   de descartar em vez de dentro da bolha. Sem botao de confirmar: o envio continua so pelo aviao de papel.
   Ocupa a LARGURA TOTAL da area de composicao (width: 100% forca a propria linha dentro do flex-wrap do
   .ChatIaClienteAnexos, em vez de encolher pro tamanho do conteudo como os demais chips) -- pedido do
   usuario inspirado na previa de audio do Zapware, que estica pela largura toda da caixa de mensagem.
   A margem da direita (6px, herdada de .ChatIaClienteAnexo pra separar um chip do outro na mesma linha)
   precisa ser ZERADA aqui: como este chip ja ocupa a linha inteira, ela nao separa nada e ainda soma
   ao width: 100%, fazendo o chip encolher (ou estourar) 6px e nao encostar na borda direita. Mantida so
   a margem de baixo, que separa o player da linha de digitacao.
   As CORES daqui pra baixo (verde/teal #119c72, cinza esverdeado do texto e do painel) saem da paleta do
   proprio Zapware, pra replicacao ser fiel em vez de estimada no olho: sao as variaveis --primary,
   --muted, --muted-foreground e --border do tema claro dele (src/app/globals.css), convertidas de HSL pra
   hex. So valem no chip pendente -- a bolha ja enviada continua com o azul padrao do WebSac. */
.ChatIaClienteAnexo-audio {
	width: 100%;
	margin-right: 0;
	padding: 4px 8px 4px 10px;
	/* Fundo quase branco com borda esverdeada: no Zapware o chip da previa e "bg-muted/40 + border", ou
	   seja, bem mais claro que o painel dos controles que fica dentro dele -- e esse contraste entre os
	   dois tons que faz o bloco de controles se destacar como uma faixa propria. */
	border-color: #dee7e5;
	background: #f9fbfa;
}
/* Icone (microfone na gravacao, volume no anexo escolhido do disco -- ver iconeDaMidia no JS) e o rotulo
   "Áudio gravado — revise e envie" que ficam ANTES do player, igual ao print do Zapware. A margem de 6px
   do icone ja vem de ".ChatIaClienteAnexo .Icon" (regra generica, mais acima); aqui so a cor e o tamanho
   da fonte. O rotulo nao cresce nem quebra linha (flex-shrink permite encolher em telas estreitas, com
   reticencias) -- quem estica de verdade e o player, ao lado. */
.ChatIaClienteAnexoAudioIcone {
	color: #119c72;
	font-size: 13px;
}
.ChatIaClienteAnexoAudioRotulo {
	flex: 0 1 auto;
	min-width: 0;
	margin-right: 10px;
	overflow: hidden;
	color: #607672;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* Combinado com ".ChatIaClienteAudioPlayer" (2 classes) de proposito, e nao sozinho: assim a especificidade
   fica maior que a regra base (min-width: 160px, mais abaixo neste arquivo) e o min-width: 0 daqui vence
   sem depender da ordem das regras no arquivo. */
.ChatIaClienteAudioPlayer.ChatIaClienteAnexoAudioPlayer {
	flex: 1 1 auto;
	min-width: 0;
}

/* Anexos que ja seguiram na mensagem: mesmo chip, agora dentro da bolha azul do usuario. */
.ChatIaClienteAnexosBolha {
	display: flex;
	flex-wrap: wrap;
	margin-top: 6px;
}
.ChatIaClienteAnexoBolha {
	margin-bottom: 0;
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}
/* Miniatura de imagem de verdade (clipe, Ctrl+V ou print da tela) dentro da bolha do usuario, no lugar
   do chip generico — so quando ha os bytes disponiveis pra desenhar (ver origemImagemDaMidia no JS).
   Clicavel: abre a imagem em nova aba (ver abrirImagemEmNovaAba no JS). */
.ChatIaClienteAnexoBolhaImagem {
	display: block;
	max-width: 220px;
	max-height: 220px;
	border-radius: 8px;
	object-fit: cover;
	cursor: pointer;
}
/* Print da tela (botao de camera) desenha 100% maior que um anexo comum: costuma ter mais detalhe pra
   ler (texto de tela cheia) do que uma foto qualquer. */
.ChatIaClienteAnexoBolhaImagemPrint {
	max-width: 440px;
	max-height: 440px;
}
/* Player de audio dentro da bolha (mensagem ja enviada) -- mesma ideia da miniatura de imagem acima, so
   que tocando em vez de abrindo em aba nova (ver origemAudioDaMidia no JS). O player em si (botao, barra,
   velocidade, tempo) e o bloco ChatIaClienteAudioPlayer mais abaixo -- aqui so o espacamento do wrapper
   dentro da bolha. */
.ChatIaClienteAnexoBolhaAudio {
	max-width: 220px;
	margin-top: 4px;
}

/* Player de audio moderno (botao redondo, barra arrastavel, velocidade e tempo) no lugar do <audio
   controls> nativo do navegador -- inspirado no player de audio do Chat de Conversas do Zapware. Montado
   pelo JS (montarPlayerAudio, ChatIaCliente.js) e reaproveitado nos dois usos daqui (previa de gravacao e
   anexo na bolha) e tambem pela tela "Gerador de Relatorios por IA" (relatoriopersonalizado.js), que
   reusa este CSS de proposito -- ver comentario no topo de relatoriopersonalizado.php. */
.ChatIaClienteAudioPlayer {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 160px;
}
/* O <audio> de verdade fica so como motor de reproducao -- quem aparece na tela e a UI custom ao lado. */
.ChatIaClienteAudioPlayerElemento {
	display: none;
}
/* Play/pausa e velocidade sao <button> de verdade (pelo teclado, ver montarPlayerAudio no JS), entao
   precisam zerar a borda/aparencia que o navegador e o Bootstrap dao a botao -- o visual e todo daqui. */
.ChatIaClienteAudioPlayerBotao,
.ChatIaClienteAudioPlayerVelocidade,
.ChatIaClienteAudioPlayerVolume {
	border: 0;
	appearance: none;
	font-family: inherit;
	line-height: 1;
}
.ChatIaClienteAudioPlayerBotao {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	background: rgba(61, 155, 229, 0.12);
	color: #3d9be5;
	cursor: pointer;
	font-size: 11px;
}
.ChatIaClienteAudioPlayerBotao:hover { background: rgba(61, 155, 229, 0.22); }
/* O align-items/justify-content do botao ja centraliza a CAIXA do icone, mas o glifo do FontAwesome (fa-
   play, fa-pause) nao tem a largura de avanco nem a altura de linha perfeitamente simetricas dentro dessa
   caixa -- sobra espaco de um lado e falta do outro, e o triangulo do play some pro canto. Virando o
   proprio <i> um mini flex container (1em x 1em) o navegador centraliza o glifo de verdade dentro de uma
   caixa quadrada, em vez de depender da metrica de fonte do icone. */
.ChatIaClienteAudioPlayerBotao .Icon,
.ChatIaClienteAudioPlayerVolume .Icon,
.ChatIaClienteAudioPlayerVelocidade-icone .Icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	margin: 0;
}
/* Botao de mudo/som -- mesmo circulo do botao de play/pausa, so que menor (a hierarquia visual do Zapware
   da mais destaque ao play). So a FORMA fica aqui: a cor vem do modificador da previa (mais abaixo), ja
   que o JS so cria este botao no estilo "previa" -- cor nenhuma aqui na base seria usada de verdade. */
.ChatIaClienteAudioPlayerVolume {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 10px;
}
/* Variante do botao de velocidade so no estilo "previa": em vez da pilula com texto "1x", vira um circulo
   so com o icone de "mais opcoes" (3 pontinhos), igual ao Zapware -- mesmo tamanho do botao de volume, ao
   lado. O clique continua trocando a velocidade (ver handler no JS); so a aparencia que muda. Seletor
   combinado (2 classes) de proposito, e nao so ".ChatIaClienteAudioPlayerVelocidade-icone" sozinho: a regra
   base ".ChatIaClienteAudioPlayerVelocidade" (mais abaixo, pilula com padding/border-radius/font-size
   proprios) tem a MESMA especificidade de uma classe unica, entao vence por vir depois no arquivo -- so o
   combo de 2 classes garante que o circulo vence sem depender de ordem. */
.ChatIaClienteAudioPlayerVelocidade.ChatIaClienteAudioPlayerVelocidade-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	font-size: 11px;
}
.ChatIaClienteAudioPlayerBarra {
	flex: 1 1 auto;
	min-width: 0;
	/* area de clique/arraste maior que a barra visual, facilita o toque no celular */
	padding: 8px 0;
	cursor: pointer;
}
/* Foco visivel em quem recebe Tab (os dois botoes e a barra): sem isto, quem navega pelo teclado nao ve
   onde esta. Anel em vez de outline padrao pra combinar com o formato redondo do botao. */
.ChatIaClienteAudioPlayerBotao:focus-visible,
.ChatIaClienteAudioPlayerVelocidade:focus-visible,
.ChatIaClienteAudioPlayerVolume:focus-visible,
.ChatIaClienteAudioPlayerBarra:focus-visible {
	outline: 2px solid #2f80c4;
	outline-offset: 2px;
}
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerBotao:focus-visible,
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerVelocidade:focus-visible,
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerVolume:focus-visible,
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerBarra:focus-visible {
	outline-color: #ffffff;
}
.ChatIaClienteAudioPlayerTrilho {
	position: relative;
	height: 4px;
	border-radius: 2px;
	background: rgba(61, 155, 229, 0.18);
}
.ChatIaClienteAudioPlayerPreenchido {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0%;
	border-radius: 2px;
	background: #3d9be5;
}
.ChatIaClienteAudioPlayerBolinha {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: #3d9be5;
	transform: translateY(-50%);
	box-shadow: 0 0 0 2px #ffffff;
}
.ChatIaClienteAudioPlayerVelocidade {
	flex: 0 0 auto;
	padding: 3px 6px;
	border-radius: 10px;
	background: rgba(61, 155, 229, 0.12);
	color: #3d9be5;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}
.ChatIaClienteAudioPlayerVelocidade:hover { background: rgba(61, 155, 229, 0.22); }
.ChatIaClienteAudioPlayerTempo {
	flex: 0 0 auto;
	min-width: 30px;
	color: #6c7a89;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
/* Modificador da PREVIA (chip pendente, antes de enviar) -- ver estiloPrevia em montarPlayerAudio. Ele nao
   e so cor: o bloco de controles (play, tempo, barra, som, ⋮) vira um PAINEL proprio, arredondado e num
   tom mais escuro que o chip em volta, exatamente como no Zapware. La esse painel e o player NATIVO do
   Chrome (<audio controls>), que o navegador desenha como uma pilula cinza clara -- e dai que vem o visual
   de "faixa separada dentro da barra". Como aqui o player e nosso (o nativo nao aceita estilo), o painel
   precisa ser desenhado a mao com estas regras.
   O modificador tem 2 classes no seletor, entao ganha das regras base (1 classe) sem depender de ordem no
   arquivo -- e por ser um modificador exclusivo da previa, nada disso alcanca o player da bolha ja enviada.
   O esticar pela largura NAO fica aqui: ja vem de .ChatIaClienteAudioPlayer.ChatIaClienteAnexoAudioPlayer
   (mais acima), que e a regra do chip pendente -- aqui so a aparencia do painel. */
.ChatIaClienteAudioPlayer-previa {
	padding: 3px 10px;
	border-radius: 999px;
	background: #f0f5f3;
}
/* Verde/teal do Zapware (--primary) nos controles da previa, no lugar do azul padrao do WebSac. */
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerBotao,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerVelocidade,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerVolume {
	background: rgba(17, 156, 114, 0.12);
	color: #119c72;
}
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerBotao:hover,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerVelocidade:hover,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerVolume:hover {
	background: rgba(17, 156, 114, 0.22);
}
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerTrilho {
	background: rgba(17, 156, 114, 0.18);
}
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerPreenchido,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerBolinha {
	background: #119c72;
}
/* A bolinha da barra tem um anel branco pra se destacar do trilho; dentro do painel da previa esse anel
   precisa ser da cor do painel, senao aparece um circulo branco "furando" o fundo cinza esverdeado. */
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerBolinha {
	box-shadow: 0 0 0 2px #f0f5f3;
}
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerTempo {
	color: #607672;
}
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerBotao:focus-visible,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerVelocidade:focus-visible,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerVolume:focus-visible,
.ChatIaClienteAudioPlayer-previa .ChatIaClienteAudioPlayerBarra:focus-visible {
	outline-color: #119c72;
}

/* Modificador pra quando o player esta em cima de fundo escuro (bolha azul do usuario, ChatIaClienteBolha-
   usuario no ChatIaCliente e chat-ia-bolha-usuario no Gerador de Relatorios por IA -- por isso o JS passa
   este modificador pronto em vez do CSS depender do nome da bolha de cada tela). Mesmas cores translucidas
   brancas que o chip generico de anexo ja usa (.ChatIaClienteAnexoBolha) pra combinar com o fundo azul. */
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerBotao,
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerVelocidade {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerBotao:hover,
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerVelocidade:hover {
	background: rgba(255, 255, 255, 0.34);
}
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerTrilho {
	background: rgba(255, 255, 255, 0.3);
}
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerPreenchido,
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerBolinha {
	background: #ffffff;
}
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerBolinha {
	box-shadow: 0 0 0 2px rgba(61, 155, 229, 0.6);
}
.ChatIaClienteAudioPlayer-escuro .ChatIaClienteAudioPlayerTempo {
	color: rgba(255, 255, 255, 0.85);
}

/* O empilhamento do dialog sobre o chat NAO tem regra de z-index aqui: com o chat sendo um Modal do v3,
   quem cuida disso e o fixModal (v3/javascript/component/Modal.js), que ja sobe o modal que abre por
   ultimo e o fundo dele. So a centralizacao vertical do dialog continua vindo do JS, com a classe
   modal-dialog-centered do proprio Bootstrap — assim o $.dialog das outras telas nao muda. */

/* Link de download do arquivo gerado pela IA (ex: planilha .xlsx) dentro da bolha.
   display flex (em vez de inline-flex) pra virar bloco: assim o margin-top gera
   de fato uma linha de espaco entre o ultimo paragrafo da resposta e o botao,
   em vez de ficar colado (inline nao empilha respiro vertical). */
.ChatIaClienteArquivoGerado {
	display: flex;
	width: fit-content;
	align-items: center;
	margin-top: 14px;
	padding: 6px 10px;
	border: 1px solid #2f80c4;
	border-radius: 12px;
	color: #2f80c4;
	cursor: pointer;
	font-size: 12px;
}
.ChatIaClienteArquivoGerado:hover { background: #eaf2fa; }

/* Indicador de atividade da IA: pontinhos + o que ela esta fazendo agora ("Consultando seus dados...").
   Fica ao lado do corpo da bolha, e nao dentro, porque o corpo e reescrito a cada pedaco de texto. */
.ChatIaClienteStatus {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	color: #8a939b;
	font-size: 12px;
	font-style: italic;
}

/* Indicador de "digitando" (tres bolinhas piscando). */
.ChatIaClienteDigitando i {
	display: inline-block;
	width: 6px; height: 6px;
	margin-right: 3px;
	border-radius: 50%;
	background: #9aa5b1;
	animation: chatiacliente-piscar 1.2s infinite ease-in-out;
}
.ChatIaClienteDigitando i:nth-child(2){ animation-delay: 0.2s; }
.ChatIaClienteDigitando i:nth-child(3){ animation-delay: 0.4s; }
@keyframes chatiacliente-piscar {
	0%, 80%, 100% { opacity: 0.3; }
	40% { opacity: 1; }
}

/* Contador vermelho de respostas nao lidas no botao do menu. */
.ChatIaClienteDot {
	min-width: 17px;
	height: 17px;
	padding: 2px 4px;
	border-radius: 50%;
	line-height: 13px;
}

/* Print de tela gerado pela IA, exibido dentro da propria bolha. Clicar abre a imagem em tamanho real
   numa aba nova (a URL e assinada e temporaria, so o proprio print). */
.ChatIaClientePrintLink {
	display: block;
	margin-top: 6px;
}
.ChatIaClientePrint {
	max-width: 100%;
	border: 1px solid #e2e6ea;
	border-radius: 8px;
	cursor: zoom-in;
}

/* Cartao da proposta de solicitação de suporte (ver ChatIaCliente.js, renderizarPropostaSuporte/
   executarAberturaSuporte). Fica dentro da bolha da IA, como um bloco destacado — sem botao: a UNICA
   confirmacao do fluxo ja aconteceu antes, na propria conversa, e o envio ja e disparado ao desenhar o
   cartao (o status abaixo mostra o resultado). */
.ChatIaClientePropostaSuporte {
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #2f80c4;
	border-radius: 8px;
	background: #f4f9fd;
}
.ChatIaClientePropostaSuporteTitulo {
	font-weight: 600;
	margin-bottom: 4px;
}
.ChatIaClientePropostaSuporteDescricao {
	font-size: 13px;
	color: #495057;
	margin-bottom: 8px;
}
.ChatIaClientePropostaSuporteStatus {
	margin-top: 8px;
	font-size: 12px;
}
.ChatIaClientePropostaSuporteAviso {
	margin-top: 4px;
	font-size: 12px;
}

/* Cartao de CONFIRMACAO de alteracao de dados (ver ChatIaCliente.js, renderizarAcaoEscrita). Diferente
   do cartao de proposta de suporte acima, este TEM botao e nada acontece ate o cliente clicar. Cor de
   alerta (ambar) de proposito: o visual precisa separar "estou te informando" de "estou pedindo sua
   autorizacao para mexer nos seus dados". */
.ChatIaClienteAcaoEscrita {
	margin-top: 8px;
	padding: 10px 12px;
	border: 1px solid #e0a800;
	border-radius: 8px;
	background: #fffaf0;
}
.ChatIaClienteAcaoEscritaTitulo {
	font-weight: 600;
	margin-bottom: 6px;
	color: #8a6100;
}
/* As quebras do resumo viram <br> no JS (mesmo tratamento do cartao de proposta), entao aqui basta o
   espacamento — o texto e exibido exatamente como foi gravado na trilha de auditoria. */
.ChatIaClienteAcaoEscritaResumo {
	font-size: 13px;
	color: #495057;
	margin-bottom: 10px;
}
.ChatIaClienteAcaoEscritaBotoes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ChatIaClienteAcaoEscritaStatus {
	margin-top: 8px;
	font-size: 12px;
}

/* Botoes de escolha "Instale pra mim"/"Me ensine" antes de trocar o certificado digital A1 (ver
   ChatIaCliente.js, talvezRenderizarEscolhaCertificado) -- tarefa "Faca para mim, me ensina". Cor
   neutra de proposito: ainda nao e um pedido de autorizacao (isso so acontece se o cliente escolher
   "Instale pra mim", que ai sim dispara o cartao ambar de confirmacao acima). */
.ChatIaClienteEscolhaCertificado {
	margin-top: 8px;
}
.ChatIaClienteEscolhaCertificadoBotoes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}