/* Barra lateral enxuta (pedido do Bruno em 2026-09-24): atalhos viram uma fileira de ícones,
   as seções do sistema ficam num só item recolhido e a lista de conversas ganha o espaço todo. */
:root { --painel-l: 340px; }

/* Atalhos: fileira de ícones do mesmo tamanho, com o nome no title. O "+" (novo tópico) é a ação principal. */
.painel-topo { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; padding: 10px 8px 8px; border-bottom: 1px solid var(--linha); }
.painel-topo .ir-inicio, .painel-topo .nova-conversa { position: relative; display: grid; place-items: center; width: 100%; height: 40px; gap: 0; padding: 0; border: 1px solid transparent; border-radius: 10px; font-size: 0; box-shadow: none; transform: none; }
.painel-topo .ir-inicio > span:not(.badge) { display: none; }
.painel-topo .ir-inicio svg { width: 18px; height: 18px; }
.painel-topo .ir-inicio:hover, .painel-topo .ir-inicio:focus-visible { background: var(--bg-elev-2); color: var(--texto); }
.painel-topo .ir-inicio.ativo { background: var(--bg-elev-2); color: var(--texto); box-shadow: none; }
.painel-topo .nova-conversa { order: -1; background: var(--acento); color: var(--bg); }
.painel-topo .nova-conversa:hover, .painel-topo .nova-conversa:focus-visible { background: var(--acento); border-color: transparent; opacity: 0.85; transform: none; }
.painel-topo .nova-conversa .nova-conversa-mais { width: auto; height: auto; background: none; color: inherit; font-size: 22px; font-weight: 700; line-height: 1; }
/* Contador: pequeno, no canto do próprio ícone, sem empurrar nada */
.painel-topo .ir-inicio .badge, .painel-topo .ir-inicio .badge.ativo { position: absolute; top: -5px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-shadow: 0 0 0 2px var(--bg-elev); border: 0; border-radius: 999px; background: var(--estado-esperando); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.painel-topo .ir-inicio .badge:empty { display: none; }

/* Conversas: ocupam o espaço que sobrar */
.painel-conversas { padding-top: 8px; }
.lista-conversas { gap: 1px; }
.item-conversa.fixo { margin-bottom: 0; }
.conversa { padding: 6px 8px 6px 6px; }

/* Sistema: um único item recolhido no rodapé; aberto, rola por dentro */
.painel-secoes { max-height: none; padding: 0; overflow: visible; }
.secao-sistema > .secao-sistema-titulo { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--texto-3); font-size: var(--t-12); font-weight: 600; cursor: pointer; list-style: none; user-select: none; }
.secao-sistema > .secao-sistema-titulo::-webkit-details-marker { display: none; }
.secao-sistema > .secao-sistema-titulo::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); transition: transform var(--dur) var(--ease); }
.secao-sistema[open] > .secao-sistema-titulo::before { transform: rotate(45deg); }
.secao-sistema > .secao-sistema-titulo:hover { color: var(--texto); }
.secao-sistema[open] { max-height: 45vh; overflow-y: auto; padding: 0 8px 8px; scrollbar-width: thin; }

/* Chat de um agente só: uma linha (título, estado curto e hora); sem estado, some a segunda linha */
.conversa-resumo:empty { display: none; }
.item-conversa .conversa { grid-template-areas: "ponto titulo tempo" "ponto resumo resumo"; }
.item-conversa.fixo .conversa-titulo::before { content: none; }

/* Agente com estado: título, chip e hora na mesma linha */
.item-conversa .conversa:has(.conversa-resumo:not(:empty) > .conversa-estado:only-child) { grid-template-columns: 14px minmax(0, 1fr) auto auto; grid-template-areas: "ponto titulo resumo tempo"; }
.conversa-resumo > .conversa-estado:only-child { margin-top: 0; }
.item-conversa .conversa:has(.conversa-resumo > .conversa-estado:only-child) .conversa-resumo { margin: 0 6px 0 0; }

