:root {
  --fundo: #0f1720;
  --painel: #16212c;
  --linha: #243241;
  --texto: #e8eef4;
  --fraco: #8aa0b4;
  --ouro: #d4a537;
  --verde: #2fbf71;
  --amarelo: #e3b341;
  --vermelho: #e5534b;
  --saida: #1f5e46;
  --entrada: #213041;
  --assin: #b9f0d4;
  --azul: #53bdeb;
  --azul-texto: #9fdcf5;
  --vermelho-texto: #ffb3ae;
  --ponto: #4b5a69;
  --sombra: rgb(0 0 0 / 40%);
  --veu: rgb(0 0 0 / 55%);
  --arquivo-fundo: rgb(0 0 0 / 25%);
  color-scheme: dark;
}
/* Tela clara: escolhida pela pessoa (☀️/🌙, tema.js) ou, sem escolha, quando o aparelho está no claro. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --fundo: #f3f5f8;
    --painel: #ffffff;
    --linha: #d8dfe6;
    --texto: #15212c;
    --fraco: #5a6a79;
    --ouro: #c99a2e;
    --verde: #18864c;
    --amarelo: #8a6100;
    --vermelho: #c0312a;
    --saida: #d7f3e3;
    --entrada: #ffffff;
    --assin: #1b6a43;
    --azul: #1773b3;
    --azul-texto: #135a8c;
    --vermelho-texto: #a3241e;
    --ponto: #a6b2bd;
    --sombra: rgb(0 0 0 / 14%);
    --veu: rgb(0 0 0 / 35%);
    --arquivo-fundo: rgb(0 0 0 / 6%);
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --fundo: #f3f5f8;
  --painel: #ffffff;
  --linha: #d8dfe6;
  --texto: #15212c;
  --fraco: #5a6a79;
  --ouro: #c99a2e;
  --verde: #18864c;
  --amarelo: #8a6100;
  --vermelho: #c0312a;
  --saida: #d7f3e3;
  --entrada: #ffffff;
  --assin: #1b6a43;
  --azul: #1773b3;
  --azul-texto: #135a8c;
  --vermelho-texto: #a3241e;
  --ponto: #a6b2bd;
  --sombra: rgb(0 0 0 / 14%);
  --veu: rgb(0 0 0 / 35%);
  --arquivo-fundo: rgb(0 0 0 / 6%);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; background: var(--ouro); color: #1a1205; font-weight: 600; padding: 10px 14px; }
button.discreto { background: transparent; color: var(--fraco); border: 1px solid var(--linha); padding: 6px 10px; font-weight: 500; }
.erro { color: var(--vermelho); min-height: 1.2em; margin: 6px 16px; font-size: 14px; }
.vazio { color: var(--fraco); text-align: center; padding: 40px 16px; }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.cartao { width: 100%; max-width: 360px; background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; padding: 24px; display: grid; gap: 14px; }
.cartao h1 { margin: 0; font-size: 24px; }
h1 span, .marca span { color: var(--ouro); }
.sub { margin: 0; color: var(--fraco); }
.cartao label { display: grid; gap: 6px; color: var(--fraco); font-size: 14px; }
.cartao input { background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 12px; }

/* App: no celular uma tela de cada vez */
.app { height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.marca { font-weight: 700; }
.eu { display: flex; gap: 8px; align-items: center; }
.eu select { background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 8px; max-width: 130px; }
.marca { white-space: nowrap; }
.empresa-troca { max-width: 60%; font-weight: 700; color: var(--texto); background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 8px; }
/* Celular: o topo cabe com todos os botões (dono tem ⚙️ a mais) */
@media (max-width: 480px) {
  .topo { padding: 8px 10px; gap: 6px; }
  .marca { font-size: 15px; }
  .eu { gap: 4px; }
  .eu select { max-width: 112px; padding: 6px 4px; }
  .topo .marca span { display: none; }
  .eu .botao-link { min-width: 34px; padding: 6px 4px; }
  #btn-sair { padding: 6px 8px; }
}

.lista, .conversa { min-height: 0; overflow: hidden; }
.lista { display: flex; flex-direction: column; }
.lista-topo { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: var(--fraco); border-bottom: 1px solid var(--linha); }
.lista-topo strong { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contagem { font-size: 13px; white-space: nowrap; }
#conversas { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#conversas li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); cursor: pointer; }
#conversas li.ativa { background: var(--painel); }
#conversas li .nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conversas li .previa { grid-column: 1 / -1; color: var(--fraco); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conversas li .estado { color: var(--fraco); font-size: 12px; }
.espera { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; align-self: start; white-space: nowrap; }
.espera.verde { background: color-mix(in srgb, var(--verde) 20%, transparent); color: var(--verde); }
.espera.amarela { background: color-mix(in srgb, var(--amarelo) 20%, transparent); color: var(--amarelo); }
.espera.vermelha { background: color-mix(in srgb, var(--vermelho) 22%, transparent); color: var(--vermelho); }
.espera.ok { color: var(--fraco); font-weight: 500; }

.conversa > #com-conversa { height: 100%; display: flex; flex-direction: column; }
.conversa-topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.voltar { background: transparent; color: var(--texto); font-size: 26px; line-height: 1; padding: 0 8px; }
.quem { flex: 1; min-width: 0; display: grid; }
.quem strong, .quem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem small { color: var(--fraco); }
.acoes { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.acoes select { flex: 1; min-width: 0; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 8px; color: var(--fraco); }
.equipe { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.equipe:empty { display: none; }
.pessoa { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--painel); border: 1px solid var(--linha); white-space: nowrap; }
.pessoa .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ponto); }
.pessoa.online .ponto { background: var(--verde); }
.pessoa.ausente .ponto { background: var(--amarelo); }
.pessoa.cheia { border-color: var(--vermelho); }
.pessoa .carga { color: var(--fraco); }
#conversas li .estado.semdono { color: var(--amarelo); }
.mensagens { list-style: none; margin: 0; padding: 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mensagens li { max-width: 85%; padding: 8px 10px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mensagens li.entrada { background: var(--entrada); align-self: flex-start; border-top-left-radius: 4px; }
.mensagens li.saida { background: var(--saida); align-self: flex-end; border-top-right-radius: 4px; }
.mensagens li.falhou { outline: 1px solid var(--vermelho); }
.mensagens .assin { display: block; font-weight: 700; font-size: 13px; color: var(--assin); }
.mensagens li.sistema { background: transparent; border: 1px dashed var(--linha); color: var(--fraco); }
.mensagens li.sistema .assin { color: var(--fraco); }
.faixa { margin: 0; padding: 8px 16px; font-size: 13px; background: color-mix(in srgb, var(--amarelo) 14%, transparent); color: var(--amarelo); border-bottom: 1px solid var(--linha); }
.mensagens .hora { display: block; text-align: right; font-size: 11px; color: var(--fraco); margin-top: 2px; }
.resposta { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linha); background: var(--painel); }
.resposta textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 12px; padding: 10px; }
.resposta button { width: 46px; padding: 0; font-size: 18px; }

.quem .prazos { color: var(--fraco); font-size: 12px; }
.quem .prazos .perto { color: var(--amarelo); }
.quem .prazos .estourado { color: var(--vermelho); font-weight: 700; }
.alertas { position: fixed; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 10; pointer-events: none; }
.alerta { pointer-events: auto; cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--painel); border: 1px solid var(--amarelo); box-shadow: 0 8px 24px var(--sombra); font-size: 14px; }
.alerta.estourado { border-color: var(--vermelho); }
@media (min-width: 900px) { .alertas { left: auto; width: 380px; } }

.mensagens li.interna { background: color-mix(in srgb, var(--amarelo) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amarelo) 40%, transparent); align-self: center; max-width: 92%; }
.mensagens li.interna .assin { color: var(--amarelo); }
.resposta.nota textarea { border-color: var(--amarelo); background: color-mix(in srgb, var(--amarelo) 8%, var(--fundo)); }
.resposta .modo { width: 42px; padding: 0; }
.resposta .modo[aria-pressed="true"] { border-color: var(--amarelo); background: color-mix(in srgb, var(--amarelo) 20%, transparent); }
.acoes { flex-wrap: wrap; }
.porque { margin: 8px 12px; padding: 12px; border-radius: 12px; background: var(--painel); border: 1px solid var(--linha); max-height: 45dvh; overflow-y: auto; }
.porque-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.porque-resumo { margin: 0 0 8px; color: var(--fraco); font-size: 13px; }
.porque-motivos { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; }
.porque-motivos li:first-child { font-weight: 600; }
.porque-tempo { margin: 6px 0 0; padding-left: 18px; color: var(--fraco); font-size: 13px; display: grid; gap: 2px; }
.porque details summary { cursor: pointer; color: var(--fraco); font-size: 13px; }
.atrasos { margin-left: 8px; color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 50%, transparent); }
.atrasos[aria-pressed="true"] { background: color-mix(in srgb, var(--vermelho) 18%, transparent); }
.lista-atrasos { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.lista-atrasos li { padding: 12px 16px; border-bottom: 1px solid var(--linha); cursor: pointer; display: grid; gap: 4px; }
.lista-atrasos .nome { font-weight: 600; }
.lista-atrasos .motivo { font-size: 14px; }
.lista-atrasos .meta { color: var(--fraco); font-size: 12px; }

.faixa-celular { display: grid; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--linha); font-size: 13px; color: var(--fraco); }
.faixa-celular button { justify-self: start; }
.celular-passo { margin: 0; color: var(--texto); }
.celular-passo a { color: var(--ouro); font-weight: 700; word-break: break-all; }
.celular-passo code { font-size: 15px; letter-spacing: 2px; color: var(--ouro); }
.pessoa .sem-cel { font-size: 11px; }

