:root {
  --fundo: #f5f5f2;
  --cartao: #ffffff;
  --texto: #1d1d1b;
  --suave: #6b6b66;
  --borda: #e2e2dc;
  --marca: #f2c200;
  --marca-escura: #1d1d1b;
  --ia: #eef4ff;
  --humano: #fff6d6;
  --cliente: #ffffff;
  --perigo: #b42318;
  --ok: #067647;
}

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
.suave { color: var(--suave); }
.erro { color: var(--perigo); }

.topo { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1rem; background: var(--marca-escura); color: #fff; flex-wrap: wrap; }
.marca { text-decoration: none; font-size: 1.15rem; }
.marca b, h1 b { color: var(--marca); }
.topo nav { display: flex; gap: .25rem; flex: 1; }
.topo nav a { text-decoration: none; padding: .35rem .7rem; border-radius: 6px; color: #d6d6d0; }
.topo nav a.ativo, .topo nav a:hover { background: #33332f; color: #fff; }
.sair { display: flex; align-items: center; gap: .6rem; margin: 0; color: #d6d6d0; }

.conteudo { max-width: 1200px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.centro { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem; }
.login { width: 100%; max-width: 360px; display: grid; gap: .8rem; }

label { display: grid; gap: .25rem; font-size: .9rem; color: var(--suave); }
input, select, textarea { font: inherit; color: var(--texto); padding: .5rem .6rem; border: 1px solid var(--borda); border-radius: 6px; background: #fff; width: 100%; }
textarea { resize: vertical; }
button, .botao { font: inherit; cursor: pointer; border: 0; border-radius: 6px; padding: .5rem .9rem; background: var(--marca); color: var(--marca-escura); font-weight: 600; text-decoration: none; display: inline-block; }
button.secundario, .botao.secundario { background: #fff; border: 1px solid var(--borda); font-weight: 500; }
button.perigo { background: var(--perigo); color: #fff; }
button.link { background: none; color: inherit; padding: 0; text-decoration: underline; font-weight: 400; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.barra { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.barra .cresce { flex: 1; }
.selo { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .78rem; background: #ecece6; white-space: nowrap; }
.selo.ia { background: var(--ia); }
.selo.humano { background: var(--humano); }
.selo.alerta { background: #fde7e5; color: var(--perigo); }

table { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); background: #fafaf7; }
tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; }

.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.campos { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vazio { text-align: center; padding: 2rem 1rem; color: var(--suave); }
.aviso { padding: .6rem .8rem; border-radius: 6px; background: #ecfdf3; color: var(--ok); margin-bottom: 1rem; }
.aviso.erro { background: #fef3f2; color: var(--perigo); }

@media (max-width: 640px) {
  .topo { gap: .6rem; }
  .sair span { display: none; }
}

.conteudo.largo { max-width: none; }
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; }
.coluna { background: #ecece6; border-radius: 10px; padding: .6rem; display: grid; gap: .5rem; align-content: start; min-height: 120px; }
.coluna h2 { font-size: .9rem; text-transform: capitalize; }
.card { background: var(--cartao); border: 1px solid var(--borda); border-radius: 8px; padding: .55rem; display: grid; gap: .3rem; font-size: .9rem; }
.card a { text-decoration: none; }
.card select { padding: .25rem .4rem; font-size: .85rem; }

.caixa { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; height: calc(100vh - 110px); min-height: 480px; }
.lista-conversas { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow-y: auto; }
.abas { display: flex; gap: .25rem; padding: .5rem; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--cartao); }
.abas a { text-decoration: none; padding: .25rem .6rem; border-radius: 6px; font-size: .9rem; }
.abas a.ativo { background: var(--marca); }
.item-conversa { display: block; padding: .6rem .7rem; border-bottom: 1px solid var(--borda); text-decoration: none; }
.item-conversa.ativo, .item-conversa:hover { background: #fafaf2; }
.previa { font-size: .85rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; display: flex; flex-direction: column; min-height: 0; padding: .8rem; gap: .6rem; }
.chat.vazio { justify-content: center; }
.chat-topo { display: flex; gap: .8rem; align-items: start; border-bottom: 1px solid var(--borda); padding-bottom: .6rem; }
.chat-topo .cresce { flex: 1; }
.mensagens { flex: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; background: #efeae2; border-radius: 8px; padding: .6rem; min-height: 120px; }
.balao { max-width: 75%; margin: .3rem 0; padding: .45rem .65rem; border-radius: 8px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.balao .autor { font-size: .72rem; color: var(--suave); margin-bottom: .15rem; }
.balao.cliente { background: var(--cliente); margin-right: auto; }
.balao.ia { background: var(--ia); margin-left: auto; }
.balao.humano { background: var(--humano); margin-left: auto; }
.balao.template { background: #e7f6e9; margin-left: auto; }
.compor { display: flex; gap: .5rem; align-items: end; }
.compor .cresce { flex: 1; }
.simulador { border-top: 1px dashed var(--borda); padding-top: .6rem; }
.digitando { color: var(--suave); font-style: italic; margin: .3rem 0; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }

@media (max-width: 800px) {
  .caixa { grid-template-columns: 1fr; height: auto; }
  .caixa.com-chat .lista-conversas { display: none; }
  .chat { min-height: 75vh; }
}
.balao .texto { white-space: pre-wrap; }
.faixa-alerta { background: var(--perigo); color: #fff; text-align: center; padding: .35rem 1rem; font-size: .9rem; font-weight: 600; }