/* Celular: nada da tela inicial passa da largura */
.inicio { overflow-x: hidden; }
.bloco, .inicio-painel, .inicio-duas, .lista-esperando, .lista-equipe { min-width: 0; }
.esperando { grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; }

/* Na lista, o chip já mostra o estado; a borda lateral fazia um "colchete" e desalinhava os nomes */
.lista-conversas .item-conversa.pergunta, .lista-conversas .item-conversa.aprovacao, .lista-conversas .item-conversa.concluido { box-shadow: none; }
/* ".concluido" também é a classe da lista "Concluído há pouco" do Início (padding próprio); na lista de conversas, anula */
.lista-conversas .item-conversa.concluido { padding: 0; row-gap: 0; grid-template-columns: 1fr auto; }
.item-conversa.ativa { box-shadow: inset 2px 0 0 var(--texto); }

/* A coluna do chat não pode crescer além da tela por causa de texto sem quebra */
.chat, .inicio { min-width: 0; }
.app { grid-template-columns: var(--painel-l) minmax(0, 1fr); }
@media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } }
.chat { grid-template-columns: minmax(0, 1fr); }
.lista-esperando { grid-template-columns: minmax(0, 1fr); }

/* Avatar dos agentes (app/web/avatares.js): ícone da função sobre a cor dele */
.avatar { flex: none; display: inline-grid; place-items: center; width: var(--tam-avatar, 28px); height: var(--tam-avatar, 28px); border-radius: calc(var(--tam-avatar, 28px) * 0.3); background: color-mix(in srgb, var(--cor-avatar) 20%, var(--bg-elev-2)); color: var(--cor-avatar); font-size: calc(var(--tam-avatar, 28px) * 0.45); font-weight: 700; line-height: 1; vertical-align: middle; }
.avatar svg { width: 60%; height: 60%; }
.avatar.com-retrato { overflow: hidden; background: var(--cor-avatar); border-radius: 50%; }
.avatar.com-retrato img { width: 118%; height: 118%; margin-top: 12%; object-fit: cover; display: block; }
.conversa-titulo { display: inline-flex; align-items: center; gap: 8px; }
.conversa-titulo .avatar { margin-right: 2px; }
.msg .quem .avatar { margin-right: 2px; }
.msg.bruno .quem .avatar { display: none; }
.agente-card .agente-avatar.avatar { grid-area: avatar; align-self: start; }

/* Faixa de decisões do chat entre as mensagens e a barra de agentes */
.chat { grid-template-rows: 1fr auto auto auto; }
.decisoes-topico { grid-row: 2; }
.barra-agentes { grid-row: 3; }
.composer { grid-row: 4; }

