:root {
  --fundo: #f5f4f0; --painel: #fff; --texto: #1c1d20; --fraco: #6b6d73;
  --linha: #e2e0da; --cor: #2f6f5e; --cor-texto: #fff; --balao: #e6efe9; --erro: #b3372c;
  --t-python: #2a78d6; --t-js: #eb6834; --t-web: #1baf7a; --t-textos: #eda100; --t-dados: #e87ba4; --t-midia: #008300; --t-outros: #9a9ca3;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14161a; --painel: #1c1f24; --texto: #ececea; --fraco: #9a9ca3;
    --linha: #2c3038; --cor: #5fb49c; --cor-texto: #10231e; --balao: #24332e; --erro: #f0877b;
    --t-python: #3987e5; --t-js: #d95926; --t-web: #199e70; --t-textos: #c98500; --t-dados: #d55181; --t-midia: #008300; --t-outros: #6b6d73;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 16px/1.5 system-ui, sans-serif; }
button, input, textarea { font: inherit; color: inherit; }
button { background: var(--cor); color: var(--cor-texto); border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
button.fantasma { background: none; color: var(--fraco); }
input, textarea { width: 100%; background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; }
.entrar { max-width: 340px; margin: 12vh auto 0; padding: 0 16px; }
.entrar form { display: grid; gap: 12px; }
.entrar h1 { margin: 0; font-size: 26px; }
#qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.erro { color: var(--erro); }
.fraco { color: var(--fraco); font-size: 14px; }
.app { display: grid; grid-template-columns: auto 1fr; height: 100dvh; }
aside { display: flex; background: var(--painel); border-right: 1px solid var(--linha); min-height: 0; }
#trilho { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; padding: 10px 0; border-right: 1px solid var(--linha); }
.trilho-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.trilho-btn:hover { background: var(--fundo); }
.trilho-btn.ativo { background: var(--balao); color: var(--cor); }
.espaco { flex: 1; }
#coluna { display: flex; flex-direction: column; width: 250px; min-width: 0; min-height: 0; }
#busca { width: auto; margin: 0 12px 8px; padding: 6px 10px; font-size: 14px; background: var(--fundo); }
#lista h2 { margin: 12px 12px 2px; font-size: 12px; font-weight: 600; color: var(--fraco); }
.topo { display: flex; justify-content: space-between; align-items: center; padding: 12px; }
.projeto-tag { font-size: 12px; color: var(--fraco); max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#lista { flex: 1; overflow-y: auto; min-height: 0; }
#lista a { display: flex; gap: 8px; align-items: center; margin: 2px 6px; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; cursor: grab; }
#lista a:hover { background: var(--fundo); }
#lista a.ativa { background: var(--balao); }
#lista a span.t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#lista a.nao-lida span.t { font-weight: 650; }
.sinal { font-size: 12px; color: var(--cor); }
#chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#chat header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--linha); }
#titulo { flex: 1; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#menu, #fechar-menu, #veu { display: none; }
#nova { margin-left: auto; }
#mensagens { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; }
.m { max-width: 760px; margin: 0 auto 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m code, .m pre { font-family: ui-monospace, monospace; font-size: 14px; background: var(--balao); border-radius: 4px; }
.m code { padding: 1px 4px; }
.m a { color: var(--cor); }
#trabalhando { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 792px; margin: 0 auto; padding: 4px 16px 8px; font-size: 14px; color: var(--fraco); }
.pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }
.m pre { padding: 10px; margin: 6px 0; overflow-x: auto; }
.m.arquivo { font-weight: 600; }
.m .diff { font-weight: 400; white-space: pre; max-height: 60vh; overflow: auto; }
.diff .mais { color: #2f8a4f; }
.diff .menos { color: var(--erro); }
.m.acoes { display: flex; flex-wrap: wrap; gap: 8px; white-space: normal; }
#mesa { display: none; flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.modo-mesa #mesa { display: flex; }
.agente { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.agente select { font: inherit; font-size: 13px; color: var(--fraco); background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 3px 6px; max-width: 170px; }
.modo-mesa .agente { display: none; }
#inicio { display: none; flex: 1; overflow-y: auto; min-height: 0; padding: 40px 24px; }
.modo-inicio #inicio { display: block; }
.modo-inicio #mensagens { display: none; }
.modo-tela #f-msg, .modo-tela #agente { display: none; }
@media (min-width: 721px) {
  .modo-inicio > header { display: none; }
}
#inicio > * { max-width: 820px; margin-left: auto; margin-right: auto; }
#saudacao { margin-top: 0; margin-bottom: 4px; font-size: 30px; line-height: 1.2; }
#situacao { margin-top: 0; margin-bottom: 20px; }
#caixa-inicio { background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 2px 10px rgb(0 0 0 / .05); }
#caixa-inicio #f-msg { border-top: 0; padding: 12px; align-items: flex-end; }
#caixa-inicio #texto { border: 0; background: none; min-height: 64px; outline: none; }
#sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { background: var(--painel); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
#cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 20px; }
.cartao-inicio { background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.cartao-inicio h2 { margin: 0 0 6px; font-size: 15px; }
.cartao-inicio p { margin: 0; }
button.linha { display: block; width: 100%; padding: 4px 0; color: var(--texto); text-align: left; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 0; }
.grupo { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
.grupo.col { flex-direction: column; }
.soltando iframe { pointer-events: none; }
.alvo { position: absolute; background: var(--cor); opacity: .22; pointer-events: none; }
.alvo.centro { inset: 0; }
.alvo.esquerda { inset: 0 50% 0 0; }
.alvo.direita { inset: 0 0 0 50%; }
.alvo.cima { inset: 0 0 50% 0; }
.alvo.baixo { inset: 50% 0 0 0; }
.m.proposta { border-color: var(--cor); }
.topo-rotina { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chave { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fraco); }
.chave input { width: auto; margin: 0; }
.busca-caixa { margin-bottom: 12px; }
.divisor { flex: 0 0 8px; cursor: col-resize; touch-action: none; border-radius: 4px; }
.divisor.col { cursor: row-resize; }
.divisor:hover { background: var(--linha); }
.arrastando { user-select: none; }
.arrastando iframe { pointer-events: none; }
.popup { position: fixed; z-index: 50; display: grid; gap: 8px; min-width: 240px; padding: 12px 14px; font-size: 14px; background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
.popup label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.popup input { width: auto; margin: 0; }
button.mini svg { display: block; }
@media (max-width: 720px) {
  .modo-mesa #mesa { display: block; }
  .grupo, .grupo.col { display: block; }
  .divisor { display: none; }
  .painel-mesa { height: 70dvh; margin-bottom: 8px; }
}
.modo-mesa #mensagens, .modo-mesa #f-msg { display: none; }
.painel-mesa { position: relative; display: flex; flex: 1 1 0; flex-direction: column; min-width: 240px; min-height: 140px; background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.painel-mesa header { display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-bottom: 1px solid var(--linha); cursor: grab; font-size: 14px; }
.painel-mesa header .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.painel-mesa header a { color: var(--fraco); text-decoration: none; }
.painel-mesa iframe { flex: 1; width: 100%; border: 0; }
.vazio { padding: 16px; }
.solo .app { grid-template-columns: 1fr; }
.solo aside, .solo #menu, .solo #chat > header { display: none; }
button.mini { padding: 0 4px; font-size: 15px; }
.m.galeria { max-width: 1120px; white-space: normal; }
.legenda-tipos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.legenda-tipos span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-tipos .ficha { width: 10px; height: 10px; border-radius: 3px; }
.grupo-projetos h2 { margin: 22px 0 8px; font-size: 13px; font-weight: 600; color: var(--fraco); }
.grade-projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cartao-projeto { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; transition: border-color .12s; }
.cartao-projeto:hover, .cartao-projeto:focus-within { border-color: var(--cor); }
button.abrir-projeto { display: grid; gap: 6px; flex: 1; align-content: start; padding: 0; background: none; color: var(--texto); text-align: left; }
button.abrir-projeto::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
button.abrir-projeto:focus-visible::after { outline: 2px solid var(--cor); outline-offset: 2px; }
.topo-projeto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topo-projeto strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sigla { flex: none; display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; font-weight: 650; color: var(--cor); background: var(--balao); border-radius: 9px; }
.desc-projeto { display: -webkit-box; min-height: 42px; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.barra-tipos { position: relative; z-index: 1; display: flex; gap: 2px; height: 8px; }
.barra-tipos .ficha { flex-basis: 3px; min-width: 3px; }
.barra-tipos .ficha:first-child { border-radius: 4px 0 0 4px; }
.barra-tipos .ficha:last-child { border-radius: 0 4px 4px 0; }
.barra-tipos .ficha:only-child { border-radius: 4px; }
.resumo-tipos { margin: 0; font-size: 13px; }
.rodape-projeto { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.rodape-projeto .fraco { font-size: 13px; line-height: 1.35; }
button.mini-acao { position: relative; z-index: 1; flex: none; padding: 3px 10px; font-size: 13px; color: var(--cor); border: 1px solid var(--linha); }
.m.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; white-space: normal; }
.trilha button { padding: 3px 6px; font-size: 14px; }
.trilha button:last-of-type { color: var(--texto); font-weight: 600; }
.lista-arquivos { background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; white-space: normal; }
button.linha-arquivo { display: grid; grid-template-columns: 22px minmax(0, 1fr) 72px 90px; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; color: var(--texto); background: none; border-bottom: 1px solid var(--linha); border-radius: 0; text-align: left; }
button.linha-arquivo:last-child { border-bottom: 0; }
button.linha-arquivo:hover { background: var(--fundo); }
.linha-arquivo .fraco { font-size: 13px; text-align: right; white-space: nowrap; }
.icone-arquivo { display: grid; place-items: center; color: var(--cor); }
.nome-arquivo { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .grade-projetos { grid-template-columns: 1fr; }
  button.linha-arquivo { grid-template-columns: 22px minmax(0, 1fr) 64px; }
  .quando-arquivo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cartao-projeto { transition: none; } }
.m .conteudo { font-weight: 400; white-space: pre; max-height: 75vh; overflow: auto; }
.m.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; white-space: normal; }
.cartao p { margin: 4px 0; white-space: pre-wrap; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.formulario { display: grid; gap: 8px; }
.formulario select { font: inherit; color: inherit; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 8px; }
.tabela { overflow-x: auto; margin: 8px 0; white-space: normal; }
.tabela table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--linha); }
.tabela th { border-bottom-width: 2px; white-space: nowrap; }
.m.user { background: var(--balao); padding: 10px 14px; border-radius: 10px; }
.m.tool { color: var(--fraco); font-size: 14px; font-family: ui-monospace, monospace; }
.m.aviso { color: var(--fraco); font-size: 14px; }
.m.erro { color: var(--erro); }
#f-msg { display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
#texto { resize: none; max-height: 160px; }
#anexos { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.anexo { display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 10px; font-size: 14px; background: var(--balao); border-radius: 8px; overflow-wrap: anywhere; }
.modo-tela #anexos, .modo-mesa #anexos { display: none; }
#f-msg #anexar { flex: none; }
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  aside { position: fixed; inset: 0 12% 0 0; z-index: 2; transform: translateX(-100%); transition: transform .15s; }
  #coluna { flex: 1; width: auto; }
  #inicio { padding: 20px 16px; }
  aside.aberta { transform: none; }
  aside.aberta + #veu { display: block; position: fixed; inset: 0; z-index: 1; background: rgb(0 0 0 / .35); }
  #menu, #fechar-menu { display: block; }
}