/* tokens: ver tema.css (fonte única) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/20px var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* Layout */
.app { display: grid; grid-template-columns: 220px 1fr; height: 100vh; }
.lateral { border-right: 1px solid var(--line-100); background: var(--panel); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.marca { font-weight: 700; letter-spacing: -.02em; font-size: 17px; padding: 4px 10px 18px; display: flex; align-items: center; gap: 8px; }
.marca i { width: 22px; height: 22px; border-radius: 7px; background: var(--hero-gradient); display: inline-block; box-shadow: var(--shadow-card); }
.nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink-600); text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.nav:hover { background: var(--surface-100); }
.nav.ativo { background: var(--surface-100); color: var(--ink-900); font-weight: 500; }
.nav .n { margin-left: auto; font-size: 12px; color: var(--ink-500); }
.lateral .rodape { margin-top: auto; font-size: 12px; color: var(--ink-500); padding: 10px; }
.principal { overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.topo { height: 52px; border-bottom: 1px solid var(--line-100); display: flex; align-items: center; padding: 0 20px; gap: 12px; background: var(--panel); flex-shrink: 0; }
.topo h1 { font-size: 15px; font-weight: 600; margin: 0; }
.conteudo { flex: 1; overflow: auto; }

/* Botões e chips */
.btn { border: 1px solid var(--line-200); background: var(--panel); border-radius: var(--r-btn); padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500; transition: background var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--surface-100); }
.btn.primario { background: var(--btn-primary-bg); color: var(--btn-primary-ink); border-color: transparent; }
.btn.pequeno { padding: 3px 9px; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-chip); padding: 1px 7px; font-size: 12px; font-weight: 500; background: var(--surface-100); color: var(--ink-600); white-space: nowrap; }
.chip.ia { background: var(--ia-bg); color: var(--ia-ink); }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.ruim { background: var(--bad-bg); color: var(--bad-ink); }
.chip.aviso { background: var(--warn-bg); color: var(--warn-ink); }
.chip.quebra { white-space: normal; overflow-wrap: anywhere; height: auto; line-height: 1.4; max-width: 100%; }
.filtros { display: flex; gap: 4px; }
.filtros .btn.ativo { background: var(--surface-100); border-color: var(--line-300); }

/* Inbox: lista · chat · ficha */
.inbox { display: grid; grid-template-columns: 320px 1fr 300px; height: 100%; }
.lista { border-right: 1px solid var(--line-100); overflow: auto; background: var(--panel); }
.item { padding: 12px 16px; border-bottom: 1px solid var(--line-100); cursor: pointer; display: grid; gap: 3px; }
.item:hover { background: var(--surface-50); }
.item.ativo { background: var(--accent-50); }
.item .l1 { display: flex; gap: 6px; align-items: center; }
.item .nome { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .hora { font-size: 12px; color: var(--ink-500); }
.item .previa { color: var(--ink-600); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.faixa { padding: 8px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; border-bottom: 1px solid var(--line-100); }
.faixa.ia { background: var(--ia-bg); color: var(--ia-ink); }
.faixa.humano { background: var(--surface-100); color: var(--ink-600); }
.faixa .btn { margin-left: auto; }
.faixa.cobranca { background: var(--warn-bg); color: var(--warn-ink); }
.faixa.cobranca.ruim { background: var(--bad-bg); color: var(--bad-ink); }
.mensagens { flex: 1; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 72%; padding: 8px 12px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card); white-space: pre-wrap; word-wrap: break-word; }
.msg.out { align-self: flex-end; background: var(--surface-200); }
.msg.out.ia { background: var(--ia-bg); }
.msg.nota { align-self: center; background: transparent; box-shadow: none; color: var(--ink-500); font-size: 12px; }
.msg .meta { display: block; font-size: 11px; color: var(--ink-500); margin-top: 3px; }
/* warn-ink sobre warn-bg: 6,0:1 no claro, 7,4:1 no escuro (tokens trocam no tema) */
.msg .selo-incerto { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--warn-bg); color: var(--warn-ink); }
.msg img { max-width: 240px; border-radius: 8px; display: block; }
.msg audio { display: block; max-width: 260px; height: 36px; }
.msg .transcricao { margin-top: 4px; font-size: 13px; opacity: .85; font-style: italic; }
.msg .transcricao span { font-style: normal; font-weight: 600; }
.rascunho { margin: 0 16px 8px; border: 1px dashed var(--ia-ink); border-radius: var(--r-card); background: var(--ia-bg); padding: 10px 12px; }
.rascunho textarea { width: 100%; border: 0; background: transparent; resize: vertical; min-height: 44px; outline: none; }
.rascunho .acoes { display: flex; gap: 6px; justify-content: flex-end; }
.compor { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-100); background: var(--panel); }
.compor textarea { flex: 1; border: 1px solid var(--line-200); border-radius: var(--r-btn); padding: 8px 10px; resize: none; height: 40px; background: var(--panel); }
.ficha { border-left: 1px solid var(--line-100); overflow: auto; padding: 16px; background: var(--panel); display: grid; gap: 16px; align-content: start; }
.ficha h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); margin: 0 0 6px; font-weight: 600; }
.attr { display: grid; grid-template-columns: 110px 1fr; gap: 6px; font-size: 13px; padding: 3px 0; }
.attr span:first-child { color: var(--ink-500); }
.resumo { background: var(--ia-bg); color: var(--ia-ink); border-radius: var(--r-card); padding: 10px; font-size: 13px; white-space: pre-wrap; }
.vazio { display: grid; place-items: center; height: 100%; color: var(--ink-500); text-align: center; padding: 24px; }

