:root{--bg:#1f1d1a;--lat:#181714;--card:#2a2825;--card2:#33302c;--bd:#3d3a35;--fg:#ece9e4;--mut:#a39e96;--ac:#d97757;--ac2:#e8896a;--ok:#7ab87a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.5 "Segoe UI",system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:7px 12px}
button:hover{background:var(--card2)}
.app{display:grid;grid-template-columns:272px 1fr;height:100%;position:relative}
.app.recolhido{grid-template-columns:1fr}
.app.recolhido .lateral{display:none}
.lateral{background:var(--lat);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:12px;gap:8px;min-width:0}
.topo{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px}
.marca{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--ac);color:#1f1d1a;font-weight:700}
.logo.grande{width:56px;height:56px;border-radius:16px;font-size:28px}
.icone{background:transparent;border:0;color:var(--mut);padding:6px 10px;border-radius:8px}
.icone:hover{background:var(--card);color:var(--fg)}
.novo{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;font-weight:500}
.novo:hover{background:var(--card2)}
.busca{background:transparent;border:1px solid var(--bd);border-radius:10px;padding:8px 10px;outline:none}
.busca:focus{border-color:var(--ac)}
.rotulo{font-size:12px;color:var(--mut);padding:6px 6px 0}
.lista{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px}
.chat{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-radius:8px;border:0;background:transparent;text-align:left;width:100%}
.chat:hover{background:var(--card)}
.chat.ativo{background:var(--card2)}
.chat .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.chat .apagar{opacity:0;color:var(--mut);padding:0 4px}
.chat:hover .apagar{opacity:1}
.rodape{border-top:1px solid var(--bd);padding-top:8px}
.item{width:100%;text-align:left;background:transparent;border:0;padding:9px 10px;border-radius:8px;color:var(--mut)}
.item:hover{background:var(--card);color:var(--fg)}
.central{display:flex;flex-direction:column;min-width:0;height:100%}
.entrada{position:relative}
.ir-pro-fim{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:10px;width:36px;height:36px;border-radius:50%;background:var(--bg2,#2a1f14);border:1px solid var(--bd,#3a332b);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:5}
.ir-pro-fim:hover{background:var(--bd,#3a332b)}
.ir-pro-fim svg{width:18px;height:18px}
.rodape-atividade{position:absolute;left:16px;bottom:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--bg2,#2a1f14);border:1px solid var(--bd,#3a332b);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:4}
.ir-pro-fim[hidden],.rodape-atividade[hidden]{display:none}
.barra{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--bd)}
.mostrar{display:none}
.app.recolhido .mostrar{display:inline-block}
.titulo{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.controles{display:flex;align-items:center;gap:12px}
.agente{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:13px}
select{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:7px 10px;max-width:260px}
.conversa{flex:1;overflow:auto;padding:24px 0}
.vazio{margin:12vh auto 0;max-width:560px;text-align:center;color:var(--mut);padding:0 20px}
.vazio h1{color:var(--fg);font-weight:500;margin:14px 0 6px}
.msg{max-width:780px;margin:0 auto 20px;padding:0 20px}
.msg .quem{font-size:12px;color:var(--mut);margin-bottom:4px}
.msg.user .corpo{background:var(--card);border-radius:14px;padding:10px 14px;display:inline-block;max-width:100%}
.corpo{white-space:normal;word-wrap:break-word;overflow-wrap:anywhere}
.corpo h3,.corpo h4,.corpo h5{margin:12px 0 4px}.corpo ul{margin:6px 0;padding-left:22px}.corpo a{color:var(--ac2)}
.corpo pre{background:#141311;border:1px solid var(--bd);border-radius:10px;padding:12px;overflow:auto;white-space:pre}
.corpo code{background:#141311;border-radius:5px;padding:1px 5px;font-family:Consolas,monospace;font-size:13px}
.corpo pre code{background:transparent;padding:0}
.raciocinio{border-left:2px solid var(--bd);padding:2px 12px;margin:0 0 8px;color:var(--mut);font-size:13px}
.raciocinio summary{cursor:pointer}
.aviso{font-size:12px;color:var(--ac2);margin:4px 0}
.erro{color:#f08b8b}
.entrada{padding:12px 16px 16px}
.caixa{max-width:780px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:8px 8px 8px 14px}
.caixa:focus-within{border-color:var(--ac)}
textarea{flex:1;background:transparent;border:0;outline:none;resize:none;max-height:220px;padding:6px 0}
.enviar{width:34px;height:34px;border-radius:10px;border:0;background:var(--ac);color:#1f1d1a;font-weight:700}
.enviar:hover{background:var(--ac2)}
.enviar.parar{background:var(--card2);color:var(--fg)}
.dica{max-width:780px;margin:6px auto 0;font-size:12px;color:var(--mut)}
.painel{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;z-index:5}
.painel[hidden]{display:none}
.painel-corpo{background:var(--bg);border:1px solid var(--bd);border-radius:16px;width:min(760px,94vw);max-height:90vh;overflow:auto;padding:20px}
.painel-topo{display:flex;justify-content:space-between;align-items:center}
.painel h2{margin:0}
.painel h3{margin:18px 0 4px}
.mut{color:var(--mut);margin:0 0 8px}
.cartao{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:10px;display:grid;gap:8px}
.cartao .linha{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center}
.cartao label{color:var(--mut);font-size:12px}
.cartao input,.cartao select,.linha input{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 9px;width:100%}
.linha{display:flex;gap:8px;align-items:center}
.linha.fim{margin-top:16px}
.primario{background:var(--ac);color:#1f1d1a;border:0;border-radius:10px;padding:9px 18px;font-weight:600}
.cartao .ttl{font-weight:600}
@media (max-width:820px){
  .app,.app.recolhido{grid-template-columns:1fr}
  .app:not(.recolhido) .lateral{position:absolute;inset:0 auto 0 0;width:280px;z-index:4;display:flex}
  .mostrar{display:inline-block}
  .controles{flex-wrap:wrap;gap:6px}
  select{max-width:150px}
}
.logo-img{width:26px;height:26px;border-radius:8px}
.logo-img.grande{width:64px;height:64px;border-radius:16px}
.pv{width:18px;height:18px;border-radius:5px;vertical-align:-4px;margin-right:6px}
.painel-topo{padding:10px 16px;border-bottom:1px solid var(--bd);gap:16px}
.abas-router{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.abas-router button{background:transparent;border:1px solid var(--bd);color:inherit;border-radius:8px;padding:5px 12px;cursor:pointer}
.abas-router button.ativa{background:var(--ac);color:#1f1d1a;border-color:var(--ac)}
.router-host{flex:1;position:relative;padding:20px}

/* agente: cartões de ferramenta, permissões, anexos */
.ferr{border:1px solid var(--bd);background:var(--card);border-radius:10px;margin:8px 0;overflow:hidden}
.ferr summary{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;list-style:none}
.ferr summary::-webkit-details-marker{display:none}
.ferr .ft{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ferr .fe{color:var(--mut)}
.ferr.completed .fe{color:var(--ok)}.ferr.failed .fe{color:#e5897f}
.ferr .sem-corpo summary{cursor:default}
.fcorpo{padding:0 12px 10px}.fcorpo pre{margin:6px 0 0;background:#141311;border:1px solid var(--bd);border-radius:8px;padding:8px;overflow:auto;max-height:220px;font-size:12px;white-space:pre-wrap}
.facoes{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 10px}
.facoes button{padding:4px 10px;font-size:13px}
.permissao{border:1px solid var(--ac);background:#2f2520;border-radius:12px;padding:12px 14px;margin:10px 0;display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.permissao .facoes{padding:0}
.pensando{margin-left:8px;color:var(--ac2)}
.midia{margin:10px 0}.midia-el{max-width:100%;max-height:360px;border-radius:10px;display:block;margin:6px 0}
.anexo-msg{display:inline-block;margin-top:6px;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:3px 10px;font-size:13px;margin-right:6px}
.anexos{max-width:780px;margin:0 auto 8px;display:flex;gap:6px;flex-wrap:wrap}
.chip-anexo{background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:3px 6px 3px 12px;font-size:13px;display:inline-flex;align-items:center;gap:6px;max-width:100%}
.chip-anexo button{border:0;background:transparent;padding:0 6px;color:var(--mut)}
.icone-caixa{width:34px;height:34px;border-radius:10px;border:0;background:transparent;font-size:16px;padding:0;flex:none}
.icone-caixa:hover{background:var(--card2)}
.icone-caixa.gravando{background:#5a2420;animation:pulsa 1.2s infinite}
@keyframes pulsa{50%{opacity:.55}}
.entrada.arrasto .caixa{border-color:var(--ac);box-shadow:0 0 0 3px #d9775733}
.aviso-geral{max-width:780px;margin:0 auto 8px;background:#3a2522;color:#f0b3aa;border-radius:8px;padding:8px 12px;font-size:13px}
@media (max-width:560px){
  .barra{flex-wrap:wrap;padding:8px 12px}
  .controles{width:100%;justify-content:space-between}
  .msg,.anexos{padding:0 12px}
  .conversa{padding:14px 0}
  .entrada{padding:8px 10px 12px}
  .dica{display:none}
}

/* layout: só a conversa rola, o campo de mensagem fica sempre visível */
html,body{overflow:hidden}
.app{height:100vh}
.central{overflow:hidden;min-height:0}
.conversa{min-height:0}
.lateral{min-height:0;overflow:hidden}
.boas-vindas{margin:0 16px 8px;background:#2f2520;border:1px solid var(--ac);border-radius:12px;padding:10px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.boas-vindas[hidden]{display:none}
.tabela-md{overflow-x:auto;margin:8px 0}
.tabela-md table{border-collapse:collapse;font-size:13.5px;min-width:50%}
.tabela-md th,.tabela-md td{border:1px solid var(--bd);padding:6px 10px;text-align:left;vertical-align:top}
.tabela-md th{background:rgba(255,255,255,.05);font-weight:600}
.tabela-md tr:nth-child(even) td{background:rgba(255,255,255,.02)}
a.arq-link{color:var(--ac);text-decoration:underline;text-underline-offset:2px;cursor:pointer}