* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  padding: 20px 16px;
}
.container { max-width: 1100px; margin: 0 auto; }
h1 { font-size: 1.35rem; margin-bottom: 4px; }
.sub { color: #64748b; font-size: .88rem; margin-bottom: 20px; }
.topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.usuario-info { font-size: .85rem; color: #64748b; }
.usuario-info a { color: #ef4444; text-decoration: none; margin-left: 10px; }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  padding: 6px 16px; border-radius: 20px; text-decoration: none;
  font-size: .85rem; background: #e2e8f0; color: #475569; font-weight: 500;
}
.tabs a.ativo { background: #0f172a; color: #fff; }

.busca { margin-bottom: 16px; }
.busca input {
  width: 100%; max-width: 420px; padding: 9px 12px; border: 1px solid #cbd5e1;
  border-radius: 8px; font-size: .9rem;
}

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
thead { background: #0f172a; color: #fff; }
th { padding: 10px 12px; text-align: left; font-size: .82rem; font-weight: 600; }
td { padding: 10px 12px; font-size: .88rem; }
tr:not(:last-child) td { border-bottom: 1px solid #f1f5f9; }
tr:hover td { background: #f8fafc; }
a.linha { color: inherit; text-decoration: none; display: block; }

.badge { padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-gt { background: #dbeafe; color: #1e40af; }
.badge-homologacao { background: #fef9c3; color: #854d0e; }
.badge-vendas { background: #dcfce7; color: #166534; }
.badge-sem-equipe { background: #f1f5f9; color: #64748b; }
.badge-pausada { background: #fee2e2; color: #991b1b; }
.badge-ativa { background: #dcfce7; color: #166534; }

.vazio { text-align: center; padding: 60px 20px; color: #94a3b8; }

.login-card {
  max-width: 360px; margin: 80px auto; background: #fff; padding: 28px;
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.login-card h1 { margin-bottom: 20px; }
.login-card label { display: block; font-size: .84rem; color: #475569; margin: 10px 0 4px; }
.login-card input {
  width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: .9rem;
}
.login-card button {
  margin-top: 16px; width: 100%; background: #0f172a; color: #fff; border: none;
  padding: 10px; border-radius: 7px; cursor: pointer; font-weight: 600;
}
.erro { background: #fef2f2; color: #991b1b; padding: 10px 12px; border-radius: 7px; font-size: .85rem; margin-bottom: 10px; }

.back { display: inline-block; margin-bottom: 16px; color: #64748b; text-decoration: none; font-size: .88rem; }

.msgs { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; background: #fff; padding: 16px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.msg { display: flex; }
.msg.lead { justify-content: flex-start; }
.msg.agente, .msg.humano { justify-content: flex-end; }
.bubble { max-width: 72%; padding: 9px 13px; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.msg.lead .bubble { background: #e0f2fe; }
.msg.agente .bubble { background: #f0fdf4; }
.msg.humano .bubble { background: #ede9fe; }
.msg-label { font-size: .7rem; color: #94a3b8; display: block; margin-bottom: 2px; }

.painel-acoes { background: #fff; padding: 16px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.07); margin-top: 16px; }
.painel-acoes textarea {
  width: 100%; min-height: 70px; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 7px;
  font-family: inherit; font-size: .9rem; resize: vertical;
}
.btn-group { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn { padding: 8px 18px; border: none; border-radius: 7px; cursor: pointer; font-size: .87rem; font-weight: 600; }
.btn-pausar { background: #ef4444; color: #fff; }
.btn-retomar { background: #22c55e; color: #fff; }
.btn-enviar { background: #0f172a; color: #fff; }