/* Copia fiel de D:\Anti\JuliaAcompanhamento\visor\templates\_estilo_ajustes.css (visor da Julia, commit 2eef5ba). Nao editar aqui: ajustes do painel ficam em painel.css. */
/* ---------- Ajustes do serviço sobre o CSS do designer ---------- */
/* Texto dos balões preserva as quebras de linha que a Júlia enviou */
.bolha > span.txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha.falhou { outline: 1.5px dashed var(--vermelho-borda); }
.nao-enviada { color: var(--vermelho); font-weight: 600; }
a.filtro { text-decoration: none; }
.busca-form { margin: 0; }
.vazio-lista { padding: 28px 16px; color: var(--texto-2); text-align: center; font-size: 13.5px; }
.chat .fim { height: 1px; flex-shrink: 0; }
.atualizado { font-size: 11px; color: var(--texto-3); text-align: center; padding: 4px 0 8px; }
.julia-audio { min-width: 220px; }

/* Celular: a conversa abre por cima quando uma foi escolhida (sem script: decidido no servidor) */
@media (max-width: 760px) {
  .app > .conversa { display: none; }
  .app.com-conversa > .lateral { display: none; }
  .app.com-conversa > .conversa { display: flex; position: fixed; inset: 0; z-index: 10; }
}

/* Tela de entrada */
.entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background-color: var(--chat); background-image: var(--padrao); }
.entrada form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px 24px;
  border-radius: 14px; border: 1px solid var(--cromo); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.entrada .logo { justify-content: center; margin-bottom: 4px; }
.entrada label { font-size: 12px; font-weight: 600; color: var(--texto-2); display: flex; flex-direction: column; gap: 6px; }
.entrada input { height: 42px; border: 1px solid var(--cromo); border-radius: 8px; padding: 0 12px; font: inherit; background: #FFFFFF; color: var(--texto); }
.entrada input:focus-visible, .entrada button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.entrada button { height: 42px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; color: #FFFFFF; cursor: pointer;
  background: linear-gradient(140deg, #4DA3FF 0%, #1B5FB8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.entrada .erro { margin: 0; font-size: 13px; color: var(--vermelho); text-align: center; }

@media (max-width: 760px) { .contato-nome { flex-wrap: wrap; gap: 4px 10px; } .tel { line-height: 1.5; } }
/* Mensagem automática da Júlia mostra a etiqueta mesmo em sequência de balões dela */
.grupo.julia + .grupo.julia .rotulo.com-etiqueta { display: inline-flex; margin-top: 8px; }
/* Mídia real: foto, PDF e áudio tocável */
.bolha.foto { flex-direction: column; align-items: stretch; gap: 6px; padding: 5px 5px 6px; }
.anexo-foto { display: block; width: 260px; max-width: 100%; max-height: 340px; object-fit: cover; border-radius: 12px; background: var(--cinza-fundo); }
.foto-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 8px; font-size: 12.5px; color: var(--texto-2); }
.bolha.audio .tocador { height: 38px; width: 280px; max-width: 100%; }
.anexo-txt a { color: var(--conversa-texto); font-weight: 600; }
/* Rubens (19/09/2026): a conversa fica melhor como em 90%% de zoom do navegador. So no computador. */
@media (min-width: 761px) { .chat { zoom: .9; } }
/* Marcos e follow-ups com o icone da Automa, no centro (19/09/2026) */
.ic-automa { display: inline-flex; align-items: center; }
.ic-automa svg { width: 19px; height: 19px; }
.rotulo.automatico { color: var(--azul-texto); gap: 6px; }
.rotulo.julia-rotulo { gap: 0; color: var(--azul-texto); align-items: center; white-space: pre; }
.rotulo.julia-rotulo .ic-automa { margin-right: -2px; position: relative; top: 3px; }
.marca-automa { font-family: "Space Grotesk", "Segoe UI", Helvetica, sans-serif; font-weight: 700; letter-spacing: -.03em; text-transform: lowercase; }
/* Logo do topo: icone colado ao 'automa' e o chip 'ai' nivelado com o texto (Rubens, 19/09/2026) */
.lateral-topo .logo, .entrada .logo { gap: 0; align-items: center; }
.lateral-topo .logo svg, .entrada .logo svg { margin-right: -3px; }
.lateral-topo .logo-ai, .entrada .logo-ai { margin-left: 8px; position: relative; top: 3px; line-height: 1; }
/* ===== Cabeçalho A3, placas iguais (Rubens, 19/09/2026) ===== */
.cab-a3 { padding: 14px 24px 12px; gap: 12px; }
.cab-a3 .contato-txt { gap: 7px; }
.cab-a3 .contato-nome b { font-size: 16px; font-weight: 650; }
.cab-a3 .avatar { width: 44px; height: 44px; font-size: 15px; }
.contatos-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; color: var(--texto); }
.contatos-linha > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.contatos-linha svg { color: var(--azul); }
.contatos-linha .canal svg { color: var(--verde); }
.contatos-linha .sep { width: 1px; height: 14px; background: var(--cromo); }
.contatos-linha small { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--texto-2); text-transform: uppercase; }
.mono { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 12.5px; letter-spacing: .02em; }
.placas { display: flex; gap: 8px; flex-shrink: 0; }
.placa { min-width: 128px; padding: 7px 12px 8px; border-radius: 10px; border: 1px solid var(--cromo);
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FB 100%); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(16,24,34,.06);
  display: flex; flex-direction: column; gap: 2px; }
