/* Calmo — a pele da plataforma desde 08/10/2026 (substitui o "céu").

   Por que mudou: com fundo em degradê, estrelas cintilando, ondas andando, vidro
   por toda parte, três letras e quatro cores, a tela cansava — "dá enjoo",
   nas palavras de quem usa. A referência passou a ser o Claude e o ChatGPT:
   fundo calmo e PARADO, moldura em cinzas quentes, uma cor de destaque usada
   com parcimônia, a letra da interface uma só (a sem serifa; a serifa só nos
   títulos grandes), e a cor de verdade no CONTEÚDO — avatares, peças, os cartões
   suaves dos especialistas. Nada se mexe sozinho: movimento só responde a um
   toque, curto (≤ 220 ms), e o "pensando" é a única coisa que pulsa.

   Vem DEPOIS do estilo.css (e do estudio.css) e só sobrepõe; os nomes das
   variáveis são os mesmos. As telas de mapa 3D (só do admin) usam os apelidos
   antigos (--vidro-forte, --acao…), que aqui apontam para os tons calmos. */

:root {
  --fundo: #faf9f6;
  --fundo-2: #f3f2ee;
  --papel: #ffffff;
  --borda: #e7e5df;
  --borda-forte: #d5d2ca;
  --texto: #1b1b1f;
  --suave: #67666e;
  --marca: #3446b5;
  --marca-forte: #283a9c;
  --marca-suave: #eceffb;
  --ambar: #f2a93b;
  --ambar-suave: #fdf3e2;
  --tinta: #1b1b1f;
  --tinta-forte: #34343b;
  --sobre-tinta: #ffffff;
  --bolha-eu: #efede8;
  --ok: #2f7a4f;
  --atencao: #95590a;
  --erro: #b3261e;
  --erro-fundo: #fbe9e8;
  --hover: rgba(27, 27, 31, .05);
  --ativo: rgba(27, 27, 31, .08);
  --sombra: 0 1px 2px rgba(27, 27, 31, .04), 0 4px 14px -6px rgba(27, 27, 31, .1);
  --sombra-alta: 0 2px 6px rgba(27, 27, 31, .06), 0 18px 48px -18px rgba(27, 27, 31, .28);

  /* apelidos do visual anterior (mapas 3D, cartões) */
  --vidro: var(--papel);
  --vidro-forte: var(--papel);
  --vidro-borda: var(--borda);
  --vidro-linha: var(--borda);
  --brilho: 0 0 0 transparent;
  --desfoque: none;
  --acao: var(--tinta);
  --acao-brilho: 0 0 0 transparent;
  --foco: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
  --mar: #11788a;
  --mar-suave: #e3f2f3;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --mola: cubic-bezier(.2, .8, .2, 1);
  --t1: .15s;
  --t2: .2s;
  --t3: .22s;
}

:root[data-tema="escuro"] {
  --fundo: #1c1c1f;
  --fundo-2: #161618;
  --papel: #26262a;
  --borda: #34343a;
  --borda-forte: #45454c;
  --texto: #ecebe8;
  --suave: #a3a2aa;
  --marca: #9aa8ff;
  --marca-forte: #c0c8ff;
  --marca-suave: rgba(154, 168, 255, .14);
  --ambar-suave: rgba(242, 169, 59, .14);
  --tinta: #ecebe8;
  --tinta-forte: #ffffff;
  --sobre-tinta: #1c1c1f;
  --bolha-eu: #2d2d32;
  --ok: #86c9a0;
  --atencao: #e9b46a;
  --erro: #f2b8b5;
  --erro-fundo: rgba(179, 38, 30, .2);
  --hover: rgba(255, 255, 255, .05);
  --ativo: rgba(255, 255, 255, .08);
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .5);
  --sombra-alta: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 56px -18px rgba(0, 0, 0, .7);
  --mar: #67d3de;
  --mar-suave: rgba(103, 211, 222, .12);
}

/* --------------------------------------------------------------- base */

body { font-size: 15.5px; line-height: 1.6; background: var(--fundo); text-rendering: optimizeLegibility; }
/* As telas de entrada ganham só um calor parado no alto — nada mais. */
body:not(.app):not(.es-corpo):not(.constelacao):not(.rede) {
  background: radial-gradient(900px 480px at 50% -12%, color-mix(in srgb, var(--ambar) 9%, transparent), transparent 70%), var(--fundo);
}
::selection { background: color-mix(in srgb, var(--marca) 20%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--suave) 30%, transparent) transparent; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--marca) 70%, transparent); outline-offset: 2px; }

@keyframes entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes aviso-sai { to { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------- ícones */

.icone-svg { display: block; flex: none; }
.ico { display: inline-flex; align-items: center; justify-content: center; }
.botao-icone {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  color: var(--suave); background: none; border: 0; border-radius: 8px; cursor: pointer;
  transition: background var(--t1), color var(--t1);
}
.botao-icone:hover { background: var(--hover); color: var(--texto); }

/* --------------------------------------------------------- barra lateral */

.lateral { background: var(--fundo-2); border-right: 1px solid var(--borda); box-shadow: none; }
.lateral-topo { padding: 10px 10px 4px; }
.marca-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 10px 8px; }
.lateral .marca { padding: 0; display: inline-flex; align-items: center; min-height: 32px; font: 600 18px/1 var(--serifa); }
/* Cada marca tem a sua altura (marcas.py, logo_altura): o logo empilhado da Fundação a 28 px deixava a
   palavra "Fundação" com uns 4 px (checkup de 09/10). Só um teto, para nenhum logo estourar a barra. */
.lateral .marca img { max-height: 44px; width: auto !important; }
.recolher-lateral { margin: 0; width: 32px; height: 32px; }
.menu-lateral { display: flex; flex-direction: column; gap: 1px; }
.item-menu {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--texto); font: 500 14.5px/1.3 var(--sans); text-align: left; text-decoration: none;
  cursor: pointer; transition: background var(--t1);
}
.item-menu .ico { width: 20px; color: var(--suave); }
.item-menu .ico .icone-svg { width: 18px; height: 18px; }
.item-menu:hover { background: var(--hover); }
.item-menu.ativo { background: var(--ativo); }
.item-menu.destaque { background: var(--papel); box-shadow: 0 0 0 1px var(--borda); }
.item-menu.destaque .ico { color: var(--texto); }
.item-menu.destaque:hover { background: var(--papel); box-shadow: 0 0 0 1px var(--borda-forte); }

.lateral-rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 10px 12px; }
.secao-lateral { margin-top: 16px; }
.titulo-secao { margin: 0 0 4px; padding: 0 10px; font: 500 12.5px/1.6 var(--sans); color: var(--suave); }
.link-secao { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.link-secao:hover { color: var(--texto); }
.linha-busca { display: flex; flex-direction: column; gap: 6px; }
.lateral .busca { margin: 0; }
.lateral .busca input {
  height: 32px; padding: 0 10px; font-size: 13.5px; background: transparent; border: 1px solid var(--borda);
  border-radius: 8px; color: var(--texto);
}
.lateral .busca input:focus { outline: none; border-color: var(--borda-forte); background: var(--papel); }
.lateral .lista { padding: 0; overflow: visible; }
.lista .item { display: flex; align-items: center; border-radius: 9px; background: none; transition: background var(--t1); }
.lista .item:hover { background: var(--hover); }
.lista .item.ativo { background: var(--ativo); box-shadow: none; }
.lista .item .abrir { flex: 1; min-width: 0; padding: 7px 10px; background: none; border: 0; text-align: left; color: var(--texto); }
.lista .item .titulo-item { display: block; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .item .quando-item { display: none; }
.lista .item .apagar {
  display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; padding: 0; opacity: 0;
  color: var(--suave); background: none; border: 0; border-radius: 7px; transition: opacity var(--t1);
}
.lista .item:hover .apagar, .lista .item .apagar:focus-visible { opacity: 1; }
.lista .item .apagar:hover { color: var(--erro); background: var(--hover); }
.lista .vazio { padding: 6px 10px; font-size: 13px; color: var(--suave); }
.item-projeto {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--texto); font: 400 14px/1.3 var(--sans); text-align: left; cursor: pointer;
}
.item-projeto .icone-svg { color: var(--suave); }
.item-projeto .titulo-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-projeto:hover { background: var(--hover); }
.item-projeto.ativo { background: var(--ativo); }

.lateral-rodape { position: relative; display: block; padding: 8px 10px 10px; border-top: 1px solid var(--borda); }
.conta-linha {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px;
  background: none; color: var(--texto); font: 500 14px var(--sans); text-align: left; cursor: pointer;
}
.conta-linha:hover { background: var(--hover); }
.conta-linha .inicial {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12px var(--sans); color: var(--texto); background: var(--papel); box-shadow: inset 0 0 0 1px var(--borda-forte);
}
.conta-linha .quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-linha .ico { color: var(--suave); transform: rotate(-90deg); transition: transform var(--t2); }
.conta-linha[aria-expanded="true"] .ico { transform: rotate(90deg); }
.menu-conta {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 4px); z-index: 30; padding: 6px;
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta);
  animation: entrar .16s var(--ease) both;
}
.item-conta, .menu-conta .tema-botao.item-conta {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--texto); font: 400 14px/1.3 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.item-conta [data-icone] { color: var(--suave); display: inline-flex; }
.item-conta:hover { background: var(--hover); color: var(--texto); }
.menu-conta .tema-chave { margin-left: auto; }
.menu-conta .endosso { display: block; padding: 6px 10px 2px; font-size: 12px; color: var(--suave); }

/* --------------------------------------------------------------- topo */

.topo { min-height: 52px; padding: 8px 16px; gap: 10px; background: var(--fundo); border-bottom: 0; backdrop-filter: none; }
.titulo-conversa { font-size: 15px; font-weight: 500; }
.agente-topo { display: none !important; }
.chip-projeto {
  display: inline-flex; align-items: center; gap: 6px; max-width: 40%; padding: 4px 10px; border: 0; border-radius: 8px;
  background: var(--hover); color: var(--suave); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap;
}
.chip-projeto span { overflow: hidden; text-overflow: ellipsis; }
.chip-projeto:hover { background: var(--ativo); color: var(--texto); }
.chip-projeto[hidden] { display: none; }

/* ------------------------------------------------------------ conversa */

.conversa { padding: 24px 20px 28px; }
.conversa > * { max-width: 760px; }
.bolha { margin-bottom: 26px; animation: entrar .22s var(--ease) both; }
.bolha .autor { font-size: 13px; font-weight: 500; color: var(--suave); letter-spacing: 0; }
.bolha .autor.com-avatar { color: var(--texto); }
.avatar-autor { width: 24px; height: 24px; box-shadow: none; }
.bolha .corpo { font-size: 16px; line-height: 1.7; }
.bolha.eu .corpo { background: var(--bolha-eu); border-radius: 18px; padding: 10px 16px; }
.corpo h1, .corpo h2, .corpo h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.corpo h1 { font-size: 1.4rem; } .corpo h2 { font-size: 1.2rem; } .corpo h3 { font-size: 1.05rem; }
.ferramentas { gap: 6px; }
.ferramenta {
  font-size: 12.5px; color: var(--suave); background: transparent; border: 1px solid var(--borda);
  padding: 3px 10px; animation: none;
}
.ferramenta::before { width: 5px; height: 5px; background: var(--suave); opacity: .7; box-shadow: none; }
.voltar-inicio {
  display: inline-flex; padding: 5px 12px; margin-bottom: 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: none; color: var(--suave); font: 500 13px var(--sans); cursor: pointer;
}
.voltar-inicio:hover { color: var(--texto); border-color: var(--borda-forte); }
/* Na coluna da conversa, alinhado à esquerda dela (inline, a margem automática não valia e o botão ia para a
   beira da tela, longe da apresentação do especialista — revisão de UI de 11/10). */
.conversa > .voltar-inicio { display: flex; width: fit-content; margin-left: max(0px, calc((100% - 760px) / 2)); }
.exemplos button {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; box-shadow: none;
  font-size: 14px; color: var(--texto); transition: border-color var(--t1), background var(--t1);
}
.exemplos button:hover { border-color: var(--borda-forte); background: var(--fundo-2); transform: none; }
.cartao-arquivo { background: var(--papel); border: 1px solid var(--borda); box-shadow: none; animation: entrar .22s var(--ease) both; }

/* O "pensando": a estrela do símbolo respira, e só ela. */
.pensando { gap: 10px; font-size: 14px; color: var(--suave); }
.pensando .pontos, .status-anexo .pontos { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; }
.pensando .pontos i, .status-anexo .pontos i { display: none; }
.pensando .pontos::before, .status-anexo .pontos::before {
  content: ""; position: absolute; inset: 0; background: var(--ambar);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9L22.5 12l-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9L22.5 12l-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: respirar 1.6s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { transform: scale(.72) rotate(0deg); opacity: .55; }
  50% { transform: scale(1) rotate(22deg); opacity: 1; }
}
.pensando .rotulo { color: var(--suave); background: none; animation: none; }

/* ---------------------------------------------------- caixa de escrever */

.escrever { padding: 0 20px calc(12px + env(safe-area-inset-bottom)); }
.escrever form {
  max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 14px 12px 10px 16px; background: var(--papel); border: 1px solid var(--borda-forte); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(27, 27, 31, .03), 0 8px 24px -12px rgba(27, 27, 31, .12);
  transition: border-color var(--t1), box-shadow var(--t1);
}
.escrever form:focus-within { border-color: color-mix(in srgb, var(--texto) 30%, transparent); }
.escrever textarea { padding: 2px 2px 4px; font-size: 16px; line-height: 1.5; min-height: 30px; max-height: 240px; scrollbar-width: none; }
.escrever textarea::-webkit-scrollbar { display: none; }
.linha-ferramentas { display: flex; align-items: center; gap: 8px; min-width: 0; }
.linha-ferramentas .espaco { flex: 1; }
.escrever form .linha-ferramentas button.anexar {
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--suave); background: transparent; border: 1px solid var(--borda); box-shadow: none;
}
.escrever form .linha-ferramentas button.anexar:hover { color: var(--texto); background: var(--hover); }
.escrever form .linha-ferramentas .chip-agente {
  flex: 0 1 auto; min-width: 0; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 6px;
  color: var(--texto); background: transparent; border: 1px solid var(--borda); border-radius: 999px;
  font: 500 13px var(--sans); box-shadow: none; transform: none;
}
.chip-agente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-agente .icone-svg { color: var(--suave); }
.chip-agente .seta-chip { rotate: 90deg; }   /* rotate, não transform: compõe com a animação do ícone */
.escrever form .linha-ferramentas .chip-agente:hover { background: var(--hover); }
.escrever form .linha-ferramentas .chip-agente:disabled { opacity: .75; cursor: default; background: transparent; }
.chip-agente:disabled .seta-chip { display: none; }
.avatar-chip { width: 20px; height: 20px; border-radius: 50%; }
.escrever form .linha-ferramentas #enviar {
  flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  color: var(--sobre-tinta); background: var(--tinta); border: 0; box-shadow: none;
}
.escrever form .linha-ferramentas #enviar:hover { background: var(--tinta-forte); }
.escrever form .linha-ferramentas #enviar:disabled { opacity: 1; color: var(--suave); background: var(--ativo); }
.escrever form .linha-ferramentas #enviar.parar { color: var(--texto); background: var(--papel); box-shadow: inset 0 0 0 1px var(--borda-forte); }
.linha-ferramentas .seletor-ia { margin-right: 2px; gap: 6px; }
/* O seletor de IA com a cara do chip do especialista: pílula com borda e a seta. O "background: transparent"
   que estava aqui apagava a seta (o atalho zera a imagem de fundo) e sobrava um texto cinza solto (09/10). */
.linha-ferramentas .seletor-ia select {
  height: 32px; padding: 0 28px 0 12px; font: 500 13px var(--sans); color: var(--texto);
  background-color: transparent; border: 1px solid var(--borda); border-radius: 999px;
  background-position: calc(100% - 15px) 52%, calc(100% - 11px) 52%;
}
.linha-ferramentas .seletor-ia select:hover, .linha-ferramentas .seletor-ia select:focus-visible { background-color: var(--hover); border-color: var(--borda-forte); }
/* A cota: o anel numa linha só (o botão herdava a grade dos botões redondos e empilhava anel e texto).
   O número só aparece quando a cota está alta; o detalhe abre ao clicar. */
.escrever form .linha-ferramentas .botao-cota {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: auto; min-width: 32px; height: 32px;
  padding: 0 8px; background: none; border: 0; border-radius: 999px; color: var(--suave); box-shadow: none;
  /* Com uma IA só, o nome dela aparece aqui: na mesma letra dos chips ao lado (saía em 16 px, maior que tudo
     na linha — revisão de UI de 11/10). */
  font: 500 13px/1 var(--sans);
}
.escrever form .linha-ferramentas .botao-cota .rotulo-cota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escrever form .linha-ferramentas .botao-cota:hover, .escrever form .linha-ferramentas .botao-cota[aria-expanded="true"] { background: var(--hover); color: var(--texto); }
.aviso-dados { font-size: 11.5px; }

/* ------------------------------------------------------------- início */
/* A caixa de escrever no meio da tela, a saudação em cima e os especialistas
   embaixo; ao mandar a primeira mensagem, a caixa desce para o pé. */
/* O topo fica no alto; o resto (saudação, caixa, especialistas) se centra no
   espaço que sobra — margens automáticas, e não justify-content, que desceria o topo. */
