* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; background: #f6f9fc; color: #1a1a1a; }
header { background: #635bff; color: #f6f9fc; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header select, header input { border: none; border-radius: 4px; padding: 6px 8px; }
.layout { display: flex; height: calc(100vh - 46px); }
.lista { width: 320px; border-right: 1px solid #ddd; overflow-y: auto; background: #fff; }
.lista input[type=search] { width: 100%; padding: 10px; border: none; border-bottom: 1px solid #eee; }
.conversa-item { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.conversa-item:hover { background: #f6f9fc; }
.conversa-item .nome { font-weight: 600; font-size: 14px; }
.conversa-item .preview { font-size: 12px; color: #777; }
.thread { flex: 1; display: flex; flex-direction: column; }
.thread-header { padding: 10px 16px; border-bottom: 1px solid #ddd; background: #fff; display: flex; justify-content: space-between; align-items: center; }
.mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 60%; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.msg.lead { align-self: flex-start; background: #fff; }
.msg.bot, .msg.human { align-self: flex-end; background: #d9fdd3; }
.compositor { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #ddd; background: #fff; }
.compositor input[type=text] { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
button { background: #635bff; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
button.secundario { background: #eee; color: #333; }
button:disabled { opacity: .5; cursor: default; }
.vazio { padding: 40px; text-align: center; color: #999; }