/* 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(13, 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%; }
.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 span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }