:root {
  --verde: #2f6f4e;
  --verde-claro: #e7f2ec;
  --cinza-fundo: #f2f4f5;
  --cinza-borda: #dfe3e6;
  --texto: #1f2933;
  --texto-suave: #6b7785;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--cinza-fundo);
  color: var(--texto);
}

button {
  font: inherit;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
}

.login-wrapper {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-caixa {
  width: 100%;
  max-width: 380px;
}

.logo-login-wrap {
  background: #000;
  border-radius: 14px 14px 0 0;
  padding: 18px 24px 14px;
  display: flex;
  justify-content: center;
}

.logo-login {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

.login-card {
  width: 100%;
  background: #fff;
  border-radius: 0 0 14px 14px;
  padding: 28px 32px 32px;
  box-shadow: 0 12px 32px rgba(31, 41, 51, 0.12);
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.login-card p.sub {
  margin: 0 0 24px;
  color: var(--texto-suave);
  font-size: 14px;
}

.campo {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-suave);
}

.campo input {
  padding: 11px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  outline: none;
}

.campo input:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(47, 111, 78, 0.15);
}

.btn-primario {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--verde);
  color: #fff;
  font-weight: 600;
}

.btn-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.erro {
  background: #fdecec;
  color: #a4262c;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.topo {
  background: var(--verde);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.topo-identidade {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.logo-topo {
  display: block;
  height: 44px;
  width: auto;
  background: #000;
  border-radius: 6px;
  padding: 4px 8px;
}

.topo strong {
  display: block;
  font-size: 15px;
}

.topo span {
  font-size: 13px;
  opacity: 0.85;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-sair {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
}

.btn-sino {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.btn-sino svg {
  width: 20px;
  height: 20px;
}

.aviso {
  background: #fff4e5;
  color: #8a5a00;
  border-bottom: 1px solid #f0d9b5;
  padding: 10px 20px;
  font-size: 14px;
}

.painel {
  flex: 1;
  display: flex;
  min-height: 0;
}

.lateral {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--cinza-borda);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}

.lateral-corpo {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.lateral-corpo.historico {
  flex-direction: column;
}

.lateral-corpo.historico .bloco {
  width: 100%;
  flex: 1 1 auto;
}

.busca-cliente {
  position: relative;
  flex-shrink: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--cinza-borda);
  background: #fff;
  display: flex;
  gap: 8px;
  align-items: center;
}

.busca-cliente input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.busca-cliente-limpar {
  flex-shrink: 0;
  border: 1px solid var(--cinza-borda);
  background: #fff;
  color: var(--texto);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
}

.busca-cliente-sugestoes {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% - 4px);
  z-index: 6;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.12);
  max-height: 240px;
  overflow-y: auto;
}

.busca-cliente-sugestoes button {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.busca-cliente-sugestoes button:hover {
  background: var(--verde-claro);
}

.busca-cliente-sugestoes span {
  font-size: 12px;
  color: var(--texto-suave);
}

.busca-cliente-vazio {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% - 4px);
  z-index: 6;
  margin: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 13px;
  color: var(--texto-suave);
}

.historico-cliente-dados {
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.historico-cliente-dados span {
  font-size: 13px;
  color: var(--texto-suave);
}

.historico-meta {
  font-size: 12px;
  color: var(--texto-suave);
}

.selo-status {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.selo-status.concluida {
  background: #e7f2ec;
  color: #166534;
}

.selo-status.andamento {
  background: #dbeafe;
  color: #1d4ed8;
}

.selo-status.fila {
  background: #f3f4f6;
  color: #4b5563;
}

.selo-status.nao-concluida {
  background: #fee2e2;
  color: #b91c1c;
}

.quadro-ao-vivo .busca-cliente {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  position: relative;
  top: auto;
  background: transparent;
}

.quadro-topo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -16px -16px 0;
  padding: 12px 16px 10px;
  position: sticky;
  top: -16px;
  z-index: 4;
  background: var(--cinza-fundo);
  border-bottom: 1px solid var(--cinza-borda);
}

.quadro-topo .btn-ver-concluidos {
  margin-top: 1px;
}

.quadro-ao-vivo .historico-cliente {
  padding: 8px 0 0;
  border: none;
}

.bloco {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
}

.bloco + .bloco {
  border-left: 1px solid var(--cinza-borda);
}

.bloco-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  flex-shrink: 0;
}

.bloco-cabecalho h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #111827;
  -webkit-text-fill-color: #111827;
  opacity: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.bloco > h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #111827;
  -webkit-text-fill-color: #111827;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-ver-concluidos {
  flex-shrink: 0;
  border: 1px solid var(--verde);
  background: #fff;
  color: var(--verde);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 8px;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-ver-concluidos:hover {
  background: var(--verde-claro);
}

.bloco .lista-bloco {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.painel > .chat,
.painel > .chat-vazio {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
}

.contador {
  background: var(--verde);
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 12px;
  letter-spacing: 0;
}

.vazio-lateral {
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* A cor da barra vem do assunto, aplicada em linha pelo React. */
.card-fila {
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fffdf7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.card-topo strong {
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tempo {
  font-size: 11px;
  color: var(--texto-suave);
  white-space: nowrap;
}

.previa {
  margin: 6px 0 10px;
  font-size: 13px;
  color: #4a5561;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.telefone {
  font-size: 12px;
  color: var(--texto-suave);
}

.btn-aceitar {
  border: none;
  border-radius: 6px;
  background: var(--verde);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 16px;
}

.btn-aceitar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.item-conversa {
  width: 100%;
  text-align: left;
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--cinza-borda);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-conversa strong {
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.item-conversa span {
  font-size: 12px;
  color: var(--texto-suave);
}

.item-conversa .card-topo,
.card-ao-vivo .card-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.item-conversa .card-topo strong,
.card-ao-vivo .card-topo strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-conversa .previa-mensagem,
.card-ao-vivo .previa-mensagem,
.card-fila .previa-mensagem {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-conversa,
.card-ao-vivo,
.card-fila,
.item-alerta {
  border-left-color: var(--assunto-cor, var(--cinza-borda)) !important;
}

.item-conversa.nao-lida:not(.ativa),
.card-ao-vivo.nao-vista:not(.ativa) {
  background: #ecfdf5;
  border-top-color: #16a34a;
  border-right-color: #16a34a;
  border-bottom-color: #16a34a;
}

.item-conversa span.contador-nao-lidas,
.card-ao-vivo span.contador-nao-lidas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
}

.item-conversa.ativa {
  border-top-color: var(--verde);
  border-right-color: var(--verde);
  border-bottom-color: var(--verde);
  background: var(--verde-claro);
}

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.chat-vazio {
  align-items: center;
  justify-content: center;
}

.chat-cabecalho {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cinza-borda);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.chat-cabecalho strong {
  display: block;
}

.chat-cabecalho > div:first-child span {
  font-size: 13px;
  color: var(--texto-suave);
}

.seletor-assunto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
}

.seletores-conversa {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.seletores-conversa .seletor-assunto {
  margin-top: 0;
}

.seletor-assunto select {
  font-weight: 600;
  font-size: 13px;
  color: #1f2933;
  border: 1px solid var(--cinza-borda);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  max-width: 260px;
}

.seletor-assunto select:disabled {
  opacity: 0.6;
}

.btn-assumir {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: var(--verde);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
}

.btn-assumir:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-acoes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.btn-finalizar {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: #9a3412;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
}

.btn-finalizar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.balao .autor {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: inherit;
  opacity: 0.85;
}

.mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #fbfcfc;
}

.balao {
  width: fit-content;
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.4;
  font-size: 14px;
}

.balao.cliente {
  align-self: flex-start;
  margin-right: auto;
  background: #1f2933;
  color: #fff;
  border: none;
  border-bottom-left-radius: 4px;
}

.balao.atendente {
  align-self: flex-end;
  margin-left: auto;
  background: var(--verde);
  color: #fff;
  border: none;
  border-bottom-right-radius: 4px;
}

.balao.sistema {
  align-self: center;
  background: #eef2f6;
  border: none;
  color: var(--texto-suave);
  font-size: 12px;
  max-width: 90%;
  text-align: center;
}

.balao .hora {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--texto-suave);
}

.balao.cliente .hora,
.balao.atendente .hora {
  color: rgba(255, 255, 255, 0.72);
}

.midia-thumb {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  max-width: 240px;
  cursor: zoom-in;
}

.midia-thumb img,
.midia-video {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
}

.midia-video {
  object-fit: contain;
  background: #000;
  max-width: 240px;
}

.midia-audio {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 2px 0;
}

.midia-legenda {
  display: block;
  margin-top: 6px;
}

.midia-arquivo {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 32, 0.88);
  display: grid;
  place-items: center;
  padding: 24px;
  cursor: zoom-out;
}

.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.vazio {
  margin: auto;
  color: var(--texto-suave);
  font-size: 14px;
}

.responder {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--cinza-borda);
  background: #fff;
  flex-shrink: 0;
}

.responder textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
  max-height: 120px;
  outline: none;
}

.responder textarea:focus {
  border-color: var(--verde);
}

.responder button {
  align-self: flex-end;
  padding: 11px 20px;
  border: none;
  border-radius: 8px;
  background: var(--verde);
  color: #fff;
  font-weight: 600;
}

.responder button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rodape-leitura {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--cinza-borda);
  color: var(--texto-suave);
  font-size: 13px;
  text-align: center;
  background: #f8faf9;
  flex-shrink: 0;
}