/* Kanban */
.kanban { display: flex; gap: 12px; padding: 16px; height: 100%; overflow-x: auto; align-items: flex-start; }
.coluna { width: 270px; flex-shrink: 0; background: var(--surface-100); border-radius: var(--r-card); padding: 8px; max-height: 100%; display: flex; flex-direction: column; }
.coluna .cab { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-weight: 600; }
.coluna .cab .bola { width: 8px; height: 8px; border-radius: 50%; }
.coluna .cab .soma { margin-left: auto; font-weight: 400; color: var(--ink-500); font-size: 12px; font-family: var(--font-mono); }
.coluna .cards { display: grid; gap: 8px; overflow: auto; min-height: 40px; }
.coluna.alvo { outline: 2px dashed var(--accent-200); }
.card { background: var(--panel); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-card); cursor: grab; display: grid; gap: 6px; }
.card .t { font-weight: 500; }
.card .l { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-500); }
.card .valor { margin-left: auto; font-family: var(--font-mono); color: var(--ink-700); }

/* Painel e config */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 20px; }
.kpi { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow-window); padding: 16px; }
.kpi b { display: block; font-size: 28px; line-height: 32px; letter-spacing: -.02em; font-weight: 600; }
.kpi span { color: var(--ink-500); font-size: 13px; }
.secao { padding: 20px; max-width: 860px; display: grid; gap: 16px; }
.caixa { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow-window); padding: 16px; display: grid; gap: 10px; }
.caixa h2 { font-size: 15px; margin: 0; }
.caixa p { margin: 0; color: var(--ink-600); }
.modos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.modo { border: 1px solid var(--line-200); border-radius: var(--r-btn); padding: 10px; cursor: pointer; display: grid; gap: 4px; }
.modo.ativo { border-color: var(--ia-ink); background: var(--ia-bg); }
.modo small { color: var(--ink-500); font-size: 12px; line-height: 16px; }
input.campo, textarea.campo, select.campo { width: 100%; border: 1px solid var(--line-200); border-radius: 8px; padding: 7px 10px; background: var(--panel); }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab td, table.tab th { border-bottom: 1px solid var(--line-100); padding: 8px 6px; text-align: left; vertical-align: top; }
table.tab th { color: var(--ink-500); font-weight: 500; }

