:root{
  --ink:#1A1A1A; --ink-2:#4A4A4A; --muted:#8A8F98;
  --accent:#0066FF; --accent-d:#0052CC;
  /* O fundo não é branco: o branco fica reservado para as superfícies que
     carregam conteúdo (cards, docs), o que dá hierarquia sem usar sombra. */
  --bg:#F1F3F7; --surface:#FFFFFF; --panel:#E8EBF1; --panel-2:#DCE1E9; --border:#DCE0E7;
  --ag-pricing:#6D4AFF; --ag-brief:#2E8BFF; --ag-proposal:#0FA79A; --ag-track:#E8890C; --ag-handoff:#E24A72;
  --success:#16A34A; --warning:#E8890C; --danger:#DC2626; --up:#DC2626; --down:#16A34A;
  --r:2px;
  --mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* Reserva a calha da barra de rolagem sempre.
   Sem isto, telas curtas (agentes) não rolam e telas longas (home) rolam — a
   barra aparece e some, a largura útil muda 15px, e todo o conteúdo centralizado
   (incluindo o header) pula 7,5px de lado a cada troca de tela. */
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink-2);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);margin:0;letter-spacing:-.01em}
a{color:inherit}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.app{min-height:100dvh}
svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink);
  letter-spacing:.01em;background:none;border:none;font-family:inherit;cursor:pointer;padding:0}
.brand .mark{width:28px;height:28px;flex:0 0 28px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.04em}
.brand:hover .mark{background:var(--accent-d)}
.topbar-left{display:flex;align-items:center;gap:22px;min-width:0}

/* ---------- Navegação por ícones ---------- */
.navicons{display:flex;align-items:center;gap:4px;padding-left:22px;border-left:1px solid var(--border)}
.navicon{--c:var(--ink-2);
  position:relative;width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--r);cursor:pointer;color:var(--ink-2);
  transition:background .15s ease,color .15s ease}
.navicon:hover{background:var(--panel);color:var(--c)}
.navicon.active{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.navicon.active::before{content:"";position:absolute;left:8px;right:8px;bottom:-11px;height:2px;background:var(--c)}

/* Tooltip: o nome completo da tela, já que o botão é só ícone. */
.navicon::after{content:attr(data-tip);position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-4px);background:var(--ink);color:#fff;font-size:12.5px;
  font-weight:600;white-space:nowrap;padding:6px 10px;border-radius:var(--r);
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:110}
.navicon:hover::after,.navicon:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Botão de perfil ---------- */
.iconbtn{width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1.5px solid transparent;border-radius:var(--r);cursor:pointer;color:var(--ink);
  transition:background .2s ease,border-color .2s ease}
.iconbtn:hover{background:var(--panel-2)}
.iconbtn[aria-expanded="true"]{background:var(--surface);border-color:var(--accent)}

/* ---------- Boas-vindas + lançador ---------- */
.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.welcome-title{font-size:1.75rem;font-weight:700;line-height:1.15;margin-bottom:3px}
.welcome-sub{color:var(--muted);font-size:14.5px;max-width:62ch}

.launch-btn{display:flex;align-items:center;gap:10px;font-family:inherit;font-size:14.5px;font-weight:600;
  color:#fff;background:var(--accent);border:1.5px solid var(--accent);border-radius:var(--r);
  padding:12px 20px;cursor:pointer;flex:0 0 auto;
  transition:background .2s ease,border-color .2s ease,transform .05s ease}
.launch-btn:hover{background:var(--accent-d);border-color:var(--accent-d)}
.launch-btn:active{transform:translateY(1px)}
.launch-btn .chev{transition:transform .2s ease}
.launch-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* Painel inline: abre logo abaixo do botão que o chamou, não sobre a página.
   O campo é azul; os cards dos agentes, quase brancos, se destacam sobre ele. */