/* Nome do agente (Carlos) com a função ao lado, menor */
.nome-funcao { margin-left: 6px; color: var(--texto-3); font-size: var(--t-12); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Lupa: busca em todas as conversas (busca.js) */
.dialogo-busca { width: min(680px, 94vw); max-height: 80vh; padding: 0; margin-top: 10vh; border: 1px solid var(--linha); border-radius: 14px; background: var(--bg-elev); color: var(--texto); }
.dialogo-busca::backdrop { background: rgba(0,0,0,.55); }
.busca-caixa { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: 80vh; }
.busca-campo { margin: 14px 14px 6px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg); color: var(--texto); font: inherit; font-size: var(--t-16, 16px); }
.busca-campo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.busca-status { margin: 0 16px 8px; color: var(--texto-3); font-size: var(--t-12); }
.busca-resultados { list-style: none; margin: 0; padding: 0 8px 10px; overflow-y: auto; }
.busca-item { display: grid; gap: 4px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none; color: var(--texto-2); font: inherit; text-align: left; cursor: pointer; }
.busca-item:hover, .busca-item:focus-visible { background: var(--bg-elev-2); outline: none; }
.busca-topo { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-12); }
.busca-topo strong { color: var(--texto); font-size: var(--t-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-autor { color: var(--texto-3); }
.busca-tempo { margin-left: auto; color: var(--texto-3); white-space: nowrap; }
.busca-trecho { font-size: var(--t-14); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.busca-trecho mark { background: color-mix(in srgb, var(--estado-esperando) 35%, transparent); color: var(--texto); border-radius: 3px; padding: 0 1px; }
.msg.msg-encontrada { outline: 2px solid var(--estado-esperando); outline-offset: 6px; border-radius: 8px; transition: outline-color 1s; }

/* Data e hora de cada mensagem no chat */
.msg .quem-hora { color: var(--texto-3); font-size: var(--t-12); font-weight: 400; font-variant-numeric: tabular-nums; }
.msg.agente .quem-hora { margin-left: auto; }
.msg.bruno .quem-hora { order: -1; margin-right: 4px; }

/* Login por Face ID / biometria */
.login-caixa .botao-passkey { min-height: 48px; border: 0; border-radius: var(--raio-s); background: var(--acento); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; }
.login-caixa .botao-passkey:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* Nenhuma mensagem passa da largura da coluna (no computador, bloco de código ou linha longa esticava o chat
   para o lado; pedido do Bruno em 2026-09-27). Tabela e código rolam por dentro; texto quebra linha. */
.mensagens { overflow-x: hidden; }
.msg { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.msg .corpo, .msg .quem { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.msg.agente .corpo { max-width: min(72ch, 100%); }
.corpo pre, .corpo table { max-width: 100%; }
.corpo a { overflow-wrap: anywhere; }
.atividade { max-width: min(760px, 100%); margin-inline: auto; }
.atividade-lista span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Botão "Me explique melhor" nos cartões de decisão */
.decisao-botoes .decisao-explicar { background: transparent; border: 1px dashed var(--linha); color: var(--texto-2); font-weight: 500; }
.decisao-botoes .decisao-explicar:hover:not(:disabled) { border-color: var(--texto-2); color: var(--texto); }

/* Caixa de texto em linha flexível: aceita qualquer número de botões (＋, 📁, microfone, parar, enviar)
   sem quebrar a arrumação; o campo de texto ocupa o espaço que sobrar. */
.composer, .composer:has(.parar:not([hidden])) { display: flex; align-items: flex-end; grid-template-columns: none; }
.composer > * { flex: none; }
.composer textarea { flex: 1 1 auto; min-width: 0; }
.composer .zona-arquivo { position: absolute; }
/* No celular não dá para escolher pasta (o iPhone não permite); o botão de pasta some */
@media (max-width: 900px) { .composer label.anexo:has(#campo-pasta) { display: none; } }
.decisao-botoes .decisao-pela-nota { background: transparent; border: 1px dashed var(--linha); color: var(--texto-2); font-weight: 500; }
.decisao-botoes .decisao-pela-nota:hover:not(:disabled) { border-color: var(--estado-esperando); color: var(--texto); }

/* Leitura mais acima com o agente trabalhando: sem rolagem animada (ela atrapalhava saber se o Bruno está no
   fim) e botão para voltar ao fim quando chega mensagem nova. */
.mensagens { scroll-behavior: auto; }
.chat { position: relative; }
.ir-para-o-fim { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 5; padding: 8px 14px; border: 1px solid var(--linha); border-radius: 999px; background: var(--bg-elev-2); color: var(--texto); font: inherit; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); cursor: pointer; }
.ir-para-o-fim:hover { border-color: var(--acento); }

/* Barra lateral: nome e função inteiros (sem reticências) e botão 📌 para fixar no topo (2026-09-29) */
.item-conversa .conversa-titulo { display: flex; align-items: center; gap: 8px; white-space: normal; overflow: visible; }
.nomes-agente { display: grid; min-width: 0; }
.nome-agente { color: var(--texto-2); font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.item-conversa.ativa .nome-agente, .item-conversa.ocupada .nome-agente { color: var(--texto); }
.nomes-agente .nome-funcao { margin-left: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; }
.item-conversa.fixo .conversa:has(.conversa-resumo:not(:empty) > .conversa-estado:only-child) { grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "ponto titulo tempo" "ponto resumo resumo"; }
.item-conversa.fixo .conversa-resumo { padding-left: 38px; margin: 2px 0 0; }
.item-conversa .conversa { padding-right: 30px; }
.item-conversa:not(.fixo) .conversa { padding-right: 58px; }
.item-conversa .fixar { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--texto-3); line-height: 1; opacity: 0; cursor: pointer; transition: opacity var(--dur), background var(--dur), color var(--dur); }
.item-conversa:not(.fixo) .fixar { right: 32px; }
.item-conversa:not(.fixo) .apagar { top: 50%; transform: translateY(-50%); }
.item-conversa:hover .fixar, .item-conversa:focus-within .fixar { opacity: .7; }
.item-conversa .fixar:hover, .item-conversa .fixar:focus-visible { opacity: 1; background: var(--bg-elev); color: var(--texto); outline: none; }
.item-conversa .fixar.ligado { color: var(--acento); }
.item-conversa:hover .fixar.ligado, .item-conversa:focus-within .fixar.ligado { opacity: 1; }
@media (hover: none) {
  .item-conversa .fixar { opacity: .4; width: 32px; height: 32px; }
  .item-conversa .fixar.ligado { opacity: 1; }
  .item-conversa:not(.fixo) .fixar { right: 38px; }
  .item-conversa .conversa { padding-right: 38px; }
  .item-conversa:not(.fixo) .conversa { padding-right: 74px; }
}
.bolinha-nao-lida { display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; background: var(--alerta); vertical-align: 1px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--alerta) 18%, transparent); }

/* Responder uma mensagem específica, como no WhatsApp (2026-09-29) */
.msg .quem { position: relative; }
.responder-msg { margin-left: 6px; width: 24px; height: 24px; display: inline-grid; place-items: center; vertical-align: middle; border: 0; border-radius: 6px; background: transparent; color: var(--texto-3); opacity: 0; cursor: pointer; transition: opacity var(--dur), background var(--dur), color var(--dur); }
.msg:hover .responder-msg, .responder-msg:focus-visible { opacity: 1; }
.responder-msg:hover, .responder-msg:focus-visible { background: var(--bg-elev-2); color: var(--texto); outline: none; }
@media (hover: none) { .responder-msg { opacity: .55; width: 30px; height: 30px; } }
/* Responder um item de lista ou linha de tabela (2026-10-24) */
.responder-item { margin-left: 6px; width: 22px; height: 22px; display: inline-grid; place-items: center; vertical-align: middle; border: 0; border-radius: 6px; background: transparent; color: var(--texto-3); opacity: .35; cursor: pointer; transition: opacity var(--dur), background var(--dur), color var(--dur); }
li:hover > .responder-item, tr:hover .responder-item, .responder-item:focus-visible { opacity: 1; }
.responder-item:hover, .responder-item:focus-visible { background: var(--bg-elev-2); color: var(--texto); outline: none; }
@media (hover: none) { .responder-item { opacity: .6; width: 28px; height: 28px; } }
.citacao { display: grid; gap: 2px; width: 100%; margin: 4px 0 6px; padding: 6px 10px; border: 0; border-left: 3px solid var(--acento); border-radius: 8px; background: color-mix(in srgb, var(--acento) 8%, var(--bg-elev)); color: var(--texto-2); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer; }
.citacao b { color: var(--acento); font-size: 12px; }
.citacao span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.resposta-citada { display: flex; align-items: flex-start; gap: 8px; width: min(760px, calc(100% - 40px)); box-sizing: border-box; margin: 0 auto 6px; padding: 8px 10px; border-left: 3px solid var(--acento); border-radius: 10px; background: var(--bg-elev); }
.resposta-citada[hidden] { display: none; }
.resposta-texto { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; }
.resposta-texto b { color: var(--acento); font-size: 12px; }
.resposta-texto span { color: var(--texto-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.resposta-cancelar { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-3); font-size: 18px; cursor: pointer; }
.resposta-cancelar:hover { background: var(--bg-elev-2); color: var(--texto); }
.msg.destacada { animation: destacar 1.6s var(--ease); }
@keyframes destacar { 0%, 60% { background: color-mix(in srgb, var(--acento) 14%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .msg.destacada { animation: none; outline: 2px solid var(--acento); } }