.placa b { font-size: 14.5px; font-weight: 600; white-space: nowrap; color: var(--texto); }
.placa b small { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.rot-placa { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-2); }
.fases { position: relative; padding-top: 22px; }
.fases-barra { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.fases-barra i { height: 7px; border-radius: 4px; background: #D6DEE6; }
.fases-barra i.feita { background: linear-gradient(90deg, #8FB6E3, #6EA3DD); }
.fases-barra i.atual { background: linear-gradient(90deg, #4DA3FF, #1B5FB8); box-shadow: 0 0 0 3px rgba(77,163,255,.18); }
.fases-barra.paga i.feita, .fases-barra.paga i.atual { background: linear-gradient(90deg, #9FD5BD, #008069); box-shadow: none; }
.fases-agora { position: absolute; top: 0; width: calc(10% - 4px); display: flex; justify-content: center; }
.fases-agora span { font-size: 10.5px; font-weight: 700; color: #FFFFFF; background: var(--azul); border-radius: 5px; padding: 2px 7px; white-space: nowrap; position: relative; }
.fases-agora span::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: var(--azul); }
.fases-agora span.verde { background: var(--verde); } .fases-agora span.verde::after { border-top-color: var(--verde); }
.fases-agora span.vermelho { background: var(--vermelho); } .fases-agora span.vermelho::after { border-top-color: var(--vermelho); }
.fases-agora span.ambar { background: var(--ambar); } .fases-agora span.ambar::after { border-top-color: var(--ambar); }
.fases-rodape { margin-top: 6px; font-size: 11.5px; color: var(--texto-2); }
.fases-rodape b { color: var(--azul); }
@media (max-width: 1100px) { .cab-a3 .cab-l1 { flex-direction: column; align-items: stretch; } .placas { flex-wrap: wrap; } }
@media (max-width: 760px) { .placa { min-width: 0; flex: 1 1 30%; } .placa b { font-size: 13px; white-space: normal; } .fases-agora span { font-size: 9.5px; } }
@media (max-width: 760px) { .contatos-linha .sep { display: none; } .contatos-linha { flex-direction: column; align-items: flex-start; gap: 3px; } }
/* ===== Lista: anel da janela de 24 h em volta do avatar (opcao 2, Rubens 19/09/2026) ===== */
.item-l3 { gap: 7px; }
.mini { display: inline-grid; grid-template-columns: repeat(10, 5px); gap: 2px; margin-left: 2px; }
.mini i { height: 4px; border-radius: 2px; background: #D6DEE6; }
.mini i.f { background: #8FB6E3; } .mini i.a { background: var(--azul); }
.janela { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.janela.ok { color: var(--verde); } .janela.fim { color: var(--ambar); } .janela.exp { color: var(--texto-3); font-weight: 500; }
.item-l1 time.recente { color: var(--azul-texto); font-weight: 700; }
.av-anel { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.av-anel svg { position: absolute; inset: 0; width: 56px; height: 56px; }
.av-anel .avatar { width: 44px; height: 44px; }
.item { padding-left: 8px; }
.item.viva .avatar { color: #FFFFFF; border-color: #1B5FB8; background: linear-gradient(160deg, #6CB4FF 0%, #1B5FB8 100%); }
.item.viva .chip:not(.verde):not(.ambar):not(.vermelho):not(.rosa) { color: var(--azul-texto); background: var(--azul-suave); }
.item.apagada .avatar { filter: grayscale(1); opacity: .8; }
.item.apagada .item-l1 b, .item.apagada .item-l2 { color: var(--texto-2); }
.item.apagada .mini { opacity: .55; }
.item.respondendo .avatar { animation: pulso-av 1.6s infinite ease-out; }
@keyframes pulso-av { 0% { box-shadow: 0 0 0 0 rgba(77,163,255,.55); } 100% { box-shadow: 0 0 0 8px rgba(77,163,255,0); } }
@media (prefers-reduced-motion: reduce) { .item.respondendo .avatar { animation: none; } }
/* ===== Logo OFICIAL em imagem (Rubens, 19/09/2026: o logo não pode ser alterado) ===== */
.logo-oficial { display: block; height: 34px; width: auto; }
.entrada .logo-oficial { height: 38px; margin: 0 auto; }
.ic-oficial { height: 15px; width: auto; display: inline-block; }
.palavra-oficial { height: 11px; width: auto; display: inline-block; margin-left: 4px; position: relative; top: 1px; }
.rotulo.julia-rotulo .ic-oficial { position: relative; top: 1px; }
/* Fundo da conversa sem o padrão do WhatsApp (Rubens, 19/09/2026) */
.chat, .conversa.vazia { background-color: #FFFFFF !important; background-image: url("/fundo.jpg") !important;
  background-size: 540px auto !important; background-repeat: repeat !important; background-attachment: local; }
/* no fundo branco, o balão do cliente (branco) ganha contorno leve para não sumir */


/* ===== WhatsApp fiel (Rubens, 19/09/2026 — alteração final): fundo, fonte, balões e player de voz ===== */
.chat { font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
  zoom: 1 !important; padding: 14px 6% 22px; gap: 2px; color: #111B21;
  background-color: #F5F1EB !important; background-image: url("/fundo.jpg") !important; background-size: 620px auto !important; }
.conversa.vazia { background-color: #F5F1EB !important; background-image: url("/fundo.jpg") !important; background-size: 620px auto !important; }
.grupo { max-width: 65%; gap: 2px; margin-top: 10px; }
.bolha { font-size: 14.2px; line-height: 19px; padding: 6px 7px 8px 9px; border-radius: 7.5px; gap: 8px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13); border: 0 !important; }
.grupo.cliente .bolha, .grupo.cliente .bolha:first-of-type::before { background: #FFFFFF; }
.grupo.julia .bolha, .grupo.julia .bolha:first-of-type::before { background: #D9FDD3; }
.bolha time { font-size: 11px; line-height: 15px; color: #667781; margin-bottom: -5px; }
.rotulo { font-size: 12.5px; padding: 0 4px 1px; }
.dia { font-size: 12.5px; font-weight: 400; color: #54656F; background: #FFFFFF; padding: 5px 12px 6px; border-radius: 7.5px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important; margin: 12px 0 8px; }
.marco { font-size: 12.5px; font-weight: 500; color: #54656F; background: #FFFFFF; border-radius: 7.5px; padding: 5px 12px 6px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13) !important; }
.respostas span { border-radius: 7.5px; font-size: 14px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.bolha.foto { padding: 3px; }
.anexo-foto { border-radius: 6px; }

/* player de voz */
.bolha.wa-audio { display: grid; column-gap: 10px; row-gap: 0; align-items: center; width: 336px; max-width: 100%;
  padding: 7px 8px 5px 9px; }
.bolha.wa-audio.cliente { grid-template-columns: 34px minmax(0, 1fr) 55px; grid-template-areas: "play trilho av" "rod rod av"; }
.bolha.wa-audio.julia { grid-template-columns: 55px 34px minmax(0, 1fr); grid-template-areas: "av play trilho" "av rod rod"; }
.wa-av { grid-area: av; position: relative; width: 55px; height: 55px; }
.wa-av img, .wa-ini { width: 55px; height: 55px; border-radius: 50%; display: block; object-fit: cover; }
.wa-ini { display: grid; place-items: center; background: #DFE5E7; color: #54656F; font-weight: 600; font-size: 18px; }
.wa-mic { position: absolute; bottom: -1px; width: 19px; height: 19px; color: #21C063; filter: drop-shadow(0 0 1.5px #FFFFFF); }
.bolha.wa-audio.cliente .wa-mic { left: -4px; } .bolha.wa-audio.julia .wa-mic { right: -4px; }
.wa-mic svg { width: 19px; height: 19px; }
.bolha.wa-audio.ouvido .wa-mic, .bolha.wa-audio.julia .wa-mic { color: #53BDEB; }
.wa-play { grid-area: play; width: 34px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; color: #8696A0;
  display: grid; place-items: center; }
.wa-play:disabled { cursor: default; opacity: .45; }
.wa-play svg { width: 30px; height: 30px; }
.wa-play .ic-pausa, .bolha.wa-audio.tocando .wa-play .ic-play { display: none; }
.bolha.wa-audio.tocando .wa-play .ic-pausa { display: block; }
.wa-trilho { grid-area: trilho; position: relative; height: 28px; display: flex; align-items: center; cursor: pointer; }
.wa-barras { display: flex; align-items: center; gap: 2px; width: 100%; height: 28px; }
.wa-barras i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: #C4CBCF; }
.bolha.wa-audio.julia .wa-barras i { background: #B3D3AE; }
.wa-barras i.on { background: #8696A0 !important; }
.bolha.wa-audio.julia .wa-barras i.on { background: #5A8F57 !important; }
.wa-bola { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #21C063; pointer-events: none; }
.bolha.wa-audio.julia .wa-bola { background: #53BDEB; }
.wa-rodape { grid-area: rod; display: flex; justify-content: space-between; align-items: center; margin-top: -2px; }
.wa-dur { font-size: 11px; color: #667781; }
.bolha.wa-audio time { margin-bottom: 0; display: inline-flex; gap: 3px; align-items: center; }
@media (max-width: 760px) { .grupo { max-width: 86%; } .bolha.wa-audio { width: 280px; } }
/* Traço das letras mais cheio, como o WhatsApp renderiza (Rubens, 19/09/2026) */
.chat .bolha, .chat .respostas span, .chat .dia, .chat .marco { -webkit-text-stroke: .15px currentColor; }
.filtros { flex-wrap: wrap; gap: 5px; } .filtro { padding: 0 9px; }
/* ===== Aviso de sessão encerrada (atualização sem recarregar, 19/09/2026) ===== */
.aviso-sessao { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 10px; background: #1F2C34; color: #FFFFFF; font-size: 14px; line-height: 1.4;
  box-shadow: 0 6px 24px rgba(11,20,26,.25); }
/* ===== Celular: cabeçalho recolhido, só nome e ícone (Rubens, 19/09/2026) ===== */
@media (max-width: 760px) {
  .cab-a3 { gap: 0; padding-bottom: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cab-a3 .cab-l1, .cab-a3 .contato-txt { gap: 0; }
  .cab-a3 .avatar { width: 36px; height: 36px; font-size: 13px; }
  .cab-a3 .contato-nome b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
    position: relative; top: -3px; opacity: .45; transition: transform .25s ease; }
  .cab-a3.aberto .contato-nome b::after { transform: rotate(-135deg); top: 1px; }
  .cab-a3 .selo { display: none; }
  .cab-a3.aberto .selo { display: inline-flex; }
  .cab-a3 .contatos-linha, .cab-a3 .placas, .cab-a3 .fases, .cab-a3 .desfecho-linha {
    max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; padding-top: 0;
    transition: max-height .3s ease, opacity .2s ease, margin-top .3s ease, padding-top .3s ease; }
  .cab-a3.aberto .contatos-linha { max-height: 120px; opacity: 1; margin-top: 6px; }
  .cab-a3.aberto .placas { max-height: 200px; opacity: 1; margin-top: 12px; overflow: visible; }
  .cab-a3.aberto .fases { max-height: 120px; opacity: 1; margin-top: 12px; padding-top: 22px; overflow: visible; }
  .cab-a3.aberto .desfecho-linha { max-height: 120px; opacity: 1; margin-top: 12px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .cab-a3 .contatos-linha, .cab-a3 .placas, .cab-a3 .fases, .cab-a3 .desfecho-linha, .cab-a3 .contato-nome b::after { transition: none; }
}
/* ===== Botão de liberar o som (o Chrome só toca som depois de um clique na página) ===== */
.ativar-som { position: fixed; right: 20px; bottom: 20px; z-index: 60; border: 0; border-radius: 999px; cursor: pointer;
  padding: 12px 18px; background: #008069; color: #FFFFFF; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: 0 6px 20px rgba(11,20,26,.25); }
.ativar-som:focus-visible { outline: 3px solid #1B5FB8; outline-offset: 2px; }
@media (max-width: 760px) { .ativar-som { left: 16px; right: 16px; bottom: 16px; } }
/* botão de ajuda no topo da lista (tela principal) */
.lateral-topo { position: relative; }
.ajuda-link { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%; color: var(--azul-texto); background: #FFFFFF;
  border: 1px solid var(--cromo); text-decoration: none; }
.ajuda-link:hover { background: var(--azul-suave); }
.ajuda-link:focus-visible { outline: 3px solid var(--azul-brilho); outline-offset: 2px; }
/* ===== Zoom e janela baixa (22/09/2026): a tela nunca rola inteira e nada vaza do cartão da lista ===== */
html:has(body:not(.aj-corpo)), body:not(.aj-corpo) { height: 100%; overflow: hidden; }
.app { height: 100vh; height: 100dvh; min-height: 0; }
.lista { overflow-x: hidden; }
.item-corpo { container-type: inline-size; }
.item-l1, .item-l2, .item-l3 { min-width: 0; }
.item-l3 { flex-wrap: nowrap; overflow: hidden; }
.item-l3 .chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-l3 .status, .item-l3 .mini, .item-l3 .janela { flex: 0 0 auto; }
@container (max-width: 300px) { .item-l3 .mini { display: none; } }
@container (max-width: 210px) { .item-l3 .janela { font-size: 10.5px; } }