:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --texto: #1d2330;
  --suave: #5f6b7a;
  --borda: #dfe3ea;
  --primario: #2457d6;
  --cliente: #b4461b;
  --vendedor: #2457d6;
  --alerta: #fff4e5;
  --alerta-borda: #f0a020;
  --ok: #e8f7ee;
  --ok-borda: #2a9d5b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151b;
    --card: #1b2029;
    --texto: #e6e9ef;
    --suave: #9aa5b5;
    --borda: #2d3442;
    --primario: #6b93ff;
    --cliente: #ff9b6b;
    --vendedor: #8fb0ff;
    --alerta: #2d2414;
    --alerta-borda: #d8941c;
    --ok: #14291d;
    --ok-borda: #3fbf75;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--texto); }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--borda); }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 18px 0 8px; }
h2:first-child { margin-top: 0; }
main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px; padding: 16px 20px; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }
.painel { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 16px; min-width: 0; }
.dica { color: var(--suave); font-size: 13px; margin: 0 0 10px; }
.status { font-size: 12px; color: var(--suave); text-align: right; }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); cursor: pointer; }
button.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
.check { font-size: 13px; color: var(--suave); }
.transcricao { height: 320px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; padding: 10px; font-size: 14px; }
.fala { margin: 0 0 6px; }
.fala b { font-weight: 600; }
.fala.cliente b { color: var(--cliente); }
.fala.vendedor b { color: var(--vendedor); }
.fala.parcial { opacity: .6; }
.simular { display: flex; gap: 8px; margin-top: 10px; }
.simular input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); }
textarea { width: 100%; font: 13px/1.4 ui-monospace, monospace; padding: 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); resize: vertical; }
.sugestoes { display: flex; flex-direction: column; gap: 10px; }
.vazio { color: var(--suave); font-size: 13px; }
.cartao { border: 1px solid var(--alerta-borda); background: var(--alerta); border-radius: 10px; padding: 12px; }
.cartao.compra { border-color: var(--ok-borda); background: var(--ok); }
.cartao.antigo { opacity: .55; }
.cartao .tipo { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.cartao .frase { font-size: 12px; color: var(--suave); font-style: italic; margin: 0 0 6px; }
.cartao .diga { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.cartao .extra { font-size: 13px; margin: 2px 0 0; }
.pensando, .analise { font-size: 12px; color: var(--suave); margin: 0; }
.analise.falha { color: #d33; }
.cartao.dica { border-color: var(--borda); background: var(--card); }
.cartao.dica .diga { font-size: 14px; font-weight: 500; }
.lateral details { border-bottom: 1px solid var(--borda); padding: 8px 0; }
.lateral details:last-child { border-bottom: 0; }
.lateral summary { cursor: pointer; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 4px 0; }
.campos { display: grid; gap: 8px; margin-top: 8px; }
.campos label { display: grid; gap: 3px; font-size: 12px; color: var(--suave); }
.campos input, .campos select, .campos textarea, .lateral > details > textarea { width: 100%; font: 13px/1.4 inherit; font-family: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); }
#clienteColar { margin-bottom: 6px; }
.lista { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: 13px; }
.lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; }
.lista li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista button { padding: 4px 8px; font-size: 12px; }
.exportar { margin-top: 8px; }
.cartao.abertura { border-color: var(--primario); background: var(--card); }
/* Janela flutuante (Picture-in-Picture) */
body.pip { padding: 10px; }
body.pip .cartao .diga { font-size: 15px; }
.topo { display: flex; align-items: center; gap: 10px; }
dialog { border: 1px solid var(--borda); border-radius: 12px; background: var(--card); color: var(--texto); width: min(480px, calc(100vw - 32px)); padding: 20px; }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog label { display: block; font-size: 13px; margin: 12px 0 4px; }
dialog input { width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); }
dialog select { width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); }
dialog a { color: var(--primario); }
.resultado { font-size: 13px; min-height: 1em; margin: 8px 0; }
.resultado.ok { color: var(--ok-borda); }
.resultado.falha { color: #d33; }
/* Modo compacto do app desktop: só as sugestões, janela pequena por cima de tudo */
#btnSairCompacto { display: none; }
body.compacto #btnSairCompacto { display: inline-block; }
body.compacto header { padding: 8px 10px; }
body.compacto header .status, body.compacto #btnConfig, body.compacto #btnNova { display: none; }
body.compacto main { grid-template-columns: 1fr; padding: 10px; }
body.compacto main > .painel:not(:has(#sugestoes)) { display: none; }
/* Plano da ligação (análise do cliente) */
.cartao.plano { border-color: var(--primario); background: var(--card); margin-bottom: 12px; font-size: 13px; }
.plano h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin: 10px 0 4px; }
.plano h3:first-child { margin-top: 0; }
.plano p { margin: 0 0 4px; }
.plano ul { margin: 0; padding-left: 18px; }
.plano li { margin-bottom: 3px; }
.plano .cuidado { color: var(--alerta-borda); font-weight: 600; }
.plano .acoes { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.plano .acoes button { padding: 4px 10px; font-size: 12px; }
/* Histórico de objeções */
.avaliar { display: flex; gap: 6px; margin-top: 8px; }
.avaliar button { padding: 3px 9px; font-size: 12px; }
.avaliar button.marcado { border-color: var(--ok-borda); background: var(--ok); }
.avaliar button.marcado.nao { border-color: #d33; background: transparent; color: #d33; }
.lista.objecoes li { display: block; }
.lista.objecoes .cab { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--suave); }
.lista.objecoes .cab b { text-transform: uppercase; letter-spacing: .04em; }
.lista.objecoes .fr { font-style: italic; color: var(--suave); margin: 2px 0; white-space: normal; }
.lista.objecoes .rs { margin: 0 0 4px; white-space: normal; }
.lista.objecoes .ok { color: var(--ok-borda); font-weight: 600; }
.lista.objecoes .falhou { color: #d33; font-weight: 600; }
.plano table.comparativo { width: 100%; border-collapse: collapse; font-size: 12px; }
.plano table.comparativo th { text-align: left; padding: 6px 0 2px; border-top: 1px solid var(--borda); }
.plano table.comparativo tr:first-child th { border-top: 0; padding-top: 0; }
.plano table.comparativo td { padding: 1px 0; vertical-align: top; }
.plano table.comparativo td:first-child { color: var(--suave); width: 72px; }