.lista-topo { gap: 6px 8px; flex-wrap: wrap; }
.botoes-chefe { display: inline-flex; gap: 6px; margin-left: auto; }
.botoes-chefe .atrasos { margin-left: 0; }
#btn-relatorios[aria-pressed="true"] { background: color-mix(in srgb, var(--ouro) 18%, transparent); }
.porque-redacao { margin: 0 0 10px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--ouro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ouro) 35%, transparent); }
.porque-redacao p { margin: 0; }
.porque-acao { margin-top: 6px !important; font-weight: 600; }
.painel-relatorios { overflow-y: auto; flex: 1; }
.relatorios-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--linha); }
.lista-relatorios { list-style: none; margin: 0; padding: 0; }
.lista-relatorios li { padding: 12px 16px; border-bottom: 1px solid var(--linha); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.lista-relatorios .meta { display: block; color: var(--fraco); font-size: 12px; margin-bottom: 4px; }

.lista-prontas { list-style: none; margin: 0; padding: 6px 12px; max-height: 40dvh; overflow-y: auto; border-top: 1px solid var(--linha); background: var(--painel); display: grid; gap: 6px; }
.lista-prontas li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha); cursor: pointer; font-size: 14px; }
.lista-prontas li:hover, .lista-prontas li:focus { border-color: var(--ouro); outline: none; }
.lista-prontas .atalho { color: var(--ouro); font-weight: 700; margin-right: 6px; }
.lista-prontas .previa-pronta { display: block; color: var(--fraco); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensagens li.robo { background: transparent; border: 1px dashed color-mix(in srgb, var(--ouro) 50%, transparent); color: var(--fraco); }
.mensagens li.robo .assin { color: var(--ouro); }

.quem .empresa-cliente { color: var(--ouro); font-size: 12px; }
.ligar-empresa { display: grid; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: var(--painel); font-size: 13px; color: var(--fraco); }
.ligar-empresa input { background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; }
.mensagens li.carteira { background: color-mix(in srgb, var(--ouro) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--ouro) 45%, transparent); align-self: center; max-width: 92%; }

.painel-equipe, .painel-compromissos { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.painel-equipe[hidden], .painel-compromissos[hidden] { display: none !important; }
.painel-equipe select { margin: 8px 16px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 8px; }
.mensagens-equipe li { align-self: flex-start; background: var(--entrada); }
.mensagens-equipe li.minha { align-self: flex-end; background: var(--saida); }
.mensagens-equipe li.sistema { align-self: center; background: color-mix(in srgb, var(--ouro) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--ouro) 45%, transparent); max-width: 92%; }
.botoes-chefe .novo { border-color: var(--ouro); color: var(--ouro); }
.todos { padding: 8px 16px; font-size: 13px; color: var(--fraco); }
.lista-compromissos { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.lista-compromissos li { padding: 12px 16px; border-bottom: 1px solid var(--linha); display: grid; gap: 6px; }
.lista-compromissos .oque { font-weight: 600; overflow-wrap: anywhere; }
.lista-compromissos .meta { color: var(--fraco); font-size: 12px; }
.lista-compromissos .atrasado { color: var(--vermelho); font-weight: 700; }
.lista-compromissos .fechado { opacity: .6; }
.lista-compromissos .botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.mensagens li.compromisso { background: color-mix(in srgb, var(--ouro) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--ouro) 45%, transparent); align-self: center; max-width: 92%; }

