:root { font-family: system-ui, -apple-system, sans-serif; color: #18293b; background: #f2f5f9; font-size: 16px; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #145ca0; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, .botao { min-height: 44px; padding: .65rem 1rem; border: 1px solid #154c7d; border-radius: 6px; background: #154c7d; color: white; cursor: pointer; font-weight: 600; }
button:hover { background: #10395f; }
button.secundario { background: white; color: #154c7d; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #ca7710; outline-offset: 3px; }
input, select, textarea { min-height: 44px; width: 100%; padding: .55rem .65rem; color: #18293b; background: white; border: 1px solid #9cabbc; border-radius: 5px; }
textarea { resize: vertical; }
[hidden] { display: none !important; }
label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 600; }
.barra { background: #142c45; color: white; padding: 1.15rem 2rem; }
.barra > div { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.barra strong { font-size: 1.2rem; }
.barra button { min-height: 36px; padding: .4rem .75rem; margin-left: .25rem; }
.ambiente { font-size: .9rem; color: #d0e2f5; }
.estrutura { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 70px); }
aside { background: #fff; border-right: 1px solid #d7e0e9; padding: 1.5rem 1rem; }
nav { display: grid; gap: .35rem; }
nav a { padding: .75rem; border-radius: 5px; color: #31465d; text-decoration: none; }
nav a[aria-current="page"] { background: #e6eff9; color: #124b7d; font-weight: 700; box-shadow: inset 3px 0 #175c98; }
.futuro { display: grid; gap: .6rem; margin: 2rem .75rem; padding-top: 1.25rem; border-top: 1px solid #d7e0e9; color: #65758a; font-size: .9rem; }
.futuro small { font-size: .85rem; }
main { padding: 2rem; max-width: 1600px; width: 100%; margin: 0 auto; }
h1 { margin: 0 0 1.25rem; font-size: 1.7rem; line-height: 1.25; }
h2 { margin: 0 0 1rem; font-size: 1.15rem; }
p { margin: .5rem 0 1rem; }
.muted { color: #53667a; }
.cabecalho { display: flex; gap: 1rem; justify-content: space-between; align-items: start; flex-wrap: wrap; }
.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.metrica, .cartao { background: white; border: 1px solid #d7e0e9; border-radius: 8px; padding: 1.25rem; }
.metrica { border-top: 3px solid #2a668d; }
.metrica strong { display: block; font-size: 2rem; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.cartao { margin-bottom: 1.25rem; }
.filtros, .formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.tabela { overflow-x: auto; background: white; border: 1px solid #d7e0e9; border-radius: 7px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: #465c72; background: #edf2f7; font-weight: 600; }
td, th { padding: .8rem; border-bottom: 1px solid #e3e9ef; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fafd; }
.numero { white-space: nowrap; font-variant-numeric: tabular-nums; }
.identificador, code { font: .875rem ui-monospace, monospace; overflow-wrap: anywhere; }
.identificador { display: block; min-width: 9rem; max-width: 16rem; }
.status { display: inline-block; padding: .2rem .5rem; border-radius: 4px; font-size: .875rem; background: #e9eef4; color: #364d63; }
.status.paga { background: #dcefe5; color: #195537; }
.status.pendente { background: #fff0cb; color: #754f00; }
.status.revisao_necessaria { background: #fce5dc; color: #863e24; }
.status.aguardando_atendente { background: #fff0cb; color: #754f00; }
.status.em_atendimento { background: #dceeff; color: #124b7d; }
.status.finalizado { background: #dcefe5; color: #195537; }
.lista-conversas { display: grid; gap: .35rem; }
.conversa-item { display: grid; gap: .2rem; background: white; border: 1px solid #d7e0e9; border-radius: 8px; padding: .55rem .7rem; }
.conversa-item .acoes { margin-top: .25rem; }
.mensagens { display: flex; flex-direction: column; gap: .28rem; overflow-y: auto; padding: .4rem .65rem; }
.bolha { max-width: min(78%, 32rem); padding: .28rem .5rem; border-radius: 10px; overflow-wrap: anywhere; font-size: .875rem; }
.bolha.cliente { align-self: flex-start; background: #fff; }
.bolha.bot { align-self: flex-end; background: #e8eff8; box-shadow: inset 3px 0 #8aa0b5; }
.bolha.atendente { align-self: flex-end; background: #dceeff; }
.bolha small { display: block; color: #6b7d90; font-size: .7rem; font-weight: 400; margin-bottom: .15rem; }
.resposta-box { display: grid; gap: .4rem; margin-top: 0; }
.busca-clientes { display: flex; align-items: end; gap: .8rem; flex-wrap: wrap; }
.busca-clientes label { flex: 1; min-width: 240px; }
.clientes-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
/* min-width:0 + wrap no título: contrato_ref longo no detalhe/lista, sem overflow-x global. */
.clientes-lista .cartao { margin-bottom: 0; min-width: 0; }
.clientes-lista .cartao h2 { overflow-wrap: anywhere; }
.identidade-cliente .identidade-topo { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.identidade-cliente .identidade-topo h2 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.campo-copiavel { display: inline-flex; gap: .45rem; align-items: center; flex-wrap: wrap; max-width: 100%; }
.campo-copiavel button { min-height: 32px; padding: .2rem .55rem; font-size: .8rem; }
.operacoes-cards { display: none; }
.tabela-cards, .mensagens-rapidas-cards { display: none; }
[data-secao="solicitacoes-operacionais"] { min-width: 0; overflow-wrap: anywhere; }
.solicitacao-formulario { min-width: 0; }
.solicitacao-formulario form { margin-top: .75rem; min-width: 0; }
.solicitacoes-lista { display: grid; gap: 1rem; min-width: 0; }
.solicitacao-item { min-width: 0; border: 1px solid #d7e0e9; border-radius: 8px; padding: 1rem; overflow-wrap: anywhere; }
.solicitacao-item h3 { margin: 0 0 .75rem; font-size: 1rem; overflow-wrap: anywhere; }
.solicitacao-preparacao { margin: .75rem 0; display: grid; gap: .75rem; min-width: 0; }
.solicitacao-destino-resultados { display: grid; gap: .5rem; min-width: 0; }
.solicitacao-destino-resultados button { justify-self: start; max-width: 100%; overflow-wrap: anywhere; }
.status.solicitada { background: #fff0cb; color: #754f00; }
.status.em_andamento { background: #dceeff; color: #124b7d; }
.status.concluida { background: #dcefe5; color: #195537; }
.status.cancelada { background: #e9eef4; color: #364d63; }
.mensagem.aviso { background: #fff0cb; border-color: #e0c37a; color: #754f00; }
.aceite-contrato { display: flex; align-items: center; gap: .8rem; }
.aceite-contrato input { width: 24px; }
body.pagina-atendimento { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; }
body.pagina-atendimento .barra { flex-shrink: 0; }
body.pagina-atendimento .estrutura { flex: 1; height: auto; min-height: 0; }
body.pagina-atendimento main.main-atendimento {
  padding: 0; max-width: none; min-width: 0; min-height: 0; height: 100%; display: flex; overflow: hidden;
}
body.pagina-atendimento main.main-atendimento > .atendimento-layout { flex: 1; min-width: 0; min-height: 0; }
.atendimento-layout {
  display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 0;
  align-items: stretch; height: 100%; min-height: 0; overflow: hidden;
}
.atendimento-lista, .atendimento-aberta {
  min-width: 0; min-height: 0; border: 0; background: white; border-radius: 0; padding: .7rem .75rem;
  display: flex; flex-direction: column;
}
.atendimento-lista { border-right: 1px solid #d7e0e9; }
.atendimento-lista h2 { font-size: 1rem; margin: 0 0 .4rem; }
.atendimento-lista label { font-size: .8rem; }
.atendimento-lista .identidade-atendimento { margin: 0 0 .5rem; font-size: .8rem; overflow-wrap: anywhere; }
.atendimento-lista .lista-conversas { flex: 1; max-height: none; overflow-y: auto; padding-right: .15rem; min-height: 0; }
.atendimento-lista h3 { font-size: .8rem; margin: .45rem 0 .2rem; }
.atendimento-lista .conversa-item { text-decoration: none; color: inherit; padding: .5rem .6rem; font-size: .8rem; }
.conversa-item[aria-current] { border-color: #175c98; background: #edf5fd; }
.conversa-topo { display: flex; gap: .4rem; justify-content: space-between; flex-wrap: wrap; }
.conversa-topo small { font-size: .7rem; color: #53667a; }
.conversa-trecho { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nao-lidas { background: #185b45; color: white; border-radius: 12px; padding: .1rem .5rem; width: fit-content; font-size: .7rem; }
.conversa-cabecalho { flex-shrink: 0; position: relative; }
.conversa-cabecalho-identidade {
  display: flex; flex-wrap: wrap; gap: .15rem .45rem; align-items: center;
  min-width: 0; flex: 1 1 12rem;
}
.conversa-corpo .resposta-box { flex-shrink: 0; position: relative; }
.atendimento-aberta { overflow: hidden; min-height: 0; padding: 0; background: #e7edf3; position: relative; }
.conversa-vazia { margin: auto; text-align: center; padding: 1.5rem; color: #53667a; }
.conversa-cabecalho {
  display: flex; gap: .35rem .5rem; align-items: center; flex-wrap: wrap;
  padding: .3rem .6rem; background: white; border-bottom: 1px solid #d7e0e9;
}
.conversa-cabecalho-titulo { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; min-width: 0; flex: 1 1 8rem; }
.conversa-cabecalho-titulo strong { overflow-wrap: anywhere; word-break: normal; font-size: .9rem; min-width: 0; }
.conversa-cabecalho-estado { flex: 0 0 auto; }
.conversa-cabecalho-meta { margin: 0; font-size: .7rem; flex: 1 1 8rem; min-width: 0; overflow-wrap: break-word; }
.conversa-cabecalho-comandos { display: flex; gap: .35rem; align-items: center; flex: 0 0 auto; }
.conversa-cabecalho button, .voltar-conversas {
  min-height: 32px; padding: .25rem .55rem; font-size: .8rem;
}
.voltar-conversas { display: none; text-decoration: none; font-weight: 600; color: #154c7d; }
.acoes-wrap { position: relative; flex-shrink: 0; }
.atendimento-aberta .acoes-conversa {
  position: absolute; right: 0; top: calc(100% + .25rem); z-index: 8;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  gap: .35rem; margin: 0; padding: .55rem; min-width: min(18rem, calc(100vw - 1.5rem));
  max-height: min(50dvh, 22rem); overflow: auto; background: white;
  border: 1px solid #d7e0e9; border-radius: 8px;
}
.acoes-conversa label { font-size: .75rem; min-width: 0; width: 100%; }
.acoes-conversa button, .acoes-conversa select, .acoes-conversa input { min-height: 36px; }
.conversa-corpo { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; position: relative; }
.conversa-corpo > button { min-height: 32px; padding: .2rem .55rem; font-size: .75rem; margin: .25rem auto 0; align-self: center; }
.conversa-feedback {
  position: absolute; top: .35rem; left: .5rem; right: .5rem; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .25rem; pointer-events: none;
}
.conversa-feedback:empty { display: none; }
.conversa-feedback .mensagem {
  pointer-events: auto; margin: 0; padding: .28rem .55rem; font-size: .75rem; line-height: 1.35;
  width: fit-content; max-width: 100%;
}
.conversa-principal { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; min-width: 0; position: relative; }
.conversa-painel {
  width: min(300px, 36vw); overflow-y: auto; background: white; border-left: 1px solid #d7e0e9;
  padding: .7rem; min-width: 0;
}
.contexto-atendimento { background: #f5f8fb; padding: .7rem; border-radius: 8px; font-size: .8rem; margin: 0 0 .75rem; }
.contexto-atendimento dl { gap: .35rem .75rem; }
.contexto-atendimento dt { font-size: .7rem; }
.contexto-atendimento .botao { display: inline-block; margin-top: .6rem; text-decoration: none; min-height: 36px; padding: .4rem .7rem; }
.atendimento-aberta .mensagens { position: relative; flex: 1; height: auto; max-height: none; overflow-anchor: none; margin-top: 0; }
.bolha p { white-space: pre-wrap; margin: 0; }
.bolha-midia {
  display: grid;
  gap: .4rem;
  margin: .35rem 0;
  max-width: 100%;
}
.bolha-midia img,
.bolha-midia video {
  display: block;
  width: auto;
  max-width: min(100%, 26rem);
  max-height: 14rem;
  object-fit: contain;
  border-radius: 8px;
  background: #0f223b;
}
.bolha-midia .midia-abrir {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}
.bolha-midia .midia-abrir:hover { background: transparent; }
.bolha-midia .midia-abrir img { cursor: zoom-in; }
.bolha-midia video {
  width: 100%;
  min-height: 6rem;
}
.bolha-midia .midia-video-abrir {
  width: fit-content;
  min-height: 36px;
  padding: .35rem .65rem;
  font-size: .8rem;
}
.bolha-midia > a {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: .45rem .65rem;
  border: 1px solid #b5cbe0;
  border-radius: 6px;
  background: #f5f8fb;
  font-weight: 600;
  text-decoration: none;
}
.bolha-midia .nome-arquivo {
  max-width: 26rem;
  font-size: .8rem;
  color: #53667a;
  overflow-wrap: anywhere;
}
.anexo-chat { position: relative; display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; max-width: 100%; }
.anexo-chat input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.anexo-rotulo {
  display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .55rem; border: 1px solid #154c7d;
  border-radius: 6px; background: white; color: #154c7d; font-weight: 600; cursor: pointer; max-width: 10rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem;
}
.composer-ferramentas { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; max-width: 100%; min-width: 0; }
.composer-ferramentas button { min-height: 32px; padding: .2rem .55rem; font-size: .8rem; }
.fila-anexos {
  display: grid; gap: .35rem; max-width: 100%; min-width: 0; max-height: min(14rem, 30dvh);
  overflow-y: auto; overflow-x: hidden; padding: .4rem; border: 1px solid #d7e0e9; border-radius: 8px; background: #f7fafc;
}
.fila-anexos > strong { font-size: .8rem; }
.fila-anexos-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 32px;
  padding: .25rem .4rem .25rem .55rem;
  border-radius: 6px;
  background: #e4f3ea;
  color: #21593a;
  font-size: .8rem;
  font-weight: 700;
}
.fila-anexos-dispensar {
  flex: 0 0 auto;
  min-width: 30px;
  min-height: 30px;
  padding: 0 .35rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
}
.fila-anexos-dispensar:hover { background: #cfe7d8; }
.fila-anexos-lista { display: grid; gap: .3rem; min-width: 0; }
.fila-anexo-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem .45rem; align-items: center;
  min-width: 0; padding: .35rem .45rem; border-radius: 6px; background: white;
}
.fila-anexo-dados { display: grid; min-width: 0; }
.fila-anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.fila-anexo-estado { font-size: .75rem; font-weight: 600; }
.fila-anexo-item[data-estado="Enviado"] .fila-anexo-estado { color: #21593a; }
.fila-anexo-item[data-estado="Falhou"] .fila-anexo-estado, .fila-anexo-erro { color: #7e3021; }
.fila-anexo-acoes { display: flex; flex-wrap: wrap; justify-content: end; gap: .25rem; }
.fila-anexo-acoes button { min-height: 30px; padding: .15rem .4rem; font-size: .72rem; }
.fila-anexo-erro { grid-column: 1 / -1; margin: 0; font-size: .72rem; overflow-wrap: anywhere; }
.composer-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: end; }
.composer-linha label { font-size: .7rem; gap: .15rem; }
.composer-linha textarea { min-height: 36px; max-height: 8rem; padding: .4rem .5rem; }
.atendimento-aberta .respostas-rapidas {
  position: absolute; left: .5rem; right: .5rem; bottom: 100%; z-index: 6;
  display: flex; flex-direction: column; gap: .45rem; width: auto; max-width: 100%; min-width: 0;
  overflow-x: hidden; max-height: min(280px, 42dvh); overflow-y: auto; padding: .5rem;
  margin-bottom: .35rem; border: 1px solid #d7e0e9; border-radius: 8px; background: #f7fafc;
}
.respostas-rapidas-busca { max-width: 100%; min-width: 0; }
.respostas-rapidas-busca input { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 36px; }
.respostas-rapidas-grupo { display: flex; flex-wrap: wrap; gap: .35rem; max-width: 100%; min-width: 0; }
.respostas-rapidas-grupo strong { flex: 1 0 100%; font-size: .7rem; color: #53667a; letter-spacing: .02em; }
.respostas-rapidas button { font-size: .75rem; padding: .3rem .5rem; min-height: 32px; max-width: 100%; overflow-wrap: anywhere; }
.trecho-mensagem-rapida { display: block; max-width: 28rem; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .85rem; }
.configuracao-pagamentos { border: 1px solid #d7e0e9; border-radius: 6px; padding: .8rem 1rem; min-width: 0; }
.configuracao-pagamentos legend { font-size: .9rem; font-weight: 600; padding: 0 .25rem; }
.opcao-checkbox { display: inline-flex; align-items: center; gap: .5rem; margin: .25rem 1.25rem .25rem 0; }
.opcao-checkbox input { width: 24px; min-height: 24px; }
.configuracao-comercial-form, .configuracao-preview { min-width: 0; overflow-x: hidden; }
.configuracao-preview { display: grid; gap: .75rem; }
.configuracao-preview > h2 { margin-bottom: .25rem; }
.configuracao-preview-item { border: 1px solid #d7e0e9; border-radius: 6px; padding: .85rem; min-width: 0; }
.configuracao-preview-item h3 { margin: 0 0 .4rem; font-size: 1rem; }
.configuracao-preview-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.composer-linha > button { min-width: 72px; min-height: 40px; }
dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0; }
dt { color: #53667a; font-size: .9rem; }
dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.mensagem { padding: 1rem; border-radius: 6px; background: #e8eff8; border: 1px solid #b5cbe0; margin: 1rem 0; overflow-wrap: anywhere; }
.mensagem.erro { background: #fff0ed; border-color: #dcad9f; color: #7e3021; }
.mensagem.sucesso { background: #e4f3ea; border-color: #a1c7af; color: #21593a; }
.estado-bot { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .65rem; border-radius: 5px; background: #e8eff8; color: #24445f; }
.estado-bot.pausado { background: #fff0cb; color: #754f00; }
.estado-bot.indisponivel { background: #fce5dc; color: #863e24; }
.dados-tecnicos { margin: 1rem 0 0; color: #53667a; font-size: .9rem; }
.dados-tecnicos summary { cursor: pointer; font-weight: 600; color: #31465d; }
.dados-tecnicos dl { margin-top: .75rem; }
#aviso-sessao { margin: 0; padding: .35rem .7rem; font-size: .85rem; }
.paginacao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
dialog { border: 1px solid #9bafc4; border-radius: 9px; padding: 1.75rem; color: #18293b; width: min(620px, calc(100% - 2rem)); max-height: 90vh; overflow: auto; }
dialog::backdrop { background: #0f223bb3; }
.viewer-midia {
  width: min(96vw, 1100px);
  height: min(94dvh, 900px);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #081421;
  color: white;
}
.viewer-midia::backdrop { background: #02070dd9; }
.viewer-midia-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .7rem;
  background: #10263b;
}
.viewer-midia-titulo {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
}
.viewer-midia-fechar { flex: 0 0 auto; min-height: 40px; }
.viewer-midia-conteudo {
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100% - 55px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.viewer-midia-conteudo img,
.viewer-midia-conteudo video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.viewer-midia-conteudo video { width: 100%; height: 100%; }
.pular { position: absolute; left: 1rem; top: -100px; background: white; padding: .75rem; z-index: 3; }
.pular:focus { top: .5rem; }
.inteira { grid-column: 1 / -1; }
.periodo-opcoes, .abas-relatorio, .relatorios-exportar { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.abas-relatorio { margin: .15rem 0 1rem; }
.periodo-opcoes button[aria-pressed="true"], .abas-relatorio button[aria-selected="true"] {
  background: #154c7d; color: white; box-shadow: inset 0 -2px 0 #ca7710;
}
.periodo-opcoes button[aria-pressed="false"], .abas-relatorio button[aria-selected="false"] {
  background: white; color: #154c7d;
}
.volume-lista { display: grid; gap: .35rem; }
.volume-hora { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 3.2rem; gap: .4rem; align-items: center; font-size: .85rem; }
.volume-hora .barra { background: #edf2f7; height: .7rem; border-radius: 4px; overflow: hidden; min-width: 0; }
.volume-hora .barra > span { display: block; height: 100%; background: #2a668d; }
.metrica small { display: block; margin-top: .35rem; font-weight: 400; }
.status.aguardando_cliente { background: #e8eff8; color: #124b7d; }
.status.concluida { background: #dcefe5; color: #195537; }
.status.solicitada { background: #fff0cb; color: #754f00; }
.status.cancelada { background: #e9eef4; color: #364d63; }
.status.convertido { background: #e4f3ea; color: #21593a; }
.status.nao_convertido { background: #e9eef4; color: #364d63; }
.cabecalho-relatorios { align-items: flex-start; margin-bottom: 1rem; }
.relatorios-titulo h1 { margin-bottom: .25rem; }
.relatorios-sub { margin: 0 0 .5rem; color: #53667a; font-size: .95rem; }
.relatorios-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; font-size: .85rem; color: #53667a; }
.relatorios-filtros { padding: 1rem 1.15rem; }
.relatorios-filtros h2 { margin-bottom: .65rem; }
.filtros-datas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.filtros-ativos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .5rem; }
.filtro-chip { display: inline-flex; align-items: center; gap: .2rem; background: #e8eef5; border: 1px solid #d7e0e9; border-radius: 999px; padding: .1rem .2rem .1rem .7rem; font-size: .85rem; }
.filtro-chip-remover { min-height: 32px; min-width: 32px; padding: 0; border: 0; background: transparent; color: #154c7d; font-size: 1.1rem; line-height: 1; }
.filtro-chip-remover:hover { background: #d5e3f1; }
.relatorios-metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: .85rem; }
.metrica-relatorio { padding: .9rem 1rem; }
.metrica-relatorio strong { font-size: 1.55rem; margin-top: .2rem; }
.relatorios-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.insight-relatorio { background: white; border: 1px solid #d7e0e9; border-radius: 8px; padding: .85rem 1rem; min-width: 0; }
.insight-relatorio h3 { margin: 0 0 .35rem; font-size: .8rem; color: #53667a; font-weight: 600; }
.insight-valor { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.insight-relatorio .muted { margin: .3rem 0 0; font-size: .8rem; }
.relatorios-ajuda { margin: 0 0 1rem; font-size: .9rem; color: #53667a; }
.relatorios-ajuda summary { cursor: pointer; font-weight: 600; color: #31465d; }
.relatorios-ajuda-lista { margin-top: .75rem; grid-template-columns: 1fr; gap: .65rem; }
.resumo-badges { display: flex; flex-wrap: wrap; gap: .5rem .85rem; list-style: none; margin: 0; padding: 0; }
.resumo-badges li { display: inline-flex; align-items: center; gap: .4rem; }
.barra-volume { display: block; margin-top: .3rem; background: #edf2f7; height: .45rem; border-radius: 4px; overflow: hidden; min-width: 6rem; }
.barra-volume > span { display: block; height: 100%; background: #2a668d; }
.volume-horario { display: grid; gap: .35rem; min-width: 0; }
.volume-horario-scroll { overflow-x: auto; min-width: 0; }
.volume-horario-grafico { display: grid; gap: .35rem; min-width: 28rem; }
.volume-turnos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .75rem; color: #53667a; text-align: center; }
.volume-horario-barras { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 72px; padding: .15rem .1rem 0; background: #f7fafc; border-radius: 6px; }
.volume-horario-coluna { display: flex; align-items: end; justify-content: center; height: 100%; min-width: 0; }
.volume-horario-barra { display: block; width: 70%; min-height: 4px; background: #c5d4e3; border-radius: 2px 2px 0 0; }
.volume-horario-coluna.pico .volume-horario-barra { background: #2a668d; }
.volume-horario-eixo { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); font-size: .72rem; color: #65758a; font-variant-numeric: tabular-nums; }
.tabela-sticky { max-height: min(28rem, 70vh); overflow: auto; }
.tabela-sticky table { border-collapse: separate; border-spacing: 0; }
.tabela-sticky thead th { position: sticky; top: 0; z-index: 1; background: #e8eef5; box-shadow: 0 1px 0 #d7e0e9; }
.paginacao-relatorios { justify-content: center; gap: .75rem; }
.relatorios-exportacao h2 { margin-bottom: .4rem; }
.relatorios-esqueleto { display: grid; gap: .75rem; }
.esqueleto-card, .esqueleto-bloco, .esqueleto-tabela {
  background: #edf2f7;
  border-radius: 8px; border: 1px solid #d7e0e9;
}
.esqueleto-card { min-height: 5.2rem; }
.esqueleto-bloco { min-height: 4.5rem; }
.esqueleto-tabela { min-height: 10rem; }
.relatorios-metricas .esqueleto-card { min-height: 5.2rem; }
@media (max-width: 1100px) {
  .relatorios-metricas, .relatorios-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) { .estrutura { grid-template-columns: 190px minmax(0, 1fr); } main { padding: 1.5rem; } body.pagina-atendimento main.main-atendimento { padding: 0; } .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filtros-datas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  html, body:not(.pagina-atendimento) { overflow-x: hidden; max-width: 100%; }
  .barra { padding: 1rem; } .estrutura { display: block; } aside { padding: .5rem; border-right: 0; border-bottom: 1px solid #d7e0e9; max-width: 100%; }
  nav { display: flex; flex-wrap: wrap; gap: .1rem; max-width: 100%; } nav a { white-space: nowrap; font-size: .9rem; padding: .55rem .65rem; }
  .bolha { max-width: 92%; } .conversa-item .acoes button { flex: 1; }
  .anexo-chat { width: auto; max-width: 100%; }
  .composer-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .composer-linha > button { width: auto; min-width: 4.5rem; }
  .atendimento-aberta .respostas-rapidas, .respostas-rapidas-grupo, .respostas-rapidas-busca { width: 100%; max-width: 100%; }
  .trecho-mensagem-rapida, .mensagem-rapida-conteudo { max-width: 100%; overflow-wrap: break-word; word-break: normal; }
  .bolha-midia img, .bolha-midia video { max-width: 100%; max-height: min(40dvh, 16rem); height: auto; }
  .bolha-midia .nome-arquivo { max-width: 100%; }
  .viewer-midia {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .viewer-midia-barra { padding-top: max(.55rem, env(safe-area-inset-top)); }
  .viewer-midia-conteudo { height: calc(100% - 55px - env(safe-area-inset-top)); }
  main { padding: 1.1rem; max-width: 100%; min-width: 0; } .metricas, .relatorios-metricas, .relatorios-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .metrica { padding: .9rem; font-size: .9rem; } .metrica strong { font-size: 1.7rem; }
  .formulario, dl { grid-template-columns: 1fr; } .cartao { padding: 1rem; min-width: 0; } h1 { font-size: 1.5rem; }
  .filtros { grid-template-columns: 1fr; } .acoes button { flex: 1; } dialog { padding: 1.2rem; width: min(620px, calc(100% - 1.5rem)); }
  .periodo-opcoes button, .abas-relatorio button, .relatorios-exportar button { flex: 1; min-width: 8rem; }
  .filtros-datas { grid-template-columns: 1fr; }
  .filtros-datas button { width: 100%; }
  .paginacao-relatorios { flex-direction: column; }
  .paginacao-relatorios button { width: 100%; }
  .operacoes-tabela, .mensagens-rapidas-tabela, .tabela-responsiva > .tabela { display: none; }
  .operacoes-cards, .mensagens-rapidas-cards, .tabela-cards { display: grid; gap: 1rem; }
  .mensagem-rapida-card .acoes, .tabela-card .acoes { display: grid; gap: .5rem; }
  .mensagem-rapida-card .acoes button, .tabela-card .acoes button { width: 100%; }
  body.pagina-atendimento { overflow: hidden; }
  body.pagina-atendimento main.main-atendimento { padding: 0; }
  body.pagina-atendimento .estrutura {
    display: grid; grid-template-columns: none; grid-template-rows: auto minmax(0, 1fr);
    height: auto; min-height: 0;
  }
  body.pagina-atendimento aside { padding: .35rem .5rem; }
  body.pagina-atendimento.conversa-foco {
    height: var(--chat-vh, 100dvh); max-height: var(--chat-vh, 100dvh);
    margin-top: var(--chat-vv-top, 0px);
  }
  body.pagina-atendimento.conversa-foco .barra,
  body.pagina-atendimento.conversa-foco .estrutura > aside { display: none; }
  body.pagina-atendimento.conversa-foco .estrutura {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
  }
  body.pagina-atendimento.conversa-foco main.main-atendimento { flex: 1; min-height: 0; height: auto; }
  .atendimento-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .atendimento-layout:not(.com-conversa) .atendimento-aberta { display: none; }
  .atendimento-layout.com-conversa .atendimento-lista { display: none; }
  .atendimento-aberta { padding: 0; flex: 1; min-height: 0; overflow-x: hidden; }
  .atendimento-aberta .mensagens { flex: 1; height: auto; max-height: none; }
  .atendimento-lista { min-height: 0; }
  .atendimento-lista .lista-conversas { max-height: none; }
  .contexto-atendimento dl { grid-template-columns: 1fr; }
  .voltar-conversas {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin: 0; padding: .2rem .35rem; font-size: .8rem;
    white-space: nowrap;
  }
  .conversa-principal { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .conversa-corpo { flex: 1; min-height: 0; }
  .atendimento-aberta .conversa-painel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none; height: min(86dvh, 100%); max-height: min(86dvh, 100%);
    z-index: 20; border-left: 0; border-bottom: 0; border-radius: 14px 14px 0 0;
    padding: .85rem .85rem max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px #0f223b33;
  }
  .conversa-cabecalho {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: .3rem .4rem; padding: .35rem .5rem; padding-top: max(.35rem, env(safe-area-inset-top));
  }
  .conversa-cabecalho-identidade {
    display: grid; gap: .1rem; width: auto; max-width: 100%; min-width: 0; flex: none;
  }
  .conversa-cabecalho-titulo, .conversa-cabecalho-meta, .conversa-cabecalho-estado {
    flex: none; width: auto; max-width: 100%; min-width: 0;
  }
  .conversa-cabecalho-titulo { display: block; }
  .conversa-cabecalho-titulo strong {
    display: block; overflow-wrap: anywhere; word-break: normal; white-space: normal; line-height: 1.25;
  }
  .conversa-cabecalho-meta {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .conversa-cabecalho-comandos {
    display: flex; flex-direction: column; gap: .25rem; width: auto; max-width: 6.2rem; flex: none;
  }
  .conversa-cabecalho-comandos > .acoes-wrap, .conversa-cabecalho-comandos > button { flex: none; width: 100%; min-width: 0; }
  .conversa-cabecalho-comandos button { width: 100%; min-height: 36px; padding: .25rem .45rem; font-size: .75rem; }
  .acoes-wrap { position: static; }
  .anexo-rotulo { max-width: 8rem; }
  .atendimento-aberta .acoes-conversa {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; min-width: 0; max-width: none; max-height: min(72dvh, 32rem);
    border-radius: 14px 14px 0 0; z-index: 20;
    padding: .85rem .85rem max(1rem, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px #0f223b33;
  }
  .atendimento-aberta .mensagens { min-width: 0; width: 100%; }
  .atendimento-aberta .resposta-box { padding-bottom: max(.45rem, env(safe-area-inset-bottom)); }
  .composer-ferramentas { width: 100%; flex-wrap: nowrap; }
  .composer-ferramentas > button { flex: 1; min-width: 0; }
  .fila-anexos { max-height: min(12rem, 26dvh); }
  .fila-anexo-item { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-anexo-estado { grid-column: 1; }
  .fila-anexo-acoes { grid-column: 2; grid-row: 1 / span 2; max-width: 8.5rem; }
  .composer-linha textarea { min-width: 0; width: 100%; min-height: 44px; }
  .composer-linha > button { min-height: 44px; }
}

.carga-atendentes { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; font-size: .8rem; margin: .35rem 0 .6rem; }
.carga-atendentes span { background: #edf2f7; border-radius: 12px; padding: .15rem .55rem; font-variant-numeric: tabular-nums; }
.notas-internas { margin-top: .5rem; border-top: 1px solid #d7e0e9; padding-top: .75rem; }
.nota-interna { padding: .5rem .65rem; margin-block: .35rem; background: #fffbe9; border-radius: .5rem; overflow-wrap: anywhere; font-size: .85rem; }
.nota-interna p { white-space: pre-wrap; margin: .25rem 0 0; }
.resposta-box { padding: .35rem .6rem .45rem; background: white; border-top: 1px solid #d7e0e9; }

.respostas-rapidas-lista {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-width: 100%;
  min-width: 0;
}
.tabela-card, .mensagem-rapida-card {
  background: white; border: 1px solid #d7e0e9; border-radius: 8px; padding: 1rem;
  min-width: 0; overflow-wrap: break-word; word-break: normal;
}
.mensagem-rapida-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; overflow-wrap: break-word; }
.mensagem-rapida-card h4 { margin: .75rem 0 .35rem; font-size: .85rem; color: #53667a; }
.mensagem-rapida-conteudo, .trecho-mensagem-rapida {
  overflow-wrap: break-word; word-break: normal; white-space: pre-wrap; max-width: 100%;
}
.tabela-card-lista { display: grid; grid-template-columns: 1fr; gap: .65rem; margin: 0; }
.tabela-card-campo dt { color: #53667a; font-size: .8rem; }
.tabela-card-campo dd { margin: .15rem 0 0; overflow-wrap: break-word; word-break: normal; }
.tabela-card-tecnico { color: #53667a; font-size: .85rem; }
.tabela-card-tecnico dd, .id-tecnico, .tabela-card .identificador, .tabela-card code {
  display: block; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}