:root{
  --verde-escuro:#21401A; --verde:#467C3A; --dourado:#C77F2E;
  --texto:#1d1f1c; --suave:#6b7268; --linha:#e3e6df; --fundo:#f4f5f1;
  --bolha-lead:#ffffff; --bolha-robo:#e8f3e3; --bolha-humano:#dcefff;
  --quente:#c0392b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:15px/1.5 Calibri,Carlito,"Segoe UI",system-ui,sans-serif;
}
.oculto{display:none !important}
button{font:inherit; cursor:pointer}
.marca{font-family:"Trebuchet MS",sans-serif; font-weight:700; letter-spacing:.12em}
.marca span{color:var(--dourado)}

/* ------------------------------------------------------------------ login */
.login{height:100%; display:grid; place-items:center; background:var(--verde-escuro)}
.login .caixa{background:#fff; padding:34px; border-radius:6px; width:320px; display:grid; gap:12px}
.login .marca{color:var(--verde-escuro); font-size:20px}
.login h1{margin:0 0 6px; font:600 17px "Trebuchet MS",sans-serif; color:var(--suave)}
.login input{padding:11px 12px; border:1px solid var(--linha); border-radius:4px; font:inherit}
.login button{padding:11px; background:var(--verde); color:#fff; border:0; border-radius:4px; font-weight:700}
.erro{color:var(--quente); min-height:20px; margin:0; font-size:14px}

/* ------------------------------------------------------------------- app */
.app{height:100%; display:flex; flex-direction:column}
header{
  background:var(--verde-escuro); color:#fff; padding:10px 18px;
  display:flex; align-items:center; gap:24px; flex:0 0 auto;
}
header .marca{font-size:17px}
.placar{display:flex; gap:18px; font-size:14px; color:#c9d4c5; flex:1}
.placar b{color:#fff}
.placar .alerta b{color:#ffcf7a}
.quem{font-size:14px; color:#c9d4c5}
.quem a{color:var(--dourado); margin-left:10px}

main{flex:1; display:flex; min-height:0}

/* --------------------------------------------------------------- sidebar */
aside{width:320px; border-right:1px solid var(--linha); display:flex; flex-direction:column; background:#fff}
.busca{margin:10px; padding:9px 11px; border:1px solid var(--linha); border-radius:4px; font:inherit}
.filtros{display:flex; gap:4px; padding:0 10px 10px}
.filtros button{
  flex:1; padding:6px 4px; font-size:13px; border:1px solid var(--linha);
  background:#fff; border-radius:4px; color:var(--suave);
}
.filtros button.ativo{background:var(--verde); border-color:var(--verde); color:#fff; font-weight:700}
.lista{list-style:none; margin:0; padding:0; overflow-y:auto; flex:1}
.lista li{padding:11px 14px; border-bottom:1px solid var(--linha); cursor:pointer}
.lista li:hover{background:#f8faf6}
.lista li.ativo{background:#eef5ea; border-left:3px solid var(--verde); padding-left:11px}
.lista .topo{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.lista .nome{font-weight:700}
.lista .quando{font-size:12px; color:var(--suave); white-space:nowrap}
.lista .previa{font-size:13px; color:var(--suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lista .previa.nova{color:var(--texto); font-weight:700}
.etiquetas{display:flex; gap:5px; margin-top:4px}
.tag{font-size:11px; padding:1px 7px; border-radius:9px; background:#eef0eb; color:var(--suave)}
.tag.A{background:#fdecea; color:var(--quente); font-weight:700}
.tag.B{background:#fff4e0; color:#9a6a1a; font-weight:700}
.tag.robo{background:#e8f3e3; color:var(--verde)}
.tag.humano{background:#dcefff; color:#1c5f9e}

/* -------------------------------------------------------------- conversa */
.conversa{flex:1; display:flex; flex-direction:column; min-width:0}
.vazio{margin:auto; text-align:center; color:var(--suave)}
.vazio .dica{font-size:13px}
.cabecalho{
  padding:11px 18px; border-bottom:1px solid var(--linha); background:#fff;
  display:flex; align-items:center; gap:14px;
}
.cabecalho h2{margin:0; font:700 16px "Trebuchet MS",sans-serif}
.cabecalho .sub{font-size:13px; color:var(--suave)}
.cabecalho .acoes{margin-left:auto; display:flex; gap:8px}
.cabecalho button{
  padding:7px 13px; border:1px solid var(--verde); background:#fff;
  color:var(--verde); border-radius:4px; font-size:14px;
}
.cabecalho button.forte{background:var(--verde); color:#fff; font-weight:700}
.cabecalho button.suave{border-color:var(--linha); color:var(--suave)}

.mensagens{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px}
.bolha{max-width:62%; padding:9px 13px; border-radius:9px; white-space:pre-wrap; word-wrap:break-word}
.bolha.lead{background:var(--bolha-lead); border:1px solid var(--linha); align-self:flex-start}
.bolha.robo{background:var(--bolha-robo); align-self:flex-end}
.bolha.humano{background:var(--bolha-humano); align-self:flex-end}
.bolha .autor{display:block; font-size:11px; color:var(--suave); margin-bottom:2px}

.responder{border-top:1px solid var(--linha); padding:11px 18px; background:#fff; display:flex; gap:10px}
.responder textarea{
  flex:1; resize:none; padding:10px 12px; border:1px solid var(--linha);
  border-radius:4px; font:inherit; min-height:44px; max-height:140px;
}
.responder button{padding:0 20px; background:var(--verde); color:#fff; border:0; border-radius:4px; font-weight:700}
.responder button:disabled{background:#b9c4b4; cursor:default}
.aviso-robo{
  padding:9px 18px; background:#fffbe9; border-top:1px solid #f0e3b8;
  font-size:13px; color:#7a6520;
}

/* ----------------------------------------------------------------- ficha */
.ficha{width:280px; border-left:1px solid var(--linha); background:#fff; overflow-y:auto; padding:18px}
.ficha h3{margin:0 0 12px; font:700 14px "Trebuchet MS",sans-serif; color:var(--verde-escuro);
          text-transform:uppercase; letter-spacing:.05em}
.ficha dl{display:grid; grid-template-columns:auto 1fr; gap:7px 12px; margin:0 0 18px; font-size:14px}
.ficha dt{color:var(--suave)}
.ficha dd{margin:0; font-weight:600}
.ficha .resumo{background:#f8faf6; border-left:3px solid var(--verde); padding:10px 12px;
               font-size:14px; margin-bottom:18px; white-space:pre-wrap}
.ficha .anuncio{background:#fff8ec; border-left:3px solid var(--dourado); padding:10px 12px; font-size:13px}
.ficha .anuncio b{display:block; margin-bottom:4px; color:#8a5a1c}

@media (max-width:1100px){ .ficha{display:none} }
@media (max-width:760px){
  aside{width:100%} main{flex-direction:column}
  .conversa{min-height:60vh}
}

/* ------------------------------------------- lead que espera turma nova */
.tag.espera{background:#efe4c8; color:#6b5415}
.espera-ficha{background:#fbf6e8; border:1px solid #e4d9b8; border-radius:4px;
              padding:10px 12px; font-size:13px; line-height:1.6}
.espera-ficha b{display:block; color:#6b5415; font-size:14px}
.espera-ficha .falta{color:var(--quente); font-weight:400}