.principal.vazio { overflow-y: auto; }
.principal.vazio .conversa { flex: 0 0 auto; overflow: visible; padding: 0 20px 22px; margin-top: auto; }
.principal.vazio .aviso-dados { display: none; }
.abaixo-escrever { display: none; }
.principal.vazio .abaixo-escrever { display: block; width: 100%; max-width: 800px; margin: 22px auto auto; padding: 0 20px 24px; }
.inicio { text-align: center; animation: entrar .25s var(--ease) both; }
.titulo-inicio {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin: 0;
  font: 600 clamp(28px, 4.2vw, 38px)/1.15 var(--serifa); letter-spacing: -.025em; color: var(--texto); text-wrap: balance;
}
.estrela-inicio { color: var(--ambar); display: inline-flex; }
.estrela-inicio path { fill: currentColor; }
.titulo-especialistas { margin: 0 0 10px; font: 500 13px var(--sans); color: var(--suave); text-transform: none; letter-spacing: 0; text-align: left; }
/* Até sete especialistas numa linha só na largura da caixa (com 116 px o sétimo descia sozinho). */
.fila-especialistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.tile-especialista {
  display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer;
}
.fundo-tile {
  height: 92px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--borda);
  transition: transform var(--t2), box-shadow var(--t2);
}
.tile-especialista:hover .fundo-tile { transform: translateY(-2px); box-shadow: var(--sombra); }
.tile-especialista.ativo .fundo-tile { box-shadow: 0 0 0 2px var(--texto); }
.fundo-tile .avatar-tile { width: 58px; height: 58px; margin: 0; box-shadow: none; border-radius: 50%; }
.tile-especialista .texto-tile { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.tile-especialista .nome-tile { font: 600 14px/1.3 var(--sans); }
.tile-especialista .papel-tile { font: 400 12.5px/1.35 var(--sans); color: var(--suave); text-transform: none; letter-spacing: 0; }
.tom-azul .fundo-tile { background: linear-gradient(160deg, #e3e9ff, #f2efff); }
.tom-rosa .fundo-tile { background: linear-gradient(160deg, #ffe3e8, #fff0e4); }
.tom-areia .fundo-tile { background: linear-gradient(160deg, #fcefd6, #f7ebdd); }
.tom-menta .fundo-tile { background: linear-gradient(160deg, #dcf3e8, #edf6ef); }
.tom-ceu .fundo-tile { background: linear-gradient(160deg, #dcefff, #eaf3fb); }
.tom-lilas .fundo-tile { background: linear-gradient(160deg, #ebe4fb, #f5eef9); }
:root[data-tema="escuro"] .tom-azul .fundo-tile { background: linear-gradient(160deg, #2a3150, #2b2a40); }
:root[data-tema="escuro"] .tom-rosa .fundo-tile { background: linear-gradient(160deg, #47303a, #3d3230); }
:root[data-tema="escuro"] .tom-areia .fundo-tile { background: linear-gradient(160deg, #453a28, #3a332b); }
:root[data-tema="escuro"] .tom-menta .fundo-tile { background: linear-gradient(160deg, #263f36, #2b3730); }
:root[data-tema="escuro"] .tom-ceu .fundo-tile { background: linear-gradient(160deg, #233849, #2a3440); }
:root[data-tema="escuro"] .tom-lilas .fundo-tile { background: linear-gradient(160deg, #362d4a, #352e3f); }
.especialistas .painel-especialidades { margin-top: 12px; background: var(--papel); border: 1px solid var(--borda); border-radius: 14px; animation: entrar .18s var(--ease) both; }
.papel-painel { font-size: 12.5px; }
.opcao-especialidade:hover { background: var(--hover); }
.icone-agente { background: var(--fundo-2); color: var(--texto); }

/* ------------------------------------------------------------ páginas */

.principal.pagina .escrever, .principal.pagina .abaixo-escrever { display: none; }
.conversa > .pagina-vista { max-width: 1000px; margin: 0 auto; padding: 14px 8px 40px; animation: entrar .2s var(--ease) both; }
.cab-vista { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 8px; }
.cab-vista h1 { margin: 0; font: 650 30px/1.15 var(--serifa); letter-spacing: -.02em; }
.sub-vista { margin: 6px 0 0; max-width: 640px; font-size: 15px; color: var(--suave); }
.acoes-vista { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.busca-vista {
  height: 36px; width: 220px; padding: 0 12px; font: 14px var(--sans); color: var(--texto);
  background: var(--papel); border: 1px solid var(--borda); border-radius: 10px;
}
.busca-vista:focus { outline: none; border-color: var(--borda-forte); }
.botao { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; font-size: 14px; border-radius: 10px; background: var(--papel); border: 1px solid var(--borda-forte); }
.botao:hover { border-color: var(--texto); color: var(--texto); }
.botao.primario { color: var(--sobre-tinta); background: var(--tinta); border-color: var(--tinta); }
.botao.primario:hover { background: var(--tinta-forte); color: var(--sobre-tinta); border-color: var(--tinta-forte); }
.botao.pequeno { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.botao.perigo:hover { color: var(--erro); border-color: var(--erro); }
.grade-projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 22px; }
.cartao-projeto {
  display: flex; flex-direction: column; gap: 6px; min-height: 138px; padding: 18px 20px; text-align: left; font: inherit;
  color: var(--texto); background: var(--papel); border: 1px solid var(--borda); border-radius: 14px; cursor: pointer;
  transition: border-color var(--t1), box-shadow var(--t1);
}
.cartao-projeto:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.topo-cartao { display: flex; align-items: center; gap: 8px; }
.nome-cartao { font: 600 16px/1.3 var(--sans); }
.fixado { color: var(--ambar); display: inline-flex; }
.desc-cartao { font-size: 14.5px; line-height: 1.5; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta-cartao { margin-top: auto; font-size: 13px; color: var(--suave); }
.vazio-vista {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px;
  text-align: center; color: var(--suave); border: 1px dashed var(--borda-forte); border-radius: 16px;
}
.vazio-vista p { margin: 0; max-width: 420px; }
.voltar-vista {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; margin-bottom: 10px; border: 0;
  border-radius: 8px; background: none; color: var(--suave); font: 500 13.5px var(--sans); cursor: pointer;
}
.voltar-vista:hover { background: var(--hover); color: var(--texto); }
.colunas-projeto { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 16px; margin-top: 20px; align-items: start; }
.lado-projeto { display: flex; flex-direction: column; gap: 16px; }
.bloco-vista { padding: 16px 18px; background: var(--papel); border: 1px solid var(--borda); border-radius: 14px; }
.bloco-vista h2 { margin: 0 0 10px; font: 600 15px/1.3 var(--sans); }
.topo-bloco { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.topo-bloco h2 { margin: 0; }
.bloco-vista .vazio { margin: 4px 0; font-size: 14px; color: var(--suave); }
.linha-conversa {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.linha-conversa + .linha-conversa { margin-top: 2px; }
.linha-conversa:hover { background: var(--hover); }
.linha-conversa .titulo-item { font-size: 14.5px; font-weight: 500; }
.linha-conversa .meta { font-size: 12.5px; color: var(--suave); }
.texto-instrucoes { margin: 6px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.texto-instrucoes.vazio { color: var(--suave); }
.editor-instrucoes, .campo-dialogo input, .campo-dialogo textarea {
  width: 100%; margin-top: 8px; padding: 10px 12px; font: 14.5px/1.55 var(--sans); color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda-forte); border-radius: 10px; resize: vertical;
}
.editor-instrucoes:focus, .campo-dialogo input:focus, .campo-dialogo textarea:focus { outline: none; border-color: var(--texto); }
.acoes-bloco, .acoes-dialogo { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.acoes-bloco .contador { margin-right: auto; font-size: 12.5px; color: var(--suave); }
.dica-bloco { margin: 0 0 10px; font-size: 13px; color: var(--suave); }
.lista-arquivos-projeto { display: flex; flex-direction: column; gap: 4px; }
.arquivo-projeto { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; }
.arquivo-projeto:hover { background: var(--hover); }
.arquivo-projeto .ext, .linha-arquivo .ext {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px;
  font: 600 10.5px var(--sans); color: var(--suave); background: var(--fundo-2); border: 1px solid var(--borda);
}
.arquivo-projeto .info { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--texto); text-decoration: none; }
.arquivo-projeto .nome, .linha-arquivo .nome { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arquivo-projeto .meta, .linha-arquivo .meta { font-size: 12.5px; color: var(--suave); }
.dialogo-projeto { width: min(520px, calc(100vw - 32px)); }
.campo-dialogo { display: block; margin: 14px 0 0; font: 600 13px var(--sans); }
.dialogo-projeto .erro { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: var(--erro); }
.grupo-agentes-vista { margin-top: 26px; }
.grupo-agentes-vista h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 15px var(--sans); }
.avatar-grupo { width: 28px; height: 28px; border-radius: 50%; }
.lista-agentes-vista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.linha-agente {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; font: inherit; text-align: left; color: var(--texto);
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; cursor: pointer;
  transition: border-color var(--t1), box-shadow var(--t1);
}
.linha-agente:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.icone-linha { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--fundo-2); color: var(--texto); }
.linha-agente .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-agente .nome { font: 600 14.5px/1.3 var(--sans); }
.linha-agente .desc { font-size: 13px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linha-agente .ir { color: var(--suave); display: inline-flex; }
.lista-arquivos-vista { margin-top: 18px; display: flex; flex-direction: column; }
.linha-arquivo { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--borda); }
.linha-arquivo .info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; border: 0; background: none; text-align: left; color: var(--texto); font: inherit; cursor: pointer; }
.linha-arquivo .info:hover .nome { text-decoration: underline; }
/* No celular a linha empilha: tipo e nome em cima (nome em até duas linhas), os botões embaixo, meio a
   meio. Antes os botões tomavam a largura e o nome ficava com uns 70 px (checkup de 09/10). */
@media (max-width: 600px) {
  .linha-arquivo { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; padding: 12px 4px; }
  .linha-arquivo .info { flex: 1 1 calc(100% - 56px); }
  .linha-arquivo .nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .linha-arquivo .meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .linha-arquivo > .botao { flex: 1 1 0; justify-content: center; min-height: 40px; }
}

/* ------------------------------------------------------------ diálogos */

dialog::backdrop { background: rgba(20, 20, 24, .38); animation: aparecer .16s ease both; }
dialog[open] { animation: entrar .18s var(--ease) both; }
.dialogo-contexto, .dialogo-editor, .es-dialogo {
  background: var(--papel); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra-alta);
}
.dialogo-topo h2 { font: 650 21px/1.2 var(--serifa); letter-spacing: -.015em; }
.bloco-contexto { background: var(--papel); border: 1px solid var(--borda); box-shadow: none; }
.bloco-contexto.so-leitura { background: var(--fundo-2); }

/* -------------------------------------------------- cartões no chat */

.cartoes-chat { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; }
.cartao-chat { max-width: 620px; padding: 14px 16px 16px; background: var(--papel); border: 1px solid var(--borda); border-radius: 16px; }
.cartao-chat.entra { animation: entrar .22s var(--ease) both; }
.cc-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cc-icone { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--suave); background: var(--fundo-2); }
.cc-rotulo { font: 500 13px var(--sans); color: var(--suave); }
.cc-titulo { margin: 2px 0 6px; font: 600 16px/1.3 var(--sans); }
.cc-texto { margin: 4px 0 10px; color: var(--suave); font-size: 14.5px; }
.cc-dica { margin: 10px 0 0; color: var(--suave); font-size: 13px; }
.cc-alerta { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ambar-suave); color: var(--atencao); font-size: 13.5px; }
.cc-erro { margin: 6px 0; padding: 9px 12px; border-radius: 12px; background: var(--erro-fundo); color: var(--erro); font-size: 13.5px; }
.cc-feito { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ok); font-weight: 600; font-size: 14px; }
.cc-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cc-botao {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 10px; cursor: pointer;
  font: 500 14px/1.2 var(--sans); color: var(--texto); text-decoration: none; background: var(--papel); border: 1px solid var(--borda-forte);
  transition: background var(--t1), border-color var(--t1);
}
.cc-botao:hover { border-color: var(--texto); }
.cc-botao.primario { color: var(--sobre-tinta); background: var(--tinta); border-color: var(--tinta); }
.cc-botao.primario:hover { background: var(--tinta-forte); }
.cc-botao.perigo:hover { border-color: var(--erro); color: var(--erro); }
.cc-botao.armado { background: var(--ambar); color: #1b1300; border-color: transparent; }
.cc-botao.trabalhando { opacity: .7; cursor: progress; }
.cc-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cc-marca {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 14px;
  text-align: left; cursor: pointer; color: var(--texto); font: inherit; background: var(--fundo); border: 1px solid var(--borda);
  transition: border-color var(--t1);
}
.cc-marca:hover { border-color: var(--borda-forte); }
.cc-marca.escolhida { border-color: var(--texto); }
.cc-cores { display: flex; gap: 4px; min-height: 16px; }
.cc-cores i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cc-marca-nome { font: 600 15px/1.2 var(--sans); }
.cc-marca-base { font-size: 12.5px; color: var(--suave); min-height: 1em; }
.cc-peca-dentro { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
.cc-capa {
  position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  color: var(--suave); background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--borda);
}
.cc-capa img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .2s ease; }
.cc-capa.pronta img { opacity: 1; }
.cc-info { min-width: 0; }
.cc-linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-formato { font: 500 12.5px var(--sans); color: var(--suave); }
.cc-situacao {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; background: var(--fundo-2); color: var(--texto);
}
.cc-situacao::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--suave); }
.cc-situacao.s-criando::before, .cc-situacao.s-renderizando::before, .cc-situacao.s-revisando::before,
.cc-situacao.s-na_fila::before, .cc-situacao.s-publicando::before { background: var(--ambar); animation: respirar-ponto 1.4s ease-in-out infinite; }
.cc-situacao.s-aguardando_aprovacao::before { background: var(--ambar); }
.cc-situacao.s-aprovada::before, .cc-situacao.s-agendada::before, .cc-situacao.s-publicada::before { background: var(--ok); }
.cc-situacao.s-erro::before, .cc-situacao.s-interrompida::before { background: var(--erro); }
@keyframes respirar-ponto { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.cc-fatos { margin: 6px 0 0; font-size: 13px; color: var(--suave); }
.cc-diretor { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--fundo-2); display: flex; flex-direction: column; gap: 2px; }
.cc-quem { font: 600 12.5px/1.2 var(--sans); color: var(--suave); }
.cc-trilho { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 10px 0 2px; padding: 0; }
.cc-trilho li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cc-trilho li:not(:last-child)::after { content: ""; position: absolute; top: 5px; left: calc(50% + 8px); right: calc(-50% + 8px); height: 2px; border-radius: 2px; background: var(--borda); }
.cc-trilho .ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--borda-forte); }
.cc-trilho .nome { font-size: 11px; color: var(--suave); line-height: 1.2; }
.cc-trilho li.feita .ponto { background: var(--texto); box-shadow: none; }
.cc-trilho li.feita:not(:last-child)::after { background: var(--texto); opacity: .5; }
.cc-trilho li.agora .ponto, .cc-trilho li.espera .ponto { background: var(--ambar); box-shadow: none; }
.cc-trilho li.agora .ponto { animation: respirar-ponto 1.4s ease-in-out infinite; }
.cc-trilho li.agora .nome, .cc-trilho li.espera .nome { color: var(--texto); font-weight: 600; }
.cc-trilho li.parou .ponto { background: var(--erro); box-shadow: none; }
.cc-diff { display: flex; flex-direction: column; gap: 12px; }
.cc-diff-item { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.cc-diff-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-diff-item h5 { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.cc-antes, .cc-depois { border-radius: 12px; padding: 8px 10px; font-size: 14px; }
.cc-antes { background: var(--fundo-2); color: var(--suave); }
.cc-depois { background: var(--mar-suave); }
.cc-antes p, .cc-depois p { margin: 2px 0 0; white-space: pre-wrap; }
.cc-mini { font: 600 11.5px/1 var(--sans); color: var(--suave); }
.cc-motivo { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--suave); font-style: italic; }
.cc-parametros { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-parametros li { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--fundo-2); }
.cc-parametros b { font-weight: 600; }
.cc-passos summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.cc-passos pre { white-space: pre-wrap; font: 14px/1.6 var(--sans); margin: 8px 0 0; }
.ampliavel { cursor: zoom-in; }
.cc-qtd { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; font: 600 11px/1.2 var(--sans); color: #fff; background: rgba(0, 0, 0, .55); }

/* ------------------------------------------- habilidades (personalização) */
.bloco-habilidades h3 { display: inline-flex; align-items: center; gap: 6px; }
.lista-habilidades { display: flex; flex-direction: column; gap: 8px; }
.item-habilidade { padding: 12px 14px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--borda); transition: opacity .2s; }
.item-habilidade.saindo { opacity: 0; }
.ih-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ih-topo h4 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--texto); flex: 1 1 auto; }
.ih-usos { font-size: 12px; color: var(--suave); }
.ih-quando { margin: 4px 0 0; color: var(--suave); font-size: 13.5px; }
.ih-acoes { display: flex; gap: 8px; margin-top: 10px; }
.ih-editor { display: grid; gap: 8px; margin-top: 10px; }
.ih-editor label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.ih-editor input, .ih-editor textarea { font: 14.5px/1.5 var(--sans); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--papel); color: var(--texto); }

/* -------------------------------------------------- avisos no canto */
.avisos-canto {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
body.app:not(.admin) .avisos-canto { bottom: calc(132px + env(safe-area-inset-bottom)); }
.aviso-canto {
  pointer-events: auto; position: relative; overflow: hidden; width: 100%; display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 10px; align-items: start; padding: 14px 12px 14px 14px;
  border-radius: 16px; background: var(--papel); border: 1px solid var(--borda); box-shadow: var(--sombra-alta);
}
.aviso-canto.entra { animation: entrar .22s var(--ease) both; }
.aviso-canto.sai { animation: aviso-sai .2s var(--ease) both; }
.ac-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--texto); background: var(--fundo-2); }
.t-aguardando_aprovacao .ac-icone { color: var(--atencao); background: var(--ambar-suave); }
.t-aprovada .ac-icone, .t-publicada .ac-icone, .t-agendada .ac-icone { color: var(--ok); }
.t-erro .ac-icone, .t-interrompida .ac-icone { color: var(--erro); background: var(--erro-fundo); }
.ac-meio strong { display: block; font-size: 14.5px; line-height: 1.3; }
.ac-meio p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--suave); }
.ac-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ac-acao { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9px; font: 500 13px/1.2 var(--sans); color: var(--sobre-tinta); background: var(--tinta); border: 0; text-decoration: none; cursor: pointer; }
.ac-acao:hover { background: var(--tinta-forte); }
.ac-fechar { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.ac-fechar:hover { background: var(--hover); color: var(--texto); }
.ac-tempo { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: var(--borda-forte); animation: encolher linear both; }
.aviso-canto.pausado .ac-tempo { animation-play-state: paused; }
@keyframes encolher { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------------------------ peça ampliada (lightbox) */
dialog.ampliar { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
dialog.ampliar::backdrop { background: rgba(12, 12, 14, .82); animation: aparecer .2s ease both; }
dialog.ampliar[open] { animation: none; }
dialog.ampliar.saindo { animation: aviso-sai .2s ease both; }
.ampliar-palco { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 72px 72px; }
.ampliar-quadro { margin: 0; display: grid; place-items: center; max-width: 100%; max-height: 100%; }
.ampliar-midia { display: block; max-width: min(92vw, 1080px); max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.ampliar-fechar, .ampliar-seta { position: absolute; display: grid; place-items: center; border: 0; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; transition: background var(--t1), opacity var(--t1); }
.ampliar-fechar { top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 12px; }
.ampliar-seta { top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; }
.ampliar-seta.esq { left: 18px; } .ampliar-seta.dir { right: 18px; }
.ampliar-fechar:hover, .ampliar-seta:hover { background: rgba(255, 255, 255, .22); }
.ampliar-seta:disabled { opacity: .25; cursor: default; }
.ampliar-legenda { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; max-width: 90vw; padding: 6px 14px; border-radius: 999px; font-size: 14px; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ampliar-legenda:empty { display: none; }

/* --------------------------------------------------------------- Estúdio */
.es-corpo { background: var(--fundo); }
.es-topo { background: var(--fundo); backdrop-filter: none; border-bottom: 1px solid var(--borda); }
.es-topo-esq { align-items: center; }
.es-marca, .es-marca .marca { display: inline-flex; align-items: center; padding: 0; margin: 0; line-height: 1; height: 28px; font: 600 17px/1 var(--serifa); }
.es-marca img { display: block; height: 24px !important; width: auto !important; }
.es-titulo-app { display: inline-flex; align-items: center; height: 20px; font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; }
.es-voltar { display: inline-flex; align-items: center; gap: 4px; height: 32px; font-size: 14px; }
.es-nova { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.es-abas a { font-size: 14.5px; padding: 7px 14px; }
.es-abas a.ativa { background: var(--ativo); box-shadow: none; }
/* O título das abas do Estúdio no mesmo desenho das páginas do chat (Projetos, Agentes…): o peso 400 era do
   tempo da serifa e, sem ela, "Pastas" parecia de outro produto (revisão de UI de 11/10). */
.es-cabeca h1 { font: 650 30px/1.15 var(--serifa); letter-spacing: -.02em; }
@media (max-width: 600px) { .es-cabeca h1 { font-size: 28px; } }
.es-coluna { background: var(--fundo-2); }
.es-coluna h2 { font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; }
.es-cartao, .es-linha { background: var(--papel); border-color: var(--borda); box-shadow: none; }
.es-cartao:hover { transform: none; box-shadow: var(--sombra); }
.es-linha-loop { font: 400 12.5px/1.4 var(--sans); letter-spacing: 0; }

/* -------------------------------------------------------- painel admin */
.cartao-admin, .tabela-admin { background: var(--papel); border-color: var(--borda); box-shadow: none; }
.cartao-admin h2 { font: 600 16px/1.3 var(--sans); }
.menu-admin a.ativo { background: var(--ativo); color: var(--texto); }
.papel-tile, .titulo-area, .selo { font-family: var(--sans); text-transform: none; letter-spacing: 0; }

/* ----------------------------------------------------------- celular */
@container principal (max-width: 600px) {
  .topo { padding: 8px 12px; }
  .conversa { padding: 18px 14px 26px; }
  .escrever { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .escrever form { border-radius: 18px; padding: 12px 10px 8px 12px; }
  /* O nome da IA invadia o botão de enviar com o chip do agente aberto (checkup de 09/10): os dois cedem. */
  .linha-ferramentas .seletor-ia { flex: 0 1 auto; min-width: 0; }
  .linha-ferramentas .seletor-ia select { max-width: 88px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .escrever form .linha-ferramentas .chip-agente { max-width: 46%; }
  .principal.vazio .abaixo-escrever { padding: 0 14px 20px; }
  .fila-especialistas { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 108px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .fundo-tile { height: 84px; }
  .colunas-projeto { grid-template-columns: minmax(0, 1fr); }
  .cab-vista h1 { font-size: 28px; }
  .busca-vista { width: 100%; }
  .acoes-vista { width: 100%; }
}
@media (max-width: 600px) {
  .avisos-canto { right: 12px; left: 12px; width: auto; }
  body.app:not(.admin) .avisos-canto { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .cc-peca-dentro { grid-template-columns: 1fr; }
  .cc-capa { max-width: 220px; }
  .cc-diff-item { grid-template-columns: 1fr; }
  .ampliar-palco { padding: 60px 8px 64px; }
  .ampliar-midia { max-width: 100%; max-height: calc(100dvh - 140px); border-radius: 10px; }
  .ampliar-seta { top: auto; bottom: 14px; margin-top: 0; }
  .ampliar-legenda { bottom: 70px; font-size: 13px; }
  .lista-agentes-vista { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ acertos */
/* O botão de abrir a lateral só aparece quando ela está recolhida (ou no celular). */
.topo .abrir-lateral { display: none; }
.app.recolhida .topo .abrir-lateral { display: inline-grid; }
@media (max-width: 860px) { .topo .abrir-lateral { display: inline-grid; } }
.menu-conta .item-conta, .lateral-rodape .menu-conta a.item-conta { color: var(--texto); }
.menu-conta .item-conta:hover { color: var(--texto); }
/* A pergunta da pessoa dispensa o "Você" em cima (como no Claude). */
.bolha.eu .autor { display: none; }

/* ------------------------------------------- Estúdio dentro do chat */
.principal.pagina-estudio .conversa { padding: 0; overflow: hidden; }
.conversa > .pagina-vista.vista-estudio { max-width: none; height: 100%; padding: 0; animation: none; }
.vista-estudio iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--fundo); }
.es-corpo.embutido .es-voltar, .es-corpo.embutido .es-marca, .es-corpo.embutido .es-titulo-app,
.es-corpo.embutido .tema-botao { display: none; }
.es-corpo.embutido .es-topo { position: sticky; top: 0; padding-top: 10px; padding-bottom: 10px; }
.es-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.es-projeto-peca {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-size: 12px; color: var(--suave); background: var(--fundo-2);
}
.pecas-projeto { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.peca-mini {
  position: relative; display: block; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--fundo-2); cursor: pointer;
}
.peca-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.peca-mini span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------ Estúdio · a peça (08/10) */
/* A prévia fica à esquerda, fixa, do tamanho que a ALTURA da tela permite (o
   Reels inteiro, sem rolar). À direita: as etapas, a decisão, as versões com a
   regra de aprovação e as abas. A barra de decisão não flutua mais sobre o vídeo. */
.es-palco-peca { padding-bottom: 32px; }
.es-palco-peca .es-peca-topo { align-items: flex-end; gap: 10px 16px; margin-bottom: 18px; }
.es-palco-peca .es-link-voltar { flex-basis: 100%; display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.es-peca-titulos { flex: 1 1 320px; min-width: 0; }
.es-palco-peca .es-peca-topo h1 { flex: none; margin: 0 0 8px; font: 650 26px/1.15 var(--serifa); letter-spacing: -.02em; }
.es-peca-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.es-situacao {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font: 500 13px var(--sans); color: var(--texto); background: var(--fundo-2);
}
.es-situacao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--suave); }
.es-situacao.s-aguardando_aprovacao { background: var(--ambar-suave); color: var(--atencao); }
.es-situacao.s-aguardando_aprovacao::before { background: var(--ambar); }
.es-situacao.s-aprovada, .es-situacao.s-publicada, .es-situacao.s-agendada { color: var(--ok); }
.es-situacao.s-aprovada::before, .es-situacao.s-publicada::before, .es-situacao.s-agendada::before { background: var(--ok); }
.es-situacao.s-erro, .es-situacao.s-interrompida { background: var(--erro-fundo); color: var(--erro); }
.es-situacao.s-erro::before, .es-situacao.s-interrompida::before { background: var(--erro); }
.es-situacao.s-na_fila::before, .es-situacao.s-criando::before, .es-situacao.s-renderizando::before,
.es-situacao.s-revisando::before, .es-situacao.s-publicando::before { background: var(--ambar); animation: respirar-ponto 1.4s ease-in-out infinite; }

.es-palco-peca .es-grade-peca { grid-template-columns: auto minmax(0, 1fr); gap: 20px; }
.es-palco-peca .es-grade-peca > .es-coluna-previa { display: block; position: sticky; top: 72px; }
.es-corpo.embutido .es-palco-peca .es-grade-peca > .es-coluna-previa { top: 64px; }
.es-palco-peca .es-painel { border-radius: 16px; box-shadow: none; }
.es-palco-peca .es-painel h3 { margin: 0 0 12px; font: 600 14.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--texto); }
.es-painel-previa { padding: 14px 16px 16px; }
.es-cab-painel { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.es-palco-peca .es-cab-painel h3 { margin: 0; }
.es-aviso-versao { font-size: 12px; color: var(--atencao); background: var(--ambar-suave); padding: 2px 8px; border-radius: 6px; }

/* O celular: a largura sai da altura disponível × a proporção do formato. */
.es-palco-peca .es-celular {
  --altura-midia: clamp(320px, calc(100vh - 250px), 860px);
  width: calc(var(--altura-midia) * var(--proporcao, .8) + 16px); max-width: 100%;
  margin: 0 auto; padding: 8px; border-radius: 30px; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .45);
}
.es-palco-peca .es-celular.feed { --altura-midia: clamp(300px, calc(100vh - 430px), 680px); }
.es-palco-peca .es-tela { position: relative; border-radius: 23px; }
.es-palco-peca .es-ig-midia { aspect-ratio: var(--proporcao, .8); }
.es-palco-peca .es-ig-midia img, .es-palco-peca .es-ig-midia video { width: 100%; height: 100%; object-fit: cover; }
/* No Reels e no Story o Instagram põe o nome POR CIMA do vídeo, e o resto da
   tela é só o vídeo — sem a faixa de botões e a legenda embaixo. */
.es-celular.vertical .es-ig-topo { position: absolute; z-index: 2; top: 0; left: 0; right: 0; color: #fff; background: linear-gradient(rgba(0, 0, 0, .5), transparent); }
.es-celular.vertical .es-ig-acoes, .es-celular.vertical .es-ig-legenda { display: none; }
.es-alternar-zonas { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--suave); cursor: pointer; }

.es-coluna-painel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.es-coluna-painel > .es-painel + .es-painel { margin-top: 0; }

/* Etapas: bolinhas com o nome; o detalhe da etapa de agora numa linha só. */
.es-palco-peca .es-trilho {
  grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 14px 6px 12px; border-radius: 16px; box-shadow: none; overflow: visible;
}
.es-palco-peca .es-etapa { gap: 6px; padding: 0 2px; }
.es-palco-peca .es-bola { width: 30px; height: 30px; border-width: 1.5px; }
.es-palco-peca .es-bola svg { width: 15px; height: 15px; }
.es-palco-peca .es-etapa:not(:nth-child(7))::after { top: 14px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 2px; }
.es-palco-peca .es-etapa-nome { display: block; font-size: 11.5px; font-weight: 500; line-height: 1.25; color: var(--suave); }
.es-palco-peca .es-etapa.feito .es-etapa-nome, .es-palco-peca .es-etapa.ativo .es-etapa-nome { color: var(--texto); }
.es-palco-peca .es-etapa-sub { display: none; }
.es-palco-peca .es-etapa.feito .es-bola { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.es-palco-peca .es-etapa.feito:not(:nth-child(7))::after { background: var(--texto); opacity: .35; }
.es-palco-peca .es-etapa.ativo:not(:nth-child(7))::after { background: var(--borda); }
.es-palco-peca .es-etapa.ativo .es-bola { background: var(--ambar-suave); border-color: var(--ambar); color: var(--atencao); }
.es-palco-peca .es-etapa.ativo .es-bola::before, .es-palco-peca .es-etapa.ativo .es-bola::after { display: none; }
.es-palco-peca .es-trilho-atual {
  display: block; grid-column: 1 / -1; margin: 12px 8px 0; padding-top: 10px; border-top: 1px solid var(--borda);
  font-size: 13px; text-align: left;
}
.es-palco-peca .es-trilho-atual b { display: inline; font-weight: 600; }
.es-palco-peca .es-trilho-atual span { color: var(--suave); }
.es-palco-peca .es-trilho-atual.vivo span { color: var(--atencao); }

/* A decisão: logo abaixo das etapas, sem flutuar. */
.es-coluna-painel .es-barra-acoes {
  position: static; margin: 0; padding: 14px 16px; border-radius: 16px; box-shadow: none;
  flex-direction: column; align-items: stretch; gap: 12px;
}
.es-coluna-painel .es-barra-acoes .es-msg { font-size: 14px; line-height: 1.5; }
.es-coluna-painel .es-barra-acoes .es-acoes { justify-content: flex-start; }
.es-coluna-painel .es-barra-acoes .es-acoes:empty { display: none; }
.es-palco-peca .es-acoes .botao.ok, .es-palco-peca .botao.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.es-palco-peca .es-ao-vivo { color: var(--atencao); }
.es-palco-peca .es-ao-vivo::before { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-suave); }

/* A regra de aprovação, por extenso, no alto das versões. */
.es-regra { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 12px; background: var(--fundo-2); border-radius: 12px; }
.es-regra p { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--suave); }
.es-regra p b { color: var(--texto); font-weight: 600; }
.es-regra .botao { flex: none; padding: 6px 12px; font-size: 13px; }

.es-versoes { display: flex; flex-direction: column; gap: 6px; }
.es-versao {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; font: inherit; text-align: left; color: var(--texto);
  background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; transition: border-color var(--t1), background var(--t1);
}
.es-versao:hover { background: var(--hover); }
.es-versao.vendo { border-color: var(--texto); }
.es-versao-mini { flex: none; width: 44px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--fundo-2); }
.es-versao-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.es-versao-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.es-versao-linha { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.es-versao-veredito { font-size: 13px; color: var(--suave); }
.es-versao-veredito.ok { color: var(--ok); }
.es-versao-escolhida { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--ambar-suave); color: var(--atencao); }
.es-versao-dica { font-size: 12px; color: var(--marca); }

.es-palco-peca .es-abas-painel { margin: 0 0 6px; }
.es-palco-peca .es-abas-painel button { font-size: 13.5px; }
.es-palco-peca .es-abas-painel button.ativa { background: var(--ativo); }
.es-desc-aba { margin: 0 0 14px; font-size: 13px; color: var(--suave); }
.es-palco-peca .es-sala { max-height: 560px; }
.es-palco-peca .es-sistema { font-family: var(--sans); letter-spacing: 0; }
.es-palco-peca .es-avatar { display: grid; place-items: center; }

/* Tablet: duas colunas, com o celular da prévia menor — numa coluna só, a decisão e as versões ficavam
   abaixo da dobra (checkup de 09/10). A coluna única fica para o celular. */
@media (min-width: 701px) and (max-width: 900px) {
  .es-palco-peca .es-grade-peca { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
  .es-palco-peca .es-grade-peca { grid-template-columns: minmax(0, 1fr); }
  .es-palco-peca .es-grade-peca > .es-coluna-previa { position: static; }
  .es-palco-peca .es-celular { --altura-midia: clamp(320px, 68vh, 640px); }
  .es-palco-peca .es-celular.feed { --altura-midia: clamp(300px, 56vh, 560px); }
}
@media (max-width: 600px) {
  .es-palco-peca .es-peca-topo h1 { font-size: 24px; }
  .es-palco-peca .es-etapa-nome { display: none; }
  .es-palco-peca .es-trilho-atual { text-align: center; }
  .es-regra { flex-direction: column; align-items: flex-start; gap: 8px; }
  .es-coluna-painel .es-barra-acoes .es-acoes { flex-wrap: wrap; overflow: visible; }
}

/* ------------------------------------------------ navegação (08/10, noite) */
/* Busca: um item do menu, com lupa e o mesmo contraste dos outros — antes era
   uma caixa clarinha no meio da lista, que quase não se lia. */
.lateral .busca-menu { position: relative; margin: 0; }
.lateral .campo-busca-menu { cursor: text; }
.lateral .campo-busca-menu input {
  flex: 1; min-width: 0; height: auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: var(--texto); outline: none; box-shadow: none;
}
.lateral .campo-busca-menu input::placeholder { color: var(--texto); opacity: 1; }
.lateral .campo-busca-menu input::-webkit-search-cancel-button { cursor: pointer; }
.lateral .campo-busca-menu:focus-within { background: var(--papel); box-shadow: inset 0 0 0 1px var(--borda-forte); }
.lateral .campo-busca-menu:focus-within input::placeholder { color: var(--suave); }
.lateral .busca-menu .busca-resultados { top: calc(100% + 4px); z-index: 30; box-shadow: var(--sombra-alta); }

/* Estúdio dentro do chat: uma barra só, no alto (a do chat sai). */
.principal.pagina-estudio > .topo { display: none; }
.es-corpo.embutido .es-topo { min-height: 52px; padding: 8px 20px; }
.es-corpo.embutido .es-titulo-app { display: inline-flex; padding: 0; border: 0; font: 500 15px/1 var(--sans); color: var(--texto); }
.es-menu-chat {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--texto); cursor: pointer;
}
.es-menu-chat:hover { background: var(--hover); }
.es-menu-chat[hidden] { display: none; }

/* Abas do Estúdio: um marcador desliza até a ativa; o conteúdo entra suave. */
.es-abas { position: relative; }
.es-abas a { position: relative; z-index: 1; transition: color var(--t2); }
.es-abas a:hover { background: none; color: var(--texto); }
.es-abas a.ativa { background: none; box-shadow: none; }
.es-abas-marcador {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px;
  background: var(--ativo); opacity: 0; pointer-events: none;
}
.es-abas.pronto .es-abas-marcador { transition: transform .26s var(--ease), width .26s var(--ease), opacity .2s; }
.es-palco { transition: opacity .14s ease; }
.es-palco.es-saindo { opacity: .25; }
.es-palco.es-entrando { animation: es-palco-entra .24s var(--ease) both; }
@keyframes es-palco-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .es-abas.pronto .es-abas-marcador { transition: none; }
  .es-palco.es-entrando { animation: none; }
}

/* Quadro: "versão 2 de 3" no lugar dos pontinhos. */
.es-uso-versoes { font-size: 12px; color: var(--suave); white-space: nowrap; }
.es-uso-versoes.vivo { color: var(--atencao); }
.es-campo input[type="text"], .es-campo input[type="number"], .es-campo input[type="datetime-local"], .es-campo select { height: 44px; }

/* A peça: o título na coluna da direita, e a prévia começa no alto da página —
   assim o Reels inteiro cabe na tela, sem rolar. */
.es-palco-peca .es-grade-peca {
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "previa topo" "previa painel"; row-gap: 0;
}
.es-palco-peca .es-grade-peca > .es-peca-topo { grid-area: topo; margin-bottom: 16px; }
.es-palco-peca .es-grade-peca > .es-coluna-previa { grid-area: previa; top: 76px; }
.es-corpo.embutido .es-palco-peca .es-grade-peca > .es-coluna-previa { top: 64px; }
.es-palco-peca .es-grade-peca > .es-coluna-painel { grid-area: painel; }
/* A altura sai da tela E da largura: com duas colunas, a da direita (título, etapas, decisão) fica com
   pelo menos ~360 px. Só pela altura, no tablet em pé o celular da prévia levava quase tudo (checkup de 09/10). */
.es-palco-peca .es-celular { --altura-midia: clamp(280px, min(calc(100vh - 230px), calc((100vw - 440px) / var(--proporcao, .8))), 900px); }
.es-palco-peca .es-celular.feed { --altura-midia: clamp(260px, min(calc(100vh - 400px), calc((100vw - 440px) / var(--proporcao, .8))), 640px); }
.es-palco-peca .es-celular.feed .es-ig-legenda { max-height: 64px; }
@media (max-width: 700px) {
  .es-palco-peca .es-grade-peca { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "previa" "painel"; row-gap: 0; }
  .es-palco-peca .es-grade-peca > .es-coluna-previa { margin-bottom: 16px; }
  .es-palco-peca .es-celular { --altura-midia: clamp(320px, 68vh, 640px); }
  .es-palco-peca .es-celular.feed { --altura-midia: clamp(280px, 56vh, 560px); }
}
/* O topo da peça em grade: o "← Produção" sempre na própria linha (o flex com
   flex-basis 100% encolhia o link para a linha do título em telas médias). */
.es-palco-peca .es-peca-topo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "voltar voltar" "titulos situacao";
  align-items: end; gap: 8px 16px;
}
.es-palco-peca .es-peca-topo > .es-link-voltar { grid-area: voltar; justify-self: start; }
.es-palco-peca .es-peca-topo > .es-peca-titulos { grid-area: titulos; }
.es-palco-peca .es-peca-topo > .es-situacao { grid-area: situacao; justify-self: end; }
/* Até 960 px a coluna do título é estreita (no tablet ela divide a tela com a prévia): o selo desce. */
@media (max-width: 960px) {
  .es-palco-peca .es-peca-topo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "voltar" "titulos" "situacao"; }
  .es-palco-peca .es-peca-topo > .es-situacao { justify-self: start; }
}
@media (max-width: 600px) {
  .es-cabeca .es-filtros { width: 100%; }
  .es-filtros .es-campo { flex: 1 1 140px; min-width: 0; }
}
/* Botão verde legível nos dois temas (no escuro o verde é claro: texto escuro). */
.es-palco-peca .es-acoes .botao.ok, .es-palco-peca .botao.ok { color: var(--fundo); }
/* Caixa de erro vazia não aparece (no "Novo projeto" ela virava uma faixa rosa
   sem texto antes de qualquer erro). */
.erro:empty { display: none; }

/* ------------------------------------------------ Bentevia no chat (09/10) */
.vista-bentevia .bloco-ligacao { margin-top: 20px; }
.estado-ligacao { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.estado-ligacao.ok b { color: var(--ok); }
.estado-ligacao.problema b { color: var(--atencao); }
.acoes-esquerda { justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; }
.acoes-esquerda a.botao { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.grade-bentevia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.grade-bentevia .bloco-vista { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.grade-bentevia .texto-bloco { margin: 0; font-size: 14px; line-height: 1.55; color: var(--suave); }
.grade-bentevia .bloco-vista .vazio { margin: 0; font-size: 13px; }
.nota-vista { margin: 18px 0 0; font-size: 13px; color: var(--suave); }

/* Bentevia na lateral: o símbolo amarelo e o atalho para responder as conversas. */
.item-menu-duplo { position: relative; display: flex; align-items: center; }
.item-menu-duplo .item-menu { padding-right: 40px; }
.item-menu .ico-marca { display: grid; place-items: center; }
.item-menu .ico-marca img { width: 19px; height: 19px; display: block; }
.atalho-externo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--suave);
}
.atalho-externo:hover { background: var(--hover); color: var(--texto); }
.titulo-com-marca { display: flex; align-items: center; gap: 12px; }
.titulo-com-marca img { width: 38px; height: 38px; flex: none; }
.botao-conversas { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.botao-conversas[hidden] { display: none; }

/* ------------------------------------------------ revisão das telas (09/10) */
/* Diálogo do Estúdio: corpo rola, rodapé sempre à vista (antes o rodapé cortava). */
.es-dialogo[open] { display: flex; flex-direction: column; }
.es-dialogo .es-dialogo-corpo { flex: 1 1 auto; min-height: 0; max-height: none; }
.es-dialogo-pe { flex: none; }
/* Rótulos em caixa alta e fonte de máquina viram texto normal. */
.es-capa .es-formato { font: 600 11.5px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.es-bloco h3 { font: 600 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--texto); }
.tabela-admin .linha.cabeca span { text-transform: none; letter-spacing: 0; font: 500 12.5px var(--sans); }
.grupo-agentes h3 { text-transform: none; letter-spacing: 0; font: 600 13px var(--sans); }
.rotulo-grafico { margin: 14px 0 6px; font-size: 12.5px; color: var(--suave); }
.icone-cartao { display: inline-grid; place-items: center; }

/* ------------------------------------------------ Personalização (09/10) */
.grade-personalizacao { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; margin-top: 20px; align-items: start; }
.nav-personalizacao { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.item-personalizacao {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid transparent;
  border-radius: 12px; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--t1), border-color var(--t1);
}
.item-personalizacao:hover { background: var(--hover); }
.item-personalizacao.ativo { background: var(--papel); border-color: var(--borda); box-shadow: var(--sombra); }
.tile-personalizacao { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--texto); }
.item-personalizacao .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-personalizacao b { font-weight: 600; font-size: 14.5px; }
.item-personalizacao small { font-size: 12.5px; color: var(--suave); line-height: 1.35; }
.faixa-personalizacao { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; }
.faixa-personalizacao .tile-faixa { width: 42px; height: 42px; border-radius: 12px; background: var(--papel); box-shadow: var(--sombra); }
.faixa-personalizacao h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 650 21px/1.2 var(--serifa); }
.faixa-personalizacao h2 .etiqueta { font: 500 11.5px var(--sans); padding: 2px 8px; border-radius: 6px; background: var(--papel); color: var(--suave); }
.faixa-personalizacao p { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--texto); opacity: .82; }
.aviso-personalizacao { min-height: 1.2em; margin: 8px 2px; font-size: 13px; color: var(--ok); }
.aviso-personalizacao.erro { color: var(--erro); }
.aviso-personalizacao:empty { margin: 4px 0; }
.corpo-personalizacao { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.corpo-personalizacao > .botao { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
/* O título e a explicação já estão na faixa colorida; o bloco reaproveitado só traz os cartões. */
.corpo-personalizacao .bloco-contexto { padding: 0; border: 0; background: none; box-shadow: none; }
.corpo-personalizacao .bloco-contexto > .bloco-contexto-topo,
.corpo-personalizacao .bloco-contexto > .sub { display: none; }
@media (max-width: 900px) {
  .grade-personalizacao { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nav-personalizacao { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .item-personalizacao { flex: 0 0 auto; width: auto; padding: 8px 12px 8px 8px; }
  .item-personalizacao small { display: none; }
}
/* No celular as três partes cabem lado a lado, só com o nome (a terceira aparecia só com o ícone,
   cortada pela borda — checkup de 09/10). */
@media (max-width: 600px) {
  .nav-personalizacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .item-personalizacao { justify-content: center; padding: 10px 6px; min-height: 44px; }
  .item-personalizacao .tile-personalizacao { display: none; }
  .item-personalizacao .txt { align-items: center; text-align: center; }
  .item-personalizacao b { font-size: 13.5px; }
}
/* A faixa usa as cores dos cartões de especialista, mas não a altura fixa deles. */
.faixa-personalizacao.fundo-tile { height: auto; min-height: 0; aspect-ratio: auto; overflow: visible; }
.tile-personalizacao.fundo-tile { height: 36px; aspect-ratio: auto; }

/* ------------------------------------------------ Bentevia no chat (09/10, operação) */
.tom-amarelo .fundo-tile { background: linear-gradient(160deg, #fdf1c7, #fbf4de); }
:root[data-tema="escuro"] .tom-amarelo .fundo-tile { background: linear-gradient(160deg, #4a3f1c, #3b3424); }
.cc-confirmacao { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border-radius: 12px; background: var(--ambar-suave); }
.cc-confirmacao p { margin: 0; font-size: 14px; }
.cc-codigo b { font: 600 16px var(--mono); letter-spacing: .12em; }
.cc-optin { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.cc-optin input { margin-top: 3px; }
.grade-bentevia { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Quem confirma disparos (painel, 09/10) */
.quem-dispara { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.quem-dispara h3 { margin: 0 0 4px; font: 600 15px var(--sans); }
.lista-quem-dispara { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.linha-quem-dispara { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.linha-quem-dispara:hover { background: var(--hover); }
.linha-quem-dispara input { width: 18px; height: 18px; flex: none; }
.linha-quem-dispara .info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.linha-quem-dispara .pequeno { font-size: 12.5px; color: var(--suave); }
.linha-quem-dispara.inativa { opacity: .55; }

.linha-disparo-pessoa { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ambar-suave); }
.linha-disparo-pessoa .sub { margin: 6px 0 0 28px; }

/* ------------------------------------------------ pastas do Estúdio (09/10/2026) */
.es-topo-esq { min-width: 0; }
a.es-titulo-app { text-decoration: none; color: inherit; }
a.es-titulo-app:hover { color: var(--texto); }
.es-pasta-seletor { position: relative; min-width: 0; }
.es-pasta-atual {
  display: inline-flex; align-items: center; gap: 7px; max-width: 280px; height: 34px; padding: 0 10px 0 9px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); color: var(--texto);
  font: 500 13.5px/1 var(--sans); cursor: pointer; transition: border-color var(--t1), background var(--t1);
}
.es-pasta-atual:hover { border-color: var(--borda-forte); }
.es-pasta-atual[aria-expanded="true"] { border-color: var(--marca); box-shadow: var(--foco); }
.es-pasta-nome { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-seta { width: 7px; height: 7px; margin: -3px 2px 0 1px; border-right: 1.6px solid var(--suave); border-bottom: 1.6px solid var(--suave); transform: rotate(45deg); flex: none; }
.es-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--marca); color: #fff; font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; flex: none;
}
.es-badge[hidden] { display: none; }
.es-pasta-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 280px; max-height: min(70vh, 460px); overflow-y: auto;
  padding: 6px; border: 1px solid var(--borda); border-radius: 12px; background: var(--papel); box-shadow: var(--sombra-alta);
}
.es-pasta-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--borda); }
.es-pasta-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--texto); font: 14px/1.3 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.es-pasta-item span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-pasta-item:hover { background: var(--hover); }
.es-pasta-item.atual { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.es-pasta-ponto { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--borda-forte); }
/* O logo da marca da pasta, no menu e no botão (09/10/2026): caixa do tamanho de um ícone, logo inteiro. */
.es-pasta-logo { display: inline-grid; place-items: center; flex: none; width: 34px; height: 22px; padding: 2px 4px;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--borda); }
.es-pasta-logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.es-pasta-ponto.tom-sem { background: none; border: 1.5px dashed var(--borda-forte); }

/* as cores das pastas: suaves, como os cartões dos especialistas */
.tom-azul { --tom: #e7ebfa; --tom-forte: #3446b5; }
.tom-rosa { --tom: #f8e6ea; --tom-forte: #b4485f; }
.tom-areia { --tom: #f4ecdc; --tom-forte: #95590a; }
.tom-menta { --tom: #e2f1ea; --tom-forte: #2f7a4f; }
.tom-ceu { --tom: #e1eff6; --tom-forte: #11788a; }
.tom-lilas { --tom: #ece6f6; --tom-forte: #6b4fa8; }
.tom-amarelo { --tom: #fbf0d4; --tom-forte: #8a6200; }
:root[data-tema="escuro"] .tom-azul { --tom: #2a3150; --tom-forte: #9aa8ff; }
:root[data-tema="escuro"] .tom-rosa { --tom: #47303a; --tom-forte: #f0a3b4; }
:root[data-tema="escuro"] .tom-areia { --tom: #453a28; --tom-forte: #e7bf7c; }
:root[data-tema="escuro"] .tom-menta { --tom: #263f36; --tom-forte: #8fd3ad; }
:root[data-tema="escuro"] .tom-ceu { --tom: #233849; --tom-forte: #86c9db; }
:root[data-tema="escuro"] .tom-lilas { --tom: #362d4a; --tom-forte: #c5b2ef; }
:root[data-tema="escuro"] .tom-amarelo { --tom: #463c1f; --tom-forte: #ecc96a; }
.es-pasta-ponto[class*="tom-"]:not(.tom-sem) { background: var(--tom-forte); }

.es-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 18px; padding-top: 8px; }
.es-pasta-cartao { position: relative; }
/* a aba da pasta, em cima à esquerda */
.es-pasta-cartao::before {
  content: ""; position: absolute; left: 0; top: -9px; width: 42%; height: 18px; border-radius: 10px 10px 0 0;
  background: var(--tom, var(--fundo-2)); border: 1px solid color-mix(in srgb, var(--tom-forte, var(--borda-forte)) 22%, transparent); border-bottom: 0;
}
.es-pasta-abrir {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid color-mix(in srgb, var(--tom-forte, var(--borda-forte)) 22%, transparent); border-radius: 0 14px 14px 14px;
  background: var(--tom, var(--fundo-2)); color: var(--texto); font: inherit; cursor: pointer;
  transition: transform var(--t2), box-shadow var(--t2);
}
.es-pasta-abrir:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.es-pasta-abrir:focus-visible { outline: none; box-shadow: var(--foco); }
.es-pasta-capas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 118px; padding: 12px 12px 0;
  place-items: center; color: var(--tom-forte, var(--suave));
}
.es-pasta-capas img { width: 100%; height: 106px; object-fit: cover; object-position: left top; border-radius: 8px; background: var(--papel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.es-pasta-corpo { display: grid; gap: 4px; padding: 12px 14px 14px; }
.es-pasta-corpo h3 { margin: 0; font: 600 16px/1.25 var(--sans); }
.es-pasta-aviso { font-size: 12.5px; font-weight: 600; color: var(--tom-forte, var(--marca)); }
.es-pasta-cartao > .es-badge { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; font-size: 13px; box-shadow: 0 0 0 3px var(--fundo); }
.es-pasta-editar {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px;
  background: color-mix(in srgb, var(--papel) 80%, transparent); color: var(--texto); cursor: pointer; opacity: 0; transition: opacity var(--t1);
}
.es-pasta-cartao:hover .es-pasta-editar, .es-pasta-editar:focus-visible { opacity: 1; }
@media (hover: none) { .es-pasta-editar { opacity: 1; } }
.es-pasta-cartao.sem-pasta .es-pasta-abrir { border-style: dashed; background: var(--fundo); }
.es-pasta-cartao.sem-pasta::before { border-style: dashed; background: var(--fundo); }
.es-chip-pasta { display: inline-flex; align-self: flex-start; padding: 2px 8px; border-radius: 6px; font-size: 12px; color: var(--suave); background: var(--fundo-2); }
.es-campo-pasta { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); }
.es-mover-pasta { height: 34px; padding: 4px 8px; border: 1px solid var(--borda-forte); border-radius: 9px; background: var(--papel); color: var(--texto); font: 13.5px var(--sans); }
.es-tons { display: flex; flex-wrap: wrap; gap: 8px; }
.es-tom { width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent; background: var(--tom); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tom-forte) 30%, transparent); cursor: pointer; }
.es-tom.escolhido { border-color: var(--tom-forte); }
.es-lista-marcas { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px 2px; }
.es-lista-marcas .es-marcar small { margin-left: auto; color: var(--suave); }
@media (max-width: 600px) {
  .es-topo-esq { gap: 8px; }
  a.es-titulo-app { display: none; }
  .es-pasta-atual { max-width: 46vw; height: 32px; }
  .es-pasta-menu { position: fixed; left: 12px; right: 12px; top: 58px; width: auto; }
  .es-pastas { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .es-pasta-capas { height: 92px; padding: 10px 10px 0; }
  .es-pasta-capas img { height: 82px; }
  .es-pasta-corpo { padding: 10px 12px 12px; }
}
@media (max-width: 600px) {
  /* No celular a pasta e o "Nova" cabem numa linha: o logo e o tema saem (o tema muda no chat). */
  .es-topo-esq .es-marca, .es-topo-dir .tema-botao { display: none; }
}

/* ------------------------------------------------ etapas explicadas (09/10/2026) */
.es-linha-icone.clicavel, .es-bola.clicavel { cursor: pointer; transition: box-shadow var(--t1), border-color var(--t1); }
.es-linha-icone.clicavel:hover, .es-bola.clicavel:hover { border-color: var(--borda-forte); box-shadow: 0 0 0 4px var(--hover); }
.es-linha-icone.clicavel:focus-visible, .es-bola.clicavel:focus-visible { outline: none; box-shadow: var(--foco); }
.es-linha-icone[aria-expanded="true"], .es-bola[aria-expanded="true"] { border-color: var(--marca); box-shadow: var(--foco); }
.es-linha-nome { text-wrap: balance; }
.es-info {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; padding: 0; vertical-align: 1px;
  border: 1px solid var(--borda-forte); border-radius: 50%; background: var(--papel); color: var(--suave);
  font: 700 10.5px/1 var(--sans); cursor: pointer;
}
.es-info:hover, .es-info[aria-expanded="true"] { border-color: var(--marca); color: var(--marca); }
.es-etapa { position: relative; }
.es-explica {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 30; width: 270px; padding: 12px 14px;
  transform: translateX(-50%); text-align: left; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--papel); color: var(--texto); box-shadow: var(--sombra-alta); animation: es-explica-entra .15s var(--ease);
}
@keyframes es-explica-entra { from { opacity: 0; transform: translate(-50%, -4px); } }
.es-explica-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--marca); }
.es-explica-topo b { flex: 1; color: var(--texto); font-size: 14px; }
.es-explica p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.es-explica-fechar { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--suave); cursor: pointer; }
.es-explica-fechar:hover { background: var(--hover); color: var(--texto); }
.es-linha-etapa:first-child .es-explica, .es-etapa:first-child .es-explica { left: 0; transform: none; animation: none; }
.es-linha-etapa:nth-child(7) .es-explica, .es-etapa:nth-child(7) .es-explica { left: auto; right: 0; transform: none; animation: none; }
@media (max-width: 600px) {
  .es-explica, .es-linha-etapa:first-child .es-explica, .es-linha-etapa:nth-child(7) .es-explica,
  .es-etapa:first-child .es-explica, .es-etapa:nth-child(7) .es-explica {
    position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; transform: none; animation: none;
  }
  .es-palco-peca .es-etapa-nome { display: inline; }
}

/* ----------------------------------------------------------- toque (checkup de 09/10/2026) */
/* Campo com letra abaixo de 16 px faz o iPhone dar zoom na tela ao tocar. O seletor de IA do chat fica de
   fora: é um rótulo compacto, não um campo de digitar. */
@media (max-width: 600px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  textarea, select:not(#modelo) { font-size: max(16px, 1em) !important; }
}
/* Links e ícones pequenos ganham área de toque sem mudar o desenho (padding compensado na margem). */
@media (pointer: coarse) {
  .links-entrada a, .lp-link, .legal-nav a, .links-legais a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  /* Os que têm ícone ao lado do texto continuam em linha (com inline-block a seta do "Projetos ›" caía para a
     linha de baixo na lateral do celular — revisão de UI de 11/10). */
  .voltar-vista, .es-link-voltar, .lp-voltar, .link-secao { display: inline-flex; padding-block: 12px; margin-block: -12px; }
  /* O atalho da Bentevia já é absoluto (fica no canto do item): o "relative" daqui o tirava do lugar. */
  .es-info, .chip-projeto { position: relative; }
  .es-info::after, .atalho-externo::after, .chip-projeto::after { content: ""; position: absolute; inset: -10px; }
}

/* Página Bentevia: os botões dos três cartões na mesma altura, no pé de cada cartão (checkup de 09/10). */
.grade-bentevia .bloco-vista { display: flex; flex-direction: column; align-items: flex-start; }
.grade-bentevia .bloco-vista .texto-bloco { flex: 1; }
.grade-bentevia .bloco-vista > .botao { white-space: nowrap; }

/* Modelos de relatório: as listas de saída na mesma largura (começavam em pontos diferentes) e as caixas de
   marcar na cor da interface, não no azul do navegador (checkup de 09/10). */
.item-modelo select { width: 210px; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tinta); }
@media (max-width: 600px) { .item-modelo select { width: 100%; } }

/* ----------------------------------------------------------- a peça em coluna estreita (checkup de 09/10/2026) */
/* As etapas medem a COLUNA, não a tela: no tablet (e no computador com a lateral do chat aberta) a coluna da
   direita fica estreita e os nomes das sete etapas se sobrepunham. Abaixo de 700 px ficam as bolinhas (cada uma
   abre a explicação ao toque) e a linha "Agora: …" diz a etapa. Vem depois de todas as regras de @media. */
.es-palco-peca .es-coluna-painel { container: painel-peca / inline-size; }
@container painel-peca (max-width: 700px) {
  .es-palco-peca .es-etapa-nome, .es-palco-peca .es-etapa-texto { display: none; }
  .es-palco-peca .es-trilho-atual { text-align: center; margin-top: 10px; }
}

/* ================================================= revisão de UI/UX (11/10/2026) */
/* Medido tela a tela (contraste de cada texto, contorno de cada campo, tamanho de cada alvo de toque) em
   computador, tablet, celular e no tema escuro. Vem por último de propósito: só acerta o que a medição achou. */

/* 1. O contorno dos campos. Com a borda em --borda-forte o campo tinha 1,5:1 contra o fundo — no papel claro
   quase sumia, e era difícil ver onde digitar. Agora 3:1 (o mínimo para o contorno que identifica um campo),
   nos dois temas. Seletor longo de propósito: vence as regras de cada tela sem precisar mexer em todas. O
   seletor de IA da caixa de escrever fica de fora (é um chip, como o do especialista ao lado). */
:root { --borda-campo: #8f8b83; --borda-campo-forte: #5f5c56; }
:root[data-tema="escuro"] { --borda-campo: #75747c; --borda-campo-forte: #9b9aa2; }
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]),
html body select:not(#modelo), html body textarea:not(#texto) { border-color: var(--borda-campo); }
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):hover,
html body select:not(#modelo):hover, html body textarea:not(#texto):hover { border-color: var(--borda-campo-forte); }
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):focus,
html body select:not(#modelo):focus, html body textarea:not(#texto):focus { border-color: var(--marca); }
html body input:disabled, html body select:disabled, html body textarea:disabled { border-color: var(--borda-forte); }

/* 2. No tema escuro as cores de estado (verde, âmbar, crepúsculo) ficam claras — texto branco em cima delas
   dava ~2:1 (a bolinha das pastas, "No ar", a nota de desempenho, o ✓ do kit). Ali o texto é escuro. */
:root[data-tema="escuro"] :is(.es-badge, .lp-nota-mini:not(.medindo), .es-falta-lista li.ok .es-falta-marca,
  .es-etapa.feito .es-bola, .es-rodada .es-coroa, .es-acoes .botao.ok, .es-aviso.erro, .vd-bloco.atual) { color: #16161a; }
:root[data-tema="escuro"] .es-fala.pessoa .es-avatar { background: var(--ambar-suave); }
:root[data-tema="escuro"] .es-pasta-corpo .es-estado { color: color-mix(in srgb, var(--texto) 80%, transparent); }
.etiqueta.ok { color: color-mix(in srgb, var(--ok) 78%, var(--texto)); }

/* 3. Letra mínima de 11,5–12 px para o que se lê (as etiquetas tinham 10,5 px e o aviso do chat 11). */
.etiqueta { font-size: 11.5px; letter-spacing: 0; }
.pequeno { font-size: 12px; }
.aviso-dados, .principal .aviso-dados { font-size: 12px; }
.es-sistema, .es-palco-peca .es-sistema { font-size: 12px; }
.cc-trilho .nome { font-size: 11.5px; }

/* 4. Alvos de toque: botões de no mínimo 40 px (36 px os pequenos) quando o dedo é o ponteiro. */
@media (pointer: coarse) {
  .botao, .cc-botao, .botao-sso { min-height: 40px; }
  .botao.pequeno, .botao-editar, .es-regra .botao { min-height: 36px; }
  .links-rodape a, .links-rodape .tema-botao, .voltar-admin, .voltar-chat { display: inline-flex; align-items: center; min-height: 40px; }
  .topo .abrir-lateral, .topo .botao-icone { min-width: 40px; min-height: 40px; }
}
.selo { font-size: 12px; }
/* No celular a busca da lateral precisa de 16 px (senão o iPhone dá zoom): os outros itens do menu acompanham,
   para "Buscar conversas" não sair maior que "Projetos" logo abaixo. */
@media (max-width: 600px) and (pointer: coarse) { .lateral .item-menu { font-size: 16px; } }

/* "Mostrar" dentro do campo de senha (senha.js). */
.campo-senha { position: relative; display: block; }
/* Com a senha à mostra o campo vira type=text: o desenho é o mesmo do campo de senha (estilo.css). */
.campo-senha > input {
  width: 100%; padding: 11px 84px 11px 14px; font: inherit; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda-campo); border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.dialogo-conta .campo-senha { max-width: 360px; }
.mostrar-senha {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none; color: var(--suave); font: 500 13px/1 var(--sans); cursor: pointer;
}
.mostrar-senha:hover { background: var(--hover); color: var(--texto); }
.mostrar-senha:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; }

/* ------------------------------------------------ painel admin (revisão de UI de 11/10/2026) */
/* O selo "alerta" (sem acesso, sem chave, desativada…) herdava a CAIXA de aviso .alerta: virava um bloco com
   borda e 16 px de margem no meio da linha. Selo é selo. */
.etiqueta.alerta { margin: 0 0 0 6px; padding: 1px 8px; border: 0; border-radius: 999px; font-size: 11.5px; }
/* Botão que apaga, remove ou desliga se anuncia antes do toque (o vermelho só aparecia ao passar o mouse). */
.botao.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 40%, var(--borda-forte)); }
.botao.perigo:hover { background: var(--erro-fundo); }
/* Lista de pessoas: busca e "Convidar pessoa" na mesma linha; os selos embaixo do nome. */
.barra-pessoas { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.barra-pessoas .filtro-admin { flex: 1; margin: 0; }
.barra-pessoas + .cartao-admin { margin-bottom: 14px; }
.selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.selos .etiqueta { margin-left: 0; }
.explica-papel { margin: -2px 0 4px; }
/* Título dentro do cartão menor que o do cartão (o h3 sem regra saía com o tamanho do navegador). */
.cartao-admin h3 { margin: 18px 0 6px; font: 600 14px/1.3 var(--sans); color: var(--texto); }
/* Campos e listas na mesma altura (o select tinha 36 px ao lado de campos de 40). */
.painel :is(select, input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"]) { min-height: 40px; }
/* Desligado continua legível: sem opacidade no texto (dava 1,9:1). */
.grupos-agentes.apagado { opacity: 1; }
.grupos-agentes.apagado :is(h3, .caixa-marcar) { color: var(--suave); }
.painel input:disabled { opacity: 1; }
.painel input[type="checkbox"]:disabled { accent-color: var(--suave); }
/* Links do painel na cor da marca (alguns saíam no azul do navegador). */
.painel a:not(.botao):not(.linha):not(.item-lista):not(.arq-item):not(.voltar-admin):not(.ir-conversa):not(.kpi):not(.pessoa-visao) { color: var(--marca); }
.linha-quem-dispara { margin: 0; color: var(--texto); font-size: 13.5px; }
.linha-faturamento select { font: 500 13.5px var(--sans); }
@media (max-width: 700px) {
  /* Empresas no celular: nome e o número à direita (as quatro colunas cortavam o nome e quebravam o valor). */
  .tabela-admin.empresas-lista .linha { grid-template-columns: minmax(0, 1fr) auto; }
  /* As abas da empresa rolam de lado em vez de virar duas linhas. */
  .abas-empresa { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .abas-empresa::-webkit-scrollbar { display: none; }
  .registro-lista .num { text-align: left; font-size: 12px; color: var(--suave); }
  .barra-pessoas { flex-wrap: wrap; }
  .barra-pessoas .botao { flex: 1 0 auto; justify-content: center; }
}

/* ------------------------------------------------ Estúdio (revisão de UI de 11/10/2026) */
/* O aviso sobe para a camada de cima (popover) para não ficar atrás de uma janela aberta; o erro de uma janela
   fica escrito no pé dela. */
.es-aviso[popover] { inset: auto; left: 50%; bottom: 24px; margin: 0; border: 0; overflow: visible; }
.es-dialogo-erro { margin: 0 auto 0 0; align-self: center; color: var(--erro); font-size: 13.5px; line-height: 1.4; }
/* As classes de situação "alerta"/"erro" das etapas e dos selos herdavam a CAIXA de aviso da plataforma
   (fundo lilás, borda, margem de 16 px): duas etapas viravam ladrilhos e "Parou com erro" descia 16 px. */
.es-trilho .es-etapa:is(.alerta, .erro), .es-linha-etapa:is(.alerta, .erro) {
  margin: 0; padding: 0 2px; background: none; border: 0; border-radius: 0; font-size: inherit; color: inherit;
}
.es-etapa.alerta .es-bola { background: var(--ambar-suave); border-color: var(--ambar); color: var(--atencao); }
.es-palco-peca .es-etapa.alerta .es-etapa-nome { color: var(--texto); }
.es-estado.alerta { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: var(--atencao); }
.lp-chip.erro, .lp-chip.alerta { margin: 0; border: 0; }
/* Esperando uma pessoa: destacado e parado (sem anel pulsando nem tracejado correndo). */
.es-linha-etapa.espera .es-linha-icone { background: var(--ambar-suave); border-color: var(--ambar); color: var(--atencao); }
/* O que bloqueia a versão, na própria decisão. */
.es-bloqueios { margin: 8px 0 4px; padding-left: 18px; font-size: 13.5px; color: var(--texto); }
.es-bloqueios li + li { margin-top: 2px; }
.es-msg .es-link { padding: 0; border: 0; background: none; color: var(--marca); font: inherit; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Botão travado explica o porquê: o motivo fica escrito ao lado (e o mouse em cima não é mais bloqueado). */
.botao:disabled { pointer-events: auto; cursor: not-allowed; }
.lp-motivo { flex: 1 1 220px; align-self: center; font-size: 12.5px; line-height: 1.35; color: var(--suave); }
/* "IA do Estúdio" com a estrela da IA (o lápis lia como "editar") e, estreito, a palavra "IA". */
.es-ia .es-curto { display: none; }
@media (max-width: 1100px) { .es-ia .es-curto { display: inline; } }
/* (o espaço entre "Nova" e "peça" é o gap do botão: o espaço do texto some no começo do item) */
/* Números do Estúdio na letra da interface (a de máquina deixava nota e contagem com cara de painel técnico). */
.es-nota, .es-coluna h2 b, .es-criterio b, .es-rodada span, .es-amostra, .es-linha-conta { font-family: var(--sans); font-variant-numeric: tabular-nums; }
/* As cores da paleta com borda: a que é igual ao fundo não some. */
.es-paleta { border: 1px solid var(--borda-forte); }
.es-amostra i, .cc-cores i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 28%, transparent); }
.es-acervo.gerir .es-ativo { background: repeating-conic-gradient(var(--fundo-2) 0 25%, var(--papel) 0 50%) 0 0 / 16px 16px; }
html .botao.lp-marcando { border-color: var(--erro); color: var(--erro); }
html .es-ig-midia.marcando { outline-color: var(--erro); }
/* "No ar" no mesmo desenho dos outros selos (era o único cheio, mais alto que "Parou com erro"). */
html .lp-chip.publicada { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
:root[data-tema="escuro"] .lp-chip.publicada { color: var(--ok); }
/* O "i" das etapas com área de toque também no mouse (16 px era pequeno demais para mirar). */
.es-info { position: relative; }
.es-info::after { content: ""; position: absolute; inset: -6px; }
@media (max-width: 760px) {
  /* Produção no celular: o que pede ação primeiro — a esteira sai (os números estão nas colunas) e "Para
     aprovar" sobe; coluna vazia vira uma linha. */
  .es-linha { display: none; }
  .es-quadro > .es-coluna:nth-child(2) { order: -1; }
  .es-quadro > .es-coluna.vazia { padding-block: 10px; }
  .es-quadro > .es-coluna.vazia .es-vazio { margin: 4px 0 0; }
}
@media (max-width: 700px) {
  /* A peça no celular: a prévia menor e a decisão presa no pé da tela — "Aprovar para publicar" ficava mais de
     uma tela abaixo da prévia. */
  .es-palco-peca .es-celular { --altura-midia: clamp(240px, 52vh, 460px); }
  .es-palco-peca .es-celular.feed { --altura-midia: clamp(220px, 46vh, 420px); }
  .es-coluna-painel .es-barra-acoes:has(.es-acoes .botao) {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 30;
    max-height: 46vh; overflow-y: auto; box-shadow: var(--sombra-alta);
  }
  .es-coluna-painel .es-barra-acoes:has(.es-acoes .botao) .es-acoes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .es-coluna-painel .es-barra-acoes:has(.es-acoes .botao) .es-acoes .botao { flex: none; }
  .es-palco-peca:has(.es-barra-acoes .es-acoes .botao) { padding-bottom: 220px; }
}
@media (max-width: 900px) {
  /* Construtor no tablet/celular: as ferramentas quebram em linhas e a decisão (que vem primeiro) fica à vista. */
  html body .lp-barra { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  html body .lp-barra-acoes { order: 5; flex-basis: 100%; flex-wrap: wrap; overflow: visible; }
  html body .lp-motivo { flex-basis: 100%; }
}

/* ------------------------------------------------ consistência (revisão de UI de 11/10/2026) */
/* Foco do teclado visível de verdade (o halo a 22% dava 1,4:1). */
:root { --foco: 0 0 0 2px var(--fundo), 0 0 0 4px var(--marca); }
/* Uma altura de campo: 40 px (48 no login, onde é o único formulário da tela). */
:root { --altura-campo: 40px; }
html body .es-campo :is(input[type="text"], input[type="number"], input[type="datetime-local"], input[type="url"], input[type="tel"], select),
html body :is(.campo-dialogo input, .dialogo-conta input:not([type="checkbox"]), .busca-vista, .filtro-admin, .es-mover-pasta, .lp-versoes) {
  height: var(--altura-campo); padding-block: 0;
}
@media (pointer: coarse) { :root { --altura-campo: 44px; } }
/* Botões: 38 px (32 os pequenos) — eram 33, 35, 38 e 42 para o mesmo papel. */
.botao, .cc-botao { min-height: 38px; justify-content: center; }
.botao.pequeno, .botao-editar, .es-regra .botao { min-height: 32px; }
.es-acoes .botao { padding-inline: 14px; font-size: 14px; }
/* Janelas: título, botão de fechar e fundo iguais em todo lugar. */
.es-dialogo-topo h2 { font: 650 21px/1.2 var(--sans); letter-spacing: -.015em; }
.es-dialogo-topo button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: 18px; }
.es-dialogo-topo button:hover { background: var(--hover); color: var(--texto); }
dialog:not(.ampliar)::backdrop { background: rgba(20, 20, 24, .45); backdrop-filter: none; }
:root[data-tema="escuro"] dialog:not(.ampliar)::backdrop { background: rgba(0, 0, 0, .6); }
/* Abas sublinhadas na tinta (o painel usava o crepúsculo, a página da marca a tinta). */
.abas-empresa .aba-empresa[aria-selected="true"] { border-bottom-color: var(--texto); color: var(--texto); }
/* Título de página: um desenho só (o painel tinha 24/600; o chat e o Estúdio 30/650). */
.cabecalho-admin h1 { font: 650 30px/1.15 var(--sans); letter-spacing: -.02em; }
@media (max-width: 600px) { .cabecalho-admin h1 { font-size: 26px; } }
/* Cartões com o mesmo canto. */
.es-painel, .es-cartao-marca, .bloco-vista, .cartao-admin { border-radius: 16px; }
.es-painel { box-shadow: none; }
/* Caixa de escrever: o foco se vê (a borda mudava 1,1:1). */
.escrever form:focus-within { border-color: var(--borda-campo-forte); }
@media (max-width: 1100px) {
  .es-quadro > .es-coluna:nth-child(2) { order: -1; }
  .es-coluna > .es-vazio { grid-column: 1 / -1; }
}
.es-geral > .es-painel { margin-top: 0; }

/* ------------------------------------------------ acesso e chat (revisão de UI de 11/10/2026) */
/* Convite, nova senha e avisos: o nome da tela à vista (estava só na aba do navegador). */
.titulo-acesso { margin: 18px 0 4px; font: 600 19px/1.3 var(--sans); letter-spacing: -.01em; color: var(--texto); }
.titulo-acesso + .sub { margin-top: 0; }
/* Erro do login logo acima do botão, perto dos campos (vinha embaixo de "Esqueceu a senha?"). */
.cartao .erro + button[type="submit"] { margin-top: 14px; }
/* "Nova conversa" no alto, só quando a lateral não está à vista. */
.topo .nova-topo { display: none; }
.app.recolhida .topo .nova-topo { display: inline-grid; }
@media (max-width: 860px) { .topo .nova-topo { display: inline-grid; } }
/* Resposta que falhou: o texto e o "Tentar de novo". */
.falhou { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tentar-de-novo {
  padding: 5px 12px; border: 1px solid currentColor; border-radius: 8px; background: none; color: inherit;
  font: 500 13px/1.2 var(--sans); cursor: pointer;
}
.tentar-de-novo:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
/* Lista de conversas: no toque a lixeira fica à vista (era invisível mas tocável); no mouse ela flutua sobre
   o fim do título, que passa a usar a largura toda. */
.lista .item { position: relative; }
@media (hover: hover) {
  .lista .item .apagar { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); margin: 0; background: var(--fundo-2); }
  .lista .item:hover .apagar { background: color-mix(in srgb, var(--fundo-2) 70%, var(--ativo)); }
}
@media (hover: none) { .lista .item .apagar { opacity: .55; } }
/* Explicações não cortadas fora dos cartões de projeto (o corte de 2 linhas era dos cartões e pegava a
   Personalização). */
.desc-cartao { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cartao-projeto .desc-cartao { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  /* Personalização no celular: a faixa da aba escolhida ocupava ~150 px antes do conteúdo. */
  .faixa-personalizacao { padding: 12px 14px; gap: 10px; }
  .faixa-personalizacao .tile-faixa { display: none; }
  .faixa-personalizacao h2 { font-size: 17px; }
  .faixa-personalizacao p { font-size: 13.5px; }
}
/* O estado do anexo em texto: "📎 A IA lê" / "🔒 Sigiloso" (era só o emoji, explicado num título). */
.chip-anexo .trava { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 500 12px/1.2 var(--sans); color: var(--texto); background: var(--hover); }
.chip-anexo .trava:hover { transform: none; background: var(--ativo); }
.chip-anexo.sigiloso .trava { color: var(--atencao); background: var(--ambar-suave); }
.aviso-sessao {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 80; display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px 14px; width: min(620px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px;
  background: var(--papel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-alta); font-size: 14px;
}
.aviso-sessao span { flex: 1 1 260px; }
/* No celular a barra do Estúdio precisa caber numa linha: a IA fica só com a estrela (com o nome no rótulo de acesso). */
@media (max-width: 600px) { .es-ia .es-curto { display: none; } }

/* O "Aprovar" do construtor com a mesma cara do da peça (verde). */
html .lp-barra-acoes .botao.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
:root[data-tema="escuro"] .lp-barra-acoes .botao.ok { color: #16161a; }
html .lp-barra-acoes .botao.ok:disabled { background: var(--fundo-2); border-color: var(--borda-forte); color: var(--suave); }

/* Letra de 12 px também nas dicas dos campos, nos nomes das etapas e nos estados (eram 11,5). */
.es-campo small, .es-palco-peca .es-etapa-nome, .es-estado, .es-linha-sub, .cc-mini, .es-uso-versoes { font-size: 12px; }
@media (pointer: coarse) {
  /* A lixeira da lista de conversas e os links do rodapé do painel com área de toque de verdade. */
  .lista .item .apagar { width: 36px; height: 36px; }
  .links-rodape a { padding-inline: 6px; }
}

/* ================================================= segunda leva (11/10/2026, à noite) */
/* Janelas de decisão da plataforma (no lugar do confirm()/prompt() do navegador). */
.dialogo-decisao {
  width: min(440px, calc(100vw - 32px)); padding: 22px 22px 18px; border: 1px solid var(--borda); border-radius: 18px;
  background: var(--papel); color: var(--texto); box-shadow: var(--sombra-alta);
}
.dialogo-decisao h2 { margin: 0 0 8px; font: 650 19px/1.3 var(--sans); letter-spacing: -.01em; }
.dialogo-decisao .texto-decisao { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--suave); }
.dialogo-decisao h2 + .texto-decisao { margin-top: 0; }
.dialogo-decisao input { width: 100%; height: var(--altura-campo); padding: 0 12px; margin: 0 0 14px; font: inherit; color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda-campo); border-radius: 10px; }
.acoes-decisao { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.botao.perigo-cheio { color: #fff; background: var(--erro); border-color: var(--erro); }
.botao.perigo-cheio:hover { background: color-mix(in srgb, var(--erro) 88%, #000); color: #fff; }
:root[data-tema="escuro"] .botao.perigo-cheio { color: #16161a; }
/* Arrastando um arquivo sobre a caixa de escrever. */
.escrever form.arrastando { border-color: var(--marca); border-style: dashed; background: var(--marca-suave); }
/* Menu de especialistas sobre a caixa de escrever (o chip não leva mais à página Agentes). */
.escrever form .linha-ferramentas { position: relative; }
.menu-agentes {
  position: fixed; z-index: 70; width: min(360px, calc(100vw - 24px));
  overflow-y: auto; padding: 6px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--papel); box-shadow: var(--sombra-alta); animation: entrar .16s var(--ease) both;
}
.menu-agentes .grupo-menu-agentes { padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--borda); }
.menu-agentes .titulo-grupo { display: block; padding: 4px 10px 2px; font: 500 12px var(--sans); color: var(--suave); }
.item-agente {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.item-agente:hover, .item-agente:focus-visible { background: var(--hover); outline: none; }
.item-agente.ativo { background: var(--ativo); }
.item-agente .avatar-menu { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.item-agente > .icone-svg { flex: none; width: 26px; color: var(--suave); }
.item-agente .txt { display: flex; flex-direction: column; min-width: 0; }
.item-agente b { font: 500 14px/1.3 var(--sans); }
.item-agente small { font-size: 12px; color: var(--suave); }
.ver-todos-agentes {
  display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 0; border-top: 1px solid var(--borda); border-radius: 0 0 9px 9px;
  background: none; color: var(--marca); font: 500 13px var(--sans); text-align: left; cursor: pointer;
}
.ver-todos-agentes:hover { background: var(--hover); }
/* "⋯" das conversas da lista e o menu dele. */
.lista .item .acoes-conversa:hover { color: var(--texto); }
.menu-conversa {
  position: absolute; right: 4px; top: calc(100% + 2px); z-index: 35; min-width: 200px; padding: 6px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--papel); box-shadow: var(--sombra-alta);
  animation: entrar .14s var(--ease) both;
}
.menu-conversa .item-conta { gap: 10px; }
.menu-conversa .item-conta .icone-svg { color: var(--suave); }
.menu-conversa .perigo-menu, .menu-conversa .perigo-menu .icone-svg { color: var(--erro); }
.lista .item:has(.menu-conversa) .apagar { opacity: 1; }
/* "Esqueceu a senha?" sem e-mail configurado: a resposta abre no próprio login. */
.esqueci-aqui summary { display: inline; cursor: pointer; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.esqueci-aqui summary::-webkit-details-marker { display: none; }
.esqueci-aqui summary:hover { color: var(--marca); }
.esqueci-aqui p { margin: 8px auto 0; max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--texto); }
/* Contas da pessoa por caixas com o nome (painel). */
.seletor-contas .rotulo-grupo { display: block; margin: 16px 0 6px; font-size: 13px; color: var(--suave); }
.seletor-contas .lista-contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--borda); }
.seletor-contas .lista-contas.apagado .caixa-marcar { color: var(--suave); }
/* Gráfico de uso por dia: barras na proporção certa e o dia de mais uso escrito. */
.grafico-dias-caixa .grafico-dias { max-width: 100%; }
.legenda-grafico { margin: 6px 0 0; font-size: 12.5px; color: var(--suave); }
/* Logo da empresa: botão da plataforma no lugar do seletor de arquivo do navegador. */
.escondido-acessivel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.enviar-logo { position: relative; cursor: pointer; }
.enviar-logo:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
/* Ficha da pessoa: remover e apagar numa faixa própria. */
.zona-perigo { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--erro) 30%, var(--borda)); }
.zona-perigo h3 { margin: 0 0 4px; font: 600 14px/1.3 var(--sans); color: var(--erro); }
/* Seções dentro de um formulário longo do painel. */
.formulario .secao-formulario { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--borda); font: 600 14px/1.3 var(--sans); color: var(--texto); }
.formulario .secao-formulario:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Estúdio: o "Nova X" do cabeçalho da aba só no celular (no resto, o do alto já diz "Nova landing page"). */
@media (min-width: 601px) { .es-cabeca .botao.cria-duplicado { display: none; } }
/* A pergunta de cada critério da avaliação, à vista. */
.es-criterio .es-pergunta { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--suave); font-weight: 400; }
.es-criterio { align-items: start; }
/* Abas da peça no mesmo desenho das da marca (sublinhadas), em vez de pílulas cinzas. */
.es-palco-peca .es-abas-painel { gap: 2px; margin: 0 0 12px; border-bottom: 1px solid var(--borda); }
.es-palco-peca .es-abas-painel button { position: relative; padding: 9px 12px; border-radius: 10px 10px 0 0; font-size: 13.5px; }
.es-palco-peca .es-abas-painel button.ativa { background: none; color: var(--texto); font-weight: 600; }
.es-palco-peca .es-abas-painel button.ativa::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--texto); }
.es-palco-peca .es-abas-painel button:hover { color: var(--texto); }
/* Pastas no toque: o lápis de editar não cobre mais a bolinha de aprovação (a bolinha fica fora do cartão). */
@media (hover: none) { .es-pasta-cartao > .es-badge ~ .es-pasta-editar, .es-pasta-cartao:has(> .es-badge) .es-pasta-editar { top: 26px; } }
/* Cartões de marca não esticam; o selo da pasta não ocupa a largura toda. */
.es-cartao-marca { align-content: start; }
.es-chip-pasta { justify-self: start; }
/* "Voltar" com seta desenhada, sempre na própria linha, acima do título (painel, marca). */
.voltar-admin, .es-link-voltar { display: inline-flex; align-items: center; gap: 4px; font: 500 13.5px var(--sans); }
.es-peca-topo > .es-link-voltar { flex-basis: 100%; width: fit-content; }
.es-campo-pasta span { font-size: 13px; }
.es-detalhes-tecnicos { margin-top: 14px; }
.es-detalhes-tecnicos > summary { cursor: pointer; font: 600 13.5px var(--sans); color: var(--suave); }
.es-detalhes-tecnicos[open] > summary { margin-bottom: 8px; color: var(--texto); }

/* ---------------------------------------------------- ações da resposta, topo da conversa, compartilhar (11/10/2026) */
/* Como no ChatGPT e no Claude: copiar, gostei / não gostei, ler em voz alta e refazer embaixo de cada resposta;
   "Compartilhar" e "⋯" no alto da conversa. */
.acoes-resposta { display: flex; gap: 2px; margin: 4px 0 0 -8px; opacity: .55; transition: opacity .15s ease; }
.bolha:hover .acoes-resposta, .acoes-resposta:focus-within, .bolha:last-child .acoes-resposta { opacity: 1; }
.acao-resposta {
  display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0;
  border-radius: 8px; background: none; color: var(--suave); cursor: pointer;
}
.acao-resposta:hover { background: var(--hover); color: var(--texto); }
.acao-resposta.marcado { color: var(--marca); background: var(--marca-suave); }
.acao-resposta:focus-visible { box-shadow: var(--foco); outline: none; }
@media (pointer: coarse) { .acao-resposta { width: 40px; height: 40px; } .acoes-resposta { opacity: 1; } }

.acoes-topo { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.acoes-topo[hidden] { display: none; }
.botao-topo {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px solid var(--borda);
  border-radius: 999px; background: var(--papel); color: var(--texto); font: 500 13.5px var(--sans); cursor: pointer;
}
.botao-topo:hover { background: var(--hover); }
.botao-topo:focus-visible { box-shadow: var(--foco); outline: none; }
.acoes-topo .menu-conversa { top: calc(100% + 6px); right: 0; }
@media (max-width: 600px) {
  .botao-topo { width: 38px; padding: 0; justify-content: center; border: 0; background: none; }
  .botao-topo .rotulo { display: none; }
}

.toast { display: flex; align-items: center; gap: 14px; }
.toast-acao {
  flex: none; min-height: 0; padding: 5px 11px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 8px; background: none; color: inherit; font: 600 13px var(--sans); cursor: pointer;
}

.dialogo-compartilhar { width: min(560px, calc(100vw - 32px)); }
.area-compartilhar { display: grid; gap: 10px; margin: 6px 0 4px; }
.area-compartilhar p { margin: 0; }
.menu-conversa { min-width: 232px; }
.menu-conversa .item-conta { white-space: nowrap; }
.area-compartilhar .botao.primario { justify-self: start; }
.linha-link { display: flex; gap: 8px; }
.linha-link input { flex: 1; min-width: 0; font-size: 13.5px; }
.acoes-link { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .linha-link { flex-direction: column; } }

.faixa-compartilhada {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 8px auto 22px; padding: 12px 16px;
  border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); color: var(--suave); font-size: 14px;
}
.faixa-compartilhada .botao { margin-left: auto; }
.nome-de-arquivo { margin: 6px 0; font-size: 13px; color: var(--suave); }
.principal.so-leitura .escrever, .principal.so-leitura .abaixo-escrever { display: none; }
.dialogo-decisao textarea { width: 100%; min-height: 84px; resize: vertical; }

/* ---------------------------------------------------- Configurações e Ajuda (11/10/2026) */
/* Uma janela com o menu à esquerda, como no ChatGPT; no celular, o menu vira abas no alto. */
.dialogo-config {
  width: min(880px, calc(100vw - 32px)); height: min(640px, calc(100vh - 48px)); padding: 0; overflow: hidden;
  border: 1px solid var(--borda); border-radius: 18px; background: var(--papel); color: var(--texto); box-shadow: var(--sombra-alta);
}
.dialogo-config[open] { display: flex; flex-direction: column; }
.dialogo-config::backdrop { background: rgba(20, 20, 24, .38); }
.config-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--borda); }
.config-topo h2 { margin: 0; font-size: 18px; font-weight: 650; }
.config-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); flex: 1; min-height: 0; }
.config-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--borda); overflow-y: auto; }
.config-item {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--texto); font: 500 14px var(--sans); text-align: left; cursor: pointer;
}
.config-item .icone-svg { color: var(--suave); flex: none; }
.config-item:hover { background: var(--hover); }
.config-item.ativo { background: var(--ativo); }
.config-item.ativo .icone-svg { color: var(--texto); }
.config-item:focus-visible { box-shadow: var(--foco); outline: none; }
.config-painel { padding: 20px 26px 28px; overflow-y: auto; outline: none; }
.config-titulo { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.config-subtitulo { margin: 22px 0 4px; font-size: 14px; font-weight: 650; }
.config-linha { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.config-linha:last-of-type { border-bottom: 0; }
.config-textos { display: grid; gap: 3px; min-width: 0; }
.config-rotulo { font-size: 14px; font-weight: 500; }
.config-explica { font-size: 13px; line-height: 1.45; color: var(--suave); }
.config-valor { font-size: 14px; color: var(--suave); white-space: nowrap; }
.config-estado { margin: 10px 0 0; font-size: 13px; color: var(--suave); min-height: 1em; }
.config-vazio { margin: 18px 0; color: var(--suave); font-size: 14px; line-height: 1.5; }
.segmentos { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--borda); border-radius: 11px; background: var(--fundo); }
.segmento {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--suave);
  font: 500 13px var(--sans); white-space: nowrap; cursor: pointer;
}
.segmento:hover { color: var(--texto); }
.segmento.marcado { background: var(--papel); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--borda); }
.segmento:focus-visible { box-shadow: var(--foco); outline: none; }
.chave-config {
  position: relative; flex: none; width: 44px; height: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 999px;
  background: var(--borda-forte); cursor: pointer; transition: background .18s ease;
}
.chave-config::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--ease);
}
.chave-config[aria-checked="true"] { background: var(--marca); }
.chave-config[aria-checked="true"]::after { transform: translateX(18px); }
.chave-config:focus-visible { box-shadow: var(--foco); outline: none; }
.tons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.tom {
  display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--papel);
  color: var(--texto); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.tom b { font-size: 14px; font-weight: 600; }
.tom span { font-size: 12.5px; color: var(--suave); }
.tom:hover { border-color: var(--borda-forte); }
.tom.marcado { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.tom:focus-visible { box-shadow: var(--foco); outline: none; }
.lista-arquivadas { display: grid; gap: 2px; margin-top: 6px; }
.item-arquivada { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.abrir-arquivada { display: grid; gap: 2px; flex: 1; min-width: 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--texto); text-align: left; cursor: pointer; }
.abrir-arquivada:hover { background: var(--hover); }
.titulo-arquivada { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.apagar-arquivada { color: var(--suave); }
.apagar-arquivada:hover { color: var(--erro); }
.dialogo-ajuda { height: auto; max-height: calc(100vh - 48px); width: min(640px, calc(100vw - 32px)); }
.ajuda-corpo { padding: 18px 24px 24px; overflow-y: auto; }
.ajuda-passos { display: grid; gap: 10px; margin: 8px 0 22px; padding: 0; list-style: none; }
.ajuda-passos li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--marca-suave); }
.ajuda-passos b { font-size: 14px; font-weight: 600; }
.ajuda-passos span { font-size: 13.5px; color: var(--suave); line-height: 1.45; }
.atalhos { display: grid; gap: 2px; margin: 8px 0 14px; }
.atalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.teclas { display: inline-flex; gap: 4px; flex: none; }
kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid var(--borda-forte);
  border-bottom-width: 2px; border-radius: 6px; background: var(--fundo); color: var(--texto); font: 500 12px var(--sans);
}
@media (max-width: 700px) {
  .dialogo-config { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .config-corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .config-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borda); padding: 8px 10px; }
  .config-item { flex: none; white-space: nowrap; }
  .config-painel { padding: 16px 18px 28px; }
  .config-linha { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dialogo-ajuda { height: auto; }
}

/* ---------------------------------------------------- idioma (11/10/2026): pt-BR, pt-PT, inglês e espanhol */
html body .config-select {
  flex: none; min-width: 230px; max-width: 100%; min-height: var(--altura-campo, 40px); padding: 0 12px;
  border: 1px solid var(--borda-campo, var(--borda-forte)); border-radius: 10px; background: var(--papel); color: var(--texto);
  font: 500 14px var(--sans);
}
.linguas { margin: 14px 0 0; text-align: center; font-size: 12.5px; line-height: 1.8; color: var(--suave); }
.linguas a { color: var(--suave); text-decoration: none; padding: 6px 2px; }
.linguas a:hover { color: var(--marca); text-decoration: underline; }
.linguas b { color: var(--texto); font-weight: 600; }

/* Configurações › Conta (era a janela "Minha conta", 11/10/2026) e o resto da Personalização. */
.config-conta .secao-conta { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.config-conta .secao-conta:first-child { padding-top: 6px; }
.config-conta h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.config-conta .sub { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--suave); }
.config-conta label { display: block; margin: 10px 0 5px; font-size: 13px; color: var(--suave); }
.config-conta .acoes-conta { margin-top: 12px; }
.config-contexto { margin-top: 8px; }
.config-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ================================================= paridade com o ChatGPT, 2ª leva (11/10/2026) */
/* Biblioteca, Agentes em vitrine, Integrações, Agendado, "Experimentar" no início e o ditado. */

/* abas e chips das páginas */
.abas-vista { display: flex; gap: 2px; margin: 18px 0 6px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas-vista::-webkit-scrollbar { display: none; }
.aba-vista {
  flex: none; min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--suave); font: 500 14px var(--sans); white-space: nowrap; cursor: pointer;
}
.aba-vista:hover { color: var(--texto); }
.aba-vista[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--texto); }
.aba-vista:focus-visible { box-shadow: var(--foco); outline: none; border-radius: 8px 8px 0 0; }
.chips-vista { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.chip-vista {
  min-height: 34px; padding: 0 14px; border: 1px solid var(--borda); border-radius: 999px; background: var(--papel);
  color: var(--suave); font: 500 13.5px var(--sans); cursor: pointer;
}
.chip-vista:hover { color: var(--texto); border-color: var(--borda-forte); }
.chip-vista[aria-pressed="true"] { color: var(--sobre-tinta); background: var(--tinta); border-color: var(--tinta); }
.vazio-busca { margin: 28px 0; color: var(--suave); font-size: 14.5px; }
.status-vista { min-height: 1.2em; margin: 6px 0 0; font-size: 13px; color: var(--suave); }
.segmento-icone { display: inline-grid; place-items: center; min-width: 36px; padding: 0 8px; }

/* Agentes */
.grade-agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.grupo-agentes-vista h2 .papel-grupo { font-weight: 400; color: var(--suave); }
.cartao-agente {
  display: flex; flex-direction: column; gap: 10px; min-height: 168px; padding: 16px; text-align: left; font: inherit;
  color: var(--texto); background: var(--papel); border: 1px solid var(--borda); border-radius: 14px; cursor: pointer;
  transition: border-color var(--t1), box-shadow var(--t1), transform var(--t1);
}
.cartao-agente:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); transform: translateY(-1px); }
.cartao-agente:focus-visible { box-shadow: var(--foco); outline: none; }
.topo-cartao-agente { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tile-agente.fundo-tile { flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--texto); }
.nomes-agente { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nomes-agente .nome { font: 600 15px/1.3 var(--sans); }
.nomes-agente .quem { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--suave); min-width: 0; }
.nomes-agente .quem > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-mini { width: 16px; height: 16px; border-radius: 50%; margin: 0; flex: none; box-shadow: none; }
.cartao-agente .desc { font-size: 13.5px; line-height: 1.5; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.exemplo-agente {
  margin-top: auto; display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 10px;
  background: var(--fundo-2); font-size: 12.5px; line-height: 1.4; color: var(--texto);
}
.exemplo-agente .icone-svg { flex: none; margin-top: 1px; color: var(--suave); }
.exemplo-agente span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Biblioteca */
.vista-biblioteca .busca-vista { width: 200px; }
.linha-arquivo .detalhes-arquivo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.linha-arquivo .conversa-arquivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.linha-arquivo .conversa-arquivo::before { content: "· "; }
.origem-arquivo { font-size: 12.5px; color: var(--suave); }
.acoes-arquivo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.estrela-arquivo {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--suave); cursor: pointer;
}
.estrela-arquivo:hover { background: var(--hover); color: var(--texto); }
.estrela-arquivo.marcada { color: var(--ambar); }
.estrela-arquivo.marcada .icone-svg { fill: currentColor; }
.estrela-arquivo:focus-visible { box-shadow: var(--foco); outline: none; }
.grade-arquivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.cartao-biblioteca { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); overflow: hidden; transition: box-shadow var(--t1), border-color var(--t1); }
.cartao-biblioteca:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.capa-arquivo { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 0; border: 0; border-bottom: 1px solid var(--borda); background: var(--fundo-2); cursor: pointer; overflow: hidden; }
.capa-arquivo img { width: 100%; height: 100%; object-fit: cover; }
.capa-arquivo:focus-visible { box-shadow: inset var(--foco); outline: none; }
.ext-grande { font: 650 20px var(--sans); color: var(--suave); letter-spacing: .02em; }
.rodape-arquivo { display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 12px; min-width: 0; }
.textos-arquivo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.textos-arquivo .nome { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.textos-arquivo .meta { font-size: 12px; color: var(--suave); }

/* Integrações */
.secao-integracoes { margin-top: 22px; }
.secao-integracoes h2 { margin: 0 0 10px; font: 600 15px var(--sans); }
.grade-integracoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cartao-integracao { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); }
.tile-integracao { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--fundo-2); color: var(--texto); border: 1px solid var(--borda); }
.textos-integracao { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.textos-integracao p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--suave); }
.linha-nome-integracao { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.linha-nome-integracao h3 { margin: 0; font: 600 14.5px/1.3 var(--sans); }
.selo-integracao { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--suave); background: var(--fundo-2); border: 1px solid var(--borda); }
.s-conectada .selo-integracao { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--papel)); border-color: color-mix(in srgb, var(--ok) 30%, var(--papel)); }
.s-nao_conectada .tile-integracao, .s-fora_do_pacote .tile-integracao { color: var(--suave); }
.textos-integracao .detalhe-integracao { color: var(--texto); font-size: 12.5px; }
.pe-integracoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: var(--fundo-2); font-size: 13.5px; color: var(--suave); }
.pe-integracoes > span { flex: 1 1 260px; }
.corpo-integracoes > .sub-vista { margin: 14px 0; }
/* O logo oficial de cada integração (11/10/2026): num ladrilho branco nos dois temas (é o fundo para o qual as
   marcas desenham os logos coloridos); os que já são ícone de aplicativo ocupam o ladrilho inteiro. Não conectada
   fica em cinza, para o logo colorido não parecer ligado. */
.tile-integracao.com-logo { padding: 7px; background: #fff; border-color: var(--borda); }
.tile-integracao.com-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tile-integracao.com-logo.cheio { padding: 0; border: 0; overflow: hidden; background: none; }
:is(.s-nao_conectada, .s-fora_do_pacote) .tile-integracao.com-logo img { filter: grayscale(1); opacity: .5; }
.titulo-com-logo { display: flex; align-items: center; gap: 10px; }
.logo-integracao { flex: none; width: 30px; height: 30px; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid var(--borda); object-fit: contain; }
.logo-integracao.cheio { padding: 0; border: 0; }

/* Agendado */
.lista-tarefas { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cartao-tarefa { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); }
.cartao-tarefa.pausada { background: var(--fundo); }
.cartao-tarefa.pausada .titulo-tarefa, .cartao-tarefa.pausada .quando-tarefa { color: var(--suave); }
.tile-tarefa { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--marca-suave); color: var(--marca); }
.pausada .tile-tarefa { background: var(--fundo-2); color: var(--suave); }
.meio-tarefa { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.titulo-tarefa { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--texto); font: 600 15px/1.3 var(--sans); text-align: left; cursor: pointer; }
.titulo-tarefa:hover { text-decoration: underline; }
.linha-tarefa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--suave); }
.quando-tarefa { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.quando-tarefa > span { padding: 1px 8px; border-radius: 999px; background: var(--fundo-2); border: 1px solid var(--borda); font-size: 12.5px; color: var(--texto); }
.quando-tarefa > .freq { font-weight: 600; }
.agente-tarefa::before { content: "· "; }
.estado-tarefa .data { color: var(--texto); }
.estado-tarefa .rodando { color: var(--marca); font-weight: 500; }
.ok-tarefa { display: inline-flex; color: var(--ok); }
.erro-tarefa { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--erro); background: var(--erro-fundo); }
.lado-tarefa { position: relative; display: flex; align-items: center; gap: 4px; }
.menu-tarefa { top: calc(100% + 4px); right: 0; }
.modelos-tarefas { margin-top: 30px; }
.modelos-tarefas h2 { margin: 0 0 10px; font: 600 15px var(--sans); }
.grade-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cartao-modelo-tarefa { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; text-align: left; font: inherit; color: var(--texto); background: var(--papel); border: 1px dashed var(--borda-forte); border-radius: 14px; cursor: pointer; transition: border-color var(--t1), box-shadow var(--t1); }
.cartao-modelo-tarefa:hover { border-style: solid; border-color: var(--borda-forte); box-shadow: var(--sombra); }
.cartao-modelo-tarefa .nome { font: 600 14.5px/1.3 var(--sans); }
.cartao-modelo-tarefa .desc { font-size: 13px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* janela da tarefa */
.dialogo-tarefa { width: min(580px, calc(100vw - 32px)); }
.form-tarefa .campo-dialogo > span { display: block; }
.form-tarefa select, .form-tarefa input[type="time"], .form-tarefa input[type="date"], .form-tarefa input[type="number"] {
  width: 100%; margin-top: 8px; min-height: 40px; padding: 8px 12px; font: 14.5px var(--sans); color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda-campo, var(--borda-forte)); border-radius: 10px;
}
.quando-form { margin: 16px 0 0; padding: 12px 14px 14px; border: 1px solid var(--borda); border-radius: 12px; }
.quando-form legend { padding: 0 6px; font: 600 13px var(--sans); }
.segmentos-largos { display: flex; flex-wrap: wrap; width: 100%; }
.segmentos-largos .segmento { flex: 1 1 auto; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dia-semana { min-width: 44px; min-height: 36px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 999px; background: var(--papel); color: var(--suave); font: 500 13px var(--sans); cursor: pointer; }
.dia-semana.marcado { color: var(--sobre-tinta); background: var(--tinta); border-color: var(--tinta); }
.linha-hora { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha-checar { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; }
.linha-checar input { width: 18px; height: 18px; accent-color: var(--marca); }
.cc-tipo-tarefa .quando-tarefa { margin-top: 2px; }

/* início: Experimentar */
.experimentar { margin-bottom: 22px; }
.fila-experimentar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cartao-experimentar {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; text-align: left; font: inherit; color: var(--texto);
  background: var(--papel); border: 1px solid var(--borda); border-radius: 14px; cursor: pointer;
  transition: border-color var(--t1), box-shadow var(--t1);
}
.cartao-experimentar:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
.cartao-experimentar:focus-visible { box-shadow: var(--foco); outline: none; }
.icone-experimentar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--fundo-2); color: var(--suave); }
.textos-experimentar { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.quem-experimentar { font-size: 12px; font-weight: 500; color: var(--suave); }
.pedido-experimentar { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ditar */
.escrever form .linha-ferramentas button.ditar {
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--suave); background: transparent; border: 1px solid transparent; box-shadow: none;
}
.escrever form .linha-ferramentas button.ditar:hover { color: var(--texto); background: var(--hover); }
.escrever form .linha-ferramentas button.ditar.ativo { color: var(--erro); background: var(--erro-fundo); border-color: color-mix(in srgb, var(--erro) 35%, transparent); }
.escrever form .linha-ferramentas button.ditar[hidden] { display: none; }

@media (pointer: coarse) {
  .escrever form .linha-ferramentas button.ditar { flex-basis: 40px; width: 40px; height: 40px; }
  .estrela-arquivo { width: 44px; height: 44px; }
}
@media (max-width: 700px) {
  .vista-biblioteca .busca-vista, .vista-agentes .busca-vista { width: 100%; flex: 1 1 100%; }
  .vista-biblioteca .linha-arquivo .info { flex: 1 1 calc(100% - 112px); }
  .linha-arquivo .acoes-arquivo { flex: 1 1 100%; justify-content: flex-start; flex-wrap: nowrap; padding-left: 50px; }
  .linha-arquivo .acoes-arquivo a.botao span { display: none; }
  .cartao-tarefa { position: relative; }
  .cartao-tarefa .tile-tarefa { display: none; }
  .lado-tarefa { position: absolute; top: 10px; right: 8px; }
  .cartao-tarefa .titulo-tarefa { padding-right: 92px; }
  .linha-hora { grid-template-columns: 1fr; }
  .fila-experimentar { grid-template-columns: 1fr; }
  .fila-experimentar .cartao-experimentar:nth-child(n+3) { display: none; }
  .grade-arquivos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* painel: Agendado (o que cada pessoa agendou) */
.resumo-agendado { margin: 6px 0 12px; font-size: 13.5px; color: var(--suave); }
.lista-agendado { display: flex; flex-direction: column; gap: 14px; }
.bloco-agendado { padding: 14px 16px; }
.titulo-agendado { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 6px; font: 600 15px var(--sans); }
.titulo-agendado a { color: var(--texto); text-decoration: none; }
.titulo-agendado a:hover { text-decoration: underline; }
.titulo-agendado .email-pessoa { font-weight: 400; font-size: 13px; color: var(--suave); }
.linha-tarefa-admin { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); }
.lista-admin .linha-tarefa-admin:first-child, .titulo-agendado + .linha-tarefa-admin { border-top: 0; }
.linha-tarefa-admin.pausada .titulo-lista { color: var(--suave); }
.meio-tarefa-admin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.topo-tarefa-admin { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.topo-tarefa-admin .titulo-lista { font-size: 14.5px; }
.meta-tarefa-admin { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--suave); }
.meta-tarefa-admin .data-tarefa { color: var(--texto); }
.meta-tarefa-admin .nome-pessoa { color: var(--texto); font-weight: 500; }
.pedido-tarefa-admin summary { cursor: pointer; font-size: 13px; color: var(--suave); }
.pedido-tarefa-admin p { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--fundo-2); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.acoes-tarefa-admin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) {
  .linha-tarefa-admin { flex-direction: column; }
  .acoes-tarefa-admin { justify-content: flex-start; }
}

/* ================================================= painel: Visão geral, filtros e busca rápida (11/10/2026) */
.cabecalho-admin:has(.acoes-visao) { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: end; }
.cabecalho-admin:has(.acoes-visao) > h1, .cabecalho-admin:has(.acoes-visao) > p { grid-column: 1; }
.acoes-visao { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.filtro-empresa-visao { max-width: 240px; min-height: 38px; padding: 0 12px; border: 1px solid var(--borda-campo, var(--borda-forte)); border-radius: 10px; background: var(--papel); color: var(--texto); font: 14px var(--sans); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); color: var(--texto); text-decoration: none; transition: border-color var(--t1), box-shadow var(--t1); }
.painel a.kpi, .painel a.kpi:hover { color: var(--texto); text-decoration: none; }
a.kpi:hover { border-color: var(--borda-forte); box-shadow: var(--sombra); }
a.kpi:focus-visible { box-shadow: var(--foco); outline: none; }
.kpi-topo { display: flex; align-items: center; gap: 8px; }
.kpi-icone { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--marca-suave); color: var(--marca); flex: none; }
.kpi-rotulo { font-size: 13px; color: var(--suave); }
.kpi-valor { font: 650 28px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--suave); }
.kpi-barra { flex: 1 1 80px; min-width: 80px; height: 6px; border-radius: 999px; background: var(--fundo-2); overflow: hidden; }
.kpi-barra i { display: block; height: 100%; border-radius: inherit; background: var(--marca); }
.kpi-barra.alto i { background: var(--atencao); }
.grade-visao { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.coluna-visao { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bloco-visao { margin: 0; }
.bloco-empresas-visao, .bloco-recente { margin-top: 14px; }
.titulo-bloco-visao { margin: 0 0 10px; font: 600 15px var(--sans); }
.alerta-visao { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); }
.alerta-visao:first-of-type { border-top: 0; }
.alerta-icone { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--fundo-2); color: var(--suave); }
.alerta-visao.n-erro .alerta-icone { background: var(--erro-fundo); color: var(--erro); }
.alerta-visao.n-atencao .alerta-icone { background: var(--ambar-suave); color: var(--atencao); }
.alerta-texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.tudo-certo { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--ok); font-size: 14px; }
.barra-visao { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-trilho { height: 8px; border-radius: 999px; background: var(--fundo-2); overflow: hidden; }
.barra-trilho i { display: block; height: 100%; border-radius: inherit; background: var(--marca); opacity: .8; }
.barra-num { font-variant-numeric: tabular-nums; color: var(--suave); min-width: 2ch; text-align: right; }
.pessoa-visao { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: 10px; color: var(--texto); text-decoration: none; }
.pessoa-visao:hover { background: var(--hover); }
.pessoa-visao .nomes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pessoa-visao .nome-pessoa { font-size: 14px; font-weight: 500; }
.pessoa-visao .email-pessoa { font-size: 12.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa-visao .num { font-size: 13px; color: var(--suave); white-space: nowrap; }
.ver-tudo { margin-top: 10px; }
.chips-admin { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.chip-admin { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--papel); color: var(--suave); font: 500 13px var(--sans); cursor: pointer; }
.chip-admin:hover { color: var(--texto); border-color: var(--borda-forte); }
.chip-admin[aria-pressed="true"] { color: var(--sobre-tinta); background: var(--tinta); border-color: var(--tinta); }
.chip-num { font-variant-numeric: tabular-nums; opacity: .75; }
.tabela-admin .vazio-filtro { margin: 0; padding: 16px 12px; }
.busca-admin { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; margin-right: 8px; border: 1px solid var(--borda); border-radius: 10px; background: var(--papel); color: var(--suave); font: 13px var(--sans); cursor: pointer; }
.busca-admin:hover { color: var(--texto); border-color: var(--borda-forte); }
.busca-admin kbd { padding: 1px 6px; border: 1px solid var(--borda); border-radius: 6px; font: 11.5px var(--sans); color: var(--suave); background: var(--fundo); }
.dialogo-busca-admin { width: min(560px, calc(100vw - 32px)); padding: 0; margin-top: 12vh; border: 1px solid var(--borda); border-radius: 16px; background: var(--papel); color: var(--texto); box-shadow: var(--sombra-alta); overflow: hidden; }
.campo-busca-admin { width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--borda); background: transparent; color: var(--texto); font: 16px var(--sans); }
.campo-busca-admin:focus { outline: none; }
.resultados-busca-admin { max-height: 50vh; overflow-y: auto; padding: 6px; }
.resultados-busca-admin .vazio { padding: 14px 12px; margin: 0; color: var(--suave); font-size: 14px; }
.resultado-busca-admin { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--texto); text-decoration: none; font-size: 14px; }
.resultado-busca-admin.marcado, .resultado-busca-admin:hover { background: var(--hover); }
.tipo-resultado { flex: none; min-width: 64px; font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.nome-resultado { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-resultado { margin-left: auto; font-size: 12.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .grade-visao { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cabecalho-admin:has(.acoes-visao) { grid-template-columns: 1fr; }
  .acoes-visao { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 10px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-valor { font-size: 24px; }
  .busca-admin .rotulo, .busca-admin kbd { display: none; }
  .alerta-visao { flex-wrap: wrap; }
  .alerta-texto { flex: 1 1 calc(100% - 38px); }
  .alerta-visao .botao { margin-left: 38px; }
}

/* ------------------------------------------- publicar pelo cartão da peça no chat (12/10/2026) */
/* O painel abre DENTRO do cartão (nada de janela do navegador): a arte, a conta, a legenda, quando e o código de
   confirmação, com os tokens de sempre. No celular, uma coluna e os botões na largura toda. */
.cc-pub { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--fundo); border: 1px solid var(--borda); }
.cc-pub.entra { animation: entrar .2s var(--ease) both; }
.cc-pub-conteudo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cc-pub-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-pub-topo h5 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.3 var(--sans); }
.cc-pub-fechar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.cc-pub-fechar:hover { background: var(--hover); color: var(--texto); }
.cc-pub-fechar:focus-visible { outline: none; box-shadow: var(--foco); }
.cc-pub-carregando { margin: 0; color: var(--suave); font-size: 14px; }
.cc-pub-grade { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: start; }
.cc-pub-midia { position: relative; display: grid; place-items: center; min-height: 120px; border-radius: 12px; overflow: hidden; color: var(--suave); background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--borda); cursor: zoom-in; }
.cc-pub-midia img, .cc-pub-midia video { display: block; width: 100%; height: auto; }
.cc-pub-midia:focus-visible { outline: none; box-shadow: var(--foco); }
.cc-pub-dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; line-height: 1.45; }
.cc-pub-dados dt { color: var(--suave); }
.cc-pub-dados dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.cc-pub-dados .cc-dica { margin-top: 6px; }
.cc-pub-legenda { max-height: 9.5em; overflow-y: auto; padding: 8px 10px; border-radius: 10px; white-space: pre-wrap; background: var(--papel); border: 1px solid var(--borda); }
.cc-pub-legenda:focus-visible { outline: none; box-shadow: var(--foco); }
.cc-pub-quando { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cc-pub-quando legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font: 600 13px var(--sans); }
.cc-pub-quando .cc-dica { flex-basis: 100%; margin: 0; }
.cc-pub-opcao { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.cc-pub-opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--tinta); }
.cc-pub .cc-pub-data { min-height: 40px; padding: 6px 10px; border: 1px solid var(--borda-campo); border-radius: 10px; background: var(--papel); color: var(--texto); font: 15px var(--sans); color-scheme: light; }
:root[data-tema="escuro"] .cc-pub .cc-pub-data { color-scheme: dark; }
.cc-pub .cc-pub-data:focus { outline: none; border-color: var(--marca); box-shadow: var(--foco); }
.cc-pub .cc-pub-data.desligado { opacity: .55; }
.cc-pub-codigo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.cc-pub-codigo b { align-self: flex-start; padding: 8px 12px; border-radius: 10px; font: 600 18px/1 var(--mono); letter-spacing: .18em; color: var(--texto); background: var(--fundo-2); }
.cc-pub .cc-acoes { margin-top: 0; }
.cc-pub .cc-erro { margin: 0; }
.cc-pub .cc-alerta { margin: 0; }
.cc-pub .cc-botao:disabled { opacity: .55; cursor: not-allowed; }
.cc-info > .cc-acoes[hidden] { display: none; }
@media (max-width: 600px) {
  .cc-pub { padding: 12px; }
  .cc-pub-grade { grid-template-columns: 1fr; }
  .cc-pub-midia { max-width: 160px; } /* a capa do cartão já está logo acima: aqui, só a conferência */
  .cc-pub-dados { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cc-pub-dados dd + dt { margin-top: 10px; }
  .cc-pub .cc-pub-data { flex: 1 1 100%; width: 100%; font-size: 16px; }
  .cc-pub .cc-acoes .cc-botao { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------ fuso horário por pessoa (12/10/2026) */
/* Configurações › Geral › Fuso horário: a lista (agrupada, com a hora de agora em cada fuso) no padrão dos outros
   campos, a hora que vale embaixo e o "usar o deste aparelho" discreto. E o "(hora de Lisboa)" junto de uma hora. */
.config-linha-fuso { align-items: flex-start; }
.config-fuso { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; width: 320px; max-width: 100%; }
/* Os seletores de Geral (idioma e fuso) com a mesma largura: as bordas alinham de cima a baixo. */
html body .config-painel .config-select { width: 320px; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.config-fuso-iana { font: 12px var(--mono); }
.cc-pub:focus { outline: none; }
.config-fuso-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 12px; font-size: 12.5px; line-height: 1.5; color: var(--suave); }
.config-fuso-agora { font-variant-numeric: tabular-nums; }
.link-discreto {
  min-height: 0; padding: 0; border: 0; background: none; color: var(--suave); font: 500 12.5px var(--sans);
  text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px; cursor: pointer;
}
.link-discreto:hover { color: var(--texto); text-decoration-color: currentColor; }
.link-discreto:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--foco); }
.rotulo-fuso { color: var(--suave); white-space: nowrap; }
.form-tarefa .seletor-fuso { text-overflow: ellipsis; }
@media (max-width: 700px) {
  .config-fuso { align-items: stretch; width: 100%; flex-basis: auto; }
  html body .config-painel .config-select { width: 100%; }
  .config-fuso-rodape { justify-content: flex-start; }
}

/* ============================================================== camada de arte (13/10/2026)
   A moldura continua sóbria (preto, branco e cinza); a cor entra pelo CONTEÚDO: o rosto gerado de cada especialista,
   as capas do "Comece por aqui", as ilustrações das apresentações e dos estados vazios, e um único momento de cor na
   moldura — a faixa de novidade (e o anel da pílula "Novo"). Estudo das telas da ElevenLabs. */
:root {
  --arte-fundo-a: #f1eefc; --arte-fundo-b: #fdf4e8; --arte-nevoa: #ffffff; --arte-cartao: #ffffff;
  --arte-borda: rgba(27, 27, 31, .08); --arte-linha: #e4e1f1; --arte-linha-forte: #c3bde3; --arte-sombra: rgba(52, 70, 181, .12);
  --arte-degrade: linear-gradient(90deg, #3446b5, #8a3ffc 45%, #e05fa0 75%, #f2a93b);
}
:root[data-tema="escuro"] {
  --arte-fundo-a: #26243a; --arte-fundo-b: #2e2732; --arte-nevoa: rgba(138, 124, 240, .35); --arte-cartao: #34343c;
  --arte-borda: rgba(255, 255, 255, .07); --arte-linha: #46434f; --arte-linha-forte: #615d78; --arte-sombra: rgba(0, 0, 0, .35);
}
/* o rosto de cada especialista */
.luz-agente { display: inline-grid; place-items: center; border-radius: 50%; flex: none;
  box-shadow: 0 8px 18px -10px var(--luz, #3446b5); }
.luz-agente svg { display: block; border-radius: 50%; }
.tile-agente.com-luz, .icone-experimentar.com-luz, .icone-agente.com-luz { background: none !important; border: 0; padding: 0;
  width: auto; height: auto; border-radius: 50%; }
.cartao-agente:hover .luz-agente, .opcao-especialidade:hover .luz-agente, .cartao-experimentar:hover .luz-agente {
  transform: scale(1.06); transition: transform var(--t2) var(--ease); }
/* "Comece por aqui" */
.comece-aqui { margin-bottom: 26px; }
.fila-capas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; }
.cartao-capa { scroll-snap-align: start; display: flex; flex-direction: column; text-align: left; background: none; border: 0;
  padding: 0; cursor: pointer; color: var(--texto); font: inherit; }
.moldura-capa { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #1b1f4a;
  box-shadow: var(--sombra); outline: 1px solid var(--arte-borda); outline-offset: -1px; }
.moldura-capa img.capa { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.cartao-capa:hover img.capa, .cartao-capa:focus-visible img.capa { transform: scale(1.045); }
.cartao-capa:focus-visible { outline: none; }
.cartao-capa:focus-visible .moldura-capa { box-shadow: var(--foco); }
.titulo-capa { margin-top: 9px; font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.sub-capa { margin-top: 2px; font-size: 12.5px; color: var(--suave); line-height: 1.35; }
/* a faixa de novidade: o único momento de cor da moldura */
.faixa-novidade { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-height: 38px;
  padding: 7px 46px; color: #fff; font-size: 13.5px;
  background: radial-gradient(55% 160% at 10% 0%, rgba(242, 169, 59, .8), transparent 60%),
              radial-gradient(45% 170% at 90% 100%, rgba(224, 95, 160, .7), transparent 60%),
              linear-gradient(90deg, #283a9c, #5b3fd6 45%, #8a3ffc 72%, #3446b5); }
.faixa-novidade .texto-curto { display: none; }
.faixa-novidade .texto-novidade { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.selo-novidade { font-size: 11px; font-weight: 650; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); }
.acao-novidade { background: none; border: 0; padding: 0; color: #fff; font: inherit; font-weight: 650; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.fechar-novidade { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: none; color: #fff; cursor: pointer; }
.fechar-novidade:hover { background: rgba(255, 255, 255, .15); }
/* a pílula "Novo" (anel no degradê da marca) e o atalho da busca */
.item-menu .pilula-novo { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 650; line-height: 1; padding: 3px 7px;
  border-radius: 999px; color: var(--texto); border: 1px solid transparent;
  background: linear-gradient(var(--papel), var(--papel)) padding-box, var(--arte-degrade) border-box; }
.campo-busca-menu .atalho-chip { margin-left: auto; flex: none; font: 500 11.5px var(--sans, inherit); color: var(--suave);
  border: 1px solid var(--borda-forte); border-radius: 6px; padding: 2px 6px; background: var(--papel); }
@media (hover: none) { .campo-busca-menu .atalho-chip { display: none; } }
/* a apresentação ilustrada (1ª visita) */
.apresentacao-secao { border: 0; padding: 0; border-radius: 20px; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  overflow: auto; background: var(--papel); color: var(--texto); box-shadow: var(--sombra-alta); }
.apresentacao-secao::backdrop { background: rgba(18, 18, 26, .45); }
.tarja-apresentacao { min-height: 132px; display: flex; align-items: flex-end; padding: 22px 26px; }
.tarja-apresentacao h2 { position: relative; z-index: 1; margin: 0; color: #fff; font-size: 24px; font-weight: 650; letter-spacing: -.015em;
  line-height: 1.2; text-shadow: 0 1px 12px rgba(10, 10, 30, .25); }
.corpo-apresentacao { padding: 22px 26px 24px; }
.itens-apresentacao { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.itens-apresentacao li { display: flex; gap: 12px; align-items: flex-start; }
.ico-apresentacao { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: var(--marca-suave); color: var(--marca); }
.texto-apresentacao { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.texto-apresentacao strong { font-size: 14.5px; font-weight: 600; }
.texto-apresentacao span { font-size: 13.5px; color: var(--suave); line-height: 1.4; }
.corpo-apresentacao .botao.largo { width: 100%; justify-content: center; min-height: 44px; }
/* estados vazios ilustrados */
/* o campo de cor: quatro tons da família misturados, com grão — a mesma linguagem das esferas dos especialistas */
.campo-cor { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 120% at 12% 18%, var(--c1), transparent 68%),
              radial-gradient(55% 110% at 88% 22%, var(--c3), transparent 66%),
              radial-gradient(75% 120% at 55% 115%, var(--c2), transparent 70%),
              linear-gradient(120deg, var(--c4), var(--c2)); }
.campo-cor::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.campo-cor > * { position: relative; z-index: 1; }
.esfera-vazia { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%; color: #fff;
  box-shadow: 0 14px 30px -16px var(--c2); }
.vazio-vista .esfera-vazia + p { margin-top: 0; }
/* a venda cruzada depois de uma resposta longa */
.venda-cruzada { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 44px 10px 10px;
  max-width: 640px; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); box-shadow: var(--sombra); }
.capa-venda { flex: none; width: 76px; height: 48px; object-fit: cover; border-radius: 9px; }
.texto-venda { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.texto-venda strong { font-size: 14px; font-weight: 600; }
.texto-venda span { font-size: 12.5px; color: var(--suave); }
.fechar-venda { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px;
  border: 0; border-radius: 8px; background: none; color: var(--suave); cursor: pointer; }
.fechar-venda:hover { background: var(--hover); }
@media (max-width: 560px) {
  .faixa-novidade .texto-longo { display: none; }
  .faixa-novidade .texto-curto { display: inline; }
  .venda-cruzada { flex-wrap: wrap; }
  .venda-cruzada .botao { width: 100%; justify-content: center; }
  .faixa-novidade { font-size: 12.5px; padding: 7px 40px 7px 14px; }
  .faixa-novidade .texto-novidade { flex-wrap: nowrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .moldura-capa img.capa, .luz-agente { transition: none !important; transform: none !important; } }

/* ============================================================== camada de arte no Estúdio (13/10/2026)
   Os pedidos de peça, vídeo e landing page abrem com um cabeçalho ilustrado, passos numerados e o kit da marca à vista;
   os formatos viram prévias e cada emoção ganha a sua cor; no construtor, cada papel tem um rosto e a prévia espera
   com uma ilustração em vez do branco. */
.es-dialogo.com-arte { width: min(880px, calc(100vw - 32px)); }
html body .es-dialogo-topo.com-arte { position: relative; display: block; min-height: 150px; padding: 26px 64px 24px 30px;
  border-bottom: 0; color: #fff; }
.es-dialogo-topo.com-arte .es-dialogo-textos { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100px; }
html body .es-dialogo-topo.com-arte h2 { margin: 0; color: #fff; font: 650 28px/1.15 var(--sans, inherit); letter-spacing: -.02em;
  text-shadow: 0 1px 14px rgba(10, 10, 30, .22); }
.es-dialogo-sub { margin: 8px 0 0; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.5; max-width: 58ch; }
html body .es-dialogo-topo.com-arte > button { position: absolute; z-index: 2; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 9px;
  color: #fff; background: rgba(255, 255, 255, .14); }
html body .es-dialogo-topo.com-arte > button:hover { background: rgba(255, 255, 255, .24); }
.es-dialogo.com-arte .es-dialogo-corpo { padding-top: 10px; }
@media (max-width: 680px) { html body .es-dialogo-topo.com-arte { min-height: 120px; padding: 20px 54px 18px 20px; } html body .es-dialogo-topo.com-arte h2 { font-size: 23px; } }
/* os passos: editoriais (número em algarismos, rótulo em caixa alta, fio) */
.es-passo { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; }
.es-passo:first-child { margin-top: 6px; }
.es-passo-num { flex: none; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--suave); letter-spacing: .04em; }
.es-passo-titulo { flex: none; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.es-passo::after { content: ""; flex: 1; height: 1px; background: var(--borda); align-self: center; }
.es-kit-marca { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--fundo); }
.es-kit-marca img { height: 22px; max-width: 96px; object-fit: contain; }
.es-kit-cores { display: flex; }
.es-kit-cores i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--papel); margin-left: -4px; box-shadow: 0 0 0 1px var(--borda); }
.es-kit-cores i:first-child { margin-left: 0; }
.es-kit-rotulo { margin-left: auto; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; }
.es-pe-nota { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); }
.es-pe-nota::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--ambar); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6Z M19 16l.6 1.6 1.4.4-1.4.5L19 20l-.6-1.5L17 18l1.4-.4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6Z M19 16l.6 1.6 1.4.4-1.4.5L19 20l-.6-1.5L17 18l1.4-.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }   /* a estrela do Canopo (era um caractere que se corrompeu) */
@media (max-width: 680px) { .es-pe-nota { display: none; } }
/* as prévias dos formatos */
.es-formatos .es-formato-op i, .vd-formatos .vd-formato-opcao i { position: relative; border: 0 !important; border-radius: 4px; overflow: hidden;
  background: radial-gradient(80% 90% at 20% 15%, #b9a8f7, transparent 70%), radial-gradient(70% 90% at 90% 100%, #3fb0c9, transparent 70%),
              linear-gradient(140deg, #6a5ce0, #283a9c); box-shadow: 0 4px 10px -6px rgba(40, 58, 156, .6); }
.es-formatos .es-formato-op[data-tipo="carrossel"] i { overflow: visible;
  box-shadow: 4px 0 0 -1px #d6ccfb, 8px 0 0 -2px #b9a8f7, 0 4px 10px -6px rgba(40, 58, 156, .6); }
.es-formatos .es-formato-op[data-tipo="video"] i::after, .vd-formatos .vd-formato-opcao i::after { content: ""; position: absolute; top: 50%; left: 50%;
  right: auto; width: 0; height: 0; aspect-ratio: auto; border-radius: 0; background: none; transform: translate(-35%, -50%);
  border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(255, 255, 255, .95); }
html body .es-formatos .es-formato-op.ativo, html body .vd-formatos .vd-formato-opcao:has(input:checked), html body .vd-emocoes .vd-emocao-opcao:has(input:checked) {
  border-color: var(--texto); background: var(--papel); box-shadow: 0 0 0 1px var(--texto); }
/* cada emoção com a sua cor (o desenho do ritmo, em branco, sobre a esfera) */
html body .vd-emocoes .vd-emocao-opcao i { width: 30px; height: 30px; border-radius: 50%; background-color: transparent;
  background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: 18px 18px, cover;
  box-shadow: 0 6px 14px -8px rgba(27, 27, 31, .5); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="confianca"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 14h14M3 10h14M3 6h14'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #bfe3ff, #4f7be8 55%, #283a9c); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="calma"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2 12c3-4 5-4 8 0s5 4 8 0'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #d4fff0, #3fc0a2 55%, #0f6e5e); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="inspiracao"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2 17c6 0 10-4 13-12M12 5h3v3'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #ffe7b8, #f2a93b 55%, #c2417a); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="energia"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12l3-5 3 7 3-9 3 8 2-3 2 2'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #ffd6a5, #f08a3c 55%, #c2185b); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="inovacao"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M10 2l7 4v8l-7 4-7-4V6zM10 10l7-4M10 10v8M10 10L3 6'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #d6f3ff, #8a7cf0 55%, #3a2aa8); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="urgencia"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #ffd0c4, #e0523f 55%, #8a1f2a); }
html body .vd-emocoes .vd-emocao-opcao[data-emocao="elegancia"] i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 16C8 16 8 4 12 4s4 6 4 6'/%3E%3C/svg%3E"), radial-gradient(circle at 35% 30%, #f0e6ff, #9b7fb8 55%, #2b2340); }
/* o construtor: um rosto para cada papel e a espera ilustrada da prévia */
.lp-quem.com-luz { gap: 8px; align-items: center; }
.lp-quem .luz-agente { box-shadow: 0 4px 10px -6px var(--luz, #3446b5); }
.lp-espera { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 500; }
.lp-espera p { margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(10, 10, 30, .18); backdrop-filter: blur(6px); }
.lp-sugestoes .lp-sugestao::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--ambar); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6Z M19 16l.6 1.6 1.4.4-1.4.5L19 20l-.6-1.5L17 18l1.4-.4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6Z M19 16l.6 1.6 1.4.4-1.4.5L19 20l-.6-1.5L17 18l1.4-.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ============================================================== botões, controles e o painel (13/10/2026, nível profissional)
   Um jogo só de botões em todas as telas (chat, Estúdio, painel): mesma altura, cantos, peso e foco. O primário é a
   tinta, com um brilho fino no alto; "Aprovar" (antes verde) é o primário. A chave de tema vira um botão de ícone. */
:root { --ic-lua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E"); --ic-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4'/%3E%3C/svg%3E"); }
html body .botao { min-height: 36px; padding: 0 14px; gap: 7px; justify-content: center; border-radius: 10px;
  font: 600 13.5px/1 var(--sans, inherit); letter-spacing: -.005em; color: var(--texto); background: var(--papel);
  border: 1px solid var(--borda-forte); box-shadow: 0 1px 1px rgba(27, 27, 31, .04); text-decoration: none; cursor: pointer;
  transition: background var(--t1), border-color var(--t1), box-shadow var(--t1), transform .08s; }
html body .botao:hover:not(:disabled) { background: var(--hover); color: var(--texto);
  border-color: color-mix(in srgb, var(--texto) 28%, var(--borda-forte)); }
html body .botao:active:not(:disabled) { transform: translateY(.5px); }
html body .botao:focus-visible { outline: none; box-shadow: var(--foco); }
html body .botao:disabled, html body .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* :not(#_n) sobe a prioridade acima das regras antigas de cada tela (o "Aprovar" verde do construtor e da peça) */
html body .botao.primario:not(#_n), html body .botao.ok:not(#_n) { color: var(--sobre-tinta); background: var(--tinta); border-color: var(--tinta);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .18); }
html body .botao.primario:not(#_n):hover:not(:disabled), html body .botao.ok:not(#_n):hover:not(:disabled) { color: var(--sobre-tinta);
  background: var(--tinta-forte); border-color: var(--tinta-forte); }
html body .botao.pequeno { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
html body .botao.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, var(--borda-forte)); }
html body .botao.perigo:hover:not(:disabled) { color: var(--erro); background: var(--erro-fundo); border-color: var(--erro); }
html body .botao svg { flex: none; }
@media (pointer: coarse) { html body .botao { min-height: 42px; } html body .botao.pequeno { min-height: 36px; } }
/* a chave de tema vira botão de ícone (lua no claro, sol no escuro) */
html body .es-topo .tema-botao, html body .lateral-rodape .tema-botao { width: 32px; height: 32px; padding: 0; gap: 0; justify-content: center;
  border: 1px solid var(--borda); border-radius: 9px; background: var(--papel); color: var(--texto); font-size: 0; flex: none; }
html body .es-topo .tema-botao:hover, html body .lateral-rodape .tema-botao:hover { background: var(--hover); color: var(--texto); }
html body .es-topo .tema-botao > *, html body .lateral-rodape .tema-botao > * { display: none; }
html body .es-topo .tema-botao::before, html body .lateral-rodape .tema-botao::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ic-lua) center / contain no-repeat; mask: var(--ic-lua) center / contain no-repeat; }
html body .es-topo .tema-botao[aria-checked="true"]::before, html body .lateral-rodape .tema-botao[aria-checked="true"]::before {
  -webkit-mask-image: var(--ic-sol); mask-image: var(--ic-sol); }
/* a barra do Estúdio */
html body .es-topo .es-voltar { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border: 1px solid var(--borda);
  border-radius: 9px; background: var(--papel); color: var(--texto); font: 500 13px var(--sans, inherit); text-decoration: none; }
html body .es-topo .es-voltar:hover { background: var(--hover); }
html body .es-topo .es-titulo-app { padding-left: 12px; border-left: 1px solid var(--borda); color: var(--texto); font: 650 15px var(--sans, inherit);
  letter-spacing: -.01em; text-decoration: none; }
html body .es-topo .es-pasta-atual { height: 32px; padding: 0 10px; gap: 7px; border: 1px solid var(--borda); border-radius: 999px; background: var(--papel);
  color: var(--texto); font: 500 13px var(--sans, inherit); }
html body .es-topo .es-pasta-atual:hover { background: var(--hover); }
html body .es-topo .es-ia { height: 32px; padding: 0 11px; gap: 6px; border: 1px solid var(--borda); border-radius: 9px; background: var(--papel);
  color: var(--texto); font: 500 13px var(--sans, inherit); }
html body .es-topo .es-ia:hover { background: var(--hover); }
html body .es-topo .es-nova { min-height: 34px; }
/* as abas: controle segmentado; o marcador que já deslizava vira o segmento claro */
html body .es-abas { padding: 3px; gap: 2px; border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-2); }
html body .es-abas a { padding: 6px 13px; border-radius: 9px; color: var(--suave); font: 500 13.5px var(--sans, inherit); }
html body .es-abas a.ativa { color: var(--texto); }
html body .es-abas .es-abas-marcador { top: 3px; bottom: 3px; border-radius: 9px; background: var(--papel);
  box-shadow: 0 1px 2px rgba(27, 27, 31, .1), 0 0 0 1px var(--borda); }
/* o painel: tudo na mesma coluna (os números e os blocos de baixo estavam 66 px à esquerda do resto) */
.painel > .kpis, .painel > .bloco-visao { margin-left: auto; margin-right: auto; }
.cabecalho-admin.tarja-painel { padding: 26px 28px; border-radius: 18px; color: #fff; margin-bottom: 4px; }
.cabecalho-admin.tarja-painel h1 { color: #fff; text-shadow: 0 1px 14px rgba(10, 10, 30, .2); }
.cabecalho-admin.tarja-painel p { color: rgba(255, 255, 255, .85); }
.tarja-painel .filtro-empresa-visao { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); }
.tarja-painel .filtro-empresa-visao option { color: var(--texto); background: var(--papel); }
html body .tarja-painel .botao.primario:not(#_n) { color: #16161a; background: #fff; border-color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
html body .tarja-painel .botao.primario:not(#_n):hover { color: #16161a; background: #f1f0ec; border-color: #f1f0ec; }
.kpi-icone.campo-cor { border-radius: 50%; color: #fff; background-color: transparent; }
.kpi-icone.campo-cor::after { border-radius: 50%; }
.avatar.avatar-cor { color: #fff; font-weight: 650; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
/* o rodapé da lateral do painel: a chave de tema e os links numa linha só, alinhados */
.lateral-rodape .links-rodape { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ------------------------------------------------ checkup de design (13/10/2026) */
/* "Comece por aqui": a borda esmaece do lado em que a fila continua */
.fila-capas.tem-mais { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); }
.fila-capas.tem-antes { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
  mask-image: linear-gradient(90deg, transparent, #000 56px); }
.fila-capas.tem-antes.tem-mais { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 80px), transparent); }

/* Telas de entrada. O código das duas etapas: largo, grande e espaçado, como se lê num aplicativo autenticador
   (saía um campo de texto cru, sem contorno). Vale para a entrada, o convite e a confirmação do painel. */
html body .cartao input#codigo { display: block; width: 100%; height: 60px; margin: 0; padding: 0 12px 0 calc(12px + .45em);
  font: 600 28px/1 ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .45em;
  text-align: center; font-variant-numeric: tabular-nums; color: var(--texto); background: var(--fundo);
  border: 1px solid var(--borda-campo, var(--borda-forte)); border-radius: 12px; }
html body .cartao input#codigo:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.cartao label[for="codigo"] { margin-top: 18px; }
/* Só na marca do Canopo: a tela se divide em formulário e um campo de cor com a frase do produto (o servidor
   põe a classe e o painel — plataforma._vitrine_entrada). As outras marcas seguem com o cartão. */
.entrada.com-vitrine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); place-items: stretch;
  padding: 12px; min-height: 100vh; min-height: 100dvh; }
.entrada.com-vitrine > .cartao { place-self: center; max-width: 384px; padding: 32px 4px; background: transparent;
  border: 0; box-shadow: none; }
.entrada.com-vitrine > .cartao h1 { margin-bottom: 14px !important; }
.vitrine-entrada { --c1: #e05fa0; --c2: #7a2f9e; --c3: #f2a93b; --c4: #3446b5; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 14px; padding: clamp(32px, 4.5vw, 64px); border-radius: 20px; color: #fff;
  min-height: calc(100dvh - 24px); animation: entrar .6s var(--ease, ease) both; }
.vitrine-frase { margin: 0; max-width: 14ch; font: 600 clamp(34px, 3.6vw, 56px)/1.03 var(--sans); letter-spacing: -.035em;
  text-wrap: balance; }
.vitrine-sub { margin: 0; max-width: 40ch; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
@media (max-width: 900px) {
  .entrada.com-vitrine { display: grid; grid-template-columns: 1fr; place-items: center; padding: 24px; }
  .entrada.com-vitrine > .cartao { padding: 40px 36px; background: var(--papel); border: 1px solid var(--borda);
    box-shadow: var(--sombra); }
  .vitrine-entrada { display: none; }
}
@media (max-width: 480px) { .entrada.com-vitrine > .cartao { padding: 32px 22px; } }
/* Registro do painel: um diário — título por dia, hora, ícone do tipo, ação e pessoa numa coluna, o resumo em até
   duas linhas. Antes eram cartões altos e espaçados, difíceis de varrer. */
html body .tabela-admin.registro-lista { gap: 0; }
html body .tabela-admin.registro-lista .linha { grid-template-columns: 52px 30px minmax(180px, 1fr) minmax(0, 2.4fr);
  align-items: center; gap: 4px 12px; min-height: 0; padding: 9px 14px; border-radius: 0; }
html body .tabela-admin.registro-lista .linha:hover { background: var(--hover); }
.registro-lista .num { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--suave); }
.icone-registro { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--suave);
  background: color-mix(in srgb, var(--texto) 5%, transparent); }
.registro-lista .nomes { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.registro-lista .acao-registro { font-size: 13.5px; }
.registro-lista .email-pessoa { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registro-lista .resumo-registro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 13px; line-height: 1.45; }
.dia-registro { padding: 14px 14px 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .02em; color: var(--suave); background: var(--papel); border-bottom: 1px solid var(--borda); }
.dia-registro:first-child { padding-top: 8px; }
.dia-registro + .linha { border-top: 0 !important; }
@media (max-width: 760px) {
  html body .tabela-admin.registro-lista .linha { grid-template-columns: 44px 28px minmax(0, 1fr); align-items: start; }
  html body .tabela-admin.registro-lista .linha .resumo-registro { grid-column: 3; }
}
/* Alvos que a medição achou abaixo de 24 px: os links do rodapé do painel e o título "Estúdio" da barra. No toque
   (tablet), as abas e a pasta do Estúdio sobem para 40 px — eram 28 e 32. */
.links-rodape a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 4px; }
html body .es-titulo-app { min-height: 28px; }
@media (pointer: coarse) {
  html body .es-abas a { min-height: 40px; display: inline-flex; align-items: center; }
  html body .es-pasta-atual, html body .es-voltar, html body .es-ia { min-height: 40px; }
}
/* Na Visão geral a hora leva o dia junto (sem título por dia): a coluna cresce com o texto e não quebra
   ("10/13, 04:41 PM" no inglês). */
html body .bloco-recente .tabela-admin.registro-lista .linha { grid-template-columns: auto 30px minmax(150px, 1fr) minmax(0, 1.6fr); }
.registro-lista .num { white-space: nowrap; }
@media (max-width: 760px) {
  html body .bloco-recente .tabela-admin.registro-lista .linha { grid-template-columns: auto 28px minmax(0, 1fr); align-items: start; }
  html body .bloco-recente .tabela-admin.registro-lista .linha .resumo-registro { grid-column: 3; }
}
/* Segunda passada do checkup (13/10/2026) */
/* Pastas do Estúdio: moldura neutra; a cor da pasta fica só no ícone e na faixa das capas (os pastéis inteiros
   pareciam material escolar). */
html body .es-pasta-abrir { background: var(--papel); border-color: var(--borda); }
html body .es-pasta-capas { margin: 10px 10px 0; padding: 10px 10px 0; border-radius: 10px;
  background: color-mix(in srgb, var(--tom, var(--fundo-2)) 45%, var(--fundo-2)); }
:root[data-tema="escuro"] .es-pasta-capas { background: var(--fundo-2); }
html body .es-pasta-cartao.sem-pasta .es-pasta-abrir { background: var(--fundo); }
/* Gráfico sem uso */
.grafico-vazio { display: grid; place-items: center; min-height: 96px; margin: 0; padding: 16px; border: 1px dashed var(--borda);
  border-radius: 12px; color: var(--suave); font-size: 13.5px; text-align: center; }
/* Alvos de 15–21 px no construtor (Dados da página/do vídeo, Arquivar, Baixar MP4) e no título "Projetos" da lateral */
html body .lp-link { padding-block: 6px; margin-block: -6px; }
html body .titulo-secao .link-secao { display: inline-flex; align-items: center; min-height: 28px; }
/* A tarja da Visão geral no celular: o seletor de empresa não corta o nome */
@media (max-width: 560px) { .tarja-painel select { width: 100%; max-width: none; } }
/* "← Vídeos / ← Landing pages" do construtor tinha 21 px de altura; no toque, os botões da caixa de mensagem sobem
   para 40 px (32–34 px eram pequenos para o dedo). */
html body .lp-voltar { display: inline-flex; align-items: center; min-height: 28px; }
@media (pointer: coarse) {
  html body #anexar, html body #ditar, html body #enviar { min-width: 40px; min-height: 40px; }
}

/* ------------------------------------------------ ícones vivos (13/10/2026)
   Pedido do Guilherme: "gosto de animação em cada ícone — no hover ou ao clicar". Cada ícone tem um gesto curto que
   diz o que ele faz (a lupa inclina, o enviar decola, a engrenagem gira, a lixeira balança, o gráfico respira), uma
   vez por hover (mouse) ou por toque (comum.js põe .ic-toque). Nada se mexe sozinho: o "céu" contínuo deu enjoo.
   Apertar encolhe o ícone (scale, que compõe com a animação). Com "reduzir movimento", nada disso roda. */
@media (prefers-reduced-motion: no-preference) {
  svg[data-ic] { transition: scale .14s var(--ease); }
  :is(a, button, [role=button], label, summary, .item-menu):active svg[data-ic] { scale: .86; }
  @media (hover: hover) {
    :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg[data-ic] { animation: ic-pula .55s cubic-bezier(.3, 1.35, .55, 1) both; }
  }
  svg.ic-toque[data-ic] { animation: ic-pula .55s cubic-bezier(.3, 1.35, .55, 1) both; }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="busca"], [data-ic="explorar"]) { animation-name: ic-lupa; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="mais"], [data-ic="fechar"]) { animation-name: ic-gira; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="configuracoes"], [data-ic="tecnica"]) { animation-name: ic-engrenagem; animation-duration: .7s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="refazer"], [data-ic="repetir"], [data-ic="laco"], [data-ic="recentrar"], [data-ic="globo"], [data-ic="rede"]) { animation-name: ic-volta; animation-duration: .7s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="alerta"], [data-ic="megafone"], [data-ic="anexar"], [data-ic="lixeira"], [data-ic="relogio"], [data-ic="calendario"], [data-ic="lua"], [data-ic="chave"], [data-ic="etiqueta"], [data-ic="som"], [data-ic="ondas"], [data-ic="microfone"], [data-ic="mudo"]) { animation-name: ic-balanca; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="enviar"], [data-ic="publicar"], [data-ic="publicacao"]) { animation-name: ic-decola; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="externo"], [data-ic="compartilhar"]) { animation-name: ic-diagonal; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="baixar"], [data-ic="arquivar"]) { animation-name: ic-desce; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="seta"], [data-ic="sair"], [data-ic="expandir"]) { animation-name: ic-direita; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="voltar"], [data-ic="recolher"]) { animation-name: ic-esquerda; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="estrela"], [data-ic="favorito"], [data-ic="check"], [data-ic="aprovar"], [data-ic="aprovacao"], [data-ic="info"], [data-ic="ajuda"], [data-ic="tocar"], [data-ic="pausar"], [data-ic="parar"], [data-ic="video"]) { animation-name: ic-pulsa; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="gostei"]) { animation-name: ic-gostei; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="nao-gostei"]) { animation-name: ic-naogostei; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="copiar"]) { animation-name: ic-copia; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="pasta"], [data-ic="projeto"], [data-ic="livro"], [data-ic="arquivo"], [data-ic="pagina"], [data-ic="briefing"], [data-ic="instrucoes"], [data-ic="lista"], [data-ic="grade"]) { animation-name: ic-abre; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="grafico"], [data-ic="colunas"], [data-ic="painel"], [data-ic="funil"], [data-ic="banco"]) { animation-name: ic-barras; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="sol"]) { animation-name: ic-sol; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="estudio"], [data-ic="marca"], [data-ic="designer"], [data-ic="imagem"], [data-ic="render"], [data-ic="habilidade"], [data-ic="anuncio"], [data-ic="diretor"]) { animation-name: ic-brilho; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="editar"], [data-ic="nova"]) { animation-name: ic-escreve; animation-duration: .55s; } }
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="menu"], [data-ic="mais-opcoes"], [data-ic="menos"]) { animation-name: ic-aperta; animation-duration: .55s; } }
  @media (hover: hover) {
    html body :is(.es-topo, .lateral-rodape) .tema-botao:hover::before { animation: ic-balanca .55s cubic-bezier(.3, 1.35, .55, 1) both; }
    html body :is(.es-topo, .lateral-rodape) .tema-botao[aria-checked="true"]:hover::before { animation-name: ic-sol; }
  }
}
/* Gestos do revisor de design (14/10/2026, aplicados no checkup do painel).
   1. O toque volta a ter o gesto de cada ícone: as regras .ic-toque tinham a lista do seletor vazia e o navegador as descartava
      (no celular e no tablet todo ícone só fazia o pulo padrão).
   2. Gesto próprio para os 11 ícones que só pulavam. Uma vez por hover ou toque; termina na pose do começo;
      "reduzir movimento" desliga (fica dentro do @media). */