.indicador-digitando {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 20px;
  border-top: 1px solid var(--cinza-borda);
  background: #f8faf9;
  color: var(--texto-suave);
  font-size: 13px;
  font-style: italic;
  flex-shrink: 0;
}

.pontos-digitando {
  display: inline-flex;
  gap: 3px;
}

.pontos-digitando i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
  animation: pulso-digitando 1.1s infinite ease-in-out;
}

.pontos-digitando i:nth-child(2) {
  animation-delay: 0.15s;
}

.pontos-digitando i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pulso-digitando {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.app.espectador {
  flex-direction: row;
}

.trilho {
  width: 64px;
  flex-shrink: 0;
  background: #1b4332;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
}

.trilho-botao {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
  padding: 0;
}

.badge-sino {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.trilho-botao svg {
  width: 22px;
  height: 22px;
}

.trilho-botao:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.trilho-botao.ativo {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.espectador-corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.painel-ao-vivo {
  flex: 1;
  display: flex;
  min-height: 0;
}

.quadro-ao-vivo {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.secao-assunto {
  width: 100%;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 12px 14px 14px;
}

.secao-assunto h2 {
  margin: 0 0 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grade-conversas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.ponto-cor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-ao-vivo {
  width: 100%;
  text-align: left;
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--cinza-borda);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-ao-vivo strong {
  font-size: 14px;
}

.card-ao-vivo span {
  font-size: 12px;
  color: var(--texto-suave);
}

.card-ao-vivo .selo-assunto,
.item-conversa .selo-assunto,
.card-fila .selo-assunto {
  align-self: flex-start;
  margin: 5px 0 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-ao-vivo .selo-assunto.neutro,
.item-conversa .selo-assunto.neutro,
.card-fila .selo-assunto.neutro {
  color: #4b5563;
}

.card-ao-vivo .etapa,
.item-conversa .etapa,
.card-fila .etapa {
  font-weight: 600;
  color: var(--texto);
  font-size: 12px;
}

.card-ao-vivo .status-vista,
.item-conversa .status-vista {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
}

.card-ao-vivo .status-vista.pendente,
.item-conversa .status-vista.pendente {
  color: #b45309;
}

.card-ao-vivo .status-vista.aguardando {
  color: #ea580c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.card-ao-vivo .status-vista.aguardando.critico {
  color: #dc2626;
}

.card-ao-vivo.urgencia {
  box-shadow: 0 0 0 1px #dc2626, 0 0 10px rgba(220, 38, 38, 0.28);
  animation: pulso-urgencia 2.4s ease-in-out infinite;
}

.card-ao-vivo.urgencia.ativa {
  box-shadow: 0 0 0 1px #dc2626, 0 0 12px rgba(220, 38, 38, 0.22);
}

@keyframes pulso-urgencia {
  0%,
  100% {
    box-shadow: 0 0 0 1px #dc2626, 0 0 8px rgba(220, 38, 38, 0.22);
  }
  50% {
    box-shadow: 0 0 0 2px #b91c1c, 0 0 16px rgba(220, 38, 38, 0.48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-ao-vivo.urgencia {
    animation: none;
  }
}

.item-conversa.alerta-timeout:not(.ativa),
.card-ao-vivo.alerta-timeout:not(.ativa),
.item-alerta.alerta-timeout:not(.ativa) {
  border-top-color: #d97706;
  border-right-color: #d97706;
  border-bottom-color: #d97706;
  background: #fffbeb;
}

.selo-timeout {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  background: #fef3c7;
  color: #b45309;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.item-conversa .selo-timeout,
.card-ao-vivo .selo-timeout,
.item-alerta .selo-timeout,
.chat-cabecalho > div:first-child span.selo-timeout {
  color: #b45309;
  font-size: 11px;
}

.selo-timeout svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.card-ao-vivo.nao-concluida {
  background: #fff8f8;
}

.selo-nao-concluida {
  align-self: flex-start;
  display: inline-flex;
  margin-top: 4px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.item-conversa .selo-nao-concluida,
.card-ao-vivo .selo-nao-concluida,
.item-alerta .selo-nao-concluida {
  color: #b91c1c;
  font-size: 11px;
}

.lista-alertas-itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-alerta {
  width: 100%;
  text-align: left;
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--cinza-borda);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-alerta strong {
  font-size: 14px;
}

.item-alerta .alerta-atendente {
  font-size: 12px;
  color: var(--texto-suave);
}

.item-alerta .selo-assunto {
  align-self: flex-start;
  margin: 5px 0 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-alerta .selo-assunto.neutro {
  color: #4b5563;
}

.item-alerta .alerta-motivo {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
}

.item-alerta.nao-concluida:not(.ativa) .alerta-motivo {
  color: #b91c1c;
}

.item-alerta.alerta-timeout:not(.ativa) {
  border-color: #d97706;
  background: #fffbeb;
}

.item-alerta.nao-concluida:not(.ativa):not(.alerta-timeout) {
  background: #fff8f8;
  border-color: #ef4444;
}

.item-alerta.ativa {
  border-color: var(--verde);
  background: var(--verde-claro);
}

.card-ao-vivo.ativa {
  border-top-color: var(--verde);
  border-right-color: var(--verde);
  border-bottom-color: var(--verde);
  background: var(--verde-claro);
}

.painel-detalhe {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
  border-left: 1px solid var(--cinza-borda);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.relatorio {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 32px;
}

.relatorio-filtros {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.periodo-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.periodo-toggle button {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--texto-suave);
}

.periodo-toggle button.ativo {
  background: var(--verde);
  color: #fff;
}

.periodo-faixa {
  font-size: 13px;
  color: var(--texto-suave);
}

.grade-relatorio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.card-relatorio {
  text-align: left;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
  cursor: pointer;
}

.card-relatorio:hover {
  border-color: var(--verde);
}

.card-relatorio strong {
  font-size: 15px;
}

.card-relatorio em {
  font-style: normal;
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  margin-top: auto;
}

.card-relatorio > span:last-child {
  font-size: 12px;
  color: var(--texto-suave);
}

.relatorio-topo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.btn-voltar {
  border: 1px solid var(--cinza-borda);
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}

.calendario-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.calendario-nav button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--cinza-borda);
  background: #fff;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
}

.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-width: 720px;
}

.calendario-cabeca {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
  padding: 4px 0;
}

.calendario-dia {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  min-height: 72px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendario-dia.vazio {
  background: transparent;
  border-color: transparent;
}

.calendario-dia em {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}

.calendario-dia small {
  font-size: 12px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.calendario-dia.com-valor {
  border-color: #f0d9b5;
  background: #fff8ee;
}

.calendario-dia.com-valor small {
  color: #9a3412;
  font-weight: 700;
}

.calendario-dia.hoje {
  box-shadow: inset 0 0 0 2px var(--verde);
}

.filtro-auditoria {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
}

.filtro-auditoria select {
  min-width: 200px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-weight: 600;
  color: var(--texto);
}

.tabela-auditoria-wrap {
  overflow: auto;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
}

.tabela-auditoria {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela-auditoria th {
  text-align: left;
  padding: 10px 12px;
  background: #f8fafc;
  color: var(--texto-suave);
  font-size: 12px;
  position: sticky;
  top: 0;
}

.tabela-auditoria td {
  padding: 10px 12px;
  border-top: 1px solid var(--cinza-borda);
  vertical-align: top;
}

.tabela-auditoria td strong {
  display: block;
}

.tabela-auditoria td small {
  display: block;
  color: var(--texto-suave);
  font-size: 11px;
  margin-top: 2px;
}

.tabela-auditoria tr.oculta {
  background: #f8fafc;
  color: #64748b;
}

.selo-oculta {
  display: inline-block;
  margin-left: 8px;
  background: #e2e8f0;
  color: #334155;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.campo select {
  padding: 11px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  background: #fff;
  outline: none;
}

.config-abas {
  margin-bottom: 20px;
}

.config-toolbar {
  margin-bottom: 16px;
}

.config-form {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-bottom: 16px;
}

.config-form h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.config-form-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 16px;
}

.config-form-acoes {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.config-form-compacto {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.config-form-compacto .campo {
  flex: 1;
  margin: 0;
}

.btn-config-primario {
  border: none;
  background: var(--verde);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
}

.btn-config-primario:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-config-secundario {
  border: 1px solid var(--cinza-borda);
  background: #fff;
  padding: 8px 14px;
  border-radius: 8px;
}

.btn-config-link {
  border: none;
  background: none;
  color: var(--verde);
  font-weight: 600;
  padding: 0;
}

.btn-config-link.perigo {
  color: #b91c1c;
}

.config-acoes-celula {
  display: flex;
  gap: 12px;
}

.campo-cor {
  display: flex;
  gap: 8px;
  align-items: center;
}

.campo-cor input[type='color'] {
  width: 42px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  background: #fff;
}

.campo-cor input[type='text'],
.campo-cor input:not([type='color']) {
  flex: 1;
}

.config-assunto-nome {
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-assunto-nome i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lista-etapas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.item-etapa {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  padding: 10px 12px;
}

.item-etapa strong {
  flex: 1;
}

.item-etapa input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
}

.etapa-ordem {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.etapa-acoes {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.btn-config-icone {
  width: 32px;
  height: 32px;
  border: 1px solid var(--cinza-borda);
  background: #fff;
  border-radius: 8px;
}

.btn-config-icone:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.banners-mensagens {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.banner-mensagem {
  pointer-events: auto;
  width: 100%;
  text-align: left;
  background: #1f2933;
  color: #fff;
  border: none;
  border-left: 4px solid var(--verde);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.banner-mensagem strong {
  font-size: 14px;
}

.banner-mensagem span {
  font-size: 12px;
  opacity: 0.8;
}

.banner-mensagem em {
  font-style: normal;
  font-size: 13px;
  opacity: 0.95;
  margin-top: 2px;
}

.btn-voltar-lista {
  display: none;
}

@media (max-width: 800px) {
  .app {
    height: 100dvh;
    overflow: hidden;
  }

  .app.espectador {
    flex-direction: column;
  }

  .trilho {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    gap: 4px;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    order: 2;
  }

  .espectador-corpo {
    order: 1;
    min-height: 0;
  }

  .topo {
    padding: 8px 12px;
    gap: 10px;
  }

  .logo-topo {
    height: 36px;
  }

  .topo strong {
    font-size: 14px;
  }

  .topo span {
    font-size: 12px;
  }

  .painel,
  .painel-ao-vivo {
    min-width: 0;
  }

  .lateral,
  .quadro-ao-vivo,
  .painel > .chat,
  .painel > .chat-vazio,
  .painel-detalhe {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .painel > .chat,
  .painel > .chat-vazio,
  .painel-ao-vivo > .painel-detalhe {
    display: none;
  }

  .painel.conversa-aberta > .lateral,
  .painel-ao-vivo.conversa-aberta > .quadro-ao-vivo {
    display: none;
  }

  .painel.conversa-aberta > .chat,
  .painel-ao-vivo.conversa-aberta > .painel-detalhe {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: none;
    border-left: none;
    min-height: 0;
  }

  .lateral-corpo:not(.historico) {
    flex-direction: column;
  }

  .bloco {
    flex: 1 1 50%;
    width: 100%;
  }

  .bloco + .bloco {
    border-left: none;
    border-top: 1px solid var(--cinza-borda);
  }

  .btn-voltar-lista {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px;
    border: 1px solid var(--cinza-borda);
    background: #fff;
    color: var(--texto);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 12px;
  }

  .chat-cabecalho {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
  }

  .chat-acoes {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .seletores-conversa {
    width: 100%;
  }

  .seletor-assunto {
    flex: 1 1 140px;
    min-width: 0;
  }

  .seletor-assunto select {
    max-width: none;
    width: 100%;
  }

  .mensagens {
    padding: 12px;
  }

  .balao {
    max-width: 88%;
  }

  .responder {
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .responder button {
    padding: 11px 14px;
  }

  .rodape-leitura {
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .grade-conversas {
    grid-template-columns: 1fr;
  }
}