/* Negócio: Ganho / Perdido */
.status-neg { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.status-neg small { color: var(--ink-500); font-size: 12px; }
.btn.ganho:hover { background: var(--ok-bg); color: var(--ok-ink); }
.btn.perdido:hover { background: var(--bad-bg); color: var(--bad-ink); }
.card .status-neg { margin-top: 0; }
.card .status-neg .btn { padding: 1px 7px; font-size: 11px; }

/* Atendimento (M2) */
.online { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; cursor: pointer; color: var(--ink-600); }
.chamado-box { border: 1px solid var(--line-200); border-radius: var(--r-card); padding: 10px; display: grid; gap: 4px; }
.chamado-box select.campo { padding: 2px 6px; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.caixa-mini { display: grid; gap: 6px; margin-top: 6px; }
.historico summary { cursor: pointer; font-size: 12px; color: var(--ink-500); margin-top: 4px; }
.evento { display: grid; gap: 1px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-100); }
.evento span:first-child { color: var(--ink-500); }
.evento em { display: block; font-style: normal; background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: 3px 6px; margin-top: 2px; white-space: pre-wrap; }
.nota-interna { display: flex; gap: 6px; margin-top: 6px; }
.compor { position: relative; }
.atalhos { position: absolute; left: 16px; right: 16px; bottom: 100%; background: var(--panel); border: 1px solid var(--line-200); border-radius: var(--r-card); box-shadow: var(--shadow-window); display: grid; max-height: 240px; overflow: auto; }
.atalhos button { border: 0; background: none; text-align: left; padding: 7px 10px; cursor: pointer; display: grid; gap: 1px; }
.atalhos button:hover, .atalhos button.ativo { background: var(--surface-100); }
.atalhos button span { color: var(--ink-500); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.caixa label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-600); }
.caixa label.linha { display: flex; align-items: center; gap: 8px; }
.caixa code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-100); padding: 0 4px; border-radius: 4px; }
.horario { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.horario .largo { grid-column: 1 / -1; }
.membros { display: grid; gap: 4px; margin-top: 6px; }
.membros .cap { width: 70px; margin-left: auto; padding: 3px 6px; }
.l1 { display: flex; gap: 6px; align-items: center; }
.barra { display: grid; grid-template-columns: 20px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; }
.barra i { display: block; height: 10px; border-radius: 5px; background: var(--accent-200); min-width: 2px; }
.barra b { font-weight: 500; text-align: right; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--hero-gradient); padding: 16px; }
.login form { background: var(--panel); color: var(--ink); border-radius: var(--r-window); box-shadow: var(--shadow-window); padding: 28px; width: 100%; max-width: 360px; display: grid; gap: 12px; }
.login h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.erro { color: var(--bad-ink); font-size: 13px; }
.aviso-texto { color: var(--warn-ink); font-size: 13px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { flex-direction: row; overflow-x: auto; padding: 8px; }
  .lateral .marca, .lateral .rodape { display: none; }
  .inbox { grid-template-columns: 1fr; }
  .inbox.com-conversa .lista, .inbox .ficha { display: none; }
  .inbox:not(.com-conversa) .chat { display: none; }
  .modos { grid-template-columns: 1fr 1fr; }
}

