:root {
  --ink-900:#1c1d1f; --ink-800:#222529; --ink-700:#2d3238; --ink-600:#4e5967; --ink-500:#6d7988; --ink-400:#a2adba;
  --line-300:#c9d0d9; --line-200:#d2d8df; --line-100:#e3e7ec;
  --surface-0:#fff; --surface-50:#fafafb; --surface-100:#f3f4f6; --surface-200:#eceff3;
  --accent-50:#e8f0fe; --accent-200:#b6cdfb; --accent-600:#2457c5;
  --ok-bg:#e6f6ea; --ok-ink:#1f8a4c; --bad-bg:#fdecec; --bad-ink:#c0392b; --warn-bg:#fff4e0; --warn-ink:#b26b00;
  --ia-bg:#efeafd; --ia-ink:#5b3fc4;
  --btn-primary-bg:linear-gradient(-30deg,#1c1d1f 25.6%,#2e3238 163%); --btn-primary-ink:#f3f4f6;
  --hero-gradient:radial-gradient(90% 80% at 50% 100%,#e6ecff 0%,#bccbff 45%,#86a0ee 100%);
  --shadow-window:0 0 1px 1px rgba(0,22,62,.01),0 4px 12px -1px rgba(0,22,62,.04),0 1px 2px rgba(0,22,62,.18);
  --shadow-card:0 1px 3px rgba(0,0,0,.04),0 0 2px rgba(28,40,64,.18);
  --r-chip:6px; --r-btn:10px; --r-card:12px; --r-window:14px; --r-pill:9999px;
  --ease-out:cubic-bezier(.2,0,0,1); --dur-fast:.15s; --dur-base:.2s;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --bg:var(--surface-50); --ink:var(--ink-800); --panel:var(--surface-0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900:#f3f4f6; --ink-800:#e6e8eb; --ink-700:#d2d6db; --ink-600:#a7b0bb; --ink-500:#8a95a3; --ink-400:#5f6a77;
    --line-300:#3a4048; --line-200:#2f343b; --line-100:#24282e;
    --surface-0:#16181b; --surface-50:#0f1012; --surface-100:#1c1f23; --surface-200:#24282e;
    --accent-50:#1a2540; --ia-bg:#241d3d; --ia-ink:#b8a6ff;
    --ok-bg:#12301d; --bad-bg:#3a1717; --warn-bg:#3a2a0e;
    --btn-primary-bg:linear-gradient(-30deg,#f3f4f6 25.6%,#d2d6db 163%); --btn-primary-ink:#1c1d1f;
  }
}
* { 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); }
.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; }
.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; }
.msg img { max-width: 240px; border-radius: 8px; display: block; }
.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 { 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; }

@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: #fff; border-color: transparent; }
.btn:disabled { opacity: .6; cursor: progress; }