.launcher{display:none;background:color-mix(in srgb,var(--accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 25%,#fff);
  border-top:3px solid var(--accent);border-radius:var(--r);margin-bottom:26px}
.launcher.open{display:block;animation:enter .28s cubic-bezier(.2,.6,.2,1)}
.launcher-inner{padding:22px}
.launcher-inner .qs{color:var(--muted);font-size:13.5px;margin-bottom:16px}

/* ---------- Voltar ---------- */
.backlink{display:inline-flex;align-items:center;gap:7px;background:none;border:none;font-family:inherit;
  font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;padding:6px 0;margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.05em;transition:color .2s ease}
.backlink:hover{color:var(--accent)}
.backlink svg{width:15px;height:15px;transform:rotate(180deg)}
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.agent-card{--c:var(--accent);
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;font-family:inherit;
  background:var(--surface);border:1.5px solid color-mix(in srgb,var(--c) 30%,#fff);
  border-radius:var(--r);padding:18px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  opacity:0;transform:translateY(16px)}
.launcher.open .agent-card{animation:rise .42s cubic-bezier(.2,.6,.2,1) forwards}
.launcher.open .agent-card:nth-child(2){animation-delay:.08s}
.launcher.open .agent-card:nth-child(3){animation-delay:.16s}
@keyframes rise{to{opacity:1;transform:none}}
.agent-card:hover{background:color-mix(in srgb,var(--c) 15%,#fff);border-color:var(--c)}
.agent-card:active{transform:translateY(1px)}
.agent-card .ico{width:34px;height:34px;flex:0 0 34px;background:var(--c);color:#fff;
  display:flex;align-items:center;justify-content:center}
.agent-card .ico svg{width:19px;height:19px}
.agent-card .nm{font-weight:700;color:var(--ink);font-size:15px}
.agent-card .ds{font-size:13px;color:var(--ink-2);line-height:1.45}
.agent-card .go{margin-top:2px;font-size:12.5px;font-weight:600;color:var(--c);
  display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- Content ---------- */
.content{max-width:1280px;margin:0 auto;padding:28px 24px 60px}
section.screen{display:none}
section.screen.active{display:block;animation:enter .42s cubic-bezier(.2,.6,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.screen-title{font-size:2.25rem;font-weight:700;margin-bottom:2px;line-height:1.1}
.screen-sub{color:var(--muted);margin-bottom:22px}

/* ---------- Cabeçalho das telas de agente ----------
   Título, identidade do agente e o campo de conversa na mesma linha: quem é o
   agente virou o ícone colorido ao lado do nome da tela, e a instrução de como
   falar com ele virou o placeholder do próprio campo. */
.agent-head{--c:var(--accent);display:flex;align-items:center;justify-content:space-between;
  gap:28px;margin-bottom:8px}
.agent-head .ident{display:flex;align-items:center;gap:14px;min-width:0}
.agent-head .agent-ico{width:46px;height:46px;flex:0 0 46px;background:var(--c);color:#fff;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r)}
.agent-head .agent-ico svg{width:25px;height:25px;stroke-width:2.1}
.agent-head .screen-title{margin-bottom:0}
.agent-head .screen-sub{margin-bottom:0}
.talk-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--c);background:color-mix(in srgb,var(--c) 8%,#fff);flex:0 0 auto;
  border:1.5px solid color-mix(in srgb,var(--c) 35%,#fff);border-radius:var(--r);
  padding:11px 18px;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .05s ease}
.talk-btn:hover{background:color-mix(in srgb,var(--c) 16%,#fff);border-color:var(--c)}
.talk-btn:active{transform:translateY(1px)}

/* ---------- Chat flutuante ---------- */
.fchat{--c:var(--accent);position:fixed;right:24px;bottom:24px;width:380px;z-index:250;
  max-height:min(560px,calc(100dvh - 110px));background:var(--surface);
  border:1px solid var(--border);border-top:3px solid var(--c);border-radius:var(--r);
  display:none;flex-direction:column}
.fchat.open{display:flex;animation:enter .22s cubic-bezier(.2,.6,.2,1)}
.fchat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--c) 7%,#fff)}
.fchat-head .ico{width:34px;height:34px;flex:0 0 34px;background:var(--c);color:#fff;
  display:flex;align-items:center;justify-content:center}
.fchat-head .ico svg{width:18px;height:18px}
.fchat-head .who{font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.3}
.fchat-head .st{font-size:12px;color:var(--muted)}
.fchat-head .x{margin-left:auto}
.fchat-body{flex:1;overflow:auto;padding:16px}
.fchat .chat{max-width:none;margin:0}
.fchat .chatbar{margin:0;padding:12px 14px;border-top:1px solid var(--border)}
.fchat-say{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:14px}
.sug-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-bottom:8px}
.sug{display:flex;flex-direction:column;gap:7px}
.sug button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--c);text-align:left;
  background:color-mix(in srgb,var(--c) 8%,#fff);border:1px solid color-mix(in srgb,var(--c) 28%,#fff);
  border-radius:var(--r);padding:8px 11px;cursor:pointer;transition:background .2s ease}
.sug button:hover{background:color-mix(in srgb,var(--c) 18%,#fff)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px}
.card.ac-pricing{border-left:3px solid var(--ag-pricing)}
.card.ac-brief{border-left:3px solid var(--ag-brief)}
.card.ac-proposal{border-left:3px solid var(--ag-proposal)}
.card.ac-track{border-left:3px solid var(--ag-track)}
.card.ac-handoff{border-left:3px solid var(--ag-handoff)}
.card h3{font-size:16px;margin-bottom:12px;font-weight:700}
.muted{color:var(--muted)}
.small{font-size:13px}
.row{display:flex;gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.divider{height:1px;background:var(--border);margin:16px 0}

/* ---------- Chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:var(--r);white-space:nowrap;letter-spacing:.01em}
.chip svg{width:13px;height:13px;stroke-width:2.2}
.chip.ai{background:color-mix(in srgb,var(--chip-c,var(--ag-brief)) 12%,#fff);color:var(--chip-c,var(--ag-brief))}
.chip.human{background:#fff;color:#9a6410;border:1px dashed var(--warning)}
.chip.warn{background:color-mix(in srgb,var(--warning) 14%,#fff);color:#8a5300}
.chip.ok{background:color-mix(in srgb,var(--success) 12%,#fff);color:var(--success)}
.chip-pricing{--chip-c:var(--ag-pricing)} .chip-brief{--chip-c:var(--ag-brief)}
.chip-proposal{--chip-c:var(--ag-proposal)} .chip-handoff{--chip-c:var(--ag-handoff)}

/* ---------- Buttons (sharp, flat) ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--ink);font-weight:600;font-size:14px;padding:9px 16px;border-radius:var(--r);cursor:pointer;
  font-family:inherit;position:relative;overflow:hidden;transition:background .15s ease,transform .05s ease}
.btn svg{width:16px;height:16px}
.btn:hover{background:var(--panel)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.pricing{background:var(--ag-pricing);border-color:var(--ag-pricing);color:#fff}
.btn.pricing:hover{filter:brightness(.93)}
.btn.proposal{background:var(--ag-proposal);border-color:var(--ag-proposal);color:#fff}
.btn.proposal:hover{filter:brightness(.93)}
.btn:disabled{cursor:default}
.actions{display:flex;gap:10px;margin-top:14px}
/* linear indeterminate loader (no spinner) */
.btn .loadbar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.25);overflow:hidden}
.btn .loadbar::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:#fff;animation:ind 1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ind{0%{left:-45%}100%{left:100%}}

/* ---------- Big numbers ---------- */
.bignum{font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1.1;font-family:var(--mono);letter-spacing:-.03em}
.bignum-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:6px}
.est{font-size:12px;color:var(--muted)}

/* ---------- Semáforo ---------- */
.dot-s{display:inline-block;width:9px;height:9px;margin-right:3px;vertical-align:middle}
.s-green{background:var(--success)} .s-yellow{background:var(--warning)} .s-red{background:var(--danger)}

/* ---------- Form ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em}
.field .control{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;background:var(--surface)}
.field .control.ai{background:color-mix(in srgb,var(--ag-brief) 6%,#fff);border-color:color-mix(in srgb,var(--ag-brief) 35%,var(--border))}
.field .control.edited{border:1px dashed var(--warning);background:#fff}
.field .tag{margin-top:6px;display:inline-block}

/* ---------- Side sheet (perfil) ---------- */
.sheet-bd{position:fixed;inset:0;background:rgba(26,26,26,.35);z-index:200;display:none}
.sheet-bd.open{display:block;animation:ovf .15s ease}
.sheet{position:fixed;top:0;right:0;bottom:0;width:360px;z-index:300;background:var(--surface);
  border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .22s cubic-bezier(.2,.6,.2,1);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet-head{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--border)}
.sheet-head .who{font-weight:700;color:var(--ink)}
.sheet-head .x{margin-left:auto}
.sheet-body{padding:20px;overflow:auto;flex:1}
.sheet-body .grp{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:600;margin:22px 0 10px}
.sheet-body .grp:first-child{margin-top:0}
.avatar-lg{width:44px;height:44px;flex:0 0 44px;background:var(--accent);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;letter-spacing:.03em}
.sheet-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.sheet-row:last-child{border-bottom:none}
.sheet-row .rk{color:var(--muted)}
.sheet-row .rv{color:var(--ink);font-weight:500;text-align:right}

/* ---------- Alerta da plataforma ---------- */
.alert{display:flex;align-items:flex-start;gap:13px;border-radius:var(--r);padding:14px 16px;margin-bottom:26px;
  background:color-mix(in srgb,var(--warning) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--warning) 30%,#fff);border-left:3px solid var(--warning)}
.alert .ai{width:34px;height:34px;flex:0 0 34px;background:var(--warning);color:#fff;
  display:flex;align-items:center;justify-content:center}
.alert .ai svg{width:19px;height:19px}
.alert .at{font-weight:700;color:var(--ink);margin-bottom:2px}
.alert .ab{font-size:14px;color:var(--ink-2)}
.alert .aa{margin-left:auto;flex:0 0 auto;align-self:center}

/* ---------- Stat tiles ---------- */
.sec{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:12px}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.sec-row .sec{margin-bottom:0}
.linkbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;padding:4px 0;transition:color .2s ease}
.linkbtn:hover{color:var(--accent-d)}
.linkbtn svg{width:14px;height:14px}
.card .linkbtn{margin-top:10px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.stat{--c:var(--accent);background:color-mix(in srgb,var(--c) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 26%,#fff);border-radius:var(--r);padding:16px}
.stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);font-weight:600;margin-bottom:8px}
.stat .vrow{display:flex;align-items:baseline;gap:9px}
.stat .v{font-size:1.65rem;font-weight:700;color:var(--ink);font-family:var(--mono);letter-spacing:-.03em;line-height:1.1}
.stat .h{font-size:12.5px;color:var(--muted);margin-top:5px}
/* Seta de tendência: entra depois que o número termina de rodar. */
.trend{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;font-family:var(--mono);
  opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.trend.on{opacity:1;transform:none}
.trend.sobe{color:var(--success)} .trend.desce{color:var(--danger)}

/* ---------- Insights ---------- */
.insight{background:color-mix(in srgb,var(--accent) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 28%,#fff);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:18px 20px;margin-top:16px}
.insight .ih{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.insight .ih .ico{width:30px;height:30px;flex:0 0 30px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center}
.insight .ih .ico svg{width:17px;height:17px}
.insight .ih h3{font-size:16px;margin:0}
.insight .isub{color:var(--muted);font-size:13px;margin-bottom:14px;padding-left:40px}
.insight ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.insight li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.insight li .b{width:6px;height:6px;flex:0 0 6px;background:var(--accent);margin-top:8px}
.insight li b{color:var(--ink)}

/* ---------- Tabela de detalhe (modais / funil completo) ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th{text-align:left;color:var(--muted);font-weight:600;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.dtable td{padding:11px 10px;border-bottom:1px solid var(--border)}
.dtable tr:last-child td{border-bottom:none}
.dtable td.strong{color:var(--ink);font-weight:600}
.dtable .r{text-align:right}
.modal.wide{max-width:820px}
/* Tabela larga rola dentro da própria caixa em vez de esticar a página. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap .dtable{min-width:560px}
.tablewrap .delta{min-width:460px}

/* ---------- Kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.col{background:var(--panel);border-radius:var(--r);padding:11px;min-height:220px}
.col h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:11px;font-weight:600}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px;margin-bottom:9px;border-left:3px solid transparent}
.kcard.stalled{border-left-color:var(--warning)}
.kcard.won{border-left-color:var(--success)}
.kcard.priced{border-left-color:var(--ag-pricing);cursor:pointer}
.kcard.hand{border-left-color:var(--ag-handoff)}
.kcard .co{font-weight:700;color:var(--ink);font-size:14px}
.kcard .sv{font-size:12px;color:var(--muted)}
.kcard .vl{font-weight:600;font-size:14px;margin-top:4px}

/* ---------- Timeline / versions ---------- */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 13px 18px;border-left:2px solid var(--border);margin-left:4px}
.tl li::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;background:var(--ag-pricing)}
.tl li.dim::before{background:var(--border)}
.ver{border:1px solid var(--border);border-radius:var(--r);padding:11px 12px;margin-bottom:9px}
.ver.cur{border-color:var(--ag-proposal);border-left:3px solid var(--ag-proposal);background:color-mix(in srgb,var(--ag-proposal) 5%,#fff)}
.ver .vh{font-weight:700;color:var(--ink)}

/* ---------- Delta table ---------- */
.delta{width:100%;border-collapse:collapse;font-size:14px}
.delta th{text-align:left;color:var(--muted);font-weight:600;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;padding:7px 8px;border-bottom:1px solid var(--border)}
.delta td{padding:10px 8px;border-bottom:1px solid var(--border)}
.delta td.k{color:var(--ink);font-weight:500}
.delta .up{color:var(--up);font-weight:700} .delta .down{color:var(--down);font-weight:700}
/* Margem tem semântica própria: subir é bom, cair é ruim — o contrário de
   orçamento e prazo, onde `up` (vermelho) sinaliza aumento de custo. */
.delta .ok-delta{color:var(--success);font-weight:700}
.delta .bad-delta{color:var(--danger);font-weight:700}
.delta .arrow{color:var(--muted)}

/* ---------- Campos de formulário editáveis ---------- */
.inp{width:100%;border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;
  font-family:inherit;font-size:14px;background:var(--surface);color:var(--ink);resize:vertical}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,#fff)}
textarea.inp{line-height:1.55}

/* ---------- Aviso de briefing x proposta fora de sincronia ---------- */
.sync{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin-bottom:16px;border-radius:var(--r);
  background:color-mix(in srgb,var(--warning) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--warning) 30%,#fff);border-left:3px solid var(--warning)}
.sync > svg{width:20px;height:20px;flex:0 0 20px;color:var(--warning);margin-top:2px}
.sync > div:nth-child(2){flex:1;font-size:13.5px;line-height:1.5}
.sync b{color:var(--ink)}
.sync-acoes{display:flex;gap:8px;flex:0 0 auto;align-self:center}
.sync-acoes .btn{font-size:13px;padding:7px 13px}

.btn.perigo{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,#fff)}
.btn.perigo:hover{background:color-mix(in srgb,var(--danger) 10%,#fff);border-color:var(--danger)}
.modal-foot .btn.perigo{background:var(--danger);border-color:var(--danger);color:#fff}
.modal-foot .btn.perigo:hover{filter:brightness(.93);background:var(--danger)}

.ver .linkbtn{font-size:12px;margin-top:6px;padding:0}
/* Proposta: corpo + trilha de versões ao lado. No mobile a trilha vai pra baixo. */
.prop-layout{display:flex;gap:16px;align-items:flex-start}
.prop-main{flex:1;min-width:0}
.prop-side{width:214px;flex:0 0 214px}
.inp.edited{border:1px dashed var(--warning)}

/* ---------- Escopo editável ---------- */
.escopo{list-style:none;margin:0 0 14px;padding:0}
.escopo li{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--ink)}
.escopo li:last-child{border-bottom:none}
.escopo .rm{margin-left:auto;flex:0 0 auto;width:24px;height:24px;border:1px solid var(--border);
  background:var(--surface);color:var(--muted);border-radius:var(--r);cursor:pointer;font-size:12px;
  line-height:1;transition:background .15s ease,color .15s ease,border-color .15s ease}
.escopo .rm:hover{background:color-mix(in srgb,var(--danger) 10%,#fff);color:var(--danger);border-color:var(--danger)}
.add-item{display:flex;gap:9px;align-items:center}
.add-item select{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--r);padding:9px 11px;
  font-family:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.add-item select:focus{outline:none;border-color:var(--accent)}

/* ---------- Doc ---------- */
.doc{max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:46px 50px}
.doc .logo{font-weight:700;letter-spacing:.12em;color:var(--ink);text-align:center;font-size:18px}
.doc hr{border:none;border-top:1px solid var(--border);margin:18px 0}
.doc .big-invest{font-size:1.7rem;font-weight:700;color:var(--ink);font-family:var(--mono)}
.doc-actions{max-width:640px;margin:16px auto 0;display:flex;gap:10px;justify-content:center}
/* Dentro do modal o documento já está contido: ocupa a largura toda. */
.doc-modal{max-width:none;padding:32px 34px}

/* ---------- Handoff ---------- */
.locked{background:#FAFBFC}
.locked .lockbar{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;
  background:var(--panel);padding:9px 12px;border-radius:var(--r);margin-bottom:15px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:11px 14px;font-size:14px}
.kv .kk{color:var(--muted)} .kv .vv{color:var(--ink);font-weight:500}
/* Variações do mesmo par chave/valor. São classes, e não `style` inline, porque
   as media queries precisam poder reempilhá-las no mobile. */
.kv-acoes{grid-template-columns:1fr auto;row-gap:12px}
.kv-doc{grid-template-columns:180px 1fr}
.kv-comp{grid-template-columns:1fr auto auto;row-gap:8px}
.kv-comp .comp-v{width:100px;text-align:right}
.kv-comp .comp-p{width:70px;text-align:right}

/* ---------- Dashboard ---------- */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.bar-row .lbl{width:155px;color:var(--ink-2);display:flex;align-items:center}
.bar-track{flex:1;background:var(--panel-2);border-radius:0;height:14px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}
.bar-row .val{width:82px;text-align:right;font-weight:600;color:var(--ink)}
.variance{background:color-mix(in srgb,var(--ag-pricing) 5%,#fff);border-color:color-mix(in srgb,var(--ag-pricing) 25%,var(--border))}
.link{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none}

/* ---------- Agent chat ---------- */
/* O histórico da conversa fica sob o campo, alinhado a ele, à direita. */
.chat{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;max-width:430px;margin-left:auto}
.chat:empty{display:none}
.bubble{max-width:72%;padding:9px 13px;border-radius:var(--r);font-size:14px;line-height:1.45}
.bubble.me{align-self:flex-end;background:var(--accent);color:#fff}
.bubble.ag{align-self:flex-start;background:var(--panel);color:var(--ink);border:1px solid var(--border)}
.chatbar{display:flex;gap:8px;align-items:center;margin:0 0 22px}
.chatbar input{flex:1;border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;font-family:inherit;font-size:14px;background:var(--surface)}
.chatbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,#fff)}
.chatbar .send{padding:11px;flex:0 0 auto;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:var(--r);border:1.5px solid var(--accent);cursor:pointer}
.chatbar .send:hover{background:var(--accent-d)}
.chatbar .send svg{width:17px;height:17px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:7px;padding:9px 14px;cursor:pointer;font-weight:600;font-size:13.5px;
  color:var(--muted);border:none;background:none;border-bottom:2px solid transparent;font-family:inherit;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--tab-c,var(--accent))}
.tab svg{width:15px;height:15px;stroke-width:2.4}
.tab.new{color:var(--accent)}
.tabpane{display:none}
.tabpane.active{display:block;animation:enter .3s ease}
.empty{text-align:center;padding:44px 20px;border:1px dashed var(--border);border-radius:var(--r)}
.empty .ei{width:44px;height:44px;margin:0 auto 12px;color:var(--muted)}
.empty .ei svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6}
.empty h4{font-size:16px;margin-bottom:4px}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(26,26,26,.45);display:none;align-items:flex-start;
  justify-content:center;padding:48px 20px;z-index:300;overflow:auto}
.overlay.open{display:flex;animation:ovf .15s ease}
@keyframes ovf{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);max-width:600px;width:100%;
  animation:enter .22s cubic-bezier(.2,.6,.2,1)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:1.25rem}
.modal-body{padding:22px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--border)}
.x{border:none;background:none;font-size:20px;cursor:pointer;color:var(--muted);padding:2px 6px;line-height:1}
.x:hover{color:var(--ink)}
.btn.handoff{background:var(--ag-handoff);border-color:var(--ag-handoff);color:#fff}
.btn.handoff:hover{filter:brightness(.93)}
.dest{display:grid;gap:10px;margin-bottom:18px}
.dest-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer}
.dest-opt.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,#fff)}
.dest-opt input{accent-color:var(--accent);flex:0 0 auto}
.avatar-sm{width:32px;height:32px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 32px}
.avatar-sm svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r);font-size:14px;
  transition:.2s ease;pointer-events:none;z-index:500;max-width:520px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================ RESPONSIVO ====
   O layout desktop é a base; daqui pra baixo ele vai cedendo. A ordem das
   quebras segue o que aperta primeiro: as grades largas (tablet), depois tudo
   que é lado-a-lado (celular), e por último a topbar (telas estreitas). */

/* ---------- Tablet: as grades de muitas colunas cedem ---------- */
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(2,1fr)}

  /* O funil não empilha: seis estágios em coluna viram uma página de rolagem
     sem forma. Kanban rola de lado — é como a metáfora funciona no celular. */
  .kanban{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:200px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:6px}
  .col{scroll-snap-align:start}

  /* A trilha de versões desce para depois da proposta. Empilhado, o eixo
     transversal vira a largura: sem `stretch` os blocos cresceriam até o
     conteúdo mais largo (a tabela de delta) e vazariam a página. */
  .prop-layout{flex-direction:column;align-items:stretch}
  .prop-main,.prop-side{width:auto;flex:0 0 auto}

  .kv-doc{grid-template-columns:150px 1fr}
}

/* ---------- Os gráficos de barra quebram antes do resto ----------
   Eles ainda estão em duas colunas aqui, e rótulo + valor + trilha em uma linha
   só espremem a barra a poucos pixels — que é justamente a parte que informa.
   Rótulo e número sobem, a barra fica com a linha inteira. */
@media (max-width:900px){
  .bar-row{flex-wrap:wrap;gap:6px 10px;margin-bottom:14px}
  .bar-row .lbl{width:auto;flex:1;min-width:0}
  .bar-row .val{width:auto}
  .bar-track{flex:0 0 100%;order:3}
}

/* ---------- Celular: nada mais fica lado a lado ---------- */
@media (max-width:760px){
  .content{padding:20px 16px 48px}
  .card{padding:15px}

  /* Topbar mais compacta, mas a navegação por ícones continua inteira. */
  .topbar-inner{padding:0 16px;gap:12px}
  .topbar-left{gap:12px}
  .navicons{padding-left:12px;gap:2px}

  /* Boas-vindas: título em cima, botão ocupando a largura como alvo de toque. */
  .welcome{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:20px}
  .welcome-title{font-size:1.45rem}
  .launch-btn{width:100%;justify-content:center}
  .launcher-inner{padding:16px}
  .agent-grid{grid-template-columns:1fr}

  .screen-title{font-size:1.7rem}
  .grid2,.grid3{grid-template-columns:1fr}

  /* Cabeçalho de agente: identidade em cima, "falar com o agente" embaixo. */
  .agent-head{flex-direction:column;align-items:stretch;gap:14px}
  .agent-head .agent-ico{width:40px;height:40px;flex:0 0 40px}
  .agent-head .agent-ico svg{width:22px;height:22px}
  .talk-btn{justify-content:center}

  /* Faixas de aviso: a ação vira uma linha própria, largura cheia. */
  .alert{flex-wrap:wrap}
  .alert .aa{margin-left:0;width:100%}
  .alert .aa .btn{width:100%;justify-content:center}
  .sync{flex-wrap:wrap}
  .sync-acoes{width:100%;align-self:stretch}
  .sync-acoes .btn{flex:1;justify-content:center}

  .insight{padding:16px}
  .insight .isub{padding-left:0}

  /* Pares chave/valor empilham: rótulo em cima, valor embaixo. */
  .kv,.kv-doc{grid-template-columns:1fr;row-gap:0}
  .kv .kk{margin-top:12px}
  .kv > .kk:first-child{margin-top:0}
  .kv-acoes{grid-template-columns:1fr auto;row-gap:12px}
  /* Comparáveis: o nome do projeto ocupa a linha, valor e prazo dividem a de baixo. */
  .kv-comp{grid-template-columns:1fr auto;row-gap:2px}
  .kv-comp > div:nth-child(3n+1){grid-column:1/-1;margin-top:11px}
  .kv-comp > div:first-child{margin-top:0}
  .kv-comp .comp-v{width:auto;text-align:left}
  .kv-comp .comp-p{width:auto}

  /* Kanban sangra até as bordas: a rolagem lateral fica evidente. */
  .kanban{margin-inline:-16px;padding-inline:16px}
  .col{min-height:0}

  /* Chat vira uma gaveta presa ao rodapé. */
  .fchat{left:10px;right:10px;bottom:10px;width:auto;max-height:min(74dvh,calc(100dvh - 80px))}
  .sheet{width:min(360px,88vw)}

  .doc{padding:28px 20px}
  .doc-modal{padding:24px 18px}
  .doc .big-invest{font-size:1.35rem}
  .doc-actions{flex-wrap:wrap}

  .overlay{padding:16px 12px}
  .modal-head{padding:16px}
  .modal-body{padding:18px 16px}
  .modal-foot{padding:14px 16px;flex-wrap:wrap}
  .modal-foot .btn{flex:1;justify-content:center}

  .actions{flex-wrap:wrap}
  .add-item{flex-wrap:wrap}
  .add-item select{flex:1 1 100%}
  .add-item .btn{width:100%;justify-content:center}

  .bignum{font-size:1.5rem}
  .stat .v{font-size:1.3rem}

  /* 16px é o limite abaixo do qual o iOS dá zoom ao focar o campo. */
  .inp,.chatbar input,.add-item select{font-size:16px}
  .escopo .rm{width:30px;height:30px}

  .toast{left:16px;right:16px;max-width:none;text-align:center;transform:translateY(20px)}
  .toast.show{transform:translateY(0)}
}

/* ---------- Telas estreitas: a marca abre mão do nome ---------- */
@media (max-width:480px){
  .brand-name{display:none}
  .navicon{width:34px;height:34px;flex:0 0 34px}
  .stats{gap:10px}
  .stat{padding:13px}
  .welcome-title{font-size:1.3rem}
  .screen-title{font-size:1.5rem}
  .modal-head h3{font-size:1.1rem}
}

/* Sem mouse não há hover: o tooltip do ícone ficaria preso na tela após o
   toque. O `aria-label` continua dando o nome a quem usa leitor de tela. */
@media (hover:none){
  .navicon::after{display:none}
}

/* ---------- Impressão: só a proposta formalizada vira PDF ----------
   O botão "Baixar PDF" chama window.print(); a folha de impressão do navegador
   permite salvar em PDF. Sem biblioteca, sem back-end, e o documento sai com
   texto selecionável em vez de imagem. */
@media print{
  @page{size:A4;margin:18mm 16mm}
  body{background:#fff}
  /* Tudo some, menos o documento dentro do modal de proposta formalizada. */
  .topbar,.launcher,.sheet,.sheet-bd,.fchat,.toast,.content,.modal-head,.modal-foot{display:none !important}
  .overlay{position:static;display:none;background:none;padding:0;overflow:visible}
  .overlay#m-formal.open{display:block}
  .modal{border:none;max-width:none;width:auto;animation:none}
  .modal-body{padding:0}
  .doc,.doc-modal{border:none;padding:0;max-width:none}
  .kv-doc{grid-template-columns:180px 1fr}
  .doc .logo{font-size:20px}
}