/* Agenda (M4): semana por profissional */
.agenda { display: grid; grid-template-columns: 52px repeat(7, minmax(110px, 1fr)); padding: 12px 16px; min-width: 860px; }
.ag-cab { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink-600); text-transform: capitalize; }
.ag-horas div:not(.ag-cab) { font-size: 11px; color: var(--ink-500); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.ag-dia { border-left: 1px solid var(--line-100); }
.ag-dia.hoje .ag-cab { color: var(--accent-600); }
.ag-col { position: relative; background-image: linear-gradient(var(--line-100) 1px, transparent 1px); background-size: 100% 44px; }
.ag-livre, .ag-item { position: absolute; left: 3px; right: 3px; border-radius: 6px; font-size: 11px; line-height: 14px; padding: 2px 5px; overflow: hidden; text-align: left; cursor: pointer; }
.ag-livre { border: 1px dashed var(--line-300); background: transparent; color: var(--ink-500); opacity: .55; transition: opacity var(--dur-fast) var(--ease-out); }
.ag-livre:hover { opacity: 1; background: var(--accent-50); color: var(--accent-600); }
.ag-item { background: var(--accent-50); color: var(--ink-800); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 1px; z-index: 1; }
.ag-item span { color: var(--ink-600); }
.ag-item.confirmado { background: var(--ok-bg); }
.ag-item.realizado { background: var(--ia-bg); }
.ag-item.faltou { background: var(--bad-bg); }

/* Modal de confirmação do app (substitui confirm() nativo) */
.modal-fundo { position: fixed; inset: 0; background: rgba(15,16,18,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; }
.modal { background: var(--panel); border-radius: var(--r-window); box-shadow: var(--shadow-window); padding: 20px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.modal h2 { font-size: 16px; margin: 0; }
.modal-texto p { margin: 0 0 8px; color: var(--ink-600); }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.btn.perigo { background: var(--bad-ink); color: var(--surface-0); border-color: transparent; }
.btn:disabled { opacity: .6; cursor: progress; }
.sugestao .acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.campo[aria-invalid="true"] { border-color: #d64545; box-shadow: 0 0 0 2px rgba(214, 69, 69, .2); }

/* Base de conhecimento: importar (site/arquivo/texto), prévia e "Testar a IA". Só tokens: claro/escuro de graça; cabe em 360px. */
.dica { color: var(--ink-600); font-size: 13px; margin: 0; }
.linha-campo { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-campo .campo { flex: 1 1 220px; min-width: 0; }
.base-fonte { font-size: 12px; color: var(--ink-600); overflow-wrap: anywhere; }
.base-fonte-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-100); }
.base-fonte-linha:first-of-type { border-top: 0; }
.base-fonte-linha .nome { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.base-prev-lista { display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.base-prev-item { border: 1px solid var(--line-100); border-radius: 8px; padding: 6px 10px; display: grid; gap: 6px; }
.base-prev-item[open] { gap: 8px; }
.base-prev-item summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.base-prev-item summary .tit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-prev-item input[type=checkbox] { width: 18px; height: 18px; flex: none; }
.base-prev-topo { justify-content: flex-start; }
.base-teste-lista { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.base-teste-lista .dica { overflow-wrap: anywhere; }
.base-feito { color: var(--ok-ink); background: var(--ok-bg); }
@media (max-width: 420px) {
  .linha-campo .btn { flex: 1 1 100%; }
}
/* Criar conta e escolha do pack */
.login .dica { color: var(--ink-500); font-size: 12px; margin-top: -6px; }
.login .troca-modo { margin: 0; font-size: 13px; color: var(--ink-600); text-align: center; }
.pack-boas { min-height: 100vh; background: var(--bg, var(--panel)); display: flex; flex-direction: column; }
.pack-boas .topo .marca { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.pack-boas .topo .ws { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-boas .simb-svg { height: 22px; width: auto; color: var(--ink-900); }
.pack-tela { max-width: 1100px; width: 100%; margin: 0 auto; padding: 20px 16px; display: grid; gap: 16px; box-sizing: border-box; }
.pack-intro h2 { margin: 0 0 6px; }
.pack-intro p { margin: 0; color: var(--ink-600); max-width: 70ch; }
.pack-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pack-card { border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pack-card.atual { border-color: var(--accent-200); background: var(--accent-50); }
.pack-card h2 { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pack-card p { margin: 0; color: var(--ink-600); font-size: 13px; }
.pack-card ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; flex: 1; overflow-wrap: anywhere; }
.pack-card .btn { align-self: flex-start; }
.pack-ico { font-size: 26px; line-height: 1; }
@media (max-width: 400px) { .pack-grade { grid-template-columns: 1fr; } }