.agente-page { padding: 18px 22px 40px; }
.agente-topo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.agente-topo h1 { margin: 0 0 4px; font-size: 22px; }
.agente-topo p { margin: 0; color: #666; }
.agente-estado { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.agente-pill { background: #fff; border: 1px solid #e6e6e6; border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.agente-pill.off { background: #fff4f4; border-color: #f0c2c2; }
.agente-kpis { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.agente-kpi { border: 1px solid #eee; background: #fff; border-radius: 10px; padding: 12px 14px; min-width: 140px; cursor: pointer; }
.agente-kpi.activo { border-color: #FFB71B; box-shadow: inset 0 0 0 1px #FFB71B; }
.agente-kpi strong { display: block; font-size: 20px; }
.agente-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.agente-lista, .agente-detalhe { background: #fff; border: 1px solid #eee; border-radius: 12px; }
.agente-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f2f2f2; background: #fff; padding: 12px 14px; cursor: pointer; }
.agente-item.activo { background: #fff8e8; }
.agente-item small { color: #777; }
.agente-conversa { max-height: 420px; overflow: auto; padding: 12px; background: #fafafa; }
.agente-msg { background: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #eee; }
.agente-msg.enviados { border-left: 3px solid #FFB71B; }
.agente-msg .corpo { white-space: pre-wrap; margin-top: 6px; }
.agente-colunas { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; padding: 12px; }
.agente-card { border: 1px solid #eee; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.agente-card h3 { margin: 0 0 8px; font-size: 15px; }
.agente-linha { border-top: 1px solid #f3f3f3; padding-top: 8px; margin-top: 8px; }
.agente-preco-pendente { color: #9a6700; font-weight: 600; }
.agente-accoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.agente-vazio { padding: 28px; color: #777; }
@media (max-width: 1100px) {
    .agente-layout, .agente-colunas { grid-template-columns: 1fr; }
}