@media (prefers-reduced-motion: no-preference) {
  svg.ic-toque:is([data-ic="busca"], [data-ic="explorar"]) { animation-name: ic-lupa; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="mais"], [data-ic="fechar"]) { animation-name: ic-gira; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="configuracoes"], [data-ic="tecnica"]) { animation-name: ic-engrenagem; animation-duration: .7s; }
  svg.ic-toque:is([data-ic="refazer"], [data-ic="repetir"], [data-ic="laco"], [data-ic="recentrar"], [data-ic="globo"], [data-ic="rede"]) { animation-name: ic-volta; animation-duration: .7s; }
  svg.ic-toque:is([data-ic="alerta"], [data-ic="megafone"], [data-ic="anexar"], [data-ic="lixeira"], [data-ic="relogio"], [data-ic="calendario"], [data-ic="lua"], [data-ic="chave"], [data-ic="etiqueta"], [data-ic="som"], [data-ic="ondas"], [data-ic="microfone"], [data-ic="mudo"]) { animation-name: ic-balanca; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="enviar"], [data-ic="publicar"], [data-ic="publicacao"]) { animation-name: ic-decola; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  svg.ic-toque:is([data-ic="externo"], [data-ic="compartilhar"]) { animation-name: ic-diagonal; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  svg.ic-toque:is([data-ic="baixar"], [data-ic="arquivar"]) { animation-name: ic-desce; animation-duration: .6s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  svg.ic-toque:is([data-ic="seta"], [data-ic="sair"], [data-ic="expandir"]) { animation-name: ic-direita; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="voltar"], [data-ic="recolher"]) { animation-name: ic-esquerda; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="estrela"], [data-ic="favorito"], [data-ic="check"], [data-ic="aprovar"], [data-ic="aprovacao"], [data-ic="info"], [data-ic="ajuda"], [data-ic="tocar"], [data-ic="pausar"], [data-ic="parar"], [data-ic="video"]) { animation-name: ic-pulsa; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="gostei"]) { animation-name: ic-gostei; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="nao-gostei"]) { animation-name: ic-naogostei; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="copiar"]) { animation-name: ic-copia; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="pasta"], [data-ic="projeto"], [data-ic="livro"], [data-ic="arquivo"], [data-ic="pagina"], [data-ic="briefing"], [data-ic="instrucoes"], [data-ic="lista"], [data-ic="grade"]) { animation-name: ic-abre; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="grafico"], [data-ic="colunas"], [data-ic="painel"], [data-ic="funil"], [data-ic="banco"]) { animation-name: ic-barras; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="sol"]) { animation-name: ic-sol; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="estudio"], [data-ic="marca"], [data-ic="designer"], [data-ic="imagem"], [data-ic="render"], [data-ic="habilidade"], [data-ic="anuncio"], [data-ic="diretor"]) { animation-name: ic-brilho; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="editar"], [data-ic="nova"]) { animation-name: ic-escreve; animation-duration: .55s; }
  svg.ic-toque:is([data-ic="menu"], [data-ic="mais-opcoes"], [data-ic="menos"]) { animation-name: ic-aperta; animation-duration: .55s; }
  /* admin: o escudo com o ✓ carimba a aprovação */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="admin"]) { animation-name: ic-carimba; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="admin"]) { animation-name: ic-carimba; animation-duration: .55s; }
  /* agentes: o caminho avança para cima e para a frente */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="agentes"]) { animation-name: ic-trajeto; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="agentes"]) { animation-name: ic-trajeto; animation-duration: .55s; }
  /* celular: o celular vibra */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="celular"]) { animation-name: ic-vibra; animation-duration: .5s; } }
  svg.ic-toque:is([data-ic="celular"]) { animation-name: ic-vibra; animation-duration: .5s; }
  /* computador: a tela liga */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="computador"]) { animation-name: ic-liga; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="computador"]) { animation-name: ic-liga; animation-duration: .55s; }
  /* tablet: o tablet deita e volta (a orientação) */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="tablet"]) { animation-name: ic-orientacao; animation-duration: .8s; } }
  svg.ic-toque:is([data-ic="tablet"]) { animation-name: ic-orientacao; animation-duration: .8s; }
  /* conta: a pessoa inclina a cabeça, um olá */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="conta"]) { animation-name: ic-cumprimenta; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="conta"]) { animation-name: ic-cumprimenta; animation-duration: .55s; }
  svg[data-ic="conta"] { transform-origin: 50% 100%; }
  /* conversa: o balão sai da ponta */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="conversa"]) { animation-name: ic-balao; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="conversa"]) { animation-name: ic-balao; animation-duration: .55s; }
  svg[data-ic="conversa"] { transform-origin: 22% 84%; }
  /* instagram: o obturador clica */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="instagram"]) { animation-name: ic-clique; animation-duration: .5s; } }
  svg.ic-toque:is([data-ic="instagram"]) { animation-name: ic-clique; animation-duration: .5s; }
  /* integracoes: o plugue encaixa */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="integracoes"]) { animation-name: ic-encaixa; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="integracoes"]) { animation-name: ic-encaixa; animation-duration: .55s; }
  /* maleta: a maleta é erguida pela alça */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="maleta"]) { animation-name: ic-ergue; animation-duration: .6s; } }
  svg.ic-toque:is([data-ic="maleta"]) { animation-name: ic-ergue; animation-duration: .6s; }
  svg[data-ic="maleta"] { transform-origin: 50% 20%; }
  /* predio: o prédio sobe do chão */
  @media (hover: hover) { :is(a, button, [role=button], label, summary, .item-menu, .cartao-capa, .kpi):hover svg:is([data-ic="predio"]) { animation-name: ic-cresce; animation-duration: .55s; } }
  svg.ic-toque:is([data-ic="predio"]) { animation-name: ic-cresce; animation-duration: .55s; }
  svg[data-ic="predio"] { transform-origin: 50% 100%; }
}
@keyframes ic-carimba { 35% { transform: translateY(-3px) scale(1.1); } 60% { transform: translateY(1px) scale(.94); } 80% { transform: scale(1.02); } }
@keyframes ic-trajeto { 45% { transform: translate(2px, -2px) scale(1.06); } }
@keyframes ic-vibra { 12% { transform: rotate(-9deg); } 24% { transform: rotate(8deg); } 36% { transform: rotate(-7deg); } 48% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 72% { transform: rotate(2deg); } 84% { transform: rotate(0); } }
@keyframes ic-liga { 30% { transform: scale(.92, .78); opacity: .55; } 60% { transform: scale(1.05); opacity: 1; } }
@keyframes ic-orientacao { 40%, 58% { transform: rotate(-90deg) scale(.9); } }
@keyframes ic-cumprimenta { 35% { transform: rotate(-9deg) translateY(-1px); } 65% { transform: rotate(4deg); } }
@keyframes ic-balao { 35% { transform: scale(1.16) rotate(-5deg); } 65% { transform: scale(.95) rotate(1deg); } }
@keyframes ic-clique { 25% { transform: scale(.8); } 55% { transform: scale(1.12); } }
@keyframes ic-encaixa { 35% { transform: translateY(-4px); } 55% { transform: translateY(0); } 72% { transform: translateY(-1.5px); } }
@keyframes ic-ergue { 35% { transform: translateY(-3px) rotate(-6deg); } 65% { transform: translateY(0) rotate(3deg); } 85% { transform: rotate(-1deg); } }
@keyframes ic-cresce { 40% { transform: scaleY(1.14); } 70% { transform: scaleY(.96); } }
@keyframes ic-pula { 35% { transform: translateY(-3px); } 60% { transform: translateY(0); } 80% { transform: translateY(-1px); } }
@keyframes ic-lupa { 40% { transform: rotate(-14deg) scale(1.14); } }
@keyframes ic-gira { to { transform: rotate(90deg); } }
@keyframes ic-engrenagem { to { transform: rotate(180deg); } }
@keyframes ic-volta { to { transform: rotate(-360deg); } }
@keyframes ic-balanca { 20% { transform: rotate(-13deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
@keyframes ic-decola { 40% { transform: translateY(-7px); opacity: 0; } 41% { transform: translateY(7px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ic-diagonal { 40% { transform: translate(5px, -5px); opacity: 0; } 41% { transform: translate(-5px, 5px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ic-desce { 40% { transform: translateY(6px); opacity: 0; } 41% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ic-direita { 45% { transform: translateX(3px); } }
@keyframes ic-esquerda { 45% { transform: translateX(-3px); } }
@keyframes ic-pulsa { 40% { transform: scale(1.22); } 70% { transform: scale(.94); } }
@keyframes ic-gostei { 40% { transform: rotate(-14deg) translateY(-2px) scale(1.12); } }
@keyframes ic-naogostei { 40% { transform: rotate(14deg) translateY(2px) scale(1.12); } }
@keyframes ic-copia { 45% { transform: translate(-2px, -2px); } }
@keyframes ic-abre { 40% { transform: rotate(-8deg) translateY(-2px); } }
@keyframes ic-barras { 35% { transform: scaleY(.72); } 65% { transform: scaleY(1.1); } }
@keyframes ic-sol { to { transform: rotate(90deg); } }
@keyframes ic-brilho { 40% { transform: rotate(-10deg) scale(1.16); } 70% { transform: rotate(4deg) scale(.98); } }
@keyframes ic-escreve { 25% { transform: rotate(-10deg) translate(-1px, 1px); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } }
@keyframes ic-aperta { 40% { transform: scaleX(.72); } 70% { transform: scaleX(1.08); } }
svg[data-ic="grafico"], svg[data-ic="colunas"], svg[data-ic="painel"], svg[data-ic="funil"], svg[data-ic="banco"] { transform-origin: 50% 90%; }
/* Transição padrão de peso zero (:where) para todo botão e link: o que muda no hover deixa de mudar seco (a medição
   achou 16 tipos: cartões da marca, chips, "IA do Estúdio", voltar, tema, links da lateral…). Quem já tem a sua,
   mantém. */
:where(a, button, [role=button], summary, .item-menu, select) {
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease),
    box-shadow .2s var(--ease), opacity .16s var(--ease), transform .2s var(--ease), filter .16s var(--ease);
}
@media (prefers-reduced-motion: reduce) { :where(a, button, [role=button], summary, .item-menu, select) { transition: none; } }

/* ------------------------------------------------ imersão (13/10/2026)
   "Tudo animado, com o refino" (Guilherme): cada tela entra em coreografia (o título, depois os blocos, depois os
   cartões, um a um, 40 ms entre eles), a peça VIAJA da galeria até a página dela (estudio.js, View Transitions), a
   resposta da IA mostra as consultas ao vivo com o logo de cada fonte e entra bloco a bloco, os números contam até o
   valor, janelas e menus abrem com escala e desfoque. Tudo uma vez, na hora em que acontece — nada em laço, a não ser
   o anel da consulta que ESTÁ rodando. "Reduzir movimento" desliga tudo (fim desta seção). */
@keyframes surgir { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes surgir-fino { from { opacity: 0; transform: translateY(6px) scale(.96); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes linha-entra { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-entra { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes carimbo { from { opacity: 0; transform: scale(.3) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@keyframes rotulo-troca { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes some { to { opacity: 0; } }

/* a coreografia: o conteúdo da tela e, dentro dele, os cartões um a um */
#abaixo > * { animation: surgir .5s cubic-bezier(.2, .8, .2, 1) backwards; }
#abaixo > :nth-child(2) { animation-delay: .07s; }
#abaixo > :nth-child(3) { animation-delay: .14s; }
#abaixo > :nth-child(4) { animation-delay: .21s; }
#abaixo > :nth-child(5) { animation-delay: .28s; }
.fila-continuar > *, .fila-capas > *, .fila-experimentar > *, .fila-especialistas > *, .grade-agentes > *, .grade-projetos > *, .grade-arquivos > *, .grade-personalizacao > *, .grade-bentevia > *, .lista-arquivos-vista > *, .lista-tarefas > *, .lp-grade > *, .pr-obras > *, .es-marcas > *, .es-pastas > *, .kpis > * { animation: surgir .46s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms + var(--atraso-grade, 0ms)); }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(2) { --i: 1; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(3) { --i: 2; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(4) { --i: 3; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(5) { --i: 4; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(6) { --i: 5; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(7) { --i: 6; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(8) { --i: 7; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(9) { --i: 8; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(10) { --i: 9; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(11) { --i: 10; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(12) { --i: 11; }
:is(.fila-continuar, .fila-capas, .fila-experimentar, .fila-especialistas, .grade-agentes, .grade-projetos, .grade-arquivos, .grade-personalizacao, .grade-bentevia, .lista-arquivos-vista, .lista-tarefas, .lp-grade, .pr-obras, .es-marcas, .es-pastas, .kpis) > :nth-child(n+13) { --i: 12; }
#abaixo .fila-continuar { --atraso-grade: 60ms; }
#abaixo .fila-capas { --atraso-grade: 120ms; }
#abaixo .fila-experimentar { --atraso-grade: 180ms; }
#abaixo .fila-especialistas { --atraso-grade: 240ms; }
.inicio { animation: surgir .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.conversa > .pagina-vista:not(.vista-estudio) { animation: surgir .42s cubic-bezier(.2, .8, .2, 1) backwards; }
.bolha { animation: surgir .38s cubic-bezier(.2, .8, .2, 1) backwards; }

/* janelas e menus: escala + fundo que escurece e desfoca */
dialog[open] { animation: dialogo-entra .3s cubic-bezier(.2, .8, .2, 1) both; }
dialog[open]::backdrop { animation: fundo-entra .3s ease both; backdrop-filter: blur(3px); }
.menu-conta { transform-origin: 30% 100%; animation: menu-entra .2s cubic-bezier(.2, .8, .2, 1) both; }
html body .dialogo-busca-admin[open] { animation: dialogo-entra .24s cubic-bezier(.2, .8, .2, 1) both; }
.resultados-busca-admin > * { animation: surgir-fino .26s cubic-bezier(.2, .8, .2, 1) backwards; }

/* a resposta da IA: as consultas ao vivo, com o logo de cada fonte */
.ferramenta { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 6px; border-radius: 999px;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease); }
.ferramenta:has(.marca-fonte)::before { display: none; }
.marca-fonte { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.marca-fonte .logo-fonte { width: 14px; height: 14px; object-fit: contain; }
.marca-fonte .icone-svg { width: 14px; height: 14px; }
.ferramenta.entra { animation: surgir-fino .34s cubic-bezier(.2, .8, .2, 1) both; }
.ferramenta.rodando { color: var(--texto); border-color: color-mix(in srgb, var(--marca) 35%, var(--borda)); }
.ferramenta.rodando .marca-fonte::after { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--marca) 18%, transparent); border-top-color: var(--marca); animation: girar .75s linear infinite; }
.ferramenta.feito .marca-fonte::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 11px; height: 11px;
  border-radius: 50%; border: 1.5px solid var(--papel); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5'/%3E%3C/svg%3E") center / 8px no-repeat;
  animation: carimbo .36s cubic-bezier(.3, 1.4, .5, 1) both; }
.pensando .rotulo.troca { animation: rotulo-troca .32s cubic-bezier(.2, .8, .2, 1) both; }
.corpo > .bloco-entra { animation: surgir .4s cubic-bezier(.2, .8, .2, 1) backwards; }
.corpo tr.linha-entra { animation: linha-entra .34s cubic-bezier(.2, .8, .2, 1) backwards; }

/* "Continue de onde parou" */
.continuar { max-width: 760px; margin: 0 auto 26px; text-align: left; }
.titulo-continuar { margin: 0 0 10px; font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--suave); }
.fila-continuar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cartao-continuar { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px 9px 9px; border: 1px solid var(--borda);
  border-radius: 14px; background: var(--papel); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, border-color .22s; }
.cartao-continuar:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--borda-forte); }
.cartao-continuar:focus-visible { outline: none; box-shadow: var(--foco); }
.mini-continuar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: var(--fundo-2); color: var(--suave); }
.mini-continuar img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s var(--ease); }
.cartao-continuar:hover .mini-continuar img { transform: scale(1.08); }
.cartao-continuar.vivo .mini-continuar { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px color-mix(in srgb, var(--ambar) 75%, transparent); }
.texto-continuar { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.texto-continuar strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.texto-continuar span { font-size: 12.5px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seta-continuar { flex: none; color: var(--suave); transition: transform .22s var(--ease), color .22s; }
.cartao-continuar:hover .seta-continuar { transform: translateX(3px); color: var(--texto); }

/* a peça que viaja da galeria até a página dela (View Transitions; estudio.js) */
::view-transition-group(peca-viajante) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 50; }
::view-transition-old(peca-viajante), ::view-transition-new(peca-viajante) { animation-duration: .5s; height: 100%; object-fit: cover; }
::view-transition-old(root) { animation: some .18s ease both; }
::view-transition-new(root) { animation: surgir .34s cubic-bezier(.2, .8, .2, 1) .05s both; }
.em-viagem .es-palco.es-saindo { opacity: 1; }
.em-viagem .es-palco.es-entrando { animation: none; }

@media (prefers-reduced-motion: reduce) {
  #abaixo > *, .fila-continuar > *, .fila-capas > *, .fila-experimentar > *, .fila-especialistas > *, .grade-agentes > *, .grade-projetos > *, .grade-arquivos > *, .grade-personalizacao > *, .grade-bentevia > *, .lista-arquivos-vista > *, .lista-tarefas > *, .lp-grade > *, .pr-obras > *, .es-marcas > *, .es-pastas > *, .kpis > *, .inicio, .conversa > .pagina-vista, .bolha, dialog[open], dialog[open]::backdrop, .menu-conta,
  .ferramenta.entra, .ferramenta.rodando .marca-fonte::after, .ferramenta.feito .marca-fonte::after, .pensando .rotulo.troca,
  .corpo > .bloco-entra, .corpo tr.linha-entra, .resultados-busca-admin > *, html body .dialogo-busca-admin[open] { animation: none !important; }
  .cartao-continuar, .cartao-continuar:hover, .mini-continuar img { transition: none; transform: none; }
}
@media (max-width: 560px) {
  .fila-continuar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
  .fila-continuar > * { scroll-snap-align: start; }
}

/* ------------------------------------------------ a hora do dia (13/10/2026) — tema.js põe data-hora no <html> */
:root[data-hora="amanhecer"] .vitrine-entrada { --c1: #f29a8c; --c2: #c2417a; --c3: #ffd9a8; --c4: #6b7fd6; }
:root[data-hora="dia"] .vitrine-entrada { --c1: #5aa0f0; --c2: #2f5fc4; --c3: #9fe0e6; --c4: #3446b5; }
:root[data-hora="noite"] .vitrine-entrada { --c1: #4a5fd0; --c2: #1b1f4a; --c3: #7a5cd6; --c4: #0e1230; }

/* o especialista presente: o rosto acende quando ele muda (chat.js, atualizarChipAgente) */
@keyframes acende { 0% { transform: scale(.6); filter: saturate(.4); } 55% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes halo { from { opacity: .55; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } }
#chip-agente { position: relative; }
#chip-agente.acende > :first-child { animation: acende .6s cubic-bezier(.3, 1.4, .5, 1) both; }
#chip-agente.acende::after { content: ""; position: absolute; left: 6px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--marca) 45%, transparent), transparent 70%);
  pointer-events: none; animation: halo .7s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { #chip-agente.acende > :first-child, #chip-agente.acende::after { animation: none; } }

/* conquistas e o aviso que volta para casa (cartoes.js, aviso) */
@keyframes desenha-traco { to { stroke-dashoffset: 0; } }
@keyframes brilho-passa { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes chamado { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.aviso-canto.conquista { overflow: hidden; }
.aviso-canto.conquista .ac-icone { animation: carimbo .5s cubic-bezier(.3, 1.4, .5, 1) .05s both; }
.aviso-canto.conquista .ac-icone path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha-traco .55s cubic-bezier(.6, 0, .2, 1) .25s forwards; }
.aviso-canto.conquista::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: brilho-passa .9s cubic-bezier(.4, 0, .2, 1) .35s both; }
:root[data-tema="escuro"] .aviso-canto.conquista::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); }
.item-menu.chamado { animation: chamado .8s cubic-bezier(.2, .8, .2, 1) both; }
.item-menu.chamado svg[data-ic] { animation: ic-pulsa .55s cubic-bezier(.3, 1.35, .55, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .aviso-canto.conquista .ac-icone, .aviso-canto.conquista::after, .item-menu.chamado, .item-menu.chamado svg[data-ic] { animation: none; }
  .aviso-canto.conquista .ac-icone path { stroke-dasharray: none; animation: none; }
}

/* comparar versões (estudio.js, compararVersoes): a de antes à esquerda, a que se vê à direita, o divisor no meio */
@property --corte { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@keyframes corte-abre { from { --corte: 92%; } to { --corte: 50%; } }
.pr-comparar { position: relative; aspect-ratio: var(--ar); height: min(100%, calc(100cqh - 8px)); max-width: 100%; margin: 0 auto;
  border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(10, 12, 30, .55); --corte: 50%; user-select: none; }
.pr-comparar.abrindo { animation: corte-abre 1.1s cubic-bezier(.65, 0, .2, 1) .15s both; }
.pr-comparar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--papel); }
.pr-comparar .cmp-depois { clip-path: inset(0 0 0 var(--corte)); }
.cmp-divisor { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 18px rgba(0, 0, 0, .25); pointer-events: none; }
.cmp-divisor::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316161a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.cmp-regua { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-regua:focus-visible + .cmp-divisor, .pr-comparar:has(.cmp-regua:focus-visible) .cmp-divisor::after { box-shadow: var(--foco); }
.cmp-selo { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: rgba(16, 16, 22, .62); color: #fff; font: 600 12px/1.2 var(--sans); backdrop-filter: blur(6px); pointer-events: none; }
.cmp-selo span { font-weight: 500; opacity: .85; }
.cmp-selo.esq { left: 10px; }
.cmp-selo.dir { right: 10px; }
@media (prefers-reduced-motion: reduce) { .pr-comparar.abrindo { animation: none; } }

/* a busca com prévia (chat.js, buscar) */
.resultado.com-mini { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.mini-res { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--fundo-2); color: var(--suave); }
.mini-res img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mini-res.rosto { border-radius: 50%; }
.mini-res .avatar-res { width: 34px; height: 34px; }
.texto-res { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.linha-res { display: flex; align-items: baseline; gap: 8px; }
.linha-res .titulo-res { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texto-res .trecho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado mark { background: color-mix(in srgb, var(--ambar) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.grupo-res { margin: 8px 10px 4px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .03em; color: var(--suave); }
.resultado { animation: surgir-fino .28s cubic-bezier(.2, .8, .2, 1) backwards; }
.resultado:nth-child(2) { animation-delay: 30ms; } .resultado:nth-child(3) { animation-delay: 60ms; }
.resultado:nth-child(4) { animation-delay: 90ms; } .resultado:nth-child(5) { animation-delay: 120ms; }
.resultado:nth-child(n+6) { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) { .resultado { animation: none; } }

/* deslizar para arquivar (chat.js, deslizarParaArquivar): só no toque */
.lista .item { position: relative; }
.fundo-arquivar { position: absolute; inset: 0; z-index: 0; display: none; align-items: center; justify-content: flex-end; gap: 6px;
  padding-right: 14px; border-radius: inherit; background: var(--fundo-2); color: var(--suave); font-size: 13px; font-weight: 600; }
@media (pointer: coarse) {
  .lista .item:is(.deslizando, .saindo-lado) .fundo-arquivar { display: flex; }
  .lista .item > .abrir, .lista .item > .acoes-conversa { position: relative; z-index: 1;
    transform: translateX(var(--dx, 0px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
  .lista .item:is(.deslizando, .saindo-lado) > :is(.abrir, .acoes-conversa) { background: var(--fundo-2); }
  .lista .item.deslizando > .abrir, .lista .item.deslizando > .acoes-conversa { transition: none; }
  .lista .item.passou .fundo-arquivar { background: color-mix(in srgb, var(--marca) 16%, var(--fundo-2)); color: var(--marca); }
  .lista .item.passou .fundo-arquivar svg { animation: ic-desce .5s cubic-bezier(.4, 0, .2, 1); }
  .lista .item.saindo-lado { opacity: 0; transition: opacity .22s ease .1s; }
}

/* "Sua semana no Canopo" (chat.js, cartaoDaSemana) */
.semana { max-width: 760px; margin: 0 auto 26px; overflow: hidden; border: 1px solid var(--borda); border-radius: 16px;
  background: var(--papel); text-align: left; }
.semana.saindo { opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .24s, transform .24s; }
.tarja-semana { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 74px; padding: 16px 18px; color: #fff; }
.cab-semana { display: flex; flex-direction: column; gap: 2px; }
.cab-semana strong { font: 600 19px/1.15 var(--sans); letter-spacing: -.015em; }
.cab-semana span { font-size: 12.5px; opacity: .85; }
.fechar-semana { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border: 0;
  border-radius: 8px; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.fechar-semana:hover { background: rgba(255, 255, 255, .28); }
.numeros-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; }
.numero-semana { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-right: 1px solid var(--borda); }
.numero-semana:last-child { border-right: 0; }
.numero-semana b { font: 650 26px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero-semana span { font-size: 12.5px; color: var(--suave); }
.quem-semana { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--borda);
  font-size: 13px; color: var(--suave); }
.quem-semana strong { color: var(--texto); font-weight: 600; }
.quem-semana .avatar-semana { width: 24px; height: 24px; }
@media (max-width: 560px) { .numero-semana { border-right: 0; border-bottom: 1px solid var(--borda); } }

/* "Seu espaço": as paletas nas Configurações e o avatar da conta */
.paletas { display: flex; flex-wrap: wrap; gap: 8px; }
.paleta { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 1px var(--borda); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s; }
.paleta:hover { transform: scale(1.1); }
.paleta.ativa { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--texto); }
.paleta:focus-visible { outline: none; box-shadow: var(--foco); }
.conta-linha .inicial.avatar-paleta { color: #fff; box-shadow: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  background: radial-gradient(60% 120% at 12% 18%, var(--c1), transparent 68%), radial-gradient(55% 110% at 88% 22%, var(--c3), transparent 66%),
    radial-gradient(75% 120% at 55% 115%, var(--c2), transparent 70%), linear-gradient(120deg, var(--c4), var(--c2)); }
.conta-linha .inicial.avatar-paleta::after { border-radius: 50%; }

/* ------------------------------------------------ a conversa da criação e a avaliação (13/10/2026)
   "Os textos e notas ainda parecem jogados" (Guilherme): cada versão é uma seção recolhível com cabeçalho (versão,
   nota, veredito, quando); dentro, os passos numa linha do tempo — nó com o ícone de quem fez, quem + o que fez +
   modelo e hora alinhados, e o conteúdo no bloco dele (citação do designer, achados em caixas por tipo). O aviso de
   limite de versões é o quadro de fim. A avaliação do diretor usa as mesmas caixas. */
html body .es-sala.cr-linha { display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; padding: 0; }
.cr-versao { border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); overflow: hidden; }
.cr-versao.pedido { background: var(--fundo); }
.cr-versao-cab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; }
.cr-versao-cab::-webkit-details-marker { display: none; }
.cr-versao-cab > b { font: 600 14px/1.2 var(--sans); }
.cr-veredito { font-size: 12.5px; color: var(--suave); }
.cr-veredito.bloq { color: var(--atencao); }
.cr-veredito.ok { color: var(--ok); }
.cr-veredito.vivo { color: var(--marca); }
.cr-quando { margin-left: auto; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.cr-seta { color: var(--suave); transition: transform .25s var(--ease); }
.cr-versao[open] > .cr-versao-cab .cr-seta { transform: rotate(90deg); }
.cr-versao[open] > .cr-versao-cab { border-bottom: 1px solid var(--borda); }
.cr-passos { position: relative; margin: 0; padding: 14px 14px 6px; list-style: none; }
.cr-passo { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 16px; }
.cr-passo:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--borda); }
.cr-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fundo-2); color: var(--suave);
  box-shadow: inset 0 0 0 1px var(--borda); }
.cr-passo.t-designer .cr-no { background: color-mix(in srgb, var(--marca) 12%, var(--papel)); color: var(--marca); box-shadow: none; }
.cr-passo.t-diretor .cr-no { background: #16161a; color: var(--ambar); box-shadow: none; }
.cr-passo.t-pessoa .cr-no, .cr-passo.t-pedido .cr-no { background: color-mix(in srgb, var(--ambar) 18%, var(--papel)); color: var(--atencao); box-shadow: none; }
:root[data-tema="escuro"] .cr-passo.t-diretor .cr-no { background: #000; }
.cr-corpo { min-width: 0; padding-top: 4px; }
.cr-cab { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 1.3; }
.cr-cab > b { font-weight: 600; }
.cr-acao { color: var(--suave); }
.cr-meta { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; min-width: 0; font-size: 11.5px; color: var(--suave); }
.cr-modelo { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-meta time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-texto { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.cr-fala { padding: 8px 11px; border-radius: 4px 12px 12px 12px; background: var(--fundo-2); }
.cr-citacao { margin: 8px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid color-mix(in srgb, var(--marca) 45%, transparent);
  font-size: 14px; line-height: 1.5; color: var(--texto); }
.cr-rotulo { margin: 12px 0 6px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.cr-mudancas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.cr-mudancas li { position: relative; padding-left: 16px; }
.cr-mudancas li::before { content: "→"; position: absolute; left: 0; color: var(--marca); }
.cr-passo.agora .cr-no { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }
.cr-passo.agora .es-digitando { display: inline-flex; margin-top: 8px; }
/* as caixas de achados (conversa e avaliação) */
.cr-bloco { margin-top: 10px; padding: 9px 12px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); }
.cr-bloco.t-bloq { border-color: color-mix(in srgb, var(--erro) 28%, var(--borda)); background: color-mix(in srgb, var(--erro) 6%, var(--papel)); }
.cr-bloco.t-aviso { border-color: color-mix(in srgb, var(--ambar) 40%, var(--borda)); background: color-mix(in srgb, var(--ambar) 8%, var(--papel)); }
.cr-bloco.t-ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--borda)); background: color-mix(in srgb, var(--ok) 6%, var(--papel)); }
.cr-bloco-tit { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font: 600 12.5px/1.2 var(--sans); }
.cr-bloco-tit em { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 11.5px; text-align: center;
  background: color-mix(in srgb, currentColor 12%, transparent); }
.cr-bloco.t-bloq .cr-bloco-tit { color: var(--erro); }
.cr-bloco.t-aviso .cr-bloco-tit { color: var(--atencao); }
.cr-bloco.t-ok .cr-bloco-tit { color: var(--ok); }
.cr-bloco.t-ajuste .cr-bloco-tit { color: var(--texto); }
.cr-bloco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; line-height: 1.45; color: var(--texto); }
.cr-bloco li { position: relative; padding-left: 14px; }
.cr-bloco li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; }
.cr-bloco.t-bloq li::before { background: var(--erro); opacity: .8; }
.cr-bloco.t-aviso li::before { background: var(--ambar); opacity: 1; }
.cr-bloco.t-ok li::before { background: var(--ok); opacity: .9; }
.cr-fim { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ambar) 40%, var(--borda));
  background: color-mix(in srgb, var(--ambar) 9%, var(--papel)); color: var(--texto); }
.cr-fim svg { flex: none; margin-top: 2px; color: var(--atencao); }
.cr-fim p { margin: 0; font-size: 13px; line-height: 1.5; }
/* a avaliação do diretor */
.av-conceito { font-size: 15px; }
.av-criterios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 22px; }
.av-achados { display: grid; gap: 8px; margin-top: 14px; }
.av-achados .cr-bloco { margin-top: 0; }
/* a explicação da aba vira uma legenda discreta, alinhada às abas */
.pr-abas .es-desc-aba { margin: 8px 2px 12px; font-size: 12.5px; line-height: 1.45; color: var(--suave); }
@media (prefers-reduced-motion: reduce) { .cr-seta { transition: none; } }

/* a conversa dos construtores (página e vídeo): cada fala da IA num cartão com quem falou DENTRO, no alto; avisos do
   sistema e conferências sem problema como linhas com ícone; o pedido da pessoa sem a instrução técnica */
html body .lp-msg.ia .lp-cartao-msg { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 14px; background: var(--papel); }
html body .lp-msg.ia .lp-cartao-msg > .lp-quem { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
html body .lp-msg.sistema { align-self: stretch; display: flex; align-items: center; gap: 8px; max-width: none; padding: 7px 12px;
  border-radius: 10px; background: var(--fundo-2); color: var(--suave); text-align: left; font-size: 12.5px; line-height: 1.4; }
html body .lp-msg.sistema svg { flex: none; }
html body .lp-msg.sistema > span { flex: 1; min-width: 0; }
html body .lp-msg.sistema .lp-link, html body .lp-msg.sistema time { flex: none; margin-left: auto; font-size: 12px; }
html body .lp-msg.sistema.conferida svg { color: var(--ok); }
.lp-cartao-msg .cr-bloco { margin-top: 10px; }
.lp-avisos.cr-bloco > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.lp-avisos.cr-bloco > summary::-webkit-details-marker { display: none; }
.lp-avisos.cr-bloco[open] > summary { margin-bottom: 6px; }
.lp-avisos.cr-bloco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; }
/* o pedido da pessoa, legível */
.pedido-legivel { display: grid; gap: 6px; white-space: normal; }
.pedido-legivel p { margin: 0; }
.pedido-legivel .cr-rotulo { margin: 4px 0 0; }
.itens-pedido { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.marcas-pedido { margin: 0; padding: 0; list-style: none; counter-reset: marca; display: grid; gap: 7px; }
.marcas-pedido li { counter-increment: marca; position: relative; display: flex; flex-direction: column; gap: 1px; padding-left: 26px; }
.marcas-pedido li::before { content: counter(marca); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--texto); color: var(--papel); font: 600 11px/1 var(--sans); }
.onde-marca { font-size: 12px; color: var(--suave); }

/* notas de ajuda que ficavam soltas entre os blocos: uma linha com o ícone, num fundo discreto */
.dica-com-icone { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--fundo-2); font-size: 12.5px; color: var(--suave); }
.dica-com-icone > svg { flex: none; }
/* o motivo do botão travado no construtor: uma pílula com o cadeado, não um texto solto ao lado dos botões */
html body .lp-motivo { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--fundo-2); font-size: 12px; line-height: 1.3; }
html body .lp-motivo::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* a esfera do papel também é um span e herdava o margin-left:auto que era só da hora (o nome ia para o meio) */
html body .lp-quem > .luz-agente { margin-left: 0; }
html body .lp-quem > span:last-child:not(.luz-agente) { margin-left: auto; }
.lp-grupo-sistema { align-self: stretch; border-radius: 10px; background: var(--fundo-2); }
.lp-grupo-sistema > summary { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--suave); }
.lp-grupo-sistema > summary::-webkit-details-marker { display: none; }
.lp-grupo-sistema > summary b { flex: none; color: var(--texto); font-weight: 600; }
.lp-grupo-sistema > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-grupo-sistema[open] > summary { border-bottom: 1px solid var(--borda); }
.lp-grupo-sistema > .lp-msg.sistema { margin: 0; border-radius: 0; background: transparent; }
.lp-grupo-sistema > .lp-msg.sistema + .lp-msg.sistema { border-top: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); }

/* o roteiro do vídeo: a coluna dos rótulos cabe "Por que entra assim" numa linha; a barra de ações com fundo cheio */
html body .vd-rot dl { grid-template-columns: 148px minmax(0, 1fr); }
html body .vd-rot-acoes { background: var(--fundo-2); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .25); }
@media (max-width: 560px) { html body .vd-rot dl { grid-template-columns: minmax(0, 1fr); } html body .vd-rot dt { margin-top: 6px; } }

/* que versão se vê, embaixo da arte (estudio.js, palcoDaPeca) */
html body .pr-aviso-versao { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 5px 6px 5px 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--ambar) 14%, var(--papel)); color: var(--pr-alerta-texto, var(--atencao));
  font-size: 12.5px; text-align: left; }
.pr-aviso-versao > svg { flex: none; }
.pr-aviso-acao { padding: 3px 10px; border: 0; border-radius: 999px; background: var(--papel); color: var(--texto); font: 600 12px/1.3 var(--sans);
  cursor: pointer; box-shadow: 0 0 0 1px var(--borda); }
.pr-aviso-acao:hover { background: var(--hover); }

/* ------------------------------------------- listas e caixas de marcar (13/10/2026) */
/* "Os dropdowns e caixas seletoras ainda estão muito simples": a lista aberta era a do sistema (o azul do Windows)
   e a caixa de marcar, a do navegador com a cor trocada. A lista aberta agora é o painel do comum.js ("listas");
   aqui ficam o <select> fechado, o painel e as caixas. O seletor alto (:not(#_n)) é de propósito: muitas telas dão
   "background:" no select, e o atalho zeraria a seta. A seta é imagem de fundo porque <select> não aceita ::after. */
:root {
  --seta-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367666e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --seta-lista-cima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233446b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14.5l6-6 6 6'/%3E%3C/svg%3E");
  --ok-caixa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --traco-caixa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E");
}
:root[data-tema="escuro"] {
  --seta-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a2aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --seta-lista-cima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14.5l6-6 6 6'/%3E%3C/svg%3E");
}

/* A lista fechada: a seta da plataforma no lugar da do sistema, que dá uma descida curta no hover e vira para cima
   (em crepúsculo) com o painel aberto. */
html body select:not([multiple]):not(#_n) {
  -webkit-appearance: none; appearance: none;
  background-image: var(--seta-lista); background-repeat: no-repeat;
  background-position: right var(--seta-x, 11px) center; background-size: 15px 15px;
  padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
}
html body .seletor-ia select:not([multiple]):not(#_n) { --seta-x: 9px; padding-right: 28px; background-size: 13px 13px; }
html body select:not([multiple]):not(#_n).lista-aberta {
  background-image: var(--seta-lista-cima); border-color: var(--marca); box-shadow: var(--foco);
}
html body select:not([multiple]):not(#_n):disabled { cursor: not-allowed; opacity: .6; }
@media (hover: hover) {
  html body select:not([multiple]):not(#_n):not(:disabled):not(.lista-aberta):hover { animation: lista-seta .45s cubic-bezier(.3, .7, .3, 1); }
}
@keyframes lista-seta { 45% { background-position: right var(--seta-x, 11px) top calc(50% + 3px); } }

/* O painel aberto (comum.js). Nasce da lista, da borda de onde abre, e sai encolhendo. */
.lista-painel {
  position: fixed; inset: auto; margin: 0; box-sizing: border-box; z-index: 2147483000;
  display: flex; flex-direction: column; width: max-content; max-width: min(440px, calc(100vw - 16px)); max-height: 340px;
  padding: 5px; overflow: hidden; text-align: left;
  background: var(--papel); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: var(--sombra-alta); font: 400 14px/1.3 var(--sans);
  --dy: -4px; transform-origin: 50% 0; animation: lista-abre .17s cubic-bezier(.2, .9, .25, 1);
}
.lista-painel[data-lado="cima"] { --dy: 4px; transform-origin: 50% 100%; }
.lista-painel.escolhendo, .lista-painel.saindo { pointer-events: none; }
.lista-painel.saindo { animation: lista-fecha .11s ease-in forwards; }
@keyframes lista-abre { from { opacity: 0; transform: translateY(var(--dy)) scale(.97); } }
@keyframes lista-fecha { to { opacity: 0; transform: translateY(var(--dy)) scale(.98); } }

.lista-busca {
  display: flex; align-items: center; gap: 8px; flex: none; height: 34px; margin: 1px 1px 5px; padding: 0 10px;
  border-radius: 8px; background: var(--fundo); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borda); font-size: 13.5px;
}
.lista-busca svg { flex: none; }
.lista-busca-texto { flex: 1; min-width: 0; overflow: hidden; white-space: pre; text-overflow: ellipsis; color: var(--texto); }
.lista-busca-texto.vazio { color: var(--suave); }
.lista-busca-texto::after, .lista-busca-texto.vazio::before {
  content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin: 0 1px; vertical-align: -2px;
  background: var(--marca); animation: lista-cursor 1.06s steps(1) infinite;
}
.lista-busca-texto.vazio::after { content: none; }
@keyframes lista-cursor { 50% { opacity: 0; } }

.lista-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lista-grupo { padding: 10px 10px 4px; font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.lista-grupo:first-child { padding-top: 5px; }
.lista-item {
  display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 10px 6px 8px; border-radius: 8px;
  cursor: pointer; transition: background-color .12s;
  animation: lista-item-entra .2s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 12ms);
}
@keyframes lista-item-entra { from { opacity: 0; transform: translateY(-3px); } }
.lista-item.ativo { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.lista-item.escolhido .lista-rotulo { font-weight: 600; }
.lista-item.desligado { cursor: not-allowed; color: var(--suave); }
.lista-item.desligado .lista-rotulo { opacity: .78; }
.lista-item[hidden], .lista-grupo[hidden], .lista-vazia[hidden] { display: none; }
.lista-marca { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--marca); }
.lista-marca svg { stroke-width: 2.3; }
.lista-marca svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lista-item.escolhido .lista-marca svg path { stroke-dashoffset: 0; animation: lista-ok .3s .05s cubic-bezier(.65, 0, .35, 1) backwards; }
@keyframes lista-ok { from { stroke-dashoffset: 1; } }
.lista-rotulo { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lista-detalhe {
  flex: 0 1 auto; max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--suave); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.lista-vazia { padding: 14px 10px; color: var(--suave); font-size: 13px; text-align: center; }

/* As caixas de marcar e as opções: o ✓ se desenha da esquerda para a direita, o ponto cresce do centro, e apertar
   afunda um pouco. "hidden" e a .escondido-acessivel ficam de fora (o display daqui as mostraria). */
html body input:is([type="checkbox"], [type="radio"]):not(.escondido-acessivel):not([hidden]):not(#_n) {
  -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box;
  display: inline-grid; place-content: center; width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0;
  vertical-align: -4px; border: 1.5px solid var(--borda-campo, var(--borda-forte)); border-radius: 5px;
  background: var(--papel); color: var(--sobre-tinta); cursor: pointer;
  transition: background-color .16s, border-color .16s, box-shadow .16s, scale .12s;
}
html body input[type="radio"]:not(.escondido-acessivel):not([hidden]):not(#_n) { border-radius: 50%; }
html body input[type="checkbox"]:not(.escondido-acessivel):not([hidden]):not(#_n)::before {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--ok-caixa) center / contain no-repeat; mask: var(--ok-caixa) center / contain no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .2s cubic-bezier(.65, 0, .35, 1);
}
html body input[type="checkbox"]:indeterminate:not(.escondido-acessivel):not([hidden]):not(#_n)::before {
  -webkit-mask-image: var(--traco-caixa); mask-image: var(--traco-caixa); clip-path: inset(0);
}
html body input[type="radio"]:not(.escondido-acessivel):not([hidden]):not(#_n)::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  scale: 0; transition: scale .22s cubic-bezier(.3, 1.6, .5, 1);
}
html body input:is([type="checkbox"], [type="radio"]):is(:checked, :indeterminate):not(.escondido-acessivel):not([hidden]):not(#_n) {
  background: var(--tinta); border-color: var(--tinta);
}
html body input[type="checkbox"]:checked:not(.escondido-acessivel):not([hidden]):not(#_n)::before { clip-path: inset(0); transition-delay: .04s; }
html body input[type="radio"]:checked:not(.escondido-acessivel):not([hidden]):not(#_n)::before { scale: 1; }
html body input:is([type="checkbox"], [type="radio"]):not(:checked):not(:indeterminate):not(:disabled):not(.escondido-acessivel):not([hidden]):not(#_n):hover {
  border-color: var(--borda-campo-forte, var(--texto));
}
html body input:is([type="checkbox"], [type="radio"]):not(:disabled):not(.escondido-acessivel):not([hidden]):not(#_n):active { scale: .88; }
html body input:is([type="checkbox"], [type="radio"]):not(.escondido-acessivel):not([hidden]):not(#_n):focus-visible { outline: none; box-shadow: var(--foco); }
html body input:is([type="checkbox"], [type="radio"]):disabled:not(.escondido-acessivel):not([hidden]):not(#_n) { opacity: .45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .lista-painel, .lista-painel.saindo, .lista-item, .lista-busca-texto::after, .lista-busca-texto.vazio::before,
  .lista-item.escolhido .lista-marca svg path { animation: none; }
  html body select:not(#_n) { animation: none !important; }
  html body input:is([type="checkbox"], [type="radio"]):not(#_n), html body input:is([type="checkbox"], [type="radio"]):not(#_n)::before { transition: none; }
}

/* ============================================================== resumo ao vivo nos pedidos (14/10/2026)
   Ao lado do formulário da peça, da landing page e do vídeo: capa no campo de cor do tipo (logo da marca, título,
   formato), o progresso e os campos agrupados pelos passos; a linha que muda acende. Abaixo de 960 px, uma faixa
   recolhida no alto que abre o resumo. */
.es-dialogo.com-resumo { width: min(1180px, calc(100vw - 32px)); }
/* a tarja do alto não encolhe: no celular a coluna da janela apertava e cortava o subtítulo */
.es-dialogo .es-dialogo-topo { flex: none; }
.es-com-resumo { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 28px; align-items: start; }
.es-resumo { position: sticky; top: 0; display: flex; flex-direction: column; max-height: calc(100vh - 300px); min-height: 0;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--fundo); overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(20, 20, 40, .35); }
.es-resumo-capa { position: relative; flex: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 132px; padding: 14px 16px 14px; color: #fff; }
.es-resumo-logo { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; height: 32px; padding: 4px 9px;
  border-radius: 9px; background: #fff; box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .45); }
.es-resumo-logo img { height: 22px; max-width: 120px; object-fit: contain; }
.es-resumo-cores { position: absolute; top: 18px; right: 14px; }
.es-resumo-cores i { border-color: rgba(255, 255, 255, .9); box-shadow: none; }
.es-resumo-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font: 650 17px/1.25 var(--sans, inherit); letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(10, 10, 30, .25); }
.es-resumo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.es-resumo-chip { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; line-height: 1.4; color: #fff;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html body .es-resumo-progresso { flex: none; display: grid; gap: 8px; width: 100%; min-height: 0; height: auto; padding: 12px 16px 10px; margin: 0;
  border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; background: transparent; color: var(--texto); text-align: left;
  cursor: default; font: inherit; box-shadow: none; }
.es-resumo-prog-texto { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--suave); }
.es-resumo-prog-texto b { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.es-resumo-barra { display: block; height: 4px; border-radius: 4px; background: var(--borda); overflow: hidden; }
.es-resumo-barra i { display: block; height: 100%; border-radius: inherit; background: var(--texto); transition: width .45s var(--ease, ease); }
.es-resumo-ver { display: none; }
.es-resumo-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 16px 16px; }
.es-resumo-grupo h4 { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; font-size: 11px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto); }
.es-resumo-num { font-variant-numeric: tabular-nums; color: var(--suave); font-weight: 600; }
.es-resumo-linha { display: grid; gap: 2px; margin: 0 -8px; padding: 6px 8px; border-radius: 8px; }
.es-resumo-linha small { font-size: 11.5px; color: var(--suave); }
.es-resumo-linha > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
  font-size: 13.5px; line-height: 1.45; color: var(--texto); white-space: pre-line; }
.es-resumo-linha.vazia > span { color: var(--suave); opacity: .75; }
.es-resumo-linha.mudou { animation: resumo-mudou 1.1s ease both; }
@keyframes resumo-mudou { from { background: color-mix(in srgb, var(--crepusculo, #3446b5) 14%, transparent); } to { background: transparent; } }
.es-resumo-fotos { display: flex; gap: 4px; margin-top: 4px; }
.es-resumo-fotos img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.es-resumo-marcados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.es-resumo-marcado { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  color: var(--texto); background: var(--papel); box-shadow: inset 0 0 0 1px var(--borda); }
@media (max-width: 960px) {
  .es-com-resumo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .es-resumo { position: static; order: -1; max-height: none; box-shadow: none; }
  .es-resumo-capa { min-height: 92px; padding: 12px 14px; }
  .es-resumo-capa .es-resumo-chips { display: none; }
  html body .es-resumo-progresso { cursor: pointer; border-bottom: 0; }
  .es-resumo.aberto .es-resumo-progresso { border-bottom: 1px solid var(--borda); }
  .es-resumo-ver { display: block; justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--texto); text-decoration: underline;
    text-underline-offset: 3px; }
  .es-resumo-corpo { display: none; }
  .es-resumo.aberto .es-resumo-corpo { display: block; }
}
@media (prefers-reduced-motion: reduce) { .es-resumo-linha.mudou { animation: none; } .es-resumo-barra i { transition: none; } }
/* no escuro, logo escuro sumia no kit da marca do pedido: o logo ganha um ladrilho claro, como no resumo */
:root[data-tema="escuro"] .es-kit-marca img { padding: 3px 7px; border-radius: 6px; background: #fff; box-sizing: content-box; }

/* ============================================================== fotos desta peça e conteúdo por slide (14/10/2026) */
.es-fotos-peca .es-acervo { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.es-fotos-peca .es-acervo:empty { display: none; }
.es-fotos-peca-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.es-fotos-peca-acoes small { margin: 0; }
.es-fotos-peca.arrastando { outline: 2px dashed var(--texto); outline-offset: 6px; border-radius: 12px; }
.es-foto-peca .es-foto-num { position: absolute; left: 6px; top: 6px; min-width: 22px; padding: 2px 6px; border-radius: 999px;
  background: rgba(16, 16, 20, .78); color: #fff; font: 600 11px/1.3 var(--sans); text-align: center; }
html body .es-foto-tirar { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: rgba(16, 16, 20, .78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.es-itens { display: grid; gap: 10px; margin: 6px 0 4px; }
.es-itens:empty { display: none; }
.es-item { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo); }
.es-item > textarea { grid-column: 1 / -1; }
.es-item-cab { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 10px; padding-right: 34px; }
.es-item-cab > b { font: 600 12px/1 var(--sans); color: var(--suave); font-variant-numeric: tabular-nums; }
.es-item-cab > select { flex: 1; min-width: 0; }
.es-item-mini { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.es-item-cab .es-foto-tirar { top: 50%; transform: translateY(-50%); background: var(--hover); color: var(--texto); }
@media (max-width: 680px) { .es-item { grid-template-columns: 1fr; } }

/* ============================================================== o painel no nível do chat (checkup de 14/10/2026)
   Os ícones e os controles do painel tinham ficado para trás: menu com ícones coloridos, saída do painel em dois links
   de texto miúdo, caixas de marcar onde o chat tem interruptor e botões sem ícone. Tudo aqui usa as peças do chat. */
/* a lateral: os mesmos itens do chat (ícone neutro, que só escurece no item ativo ou no hover) */
html body .menu-admin { gap: 1px; padding: 2px 10px 8px; }
html body .menu-admin a { padding: 7px 10px; gap: 10px; border-radius: 9px; font: 500 14.5px/1.3 var(--sans); color: var(--texto); }
html body .menu-admin a:hover { background: var(--hover); }
html body .menu-admin a.ativo { background: var(--ativo); box-shadow: none; font-weight: 500; }
html body .menu-admin .ico { display: inline-flex; justify-content: center; width: 20px; color: var(--suave); transition: color var(--t1); }
html body .menu-admin a:is(:hover, .ativo) .ico { color: var(--texto); }
html body .lateral > .voltar-ao-chat { width: auto; margin: 6px 10px 8px; }
/* o rodapé: a conta e o menu dela, como no chat (o nome não ocupa mais a linha inteira) */
html body.admin .lateral-rodape .conta-linha .quem { flex: 1 1 auto; }
html body .menu-conta .alternar-tema { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--texto); font: 400 14px/1.3 var(--sans); text-align: left; cursor: pointer; }
html body .menu-conta .alternar-tema:hover { background: var(--hover); }
html body .menu-conta .alternar-tema .tema-chave { position: relative; margin-left: auto; flex: none; width: 32px; height: 18px; border-radius: 999px;
  background: var(--borda-forte); transition: background .18s ease; }
html body .menu-conta .alternar-tema .tema-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .18s var(--ease); }
html body .menu-conta .alternar-tema[aria-checked="true"] .tema-chave { background: var(--marca); }
html body .menu-conta .alternar-tema[aria-checked="true"] .tema-chave::after { transform: translateX(14px); }
html body .menu-conta .alternar-tema:focus-visible { outline: none; box-shadow: var(--foco); }
/* o aviso do registro: uma linha calma com o escudo, não uma pílula que parece botão */
.aviso-registro { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--suave); font: 500 12.5px/1 var(--sans); white-space: nowrap; }
.aviso-registro svg { color: var(--suave); }
@container principal (max-width: 760px) { .aviso-registro { display: none; } }
/* a volta ("← Pessoas", "← Empresas"): alvo de verdade, com o fundo do hover */
html body .voltar-admin { min-height: 30px; padding: 0 8px 0 5px; margin: 0 0 6px -5px; border-radius: 8px; transition: background var(--t1), color var(--t1); }
html body .voltar-admin:hover { background: var(--hover); color: var(--texto); }
/* os filtros de Pessoas na mesma coluna do resto (a margem própria tirava o centro e eles saíam 66 px à esquerda) */
.painel > .chips-admin { margin-left: auto; margin-right: auto; }
/* botões só com ícone (subir e descer na fila de modelos): quadrados, com a seta girada para o sentido */
html body .botao.so-icone { width: 36px; padding: 0; }
html body .botao.so-icone.pequeno { width: 30px; }
.botao.mover-cima svg { rotate: -90deg; }
.botao.mover-baixo svg { rotate: 90deg; }
@media (pointer: coarse) { html body .botao.so-icone { width: 42px; } }
/* o interruptor do painel: o mesmo das Configurações do chat (.chave-config), feito no próprio <input type=checkbox> */
html body .caixa-marcar.interruptor { display: flex; align-items: center; gap: 12px; min-height: 34px; margin: 4px 0; font-size: 14px; line-height: 1.35; cursor: pointer; }
html body .caixa-marcar.interruptor input[role="switch"]:not(#_n):not(#_m) {
  position: relative; display: inline-block; flex: none; width: 44px; height: 26px; min-width: 44px; min-height: 26px; margin: 0; padding: 0;
  border: 0; border-radius: 999px; background: var(--borda-forte); vertical-align: middle; transition: background-color .18s ease, box-shadow .16s;
}
html body .caixa-marcar.interruptor input[role="switch"]:not(#_n):not(#_m)::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  -webkit-mask: none; mask: none; clip-path: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s var(--ease);
}
html body .caixa-marcar.interruptor input[role="switch"]:not(:checked):not(:disabled):not(#_n):not(#_m):hover {
  background: color-mix(in srgb, var(--texto) 30%, var(--borda-forte));
}
html body .caixa-marcar.interruptor input[role="switch"]:checked:not(#_n):not(#_m) { background: var(--marca); }
html body .caixa-marcar.interruptor input[role="switch"]:checked:not(#_n):not(#_m)::before { transform: translateX(18px); }
html body .caixa-marcar.interruptor input[role="switch"]:focus-visible:not(#_n):not(#_m) { outline: none; box-shadow: var(--foco); }
html body .caixa-marcar.interruptor:has(input:disabled) { cursor: not-allowed; color: var(--suave); }
@media (pointer: coarse) { html body .caixa-marcar.interruptor { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  html body .caixa-marcar.interruptor input[role="switch"]:not(#_n):not(#_m),
  html body .caixa-marcar.interruptor input[role="switch"]:not(#_n):not(#_m)::before,
  html body .menu-conta .alternar-tema .tema-chave, html body .menu-conta .alternar-tema .tema-chave::after { transition: none; }
}
.escopos-hubspot { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.escopos-hubspot code { padding: 3px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo-2); font-size: 12.5px; }
/* no toque (tablet e celular), o painel com alvos de 40 a 44 px e campos de 16 px: abaixo disso o iPhone e o iPad dão
   zoom ao tocar no campo, e a busca, as abas da empresa, os filtros e os botões pequenos ficavam com 30 a 38 px */
@media (pointer: coarse) {
  body.admin .painel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
  body.admin .busca-admin, body.admin .aba-empresa, body.admin .abas-admin .aba { min-height: 44px; }
  body.admin .chip-admin, body.admin .voltar-admin, body.admin .botao-editar { min-height: 40px; }
  html body.admin .botao.pequeno { min-height: 40px; }
  body.admin .painel details > summary { padding-block: 10px; }
  body.admin .painel a.nome-pessoa { display: inline-flex; align-items: center; min-height: 40px; }
  body.admin .item-ia > .caixa-marcar { min-width: 44px; min-height: 44px; justify-content: center; margin: -10px; }
}
/* o nome da pessoa no título de cada grupo do Agendado leva à ficha dela: alvo de verdade (tinha 18 px de altura) */
.titulo-agendado a { display: inline-flex; align-items: center; min-height: 28px; }
@media (pointer: coarse) { .titulo-agendado a { min-height: 40px; } }