.faixa-dossie { display: grid; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: var(--painel); font-size: 13px; }
.faixa-dossie .item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.faixa-dossie .info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faixa-dossie a { color: var(--ouro); font-weight: 700; text-decoration: none; white-space: nowrap; }
.faixa-dossie .pendencia { color: var(--amarelo); }
.faixa-dossie .atraso { color: var(--vermelho); font-weight: 700; }
.faixa-dossie .fraco { color: var(--fraco); }

.mensagens .foto { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin: 4px 0; cursor: zoom-in; }
.mensagens audio, .mensagens video { display: block; max-width: 100%; margin: 4px 0; }
.mensagens .arquivo { display: inline-block; margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: var(--arquivo-fundo); color: var(--texto); text-decoration: none; }
.mensagens .transcricao { display: block; font-size: 13px; color: var(--fraco); font-style: italic; margin-top: 2px; }
.enviando { padding: 4px 12px; font-size: 13px; color: var(--fraco); }

.botao-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 10px; color: var(--fraco); text-decoration: none; }

.mensagens .hora.lida { color: var(--azul); }
.lista-prontas .pronta-vazia { color: var(--fraco); cursor: default; }
.lista-prontas .pronta-vazia a { color: var(--ouro); }
.faixa-teste { background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--azul-texto); }

/* Janela de 24h e modelos aprovados */
.faixa-janela { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between; padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--linha); background: color-mix(in srgb, var(--amarelo) 14%, transparent); color: var(--amarelo); }
.faixa-janela.fechada { background: color-mix(in srgb, var(--vermelho) 14%, transparent); color: var(--vermelho-texto); }
.faixa-janela button { padding: 4px 10px; color: inherit; border-color: currentColor; }
.botoes-modelo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.botoes-modelo span { padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; font-size: 13px; opacity: .9; }
.mensagens .modelo-tag { display: block; font-size: 12px; color: var(--fraco); margin-bottom: 2px; }
.dlg-modelo { width: min(92vw, 440px); max-height: 92vh; padding: 0; border: 1px solid var(--linha); border-radius: 14px; background: var(--painel); color: var(--texto); }
.dlg-modelo::backdrop { background: var(--veu); }
.dlg-modelo form { display: grid; gap: 12px; padding: 16px; }
.dlg-modelo h2 { margin: 0; font-size: 17px; }
.dlg-modelo label { display: grid; gap: 4px; color: var(--fraco); font-size: 13px; }
.dlg-modelo input, .dlg-modelo select { width: 100%; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; color: var(--texto); }
.modelo-destino, .modelo-livres { display: grid; gap: 10px; }
.modelo-previa-caixa { background: var(--saida); border-radius: 10px; padding: 10px 12px; }
.modelo-previa-caixa small { color: var(--assin); font-size: 11px; }
.modelo-previa { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.modelo-custo { margin: 0; font-size: 14px; }
.modelo-custo.gratis { color: var(--verde); }
.modelo-custo.pago { color: var(--amarelo); }
.modelo-acoes { display: flex; justify-content: flex-end; gap: 8px; }

/* Celular: lista OU conversa */
.app .conversa { display: none; }
.app.abrindo .lista { display: none; }
.app.abrindo .conversa { display: block; }
.app { grid-template-areas: "topo" "corpo"; }
.topo { grid-area: topo; }
.lista, .conversa { grid-area: corpo; }

/* Computador: lado a lado */
@media (min-width: 900px) {
  .app { grid-template-columns: 340px 1fr; grid-template-areas: "topo topo" "lista conversa"; }
  .lista { grid-area: lista; border-right: 1px solid var(--linha); display: flex !important; }
  .app .conversa { grid-area: conversa; display: block; }
  .voltar { display: none; }
}