/* Estilo do app da Sala (a página do dono). Os tokens, os botões, os campos, o estado e a etiqueta moram no
   base.css, que toda página carrega; aqui fica só o que é do app. Primeiro o celular (uma tela por vez, com as
   abas embaixo); de 900 px para cima, o trilho dos lugares, a lista de conversas e o lugar aberto lado a lado.
   Cor de agente: --ag1 a --ag11 no base.css (rh.py dá a primeira livre a quem entra). */

/* ---------- base do app ---------- */
html, body { height: 100%; overflow: hidden; }
[data-icone] { display: contents; }
#codigo { font-family: var(--mono); }

/* ---------- botões só do app ---------- */
.icone-botao { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-m); color: var(--tinta-2); flex: none; }
.icone-botao.com-rotulo { width: auto; gap: 7px; padding: 0 12px; grid-auto-flow: column; font-size: var(--t-ui); font-weight: 500; }
.icone-botao.com-rotulo svg.i { width: 18px; height: 18px; }
.icone-botao.com-rotulo .contador { position: static; border: 0; margin-left: -2px; }
.contador { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pilula); background: var(--atencao); color: var(--sobre-cor); font-size: var(--t-rotulo); font-weight: 700; line-height: 14px; text-align: center; border: 2px solid var(--painel); }
@media (hover: hover) { .icone-botao:hover { background: var(--elevado); color: var(--tinta); } }
.icone-botao:active { transform: translateY(1px); }

/* ---------- avatares ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--sobre-cor); font-weight: 600; font-size: 15px; flex: none; position: relative; user-select: none; }
.avatar.p { width: 32px; height: 32px; font-size: 13px; }
.avatar.pp { width: 22px; height: 22px; font-size: 10.5px; }
.avatar.quadrado { border-radius: var(--r-m); }
.avatar.p.quadrado { border-radius: var(--r-m); }
.avatar.sala { background: url("/icone.svg") center / cover no-repeat; }
.avatar.neutro { background: var(--elevado); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.avatar.neutro svg.i { width: 18px; height: 18px; }
.avatar .falando { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--marca); border: 2px solid var(--painel); animation: pulsa 1.6s ease-in-out infinite; }


/* ---------- entrada ---------- */
#entrada { height: 100%; overflow-y: auto; }

/* ---------- casca do app ---------- */
/* No computador: o trilho dos lugares, a lista de conversas (só em Conversas) e o lugar aberto, lado a lado. No celular:
   uma tela por vez, com os lugares nas abas de baixo; a conversa aberta cobre as abas e volta pelo ‹ ou pelo voltar
   do aparelho. Os cinco lugares (Trabalhos, Agenda, Time, Memória, Ajustes) têm a classe .lugar e as mesmas regras:
   até 29/09 cada um repetia as suas, e três delas, escritas depois do bloco do celular, abriam uma faixa vazia de
   28 px à direita em todo celular. */
#app { position: fixed; left: 0; right: 0; top: var(--topo-vv, 0px); height: var(--altura, 100dvh); display: grid; grid-template-columns: 76px 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.trilho { grid-column: 1; grid-row: 1; }
.lista { grid-column: 2; grid-row: 1; }
.conversa { grid-column: 3; grid-row: 1; }
.lugar { grid-column: 2 / 4; grid-row: 1; display: none; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo); }
#app[data-vista="hoje"] .hoje-pg, #app[data-vista="trabalhos"] .trabalhos, #app[data-vista="time"] .time-rh, #app[data-vista="agenda"] .agenda-pg,
#app[data-vista="memoria"] .memoria-pg, #app[data-vista="ajustes"] .ajustes { display: flex; }
#app:not([data-vista="conversa"]) .lista, #app:not([data-vista="conversa"]) .conversa { display: none; }

/* o trilho: os lugares, sempre à vista. No celular vira as abas de baixo */
.trilho { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(12px + var(--topo-seguro)) 6px 14px; background: var(--painel); border-right: 1px solid var(--linha); min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.trilho-marca { width: 34px; height: 34px; margin-bottom: 14px; border-radius: var(--r-m); background: url("/icone.svg") center / contain no-repeat; flex: none; }
.trilho .fim { margin-top: auto; }
.lugar-bt { position: relative; display: grid; justify-items: center; gap: 3px; width: 100%; max-width: 64px; padding: 5px 0 6px; border: 0; background: none; color: var(--apagado); font-size: var(--t-rotulo); font-weight: 500; line-height: 1.2; }
.lugar-bt .ic { display: grid; place-items: center; width: 44px; height: 30px; border-radius: var(--r-pilula); transition: background .15s; }
.lugar-bt svg.i { width: 20px; height: 20px; }
.lugar-bt.sel { color: var(--marca-tinta); font-weight: 600; }
.lugar-bt.sel .ic { background: var(--marca-suave); }
@media (hover: hover) { .lugar-bt:not(.sel):hover .ic { background: var(--elevado); } .lugar-bt:not(.sel):hover { color: var(--tinta-2); } }
.lugar-bt .conta-l { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pilula); background: var(--atencao); color: var(--sobre-cor); font-size: var(--t-rotulo); font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--painel); }
.lugar-bt .conta-l.andando { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 5px; left: calc(50% + 11px); background: var(--marca); animation: pulsa 1.4s ease-in-out infinite; }
.lugar-bt .conta-l.novo { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 5px; left: calc(50% + 11px); background: var(--marca); }
.lugar-bt[data-lugar="mais"] { display: none; }

/* lista de conversas */
.lista { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border-right: 1px solid var(--linha); }
.lista-topo { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px 6px 18px; padding-top: calc(10px + var(--topo-seguro)); }
.lista-topo h1 { margin: 0; flex: 1; font: italic 400 var(--t-titulo)/1.2 var(--serifa); }
/* a missão aberta (missoes.py, 30/09): o seletor no topo da lista de conversas */
.missao-topo { padding: 15px 12px 0 12px; padding-top: calc(15px + var(--topo-seguro)); }  /* na altura da missão no topo dos outros lugares (06/10) */
.missao-topo + .lista-topo { padding-top: 4px; min-height: 48px; }
.missao-menu { display: block; }
.missao-bt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border-radius: var(--r-m); background: var(--elevado); cursor: pointer; }
.missao-bt b { flex: 1; min-width: 0; font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.missao-bt .contador { position: static; border: 0; line-height: 18px; }
.missao-bt .seta-m { display: grid; color: var(--apagado); }
.missao-bt .seta-m svg { width: 16px; height: 16px; }
@media (hover: hover) { .missao-bt:hover { box-shadow: inset 0 0 0 1px var(--linha-forte); } }
.missao-menu .menu-lista { min-width: 100%; width: max-content; max-width: min(420px, calc(100vw - 24px)); gap: 2px; padding: 8px; }
.missao-menu .menu-lista .rotulo { margin: 6px 10px 4px; }
.missao-menu .menu-lista hr { margin: 8px 4px; border: 0; border-top: 1px solid var(--linha); }
.missao-menu .menu-lista button { padding: 9px 12px; }
.missao-menu .menu-lista .missao-item { position: relative; padding-right: 40px; }
.missao-item > span { overflow-wrap: anywhere; }
.missao-item[aria-current] { background: var(--marca-suave); }
.missao-certo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; color: var(--marca-tinta); }
.missao-certo svg { width: 18px; height: 18px; }
.missao-menu .menu-lista .missao-nova { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.missao-nova svg { width: 16px; height: 16px; }
/* Trabalhos → Projetos (02/10): cada projeto com as tarefas dele */
.lista-projetos { display: grid; gap: 12px; }
.projeto-p { display: grid; gap: 8px; }
.projeto-p-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.projeto-p-texto { min-width: 0; flex: 1 1 260px; }
.projeto-p h3 { margin: 0; font-size: var(--t-corpo); font-weight: 600; }
.projeto-p-obj { margin: 4px 0 0; color: var(--tinta-2); }
/* o ⋯ do projeto (concluir, arquivar, excluir) na ponta direita: o menu abre para dentro do cartão */
.projeto-p > .acoes-t > details.menu { margin-left: auto; }
.guardado-p { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.tarefas-p { list-style: none; margin: 0; padding: 0; display: grid; }
.tarefa-p { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 0; border: 0;
  border-top: 1px solid var(--linha); background: none; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.tarefa-p-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .tarefa-p:hover .tarefa-p-nome { text-decoration: underline; } }
.feitas-p > summary { cursor: pointer; color: var(--tinta-2); font-size: var(--t-ui); padding: 4px 0; }
.proposta-p { display: grid; gap: 10px; border-color: var(--marca); }
.proposta-p h3 { margin: 0; font-size: var(--t-corpo); }
.grupo-proposta { display: grid; gap: 2px; }
.custo-p { margin: 0; font-size: var(--t-meta); color: var(--tinta-2); }
/* o painel de um chamado do zelador (02/10) */
.chamado-pedido { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); }
.chamado-linha { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--linha); }
.conserto { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-m); }
.conserto p { margin: 0 0 6px; }
.conserto-diff { max-height: 320px; overflow: auto; margin: 6px 0; padding: 8px; border-radius: var(--r-p); background: var(--elevado); font-size: var(--t-meta); white-space: pre; }
/* o quadro no nível de projeto (02/10): a chave Ver Tarefas | Projetos e o cartão do projeto */
.nivel-quadro { align-items: center; }
.nivel-quadro .rotulo { padding: 0 6px 0 8px; }
.progresso-p { display: block; height: 4px; border-radius: var(--r-pilula); background: var(--linha); overflow: hidden; }
.progresso-p b { display: block; height: 100%; background: var(--marca); }
/* no topo dos outros lugares: o mesmo seletor, mais estreito, com o menu abrindo para a esquerda */
.missao-no-topo .missao-bt { max-width: 220px; }
.missao-no-topo .menu-lista { left: auto; right: 0; min-width: 260px; }
@media (max-width: 700px) { .missao-no-topo .missao-bt .rotulo { display: none; } .missao-no-topo .missao-bt { max-width: 140px; } }
.arq-lista { display: grid; gap: 6px; margin-bottom: 12px; }
.arq-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); background: var(--elevado); }
.arq-item > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.arq-item small { font-size: var(--t-meta); color: var(--apagado); }
.tz-memorias { display: grid; gap: 6px; max-height: min(44vh, 380px); overflow-y: auto; padding: 2px; }
.lista-itens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 16px; }
.lista-itens .rotulo { display: flex; align-items: center; padding: 12px 6px 4px; }
.item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; width: 100%; min-height: 54px; padding: 7px 8px; border: 0; background: none; border-radius: var(--r-m); text-align: left; }
.item > .avatar { width: 36px; height: 36px; font-size: 14px; }
.item.ativo { background: var(--marca-suave); }
.item:active { background: var(--elevado); }
@media (hover: hover) { .item:not(.ativo):hover { background: var(--elevado); } }
.item-meio { min-width: 0; display: grid; gap: 1px; }
.item-nome { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-weight: 600; font-size: var(--t-corpo); line-height: 1.3; }
.item-nome > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }  /* nome longo não invade o horário (24/09) */
.item-nome small { font-size: var(--t-meta); font-weight: 400; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { display: block; font-size: var(--t-ui); line-height: 1.35; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.novo .item-sub { color: var(--tinta-2); }
.item-sub .digitando { color: var(--marca-tinta); font-weight: 500; }
.item-lado { align-self: start; padding-top: 2px; display: grid; justify-items: end; gap: 5px; }
.item-lado time { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; }
.item.novo .item-lado time { color: var(--marca-tinta); font-weight: 600; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--marca); }
.selo { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pilula); background: var(--atencao); color: var(--sobre-cor); font-size: var(--t-rotulo); font-weight: 700; line-height: 20px; text-align: center; }

.barra { display: block; height: 5px; border-radius: var(--r-pilula); background: var(--linha); overflow: hidden; }
.barra > b { display: block; height: 100%; width: 0; background: var(--marca); border-radius: var(--r-pilula); transition: width .4s ease; }
.barra.alta > b { background: var(--atencao); }
.barra.cheia > b { background: var(--perigo); }

/* conversa */
.conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo); }
.conversa-topo { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px 10px 20px; padding-top: calc(10px + var(--topo-seguro)); background: var(--painel); border-bottom: 1px solid var(--linha); }
.conversa-topo .voltar { display: none; }
.topo-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.botao-voz svg.i { width: 16px; height: 16px; }
.topo-texto { flex: 1; min-width: 0; }
.topo-texto h1 { margin: 0; font: italic 400 var(--t-titulo)/1.2 var(--serifa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-texto p { margin: 0; font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-pausa { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--perigo); color: var(--sobre-cor); font-size: var(--t-ui); }
.faixa-pausa .botao { background: var(--painel); color: var(--perigo); border-color: var(--painel); }
.faixa-reuniao { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 20px; background: var(--elevado); border-bottom: 1px solid var(--linha); }
.ao-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--perigo); flex: none; animation: pulsa 1.8s ease-in-out infinite; }
.reuniao-texto { flex: 1; min-width: 0; display: grid; }
.reuniao-texto strong { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-sec); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reuniao-texto span { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reuniao-texto a { color: var(--marca-tinta); }

/* mensagens */
.area-mensagens { position: relative; flex: 1; min-height: 0; }
.mensagens { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; }
.anteriores { display: flex; justify-content: center; padding: 14px 0 0; }
.fio { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.dia { align-self: center; margin: 18px 0 4px; padding: 2px 11px; border-radius: var(--r-pilula); background: var(--painel); box-shadow: 0 0 0 1px var(--linha); color: var(--apagado); font-size: var(--t-meta); font-weight: 600; }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; margin-top: 16px; }
.msg.continua { margin-top: 6px; }
.msg-av { grid-row: 1 / span 4; padding-top: 2px; }
.msg > :not(.msg-av) { grid-column: 2; }
.msg-quem { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 1px; }
.msg-quem b { font-weight: 600; font-size: var(--t-corpo); white-space: nowrap; }
.msg-quem span { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-quem time { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; }
.msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.msg-texto a:not(.nota) { color: var(--marca-tinta); text-underline-offset: 2px; }
.msg.eu { display: flex; justify-content: flex-end; }
.bolha { max-width: min(82%, 580px); min-width: 0; padding: 8px 13px 5px; background: var(--eu-fundo); border: 1px solid var(--eu-borda); border-radius: 18px 18px 6px 18px; }
.msg.eu.continua .bolha { border-top-right-radius: 6px; }
.bolha time { display: block; margin-top: 2px; text-align: right; font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); }
.sistema { align-self: center; max-width: min(94%, 580px); margin: 14px 0 2px; padding: 8px 13px; border-radius: var(--r-m); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta-2); font-size: var(--t-ui); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sistema .hora { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); margin-right: 8px; }
/* aviso de bastidor (ferramenta criada, trabalho começou): uma linha discreta; tocar abre o texto inteiro */
.sistema.interino { margin: 8px 0 0; padding: 0; background: none; box-shadow: none; color: var(--apagado); font-size: var(--t-meta); white-space: normal; width: min(94%, 640px); max-width: none; }
.sistema.interino > summary .hora { flex: none; margin-right: 4px; }
.sistema.interino + .sistema.interino { margin-top: 1px; }
.sistema.interino > summary { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 10px; border-radius: var(--r-pilula); cursor: pointer; list-style: none; }
.sistema.interino > summary::-webkit-details-marker { display: none; }
.sistema.interino .resumo-interino { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sistema.interino > summary svg.i { width: 13px; height: 13px; transition: transform .2s ease; }
.sistema.interino[open] > summary svg.i { transform: rotate(90deg); }
.sistema.interino[open] .resumo-interino { color: var(--tinta-2); }
.sistema.interino .interino-texto { margin: 4px 0 6px; padding: 8px 13px; border-radius: var(--r-m); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta-2); font-size: var(--t-ui); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (hover: hover) { .sistema.interino > summary:hover { background: var(--elevado); color: var(--tinta-2); } }
.nota { border: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: var(--r-p); background: var(--marca-suave); color: var(--marca-tinta); font-weight: 500; text-decoration: none; font-size: .95em; }
.nota::before { content: "↗"; font-size: .8em; }
.mencao { font-weight: 600; }
.vazio { max-width: 380px; margin: 14vh auto 0; text-align: center; color: var(--apagado); display: grid; gap: 6px; }
.vazio strong { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); color: var(--tinta); }

.anexos { display: grid; gap: 8px; margin-top: 8px; justify-items: start; min-width: 0; }
.anexo-img img { display: block; max-width: min(320px, 100%); max-height: 380px; border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--linha); }
.anexo-audio { width: min(300px, 100%); height: 40px; }
.arquivos { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.arquivo { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 40px; padding: 5px 12px 5px 5px; border: 1px solid var(--linha-forte); border-radius: var(--r-m); background: var(--painel); text-decoration: none; font-size: var(--t-ui); }
.arquivo .ext { flex: none; min-width: 38px; padding: 5px 6px; border-radius: var(--r-p); background: var(--elevado); color: var(--tinta-2); font: 600 10px/1.2 var(--mono); letter-spacing: .04em; text-align: center; }
.arquivo .ext[data-ext="PDF"] { background: var(--perigo-suave); color: var(--perigo); }
.arquivo .ext[data-ext="PPTX"], .arquivo .ext[data-ext="PPT"] { background: var(--atencao-suave); color: var(--atencao); }
.arquivo .ext[data-ext="MD"], .arquivo .ext[data-ext="TXT"] { background: var(--marca-suave); color: var(--marca-tinta); }
.arquivo .nome { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arquivo .ext[data-ext="HTML"], .arquivo .ext[data-ext="HTM"] { background: var(--marca-suave); color: var(--marca-tinta); }
.arquivo .abrir { flex: none; color: var(--marca-tinta); font-size: var(--t-meta); font-weight: 600; }
.arquivo-baixar { align-self: center; padding: 4px 6px; color: var(--tinta-2); font-size: var(--t-meta); }
@media (hover: hover) { .arquivo:hover { border-color: var(--marca); } .arquivo-baixar:hover { color: var(--marca-tinta); } }
.lido { width: 100%; max-width: 640px; }
.lido summary { cursor: pointer; font-size: var(--t-meta); color: var(--apagado); padding: 2px 0; }
.lido div { margin-top: 6px; white-space: pre-wrap; font-size: var(--t-ui); line-height: 1.5; background: var(--elevado); border: 1px solid var(--linha); border-radius: var(--r-m); padding: 8px 11px; max-height: 280px; overflow: auto; }
.buscas { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-meta); color: var(--apagado); }
.buscas svg.i { width: 14px; height: 14px; margin-top: 2px; }

.pensando { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; font-size: var(--t-ui); color: var(--apagado); }
.pensando:not(:empty) { padding: 16px 0 2px; }

.ir-ao-fim { position: absolute; right: 18px; bottom: 12px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linha-forte); background: var(--painel); color: var(--tinta-2); box-shadow: var(--sombra); z-index: 2; }
.ir-ao-fim.novas::after { content: ""; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--marca); border: 2px solid var(--painel); }

/* responder a uma mensagem */
.msg, .sistema { position: relative; touch-action: pan-y pinch-zoom; }
/* fios (fios.py, 30/09): cada tarefa é um cartão na conversa, que abre o fio dela */
/* Versões da tarefa (01/10): uma linha por volta; a de agora aberta */
.versoes-bloco { display: grid; gap: 6px; }
.versao-t { border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); }
.versao-t[open] { border-color: var(--linha-forte); }
.versao-t > summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.versao-t > summary::-webkit-details-marker { display: none; }
.versao-t > summary > svg { width: 16px; height: 16px; color: var(--apagado); transition: transform .15s; flex: none; }
.versao-t[open] > summary > svg { transform: rotate(90deg); }
.versao-n { flex: none; min-width: 30px; font-size: var(--t-ui); font-weight: 600; color: var(--tinta-2); }
.versao-meio { flex: 1; min-width: 0; display: grid; gap: 1px; }
.versao-quando { font-size: var(--t-ui); color: var(--tinta); }
.versao-situacao { font-size: var(--t-meta); color: var(--apagado); }
.versao-corpo { padding: 2px 14px 14px 54px; display: grid; gap: 8px; }
.versao-sub { margin: 6px 0 0; }
.versao-avisos { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: var(--t-meta); color: var(--tinta-2); }
@media (max-width: 599px) { .versao-corpo { padding-left: 14px; } .versao-t > summary { flex-wrap: wrap; } }
.fio-cartao { align-self: stretch; margin: 10px 0 2px; }
.fio-abre { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); color: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .fio-abre:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-leve); } }
.fio-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--elevado); color: var(--tinta-2); }
.fio-ic .avatar { width: 32px; height: 32px; font-size: var(--t-meta); }
.fio-ic svg { width: 18px; height: 18px; }
.fio-meio { min-width: 0; display: grid; gap: 2px; }
.fio-meio b { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fio-ultimo { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fio-lado { display: grid; justify-items: end; gap: 4px; }
.fio-lado small { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; }
.fio-bloco { display: flex; flex-direction: column; }
.fio-rodape { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 6px 48px; padding: 4px 10px; border: 0; border-radius: var(--r-pilula); background: var(--elevado); color: var(--tinta-2); font-size: var(--t-meta); cursor: pointer; max-width: calc(100% - 48px); }
.fio-rodape span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.fio-rodape small { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; }
.fio-rodape svg { width: 14px; height: 14px; flex: none; }
.fio-corpo { display: flex; flex-direction: column; gap: 4px; }
.fio-corpo > .msg { min-width: 0; max-width: 100%; }
.fio-corpo > .dia, .fio-corpo > .sistema { align-self: center; }
.fio-escrever { display: flex; gap: 10px; align-items: flex-end; padding: 12px 22px 18px; border-top: 1px solid var(--linha); }
.fio-escrever textarea { flex: 1; resize: vertical; min-height: 44px; }
@media (max-width: 599px) { .fio-abre { grid-template-columns: 28px minmax(0, 1fr); } .fio-lado { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; } .fio-escrever { padding: 10px 14px 14px; } .fio-rodape { margin-left: 0; max-width: 100%; } }
.bolha { position: relative; }
.acoes-msg { position: absolute; top: -10px; right: -4px; z-index: 1; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--linha-forte); border-radius: var(--r-m); background: var(--painel); box-shadow: var(--sombra-leve); opacity: 0; pointer-events: none; transition: opacity .12s; }
.acoes-msg button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r-m); background: none; color: var(--apagado); }
.acoes-msg svg.i { width: 17px; height: 17px; }
.bolha .acoes-msg { top: 50%; right: auto; left: -112px; transform: translateY(-50%); }
.sistema .acoes-msg { top: 50%; right: -112px; transform: translateY(-50%); }
.bolha .acoes-msg.um { left: -44px; }
.sistema .acoes-msg.um { right: -44px; }
@media (hover: hover) {
  .msg:hover .acoes-msg, .sistema:hover .acoes-msg, .acoes-msg:focus-within { opacity: 1; pointer-events: auto; }
  .acoes-msg button:hover { background: var(--elevado); color: var(--tinta); }
}
@media (hover: none) {
  .acoes-msg { display: none; }
  .msg, .sistema { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }  /* toque longo = menu (com Copiar) */
}
.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; white-space: normal; }
.reacoes:empty { display: none; }
.msg.eu { flex-direction: column; align-items: flex-end; }
.msg.eu .reacoes { position: relative; margin: -8px 10px 0 0; }
.reacao { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); font-size: var(--t-ui); line-height: 1; box-shadow: var(--sombra-leve); }
.reacao span { font-size: var(--t-rotulo); font-weight: 600; color: var(--tinta-2); }
.reacao.minha { border-color: color-mix(in srgb, var(--marca) 55%, var(--linha-forte)); background: var(--marca-suave); }
.seletor { position: fixed; z-index: 35; display: grid; gap: 6px; padding: 6px; border: 1px solid var(--linha-forte); border-radius: var(--r-g); background: var(--painel); box-shadow: var(--sombra); animation: surge-seletor .14s ease; }
@keyframes surge-seletor { from { opacity: 0; transform: scale(.96); } }
.seletor-emojis { display: flex; flex-wrap: wrap; gap: 2px; max-width: min(490px, calc(100vw - 16px)); }
.seletor-emojis button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--r-m); background: none; font-size: 21px; }
.seletor-emojis button.minha { background: var(--marca-suave); }
@media (hover: hover) { .seletor-emojis button:hover { background: var(--elevado); transform: scale(1.12); } }
.seletor-acoes { display: flex; gap: 4px; border-top: 1px solid var(--linha); padding-top: 6px; }
.seletor-acoes button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 0; border-radius: var(--r-m); background: var(--elevado); font-size: var(--t-ui); }
.seletor-acoes svg.i { width: 17px; height: 17px; }
@media (max-width: 599px) { .seletor-emojis { max-width: 244px; } }
.vai-responder::before { content: "↩"; position: absolute; left: -38px; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; border-radius: 50%; background: var(--marca-suave); color: var(--marca-tinta); font-size: 16px; }
.realce { animation: realce 1.8s ease; border-radius: var(--r-m); }
@keyframes realce { 0%, 45% { background: var(--marca-suave); box-shadow: 0 0 0 6px var(--marca-suave); } }
.citacao { --cor: var(--marca); justify-self: start; display: grid; gap: 1px; width: 100%; max-width: 520px; margin: 3px 0 5px; padding: 6px 10px; border: 0; border-left: 3px solid var(--cor); border-radius: var(--r-m); background: color-mix(in srgb, var(--cor) 8%, var(--painel)); text-align: left; font-size: var(--t-ui); line-height: 1.4; color: var(--tinta-2); }
.citacao b { font-size: var(--t-meta); font-weight: 600; color: var(--cor); }
.citacao span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bolha .citacao { margin-top: 2px; background: color-mix(in srgb, var(--cor) 7%, var(--painel)); }
@media (hover: hover) { .citacao:hover { background: color-mix(in srgb, var(--cor) 14%, var(--painel)); } }
.respondendo { --cor: var(--marca); max-width: 760px; margin: 0 auto 6px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; background: var(--painel); border: 1px solid var(--linha-forte); border-left: 3px solid var(--cor); border-radius: var(--r-g); box-shadow: var(--sombra-leve); }
.respondendo > div { flex: 1; min-width: 0; display: grid; font-size: var(--t-ui); line-height: 1.35; }
.respondendo b { font-size: var(--t-meta); font-weight: 600; color: var(--cor); }
.respondendo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); }
.respondendo .icone-botao { width: 34px; height: 34px; }
.enviando { max-width: 760px; margin: 0 auto 6px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-m); background: var(--elevado); font-size: var(--t-ui); color: var(--tinta-2); }
.enviando b { font-weight: 600; }
.bandeja { max-width: 760px; margin: 0 auto 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.bandeja .item { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 4px 4px 4px 5px; border: 1px solid var(--linha-forte); border-radius: var(--r-m); background: var(--painel); font-size: var(--t-ui); }
.bandeja .item.subindo { opacity: .7; }
.bandeja .ext { flex: none; min-width: 34px; padding: 4px 5px; border-radius: var(--r-p); background: var(--elevado); color: var(--tinta-2); font: 600 10px/1.2 var(--mono); text-align: center; }
.bandeja .nome { min-width: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeja .icone-botao { width: 26px; height: 26px; border-radius: 50%; color: var(--apagado); font-size: var(--t-sec); line-height: 1; }
.conversa { position: relative; }
.conversa.soltando::after { content: "Solte para enviar à conversa"; position: absolute; inset: 8px; z-index: 20; display: grid; place-items: center; border: 2px dashed var(--marca); border-radius: var(--r-gg); background: color-mix(in srgb, var(--marca-suave) 85%, transparent); color: var(--marca-tinta); font-weight: 600; font-size: var(--t-sec); pointer-events: none; }

/* escrever */
.compositor { padding: 6px 20px calc(14px + var(--base-segura)); }
.caixa { position: relative; max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 4px; padding: 5px; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--r-gg); box-shadow: var(--sombra-leve); }
.caixa:focus-within { border-color: var(--marca); }
.caixa textarea { box-shadow: none; flex: 1; min-width: 0; min-height: 38px; max-height: 40vh; padding: 8px 0; border: 0; outline: 0; resize: none; background: transparent; line-height: 1.45; }
.enviar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--marca); color: var(--marca-texto); transition: background .15s, color .15s; }
.enviar svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
.enviar:disabled { background: var(--elevado); color: var(--apagado); cursor: default; }
.caixa .anexar { width: 38px; height: 38px; border-radius: 50%; color: var(--apagado); }
.caixa .anexar svg.i { width: 19px; height: 19px; }
.caixa.gravando-ativo > :not(.gravando):not(.sugestoes) { display: none !important; }
.gravando { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 38px; }
.gravando .icone-botao { width: 38px; height: 38px; border-radius: 50%; color: var(--perigo); }
.gravando-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--perigo); animation: pulsa 1.2s ease-in-out infinite; }
.gravando-tempo { font-family: var(--mono); font-size: var(--t-ui); font-variant-numeric: tabular-nums; }
.gravando-dica { flex: 1; font-size: var(--t-ui); color: var(--apagado); }
.so-leitura { padding: 12px 20px calc(14px + var(--base-segura)); border-top: 1px solid var(--linha); background: var(--painel); text-align: center; font-size: var(--t-ui); color: var(--apagado); }
.sugestoes { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(420px, 100%); max-height: min(50vh, 380px); overflow-y: auto; display: grid; gap: 2px; padding: 6px; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--r-g); box-shadow: var(--sombra); z-index: 5; }
.sugestoes button { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--r-m); background: none; text-align: left; }
.sugestoes button.sel { background: var(--marca-suave); }
.sugestoes .cmd { font-family: var(--mono); font-size: var(--t-ui); font-weight: 500; }
.sugestoes small { grid-column: 2; font-size: var(--t-meta); color: var(--apagado); }
.sugestoes .avatar { grid-row: span 2; }

/* ---------- a sala: estado, pausa, o que espera você, reunião e gasto. Abre do botão de estado no topo de cada
   tela (no computador, um balão sob o botão; no celular, uma folha que sobe). Até 29/09 era uma gaveta lateral, o
   "Painel", que repetia metade dos Ajustes ---------- */
.veu { position: fixed; inset: 0; z-index: 31; background: transparent; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
body.painel-aberto .veu { opacity: 1; pointer-events: auto; }
.painel { position: fixed; top: calc(var(--topo-vv, 0px) + var(--topo-seguro) + 58px); right: 14px; z-index: 32;  /* acima do painel ao lado (30): "A sala" abre por cima dele */ width: min(380px, calc(100vw - 28px)); max-height: calc(var(--altura, 100dvh) - 90px); display: flex; flex-direction: column; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-g); box-shadow: var(--sombra); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
body.painel-aberto .painel { opacity: 1; transform: none; visibility: visible; transition: opacity .16s ease, transform .16s ease; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px 18px; }
.painel-topo h2 { margin: 0; font: italic 400 var(--t-titulo)/1.2 var(--serifa); }
.painel-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 16px; }
@media (max-width: 899px) {
  .veu { background: var(--veu); }
  .painel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 86%; border-radius: var(--r-gg) var(--r-gg) 0 0; border-width: 1px 0 0; transform: translateY(100%); opacity: 1; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
  body.painel-aberto .painel { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  .painel-corpo { padding-bottom: calc(18px + var(--base-segura)); }
}
/* o botão de estado, no topo de cada tela: ponto e palavra, o gasto do dia e o que espera você */
.estado-sala { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); color: var(--tinta-2); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; flex: none; }
.estado-sala > i { width: 8px; height: 8px; border-radius: 50%; background: var(--marca); flex: none; }
.estado-sala.pausada > i { background: var(--perigo); border-radius: var(--r-p); width: 8px; height: 8px; }
.estado-sala.pausada { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, var(--linha)); }
.estado-sala.sem-conexao > i { background: var(--apagado); }
/* uma fonte só no botão (o gasto em mono, com o "hoje" junto, destoava): o número alinha pelos algarismos da Plex Sans,
   e um fio separa o estado do gasto */
.estado-sala > span:first-of-type { color: var(--tinta); font-weight: 600; }
.estado-sala.pausada > span:first-of-type { color: var(--perigo); }
.estado-sala .gasto-sala { padding-left: 8px; border-left: 1px solid var(--linha-forte); color: var(--apagado); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.estado-sala .contador { position: static; min-width: 18px; height: 18px; padding: 0 5px; border: 0; line-height: 18px; font-size: var(--t-rotulo); }
@media (hover: hover) { .estado-sala:hover { background: var(--elevado); } }
@media (max-width: 1100px) { .estado-sala .gasto-sala { display: none; } }
.sec { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.sec:last-child { border-bottom: 0; }
.sec h3 { margin: 0; }
.sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; cursor: pointer; list-style: none; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary .resumo { font-size: var(--t-meta); color: var(--apagado); margin-left: auto; }
.sec > summary svg.i { width: 16px; height: 16px; color: var(--apagado); transition: transform .2s ease; }
.sec[open] > summary svg.i { transform: rotate(90deg); }
details.sec[open] { gap: 12px; }
.linha-estado { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sec .tema { margin: 0; font-family: var(--serifa); font-style: italic; font-size: var(--t-sec); line-height: 1.3; }
.cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cifra strong { font-family: var(--mono); font-size: var(--t-grande); font-weight: 500; letter-spacing: -.02em; }
.cifra span { color: var(--apagado); font-size: var(--t-ui); }
.pares { display: grid; gap: 6px; margin: 0; }
.pares div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--t-ui); }
.pares dt { color: var(--tinta-2); }
.pares dd { margin: 0; font-family: var(--mono); font-size: var(--t-ui); color: var(--tinta); text-align: right; }
.pares dd small { color: var(--apagado); }
.gastos { display: grid; gap: 12px; margin-top: 4px; }
.gasto { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 10px; align-items: center; font-size: var(--t-ui); }
.gasto .avatar { grid-row: span 2; }
.gasto .barra { grid-column: 2 / 4; height: 4px; }
.gasto .valor { font-family: var(--mono); font-size: var(--t-meta); color: var(--tinta-2); }
.ferramenta { display: grid; gap: 7px; padding: 12px; border-radius: var(--r-m); background: var(--atencao-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 30%, transparent); }
.ferramenta .topo-f { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ferramenta b { font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; overflow-wrap: anywhere; }
.ferramenta .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.linha-simples { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; min-width: 0; font-size: var(--t-ui); }
.linha-simples > span { min-width: 0; flex: 1 1 auto; }  /* a linha encolhe: no celular, a de Pessoas estourava 83 px (04/10) */
.linha-simples small { display: block; font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-simples .lado { display: flex; gap: 10px; align-items: center; flex: none; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numeros div { display: grid; padding: 9px 11px; border-radius: var(--r-m); background: var(--elevado); }
.numeros strong { font-family: var(--mono); font-size: var(--t-titulo); font-weight: 500; }
.numeros span { font-size: var(--t-meta); color: var(--apagado); }
.atalhos { display: grid; gap: 6px; }
.atalhos > button { border: 0; width: 100%; font: inherit; color: inherit; display: flex; justify-content: space-between; gap: 10px; min-height: 42px; align-items: center; padding: 0 12px; border-radius: var(--r-m); background: var(--elevado); text-decoration: none; font-size: var(--t-ui); }
.atalhos > button span:first-child { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.atalhos > button span:first-child svg.i { width: 18px; height: 18px; color: var(--apagado); }
.atalhos > button span:last-child { min-width: 0; font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .atalhos > button:hover { box-shadow: inset 0 0 0 1px var(--marca); } }

/* ---------- rodando agora: tudo o que acontece fora da vista, sempre à mostra ---------- */
.rodando { display: grid; gap: 1px; margin: 2px 12px 6px; padding: 7px 8px; border-radius: var(--r-g); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); }
.rodando.ativo { background: var(--marca-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 25%, transparent); }
.rodando-topo { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 1px 4px; border: 0; background: none; font-size: var(--t-meta); color: var(--apagado); text-align: left; cursor: pointer; }
.rodando-topo > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.rodando-topo .caras-rodando { display: inline-flex; }
.rodando-topo .caras-rodando .avatar + .avatar { margin-left: -6px; }
.rodando-topo svg { width: 14px; height: 14px; flex: none; }
.rodando.fechado { padding: 3px 8px; }
.rodando:not(.fechado) .rodando-topo svg { transform: rotate(180deg); }
/* a entrega é a imagem (04/10): a capa no topo do cartão, sem borda própria; as outras imagens em fila */
.entrega-c.com-capa { padding-top: 0; overflow: hidden; }
.entrega-capa { display: block; width: calc(100% + 28px); margin: 0 -14px; padding: 0; border: 0; background: var(--elevado); cursor: zoom-in; }
.entrega-capa img { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: top; }
.entrega-minis { display: flex; gap: 8px; overflow-x: auto; }
.entrega-minis button { flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--linha); border-radius: var(--r-m); overflow: hidden; background: var(--elevado); cursor: zoom-in; }
.entrega-minis img { width: 100%; height: 100%; object-fit: cover; }
.link-linha { display: grid; gap: 2px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--tinta); font: inherit; }
.link-linha small { color: var(--apagado); font-size: var(--t-meta); }
.barra-decisao { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; margin: 8px -16px -16px; padding: 10px 16px calc(10px + var(--base-segura)); border-top: 1px solid var(--linha); background: var(--painel); }
.barra-decisao .botao { flex: 1 1 0; justify-content: center; min-height: 44px; }
.hoje-calmo { margin: 8px 0 0; }
.hoje-esperando { color: var(--atencao); font-weight: 600; }
.rodando.ativo .rodando-topo { color: var(--marca-tinta); font-weight: 600; }
.pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); flex: none; }
.rodando.ativo .pulso, .chip-rodando .pulso { background: var(--marca); animation: pulsa 1.4s ease-in-out infinite; }
.linha-rodando { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: 34px; padding: 4px; border: 0; border-radius: var(--r-m); background: none; text-align: left; font-size: var(--t-meta); line-height: 1.35; color: var(--tinta); }
.texto-rodando { min-width: 0; display: grid; }
.texto-rodando > span, .texto-rodando small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.texto-rodando small { font-size: var(--t-meta); color: var(--apagado); }
.linha-rodando time { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; }
@media (hover: hover) { button.linha-rodando:hover { background: color-mix(in srgb, var(--marca) 10%, transparent); } }
/* quando é a mesma entrega de várias pessoas, os avatares se sobrepõem em vez de virar uma linha por pessoa */
.caras-rodando { display: flex; flex: none; }
.caras-rodando .avatar + .avatar { margin-left: -7px; box-shadow: 0 0 0 1.5px var(--elevado); }
.rodando.ativo .caras-rodando .avatar + .avatar { box-shadow: 0 0 0 1.5px var(--marca-suave); }
.mais-rodando { display: flex; align-items: center; gap: 4px; width: 100%; padding: 3px 6px; border: 0; background: none; font-size: var(--t-meta); color: var(--apagado); text-align: left; }
.mais-rodando svg.i { width: 13px; height: 13px; }
.faixa-trabalhos .avatar + .avatar { margin-left: -7px; box-shadow: 0 0 0 1.5px var(--marca-suave); }

/* ---------- o que está fazendo: o passo a passo ao vivo (zelador, rodada, NotebookLM, site) ---------- */
.dialogo-log { width: min(860px, calc(100vw - 32px)); height: min(88dvh, 960px); max-height: calc(100dvh - 32px); }
/* o fio ao lado da conversa, no computador (protótipo Entrega-A): a conversa continua à vista e respondendo */
#dialogo-fio.ao-lado { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 44vw); height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; border-left: 1px solid var(--linha); box-shadow: var(--sombra); z-index: 30; }
body.fio-ao-lado #conversa, body.fio-ao-lado main.lugar { margin-right: min(560px, 44vw); }
.fio-entrega { display: grid; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--linha); background: var(--elevado); }
.fio-ent-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fio-ent-topo b { font-size: var(--t-ui); }
.fio-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; }
.fio-paginas > p { grid-column: 1 / -1; margin: 0; }
.fio-pag { position: relative; display: block; padding: 0; border: 1px solid var(--linha); border-radius: var(--r-p); background: var(--painel); cursor: zoom-in; overflow: hidden; }
.fio-pag canvas, .fio-pag img { display: block; width: 100%; height: auto; }
.fio-pag small { position: absolute; right: 4px; bottom: 3px; font: 600 var(--t-rotulo) var(--mono); color: var(--apagado); background: var(--painel); border-radius: var(--r-p); padding: 0 4px; }
.dialogo-log[open] { display: flex; flex-direction: column; }
.log-topo { display: flex; align-items: flex-start; gap: 12px; padding: 18px 12px 12px 22px; border-bottom: 1px solid var(--linha); }
.log-cabeca { flex: 1; min-width: 0; display: grid; gap: 6px; }
.log-cabeca h2 { font-size: var(--t-titulo); overflow-wrap: anywhere; }
.log-sub { overflow-wrap: anywhere; }
.log-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; }
/* o fio é coluna (as regras dele estão lá em cima, antes desta): como grade, a coluna crescia até o título inteiro do
   rodapé, que não quebra, e a conversa toda passava da janela, com barra de lado (01/10) */
.log-corpo.fio-corpo { display: flex; gap: 4px; }
.dialogo-log .passo-texto > span:first-child { white-space: pre-wrap; }
.agora-log { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); font-weight: 600; color: var(--marca-tinta); white-space: nowrap; }
.passo-t.t-agora .marca-t::before { background: var(--marca); animation: pulsa 1.4s ease-in-out infinite; }
.execucoes { align-items: center; }
.execucoes .rotulo { margin-right: 2px; }
.execucoes .filtro { min-height: 28px; padding: 0 10px; font-family: var(--mono); font-size: var(--t-meta); }
/* o que é cada passo: comando no computador, leitura, alteração de código, o modelo… */
.tag-passo { margin-right: 7px; vertical-align: 1px; }
.pensando .link { font-size: var(--t-meta); }
@media (max-width: 599px) {
  .dialogo-log { width: 100%; max-width: 100%; height: calc(100dvh - 24px); }
  .log-topo { padding: 16px 8px 10px 16px; }
  .log-corpo { padding: 12px 14px 18px; }
}

/* ---------- trabalhos em segundo plano: todos, e o passo a passo de cada um ---------- */
.trabalhos-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px calc(32px + var(--base-segura)); }
.trabalhos-miolo { max-width: 1080px; margin: 0 auto; display: grid; gap: 16px; min-width: 0; }
.trabalhos-miolo, .lista-t, .cartao-t, .cabeca-t, .log { grid-template-columns: minmax(0, 1fr); }  /* texto longo quebra, não empurra a tela */
.selo.verde { background: var(--marca); color: var(--marca-texto); }
.faixa-trabalhos { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--linha); }
.faixa-trabalhos button { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 20px; border: 0; border-top: 1px solid color-mix(in srgb, var(--marca) 14%, transparent); background: var(--marca-suave); color: var(--marca-tinta); font-size: var(--t-ui); text-align: left; }
.faixa-trabalhos button:first-child { border-top: 0; }
.faixa-trabalhos .texto-faixa { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-trabalhos small { font-family: var(--mono); font-size: var(--t-meta); white-space: nowrap; opacity: .85; }
.faixa-trabalhos svg.i { width: 15px; height: 15px; }
@media (hover: hover) { .faixa-trabalhos button:hover { filter: brightness(.97); } }
.numeros.quatro { grid-template-columns: repeat(4, 1fr); }
.trabalhos .numeros div { background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
/* filtro: recorta o que está na tela. Pílula; o escolhido ganha o verde claro e um ✓ (a escolha não é só cor) */
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pilula); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-ui); color: var(--tinta-2); }
.filtro span, .filtro small { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); }
.filtro.sel { background: var(--marca-suave); border-color: color-mix(in srgb, var(--marca) 45%, transparent); color: var(--marca-tinta); font-weight: 600; }
.filtro.sel::before { content: ""; width: 12px; height: 12px; margin-left: -2px; background: currentColor; -webkit-mask: var(--certo) center / contain no-repeat; mask: var(--certo) center / contain no-repeat; }
.filtro.sel span, .filtro.sel small { color: inherit; opacity: .75; }
@media (hover: hover) { .filtro:not(.sel):hover { border-color: var(--tinta-2); } }
/* abas: trocam o que a tela mostra (Quadro ou Lista; Semana ou Lista; Geral ou Conexões). Fundo segmentado */
.abas { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-m); background: var(--elevado); border: 1px solid var(--linha); }
.abas::-webkit-scrollbar { display: none; }
.aba { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-p); background: none; color: var(--tinta-2); font-size: var(--t-ui); font-weight: 500; white-space: nowrap; }
.aba.sel { background: var(--painel); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-leve); }
.aba span { min-width: 18px; padding: 0 5px; border-radius: var(--r-pilula); background: var(--atencao); color: var(--sobre-cor); font-size: var(--t-rotulo); font-weight: 700; line-height: 17px; text-align: center; }
.aba span.n { background: none; color: var(--apagado); font-family: var(--mono); font-weight: 500; }
@media (hover: hover) { .aba:not(.sel):hover { color: var(--tinta); } }
/* menu que abre de um botão (Contratar, no Time) */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-lista { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: max-content; min-width: 260px; max-width: min(340px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 6px; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--r-g); box-shadow: var(--sombra); }
.menu-lista button { display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: var(--r-m); background: none; text-align: left; font-size: var(--t-ui); font-weight: 500; color: var(--tinta); }
.menu-lista button small { font-size: var(--t-meta); font-weight: 400; color: var(--apagado); }
@media (hover: hover) { .menu-lista button:hover { background: var(--elevado); } }
.lista-t { display: grid; gap: 8px; }
.lista-t .dia { justify-self: center; margin: 10px 0 2px; }
.linha-t { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); text-align: left; }
.linha-t.andando { border-color: color-mix(in srgb, var(--marca) 45%, var(--linha)); }
@media (hover: hover) { .linha-t:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-leve); } }
.linha-t-meio { min-width: 0; display: grid; gap: 3px; }
.linha-t-titulo { font-weight: 600; font-size: var(--t-corpo); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linha-t-sub { font-size: var(--t-meta); color: var(--apagado); }
.linha-t-agora, .linha-t-erro { font-size: var(--t-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-t-agora { color: var(--marca-tinta); }
.linha-t-erro { color: var(--perigo); }
.linha-t-lado { display: grid; justify-items: end; gap: 6px; }
.linha-t-lado time { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; }

/* o quadro: o cartão anda de coluna em coluna e só fecha depois que o Eduardo aprova (20/09) */
.barra-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; margin: 0 auto 14px; }
.barra-t > .abas + .espaco + .botao, .barra-t > .botao.primario { margin-left: auto; }

/* tarefas miúdas: o que o agente faz dentro da própria fala, que não vira cartão e antes não aparecia (20/09) */
.tira-miudas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r-m); background: var(--elevado); border: 1px solid var(--linha); }
.tira-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tira-topo > .link { font-size: var(--t-ui); }
.chips-agentes { display: flex; flex-wrap: wrap; gap: 6px; }
/* cada agente com o nome à mostra: só avatar e número não dizia de quem era (Eduardo, 20/09) */
.chip-agente { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px 0 4px; border-radius: var(--r-pilula); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-ui); color: var(--tinta-2); }
.chip-agente b { font-weight: 600; font-size: var(--t-ui); color: var(--tinta); white-space: nowrap; }
.chip-agente .conta-chip { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-meta); color: var(--tinta); padding: 0 6px; border-radius: var(--r-pilula); background: var(--elevado); }
.chip-agente .fez-chip { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; }
.chip-agente.sel { border-color: var(--cor, var(--marca)); box-shadow: inset 0 0 0 1px var(--cor, var(--marca)); background: var(--marca-suave); }
.chip-agente.sel .conta-chip { background: var(--painel); }
/* a tela filtrada tem de dizer que está filtrada: sem isso, quadro vazio parece quadro sem trabalho */
.faixa-filtro { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-m); background: var(--marca-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca) 25%, transparent); font-size: var(--t-ui); color: var(--marca-tinta); }
.faixa-filtro > span { flex: 1; min-width: 0; }
.faixa-filtro .avatar { flex: none; }  /* sem isto o avatar estica e vira uma elipse atravessando a faixa */
.producao { display: grid; gap: 10px; min-width: 0; }
.linha-p { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); border-left: 3px solid var(--cor, var(--linha-forte)); }
.linha-p-topo { display: flex; align-items: center; gap: 10px; }
.linha-p-quem { display: grid; flex: 1; min-width: 0; }
.linha-p-quem b { font-weight: 600; color: var(--cor, var(--tinta)); }
.linha-p-quem small { font-size: var(--t-meta); color: var(--apagado); }
.linha-p-alerta { margin: 0; font-size: var(--t-meta); color: var(--atencao); }
@media (hover: hover) { .chip-agente:hover { border-color: var(--tinta-2); } }
/* cinco colunas nunca cabem numa tela só: elas rolam de lado, e a largura é escolhida para a seguinte sempre espiar */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; align-items: start; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 10px; }
.coluna { display: grid; gap: 10px; min-width: 0; padding: 10px; border-radius: var(--r-g); background: var(--elevado); border: 1px solid var(--linha); scroll-snap-align: start; }
.coluna-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.coluna-topo h2 { margin: 0; font-size: var(--t-rotulo); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--apagado); }
.coluna-topo .conta { padding: 1px 8px; border-radius: var(--r-pilula); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha-forte); font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); }
.col-revisao { background: var(--atencao-suave); border-color: color-mix(in srgb, var(--atencao) 28%, transparent); }
.col-revisao .coluna-topo h2, .col-revisao .coluna-topo .conta { color: var(--atencao); }
.col-travado .coluna-topo h2 { color: var(--perigo); }
.col-fechado .cartao-caixa { opacity: .72; }
.cartoes { display: grid; gap: 9px; min-width: 0; }
.coluna-vazia { margin: 0; padding: 12px 6px; text-align: center; font-size: var(--t-meta); color: var(--apagado); }
.cartao-caixa { display: grid; min-width: 0; border-radius: var(--r-m); background: var(--painel); box-shadow: var(--sombra-leve); }
.cartao-caixa.andando { box-shadow: var(--sombra-leve), inset 0 0 0 1px color-mix(in srgb, var(--marca) 35%, transparent); }
.cartao { display: grid; gap: 5px; min-width: 0; width: 100%; padding: 10px 12px; border: 0; border-left: 3px solid var(--cor, var(--linha-forte)); border-radius: var(--r-m); background: none; font: inherit; color: inherit; text-align: left; }
.cartao-topo { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-meta); color: var(--tinta-2); }
.cartao-topo b { min-width: 0; font-weight: 600; color: var(--cor, var(--tinta)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-topo time { margin-left: auto; font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; }
.cartao-titulo { font-size: var(--t-corpo); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-agora { font-size: var(--t-meta); color: var(--marca-tinta); overflow-wrap: anywhere; }
.cartao-erro { font-size: var(--t-meta); color: var(--perigo); overflow-wrap: anywhere; }
.cartao-erro.atencao { color: var(--atencao); }
.cartao-erro.neutro { color: var(--tinta-2); }
.cartao-marcas { display: flex; flex-wrap: wrap; gap: 4px; }
.cartao-pe { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-acoes { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }  /* três botões não cabem numa coluna de quadro */
.cartao-t.revisao-t { background: var(--atencao-suave); border-color: color-mix(in srgb, var(--atencao) 28%, transparent); }
.subtarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.subtarefas li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--t-ui); }
@media (hover: hover) { .cartao:hover { background: var(--elevado); } }
.vazio-t { padding: 28px 20px; border: 1px dashed var(--linha-forte); border-radius: var(--r-g); text-align: center; color: var(--apagado); display: grid; gap: 6px; }
.vazio-t strong { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); color: var(--tinta); }
.voltar-t { justify-self: start; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-size: var(--t-ui); }
.voltar-t svg.i { width: 16px; height: 16px; }
.cabeca-t { display: grid; gap: 8px; }
.titulo-t { margin: 0; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-grande); line-height: 1.2; overflow-wrap: anywhere; }
.quem-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-ui); color: var(--tinta-2); }
.quem-t b { font-weight: 600; }
.agora-t { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-m); background: var(--marca-suave); color: var(--marca-tinta); font-size: var(--t-ui); }
.agora-t .texto-agora { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agora-t.pausado { background: var(--atencao-suave); color: var(--atencao); }
.erro-t { margin: 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--perigo-suave); color: var(--perigo); font-size: var(--t-ui); overflow-wrap: anywhere; }
.cartao-t { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); min-width: 0; }
.cartao-t h3 { margin: 0; }
.acoes-t { display: flex; gap: 8px; flex-wrap: wrap; }
/* Documentos da tarefa (29/09): um por linha — tipo, nome e versão, e o botão de abrir */
.docs-t { list-style: none; margin: 0; padding: 0; display: grid; }
.doc-t { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); min-width: 0; }
.doc-t:first-child { border-top: 0; padding-top: 0; }
.doc-tipo { flex: 0 0 76px; font-size: var(--t-meta); font-weight: 600; color: var(--tinta-2); }
.doc-meio { display: grid; gap: 2px; flex: 1; min-width: 0; }
.doc-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedido-t { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-corpo); color: var(--tinta-2); }
.log { list-style: none; margin: 0; padding: 0; display: grid; }
.passo-t { display: grid; grid-template-columns: 58px 14px minmax(0, 1fr); column-gap: 10px; padding: 5px 0; }
.passo-t time { font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); padding-top: 2px; text-align: right; }
.marca-t { position: relative; }
.marca-t::before { content: ""; position: absolute; left: 3px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); }
.marca-t::after { content: ""; position: absolute; left: 6.5px; top: 18px; bottom: -12px; width: 1px; background: var(--linha); }
.passo-t:last-child .marca-t::after { display: none; }
.passo-t.t-ferramenta .marca-t::before { background: var(--marca); }
.passo-t.t-modelo .marca-t::before { background: var(--cor, var(--tinta-2)); }
.passo-t.t-aviso .marca-t::before { background: var(--atencao); }
.passo-t.t-erro .marca-t::before { background: var(--perigo); }
.passo-t.t-entregue .marca-t::before { background: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.passo-corpo { min-width: 0; display: grid; gap: 2px; }
.passo-texto { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: var(--t-ui); line-height: 1.45; }
.passo-texto > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.passo-texto .custo { font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; }
.passo-t.t-aviso .passo-texto > span:first-child { color: var(--atencao); }
.passo-t.t-erro .passo-texto > span:first-child { color: var(--perigo); }
.passo-t.t-modelo .passo-texto > span:first-child { color: var(--tinta-2); }
.passo-corpo summary { width: fit-content; cursor: pointer; font-size: var(--t-meta); color: var(--apagado); }
.passo-corpo pre { margin: 6px 0 2px; max-height: 340px; overflow: auto; padding: 8px 11px; border-radius: var(--r-m); background: var(--elevado); border: 1px solid var(--linha); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tinta-2); }
.entrega-t { border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); min-width: 0; }
.entrega-t > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.entrega-t > summary::-webkit-details-marker { display: none; }
.entrega-t > summary svg.i { width: 16px; height: 16px; color: var(--apagado); transition: transform .2s ease; }
.entrega-t[open] > summary svg.i { transform: rotate(90deg); }
.md { padding: 0 18px 18px; font-size: var(--t-corpo); line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.md > :first-child { margin-top: 0; }
.md h3 { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); line-height: 1.25; margin: 20px 0 6px; }
.md h4 { font-size: var(--t-sec); margin: 18px 0 6px; }
.md h5, .md h6 { font-size: var(--t-corpo); margin: 14px 0 4px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md a:not(.nota) { color: var(--marca-tinta); text-underline-offset: 2px; }
.md hr { border: 0; border-top: 1px solid var(--linha); margin: 16px 0; }
/* tabela dentro de uma fala (30/09): mesma cara da entrega, e sem herdar o pre-wrap da bolha */
.msg-texto .tabela, .sistema .tabela, .interino-texto .tabela { overflow-x: auto; margin: 8px 0; white-space: normal; }
.msg-texto table, .sistema table, .interino-texto table { border-collapse: collapse; font-size: var(--t-ui); }
.msg-texto th, .msg-texto td, .sistema th, .sistema td, .interino-texto th, .interino-texto td { border: 1px solid var(--linha-forte); padding: 5px 8px; text-align: left; vertical-align: top; }
.msg-texto th, .sistema th, .interino-texto th { background: var(--marca-suave); font-weight: 600; }
.md .tabela { overflow-x: auto; margin: 10px 0; }
.md table { border-collapse: collapse; font-size: var(--t-ui); min-width: 100%; }
.md th, .md td { border: 1px solid var(--linha-forte); padding: 5px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--marca-suave); font-weight: 600; }
@media (max-width: 599px) {
  .numeros.quatro { grid-template-columns: repeat(2, 1fr); }
  .trabalhos-corpo { padding: 14px 14px calc(28px + var(--base-segura)); }
  .titulo-t { font-size: var(--t-titulo); }
  .passo-t { grid-template-columns: 40px 14px minmax(0, 1fr); column-gap: 8px; }
  .md { padding: 0 14px 16px; }
}

/* ---------- diálogos e aviso ---------- */
dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-gg); background: var(--painel); color: var(--tinta); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
dialog::backdrop { background: var(--veu); }
/* todo diálogo tem o ✕ no canto e nome para o leitor de tela (app.js põe os dois); clicar fora só fecha o que não
   tem nada escrito — antes, um clique no fundo apagava a ficha inteira */
.fechar-dialogo { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-m); background: none; color: var(--apagado); }
.fechar-dialogo svg.i { width: 18px; height: 18px; }
@media (hover: hover) { .fechar-dialogo:hover { background: var(--elevado); color: var(--tinta); } }
dialog.segura { animation: segura .3s ease; }
@keyframes segura { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
dialog form { display: grid; gap: 14px; padding: 22px; }
dialog h2 { margin: 0; padding-right: 40px; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); line-height: 1.2; }
dialog .miudo { font-size: var(--t-ui); color: var(--tinta-2); }
dialog .miudo:empty { display: none; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botoes { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px; margin-top: 4px; }
.aviso { position: fixed; left: 50%; bottom: calc(92px + var(--base-segura)); z-index: 40; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r-pilula); background: var(--tinta); color: var(--fundo); font-size: var(--t-ui); box-shadow: var(--sombra); transform: translateX(-50%); animation: surge .2s ease; }
.aviso.erro { background: var(--perigo); color: var(--sobre-cor); }
.miudo.erro { color: var(--perigo); }
@keyframes surge { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- time: quem está, vagas com candidatos e processos de desligamento (RH) ---------- */
.time-rh .numeros div { background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.acoes-time { display: flex; gap: 8px; flex-wrap: wrap; }
.titulo-time { margin: 12px 0 -2px; font-size: var(--t-sec); font-weight: 600; line-height: 1.3; }
.cartao-rh { gap: 14px; }
.cartao-rh.perigo-rh { border-color: color-mix(in srgb, var(--perigo) 30%, var(--linha)); }
.cabeca-rh { display: grid; gap: 2px; }
.cabeca-rh h3 { font-size: var(--t-sec); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.codigo { justify-self: start; font-family: var(--mono); font-size: var(--t-rotulo); font-weight: 500; color: var(--apagado); }
.candidato { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-m); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); min-width: 0; }
.cand-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar.emoji { background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha-forte); font-size: 17px; }
.cand-nome { flex: 1; min-width: 0; display: grid; }
.cand-nome b { font-size: var(--t-corpo); overflow-wrap: anywhere; }
.cand-nome > span { font-size: var(--t-meta); color: var(--apagado); overflow-wrap: anywhere; }
.cand-frase { margin: 0; font-size: var(--t-corpo); color: var(--tinta-2); }
.cand-dados { display: grid; gap: 8px; margin: 0; }
.cand-dados div { display: grid; gap: 1px; }
.cand-dados dt { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.cand-dados dd { margin: 0; font-size: var(--t-ui); overflow-wrap: anywhere; white-space: pre-line; }
.candidato details summary, .historico-time summary { cursor: pointer; font-size: var(--t-ui); color: var(--marca-tinta); }
.cand-mais { display: grid; gap: 8px; margin-top: 10px; font-size: var(--t-ui); }
.cand-mais p { margin: 0; overflow-wrap: anywhere; }
.qa { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.qa b { font-size: var(--t-meta); color: var(--apagado); }
.qa p { margin: 0 0 4px; white-space: pre-line; }
.notas-banca { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.perguntar { display: flex; gap: 8px; }
.perguntar input { flex: 1; min-width: 0; min-height: 36px; padding: 6px 12px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-ui); }
.perguntar input:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.cartao-rh .acoes, .candidato .acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grade-time { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: stretch; }
.agente-cab { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.agente-cab .agente-abre { flex: 1 1 auto; min-width: 0; }
.agente-lado { display: flex; align-items: center; gap: 4px; flex: none; color: var(--apagado); }
.agente-frase { margin: 0; font-size: var(--t-ui); line-height: 1.45; color: var(--tinta-2); }
.time-conta { margin: 0 0 4px; }
.grade-time .agente-card { align-content: start; gap: 10px; }
.grade-time .agora-ag { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--marca-tinta); }
.grade-time .agora-ag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--marca); flex: none; }
.autonomia-ag .aba { justify-content: center; }
.agente-card { display: grid; align-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); min-width: 0; }
/* o cartão inteiro abre a ficha: o botão é que segura o avatar e o texto, lado a lado */
.agente-abre { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
@media (hover: hover) { .agente-abre:hover .agente-meio b { color: var(--marca-tinta); } }
.agente-meio { display: grid; gap: 2px; min-width: 0; }
.agente-meio b { font-size: var(--t-corpo); }
.agente-meio > span { font-size: var(--t-meta); color: var(--tinta-2); overflow-wrap: anywhere; }
.agente-meio .agora-ag { font-size: var(--t-meta); color: var(--marca-tinta); }
.papeis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.agente-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-left: 52px; }
.historico-time { display: grid; gap: 8px; }
.historico-time[open] summary { margin-bottom: 8px; }
dialog.largo { width: min(680px, calc(100vw - 32px)); }
.trio { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 10px; }
.teste-agente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px; border-radius: var(--r-m); background: var(--elevado); }
.resposta-teste { grid-column: 1 / -1; margin: 0; font-size: var(--t-ui); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- celular: uma tela por vez, os lugares nas abas de baixo ---------- */
@media (max-width: 899px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lista, .lugar { grid-column: 1; grid-row: 1; }
  .lista { border-right: 0; }
  #app:not([data-tela="lista"]):not([data-tela="conversa"]) .lista { display: none; }
  .lugar { display: none; }
  #app[data-tela="hoje"] .hoje-pg, #app[data-tela="trabalhos"] .trabalhos, #app[data-tela="time"] .time-rh, #app[data-tela="agenda"] .agenda-pg,
  #app[data-tela="memoria"] .memoria-pg, #app[data-tela="ajustes"] .ajustes { display: flex; }
  /* a conversa aberta desliza por cima de tudo, abas incluídas */
  .conversa { grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 3; transform: translateX(100%); visibility: hidden; box-shadow: -10px 0 30px rgba(0, 0, 0, .08); transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
  #app[data-tela="conversa"] .conversa { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .item.ativo { background: none; }
  /* as abas: Hoje, Conversas, Trabalhos, Time e Mais (Agenda, Memória e Ajustes moram no Mais; 03/10) */
  .trilho { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: space-around; align-items: stretch; gap: 0; padding: 4px 4px calc(4px + var(--base-segura)); border-right: 0; border-top: 1px solid var(--linha); overflow: visible; }
  .trilho-marca, .trilho .fim, .lugar-bt[data-lugar="memoria"], .lugar-bt[data-lugar="agenda"] { display: none; }
  .lugar-bt[data-lugar="mais"] { display: grid; }
  .lugar-bt { flex: 1; width: auto; min-height: 52px; }
  .conversa-topo { gap: 8px; padding-left: 6px; padding-right: 8px; }
  .conversa-topo .voltar { display: grid; }
  .conversa-topo .avatar { width: 36px; height: 36px; font-size: 14px; }
  .lugar .conversa-topo { padding-left: 16px; }
  .faixa-reuniao { padding-left: 16px; }
  .mensagens { padding: 2px 14px 14px; }
  .compositor { padding: 6px 10px calc(10px + var(--base-segura)); }
  .caixa textarea { font-size: 16px; }  /* 16 px: o iPhone não dá zoom ao focar */
  .campo input, .campo textarea, .campo select { font-size: 16px; }
  .bolha { max-width: 86%; }
  .ir-ao-fim { right: 12px; }
  .icone-botao.com-rotulo, .botao.so-icone-celular { width: 40px; padding: 0; }
  .rotulo-botao { display: none; }
  .icone-botao.com-rotulo .contador { position: absolute; border: 2px solid var(--painel); margin: 0; }
  .aviso { bottom: calc(84px + var(--base-segura)); }
  /* toque: nada abaixo de 40 px de altura no que se toca */
  .filtro, .chip-agente, .botao.pequeno, .aba { min-height: 40px; }
  .reacao { height: 32px; }
  .lista-itens .rotulo .dobra, .rotulo .link-rotulo { min-height: 36px; }
}
@media (min-width: 900px) { .so-celular { display: none !important; } }
@media (max-width: 599px) {
  dialog { width: 100%; max-width: 100%; max-height: calc(100% - 24px); margin: auto 0 0; border-radius: 20px 20px 0 0; }
  dialog form { padding: 22px 18px calc(18px + var(--base-segura)); }
  .dupla, .trio { grid-template-columns: 1fr; }
  .teste-agente { grid-template-columns: 1fr; }
  .botoes { flex-direction: column; }
  .botoes .botao { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- campo de escolha: o menu cinza do sistema não é a UX da sala ---------- */
/* o <select> continua no DOM guardando o valor; some da vista e quem desenha é o botão + a lista */
.escolha { position: relative; }
.escolha > select { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; }
.escolha-botao { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-corpo); color: var(--tinta); text-align: left; }
.escolha-botao .escolha-valor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolha-botao svg.i { width: 16px; height: 16px; color: var(--apagado); flex: none; transition: transform .18s ease; }
.escolha-botao[aria-expanded="true"] { border-color: var(--marca); }
.escolha-botao[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.escolha-botao:disabled { opacity: .55; }
@media (hover: hover) { .escolha-botao:hover { border-color: var(--tinta-2); } }
.escolha-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: min(46vh, 320px); overflow-y: auto; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-g); border: 1px solid var(--linha-forte); background: var(--painel); box-shadow: var(--sombra); }
.escolha-item { display: block; width: 100%; padding: 9px 11px; border: 0; border-radius: var(--r-m); background: none; font-size: var(--t-ui); color: var(--tinta); text-align: left; }
.escolha-item.sel { background: var(--marca-suave); color: var(--marca-tinta); font-weight: 600; }
@media (hover: hover) { .escolha-item:hover { background: var(--elevado); } }
.escolha-item:focus-visible { background: var(--elevado); }
.escolha-grupo { padding: 10px 11px 4px; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.resumo-modelo { margin: 4px 0 0; color: var(--tinta); }

/* ---------- <details> com a seta da sala, não o triângulo do navegador ---------- */
/* onde já existe um svg.i próprio (.sec, .entrega-t) nada muda; o resto ganha o mesmo chevron, desenhado em CSS */
.passo-corpo details > summary, .lido > summary, .candidato details > summary, .historico-time > summary,
details.chevron > summary, .sub-config > summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
}
.passo-corpo details > summary::-webkit-details-marker, .lido > summary::-webkit-details-marker,
.candidato details > summary::-webkit-details-marker, .historico-time > summary::-webkit-details-marker,
details.chevron > summary::-webkit-details-marker, .sub-config > summary::-webkit-details-marker { display: none; }
.passo-corpo details > summary::before, .lido > summary::before, .candidato details > summary::before,
.historico-time > summary::before, details.chevron > summary::before, .sub-config > summary::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor; transition: transform .2s ease;
  -webkit-mask: var(--seta) center / contain no-repeat; mask: var(--seta) center / contain no-repeat;
}
.passo-corpo details[open] > summary::before, .lido[open] > summary::before, .candidato details[open] > summary::before,
.historico-time[open] > summary::before, details.chevron[open] > summary::before, .sub-config[open] > summary::before {
  transform: rotate(90deg);
}

/* ---------- áudio: player da sala ---------- */
.audio { display: flex; align-items: center; gap: 10px; width: min(330px, 100%); padding: 8px 12px 8px 8px; border-radius: var(--r-g); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); }
.audio-play { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: var(--marca); color: var(--marca-texto); }
.audio-play svg.i { width: 16px; height: 16px; }
.audio-onda { position: relative; flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 2px; cursor: pointer; }
/* barra fina sempre: com flex: 1, no player largo da barra de baixo cada uma virava uma pílula de 35 px (01/10) */
.audio-onda i { flex: 0 1 3px; min-width: 2px; border-radius: var(--r-pilula); background: var(--linha-forte); }
.audio-passou { position: absolute; inset: 0 auto 0 0; pointer-events: none; border-radius: var(--r-p); background: color-mix(in srgb, var(--marca) 30%, transparent); }
.audio.tocando .audio-onda i { background: color-mix(in srgb, var(--marca) 55%, var(--linha-forte)); }
.audio-tempo { font-size: var(--t-meta); color: var(--apagado); flex: none; }
.audio-vel { min-width: 32px; height: 24px; padding: 0 6px; flex: none; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-2); }
.audio-onda:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: var(--r-p); }

/* ---------- caixa de marcar: mesma linguagem dos outros campos ---------- */
.marcavel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; }
.marcavel input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--marca); flex: none; }
.marcavel > span { display: grid; gap: 2px; font-size: var(--t-ui); }
.marcavel small { font-size: var(--t-meta); color: var(--apagado); }
.marcavel.agente { padding: 8px 11px; }
.escolha-agentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.escolha-agentes > p { grid-column: 1 / -1; margin: 0; }  /* aviso de lista vazia: a largura toda, não uma célula */
/* força-tarefa e simulação (23/09, "textos e layout"): gente em chips, opções em linha, conversar no topo */
.form-ft { gap: 16px; }
.ft-topo { display: grid; gap: 6px; }
.conversar-topo { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 12px;
  border: 0; border-radius: var(--r-pilula); background: var(--marca-suave); color: var(--marca-tinta); font: inherit; font-size: var(--t-ui); cursor: pointer; }
.conversar-topo b { font-weight: 600; }
@media (hover: hover) { .conversar-topo:hover { filter: brightness(.97); } }
.ft-sim { display: grid; gap: 16px; }
.rotulo .regra { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--apagado); }
.chips-escolha { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-escolha { position: relative; display: inline-flex; align-items: center; gap: 2px; border-radius: var(--r-pilula);
  box-shadow: inset 0 0 0 1px var(--linha); background: var(--elevado); cursor: pointer; font-size: var(--t-ui); }
.chip-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.chip-escolha > span { padding: 6px 12px; }
.chip-escolha:has(input:checked) { background: var(--marca-suave); box-shadow: inset 0 0 0 1.5px var(--marca); color: var(--marca-tinta); font-weight: 600; }
.chip-escolha:has(input:checked) > span::before { content: "✓ "; }
.chip-escolha:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.chip-escolha:has(.chip-editar) > span { padding-right: 2px; }
.chip-editar { border: 0; background: none; padding: 6px 10px 6px 4px; color: var(--apagado); font: inherit; font-size: var(--t-ui); cursor: pointer; }
@media (hover: hover) { .chip-editar:hover { color: var(--tinta); } .chip-escolha:hover { box-shadow: inset 0 0 0 1px var(--tinta-2); } }
.chip-novo { border: 0; border-radius: var(--r-pilula); padding: 6px 12px; background: none; box-shadow: inset 0 0 0 1px var(--linha);
  border-style: dashed; color: var(--marca-tinta); font: inherit; font-size: var(--t-ui); cursor: pointer; outline: 1px dashed var(--linha); outline-offset: -1px; }
.opcao-linha { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-ui); cursor: pointer; }
.opcao-linha input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--marca); flex: none; }
.opcao-linha small { display: block; font-size: var(--t-meta); color: var(--apagado); }
.form-ft .dica { margin: 2px 0 0; font-size: var(--t-meta); color: var(--apagado); }

/* ---------- memória: o que o time lembra (só leitura) ---------- */
.mem-busca { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0; border-radius: var(--r-m); background: var(--painel);
  box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta); font: inherit; font-size: var(--t-corpo); }
.mem-busca:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.mem-topo { display: flex; gap: 8px; align-items: center; }
.mem-topo .mem-busca { flex: 1; min-width: 0; }
.mem-item > footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mem-item > footer .link { margin-left: auto; font-size: var(--t-meta); }
.mem-barra { flex-direction: column; align-items: flex-start; }
.mem-barra .filtro small { color: var(--apagado); font-family: var(--mono); font-size: var(--t-rotulo); margin-left: 2px; }
.mem-sec { display: grid; gap: 8px; margin-top: 8px; }
.mem-sec h2 { margin: 6px 0 2px; font-size: var(--t-corpo); font-weight: 600; }
.mem-sec h2 small { display: block; font-size: var(--t-meta); font-weight: 400; color: var(--apagado); }
.mem-item { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); min-width: 0; }
.mem-item > header, .mem-item > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--t-ui); }
.mem-item > summary { cursor: pointer; }
.mem-item.apagada { opacity: .62; }
.mem-texto { font-size: var(--t-corpo); line-height: 1.45; overflow-wrap: anywhere; }
.mem-texto.longo { white-space: pre-wrap; }
.mem-motivo { color: var(--apagado); }
.mem-meta { font-size: var(--t-meta); color: var(--apagado); }
.mem-item > header .mem-meta:last-child, .mem-item > summary .mem-meta { margin-left: auto; font-family: var(--mono); font-size: var(--t-meta); }

/* ---------- agenda: o que tem data (reunião, tarefa, prazo, lembrete) ---------- */
.agenda-pg .numeros div { background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
/* a semana com horas: colunas de dia, linhas de hora. No celular a grade rola de lado, com a coluna das horas presa */
.nav-semana { display: flex; align-items: center; gap: 4px; }
.nav-semana h2 { margin: 0 6px; font-size: var(--t-sec); font-weight: 600; white-space: nowrap; }
.sem-cel:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 0; }
.resumo-agenda { margin: -4px 0 12px; }
.semana-rolagem { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--linha); background: var(--painel); }
.semana-ag { min-width: 720px; }
.sem-linha { display: grid; grid-template-columns: 58px repeat(7, minmax(92px, 1fr)); }
.sem-topo { border-bottom: 1px solid var(--linha); }
.sem-inteiro { border-bottom: 1px solid var(--linha); background: var(--elevado); }
.sem-canto { position: sticky; left: 0; z-index: 2; background: var(--painel); }
.sem-dia { padding: 8px 6px; text-align: center; border-left: 1px solid var(--linha); font-size: var(--t-meta); }
.sem-dia b { display: block; font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.sem-dia span { font-family: var(--mono); font-size: var(--t-ui); }
.sem-dia.fds { background: color-mix(in srgb, var(--elevado) 60%, transparent); }
.sem-dia.hoje b, .sem-dia.hoje span { color: var(--marca); font-weight: 600; }
.sem-hora { position: sticky; left: 0; z-index: 1; padding: 6px 8px; text-align: right; font-family: var(--mono); font-size: var(--t-rotulo); color: var(--apagado); background: var(--painel); border-top: 1px solid var(--linha); }
.sem-inteiro .sem-hora { border-top: 0; background: var(--elevado); font-family: var(--sans); }
.sem-cel { min-height: 44px; padding: 3px; display: grid; gap: 3px; align-content: start; border-left: 1px solid var(--linha); border-top: 1px solid var(--linha); cursor: pointer; }
.sem-inteiro .sem-cel { border-top: 0; min-height: 34px; }
.sem-cel.hoje { background: color-mix(in srgb, var(--marca) 5%, transparent); }
.sem-cel:hover { background: color-mix(in srgb, var(--marca) 9%, transparent); }
.ev-ag { display: grid; gap: 1px; padding: 5px 6px; border: 0; border-left: 3px solid var(--cor, var(--marca)); border-radius: var(--r-p); background: color-mix(in srgb, var(--cor, var(--marca)) 13%, var(--painel)); text-align: left; cursor: pointer; font: inherit; color: var(--tinta); }
.ev-ag:hover { background: color-mix(in srgb, var(--cor, var(--marca)) 22%, var(--painel)); }
.ev-ag .ev-topo { display: flex; align-items: center; gap: 4px; font-size: var(--t-rotulo); }
.ev-ag .ev-titulo { font-size: var(--t-meta); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ev-ag .ev-quem { font-size: var(--t-rotulo); color: var(--apagado); }
.ev-ag.atrasado { border-left-color: var(--perigo); background: color-mix(in srgb, var(--perigo) 12%, var(--painel)); }
.ev-ag.fechado { opacity: .55; }
.ev-ag.previsto { border-left-style: dashed; background: transparent; outline: 1px dashed color-mix(in srgb, var(--cor, var(--marca)) 45%, transparent); outline-offset: -1px; }
#ag-apagar, #fi-desligar { margin-right: auto; }
.ev-ag.fechado .ev-titulo { text-decoration: line-through; }
.ev-ag .ev-feito { color: var(--marca); }
.ev-ag .ev-entrega { margin-left: auto; color: var(--apagado); }
.entrega-ag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }

.dia-agenda { display: grid; gap: 8px; }
.dia-agenda > h2 { margin: 6px 0 0; font-size: var(--t-sec); font-weight: 600; line-height: 1.3; }
.dia-agenda > h2 small { margin-left: 8px; font-family: var(--sans); font-style: normal; font-size: var(--t-meta); color: var(--apagado); }
.dia-agenda.atraso > h2 { color: var(--perigo); }
.linha-ag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 14px; border-radius: var(--r-m); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.linha-ag.atrasado { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--perigo) 35%, var(--linha)); }
.linha-ag.fechado { opacity: .62; }
.linha-ag .marca-ag { color: var(--tinta-2); padding-top: 1px; }
.ic-texto { display: inline-flex; vertical-align: -2px; }
.ic-texto svg.i { width: 14px; height: 14px; }
.linha-ag .marca-ag svg.i { width: 18px; height: 18px; }
.linha-ag .corpo-ag { min-width: 0; display: grid; gap: 3px; }
.linha-ag .corpo-ag b { font-weight: 600; overflow-wrap: anywhere; }
.linha-ag .corpo-ag .quando-ag { font-size: var(--t-ui); color: var(--apagado); }
.linha-ag .corpo-ag .quando-ag .hora-ag { font-family: var(--mono); color: var(--tinta); }
.linha-ag .corpo-ag .detalhe-ag { font-size: var(--t-ui); color: var(--apagado); overflow-wrap: anywhere; }
.linha-ag .acoes-ag { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) {
  .linha-ag { grid-template-columns: auto minmax(0, 1fr); }
  .linha-ag .acoes-ag { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- ajustes: a página inteira de configuração ---------- */
.ajustes-grade { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.indice-ajustes { position: sticky; top: 0; display: grid; gap: 2px; }
.indice-ajustes { border-left: 1px solid var(--linha); padding-left: 6px; }
.indice-ajustes button { display: grid; gap: 1px; padding: 7px 10px; border: 0; border-radius: var(--r-m); background: none; text-align: left; font-size: var(--t-ui); color: var(--tinta-2); }
.indice-ajustes button span { font-size: var(--t-meta); color: var(--apagado); }
@media (hover: hover) { .indice-ajustes button:hover { background: var(--elevado); color: var(--tinta); } }
.secoes-ajustes { display: grid; gap: 16px; min-width: 0; }
.sec-a { padding: 0; scroll-margin-top: 12px; }
.sec-a > header { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--linha); }
.sec-a > header h3 { margin: 0; font-size: var(--t-sec); font-weight: 600; }
.sec-a > header .resumo { margin-left: auto; font-size: var(--t-meta); color: var(--apagado); }
.sec-a-corpo { display: grid; gap: 10px; padding: 14px 16px; min-width: 0; }
.sec-a-corpo h4 { margin: 8px 0 0; font-size: var(--t-corpo); font-weight: 600; }
@media (max-width: 899px) { .ajustes-grade { grid-template-columns: minmax(0, 1fr); } .indice-ajustes { display: none; } }
.sub-config { padding: 8px 0; border-top: 1px solid var(--linha); }
.sub-config > summary { font-size: var(--t-ui); }
.sub-config > summary .miudo { margin-left: auto; }
.sub-config .pares { padding: 8px 0 4px 21px; }
.sub-config .sobre-config { margin: 6px 0 0 21px; }
.sub-config .pares dd { overflow-wrap: anywhere; text-align: right; }
.linha-espera { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-m); background: var(--atencao-suave); color: var(--atencao); font-size: var(--t-ui); font-weight: 500; text-align: left; }
.linha-espera svg.i { width: 16px; height: 16px; }
.linha-espera + .linha-espera { margin-top: 6px; }

/* ---------- ficha do agente ---------- */
#dialogo-ficha form { gap: 0; padding: 0; max-height: min(86dvh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.ficha-topo { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px 22px; border-bottom: 1px solid var(--linha); }
.ficha-quem { flex: 1; min-width: 0; }
.ficha-quem h2 { margin: 0; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); }
.ficha-quem p { margin: 2px 0 0; font-size: var(--t-meta); color: var(--apagado); }
.ficha-corpo { overflow-y: auto; display: grid; gap: 14px; padding: 16px 22px; align-content: start; }
.ficha-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ficha-numeros div { display: grid; padding: 9px 11px; border-radius: var(--r-m); background: var(--elevado); }
.ficha-numeros strong { font-family: var(--mono); font-size: var(--t-sec); font-weight: 500; }
.ficha-numeros span { font-size: var(--t-meta); color: var(--apagado); }
.ficha-sec { display: grid; gap: 10px; padding: 14px 0 0; border-top: 1px solid var(--linha); min-width: 0; }
.ficha-sec > .rotulo small { margin-left: 8px; font-size: var(--t-rotulo); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--marca-tinta); }
.ficha-sec .pares dd { text-align: right; }
#dialogo-ficha .botoes { padding: 14px 22px calc(18px + var(--base-segura)); border-top: 1px solid var(--linha); }
#dialogo-ficha .erro:not(:empty) { padding: 0 22px; }

/* ---------- um filtro só para os três modos: quem, quando e como está ---------- */
.barra-filtros { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); }
/* por cima do quadro, sem empurrá-lo (03/10) */
.barra-t { position: relative; }
.barra-t > .barra-filtros { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; margin: 0; width: min(640px, 100%); box-shadow: var(--sombra); }
/* os filtros ficam atrás de um botão que diz o que está valendo (no celular tomavam dois terços da tela) */
.alternar-filtros[aria-expanded="true"] { background: var(--elevado); }
.alternar-filtros .resumo-filtros { color: var(--apagado); font-weight: 400; }
/* no celular o quadro mostra uma coluna por vez, escolhida nas abas (com a contagem de cada uma) */
.abas-quadro { margin-bottom: 10px; }
@media (max-width: 899px) { .quadro.uma { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } }
.grupo-filtro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.grupo-filtro > .rotulo { width: 74px; flex: none; }
.grupo-filtro .filtros, .grupo-filtro .chips-agentes { flex: 1; min-width: 0; }
.chip-agente.limpar { padding: 0 12px; font-weight: 600; color: var(--marca-tinta); border-color: var(--marca); }
@media (max-width: 899px) {
  .grupo-filtro { display: grid; gap: 6px; }
  .grupo-filtro > .rotulo { width: auto; }
}

/* ---------- a mesma largura em todos os modos da tela de Trabalhos ---------- */
/* a barra ia de ponta a ponta e a lista ficava estreita e centrada: trocar de modo dava um solavanco (Eduardo,
   20/09: "tá ruim essa mudança de espaçamento entre um modo e outro"). Agora tudo compartilha a mesma coluna. */
#trabalhos-corpo > * { max-width: 1080px; margin-inline: auto; }
#trabalhos-corpo[data-modo="quadro"] > * { max-width: 1480px; }
#trabalhos-corpo .trabalhos-miolo { max-width: 100%; }
#trabalhos-corpo .barra-t { margin-bottom: 12px; }

/* ---------- a página da tarefa (30/09, "muito longa, técnica e crowded") ---------- */
/* coluna de leitura, como a de uma nota: a entrega é texto corrido e não deve ir de ponta a ponta */
#trabalhos-corpo .trabalhos-miolo.detalhe-t { max-width: 860px; gap: 14px; }
.topo-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-t .menu-lista { left: auto; right: 0; }
.menu-t > summary svg.i { width: 16px; height: 16px; }
.detalhe-t .cabeca-t { gap: 6px; margin-bottom: 2px; }
.num-t { font-size: var(--t-meta); color: var(--apagado); }
.meta-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: var(--t-ui); color: var(--tinta-2); }
.ponto-t { color: var(--apagado); }
.agora-t .botao { flex: none; }
.agora-t.neutro { background: var(--elevado); color: var(--tinta-2); }
.agora-t.falhou { background: var(--perigo-suave); color: var(--perigo); }
.decisao-t { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-g); background: var(--atencao-suave); border: 1px solid color-mix(in srgb, var(--atencao) 28%, transparent); }
.decisao-texto { display: grid; gap: 2px; min-width: 0; font-size: var(--t-ui); color: var(--tinta-2); }
.decisao-texto b { font-size: var(--t-corpo); font-weight: 600; color: var(--tinta); }
.decisao-t.ficou { align-items: flex-start; }
/* o revisor não fechou (02/10): o que ele ainda via de errado, na própria faixa da decisão */
.falhas-t { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--tinta-2); }
.aprovada-t { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--t-ui); color: var(--marca-tinta); }
.aprovada-t svg.i { width: 16px; height: 16px; flex: none; }
.cabeca-bloco { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.cabeca-bloco h3 { margin: 0; }
.detalhe-t .md { padding: 0; }
.entrega-texto.recolhida { max-height: 460px; overflow: hidden; -webkit-mask-image: linear-gradient(var(--tinta) 65%, transparent); mask-image: linear-gradient(var(--tinta) 65%, transparent); }
.ler-inteira { justify-self: start; font-weight: 600; }
.todos-docs { border-top: 1px solid var(--linha); padding-top: 10px; }
.todos-docs > summary { font-size: var(--t-meta); color: var(--tinta-2); }
.todos-docs[open] > summary { margin-bottom: 8px; }
.sum-t { display: grid; gap: 3px; min-width: 0; }
.sum-t h3 { margin: 0; }
.sum-previa { font-size: var(--t-meta); color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedido-bloco[open] .sum-previa { display: none; }
.sum-previa.mono { white-space: normal; }
/* o prompt enviado: cada parte abre; o texto é o que o modelo leu, em letra de máquina */
.ver-prompt { justify-self: start; margin-top: 2px; font-size: var(--t-meta); }
#prompt-corpo { gap: 8px; }
.parte-prompt { border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); min-width: 0; }
.parte-prompt > summary { padding: 9px 12px; font-size: var(--t-ui); }
.parte-prompt > summary .miudo { margin-left: auto; }
.parte-prompt > pre { margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--linha); max-height: 60vh; overflow: auto; font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tinta-2); }
.parte-prompt > .cartao-marcas { padding: 10px 12px 12px; border-top: 1px solid var(--linha); }
/* o plano da entrega: uma lista de conferir, com o número do passo e, feito, o visto */
.plano-bloco > summary { gap: 14px; }
.plano-bloco .sum-t { flex: 1; }
.plano-barra { --feito: 0%; flex: none; width: 72px; height: 4px; border-radius: var(--r-pilula); background: linear-gradient(90deg, var(--marca) var(--feito), var(--linha) var(--feito)); }
.plano-hipotese { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); }
.plano-t { list-style: none; margin: 0; padding: 0; display: grid; }
.passo-plano { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.passo-plano:first-child { border-top: 0; padding-top: 0; }
.marca-plano { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--linha-forte); font: 600 var(--t-rotulo) var(--mono); color: var(--tinta-2); }
.marca-plano svg.i { width: 13px; height: 13px; }
.passo-plano.feito .marca-plano { border-color: var(--marca); background: var(--marca); color: var(--marca-texto); }
.passo-plano.fazendo .marca-plano { border-color: var(--marca); color: var(--marca-tinta); box-shadow: 0 0 0 3px var(--marca-suave); }
.passo-plano.reprovado .marca-plano { border-color: var(--perigo); background: var(--perigo-suave); color: var(--perigo); }
.plano-corpo { display: grid; gap: 6px; min-width: 0; padding-top: 1px; }
.plano-titulo { margin: 0; font-size: var(--t-ui); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.passo-plano.a-fazer .plano-titulo { color: var(--tinta-2); }
.plano-pares { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: var(--t-meta); line-height: 1.45; }
.plano-pares dt { color: var(--apagado); }
.plano-pares dd { margin: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .plano-barra { width: 44px; }
  .plano-pares { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .plano-pares dd + dt { margin-top: 4px; }
}
.corpo-t { display: grid; gap: 14px; padding: 0 16px 16px; min-width: 0; }
.aceite-t { padding: 12px 14px; border-radius: var(--r-m); background: var(--elevado); border: 1px solid var(--linha); }
.aceite-t h4 { margin: 0 0 4px; }
.aceite-t p { margin: 0; font-size: var(--t-ui); color: var(--tinta); overflow-wrap: anywhere; }
.rodape-log { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--linha); }
.rodape-log .link { font-size: var(--t-meta); }
.detalhe-t .subtarefas { gap: 2px; }
.parte-t { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); border: 0; border-radius: var(--r-m); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.parte-meio { display: grid; gap: 1px; flex: 1; min-width: 0; }
.parte-titulo { font-size: var(--t-ui); font-weight: 500; overflow-wrap: anywhere; }
@media (hover: hover) { .parte-t:hover { background: var(--elevado); } }
@media (max-width: 599px) {
  .decisao-t .acoes-t { width: 100%; }
  .decisao-t .acoes-t .botao { flex: 1; justify-content: center; }
  .corpo-t { padding: 0 14px 14px; }
}

/* ---------- cartão de grupo: a mesma tarefa com vários agentes ---------- */
.cartao-caixa.grupo { border-left: 3px solid var(--linha-forte); }
.grupo-topo { border-left: 0; padding-bottom: 6px; }
.grupo-topo .cartao-topo b { color: var(--tinta-2); font-weight: 500; }
.grupo-linhas { display: grid; gap: 2px; padding: 0 10px 10px; }
.grupo-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 4px; border-top: 1px solid var(--linha); }
.grupo-quem { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.grupo-quem b { font-size: var(--t-meta); white-space: nowrap; }
.grupo-quem .mono { font-size: var(--t-rotulo); color: var(--apagado); }
.grupo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.grupo-acoes .link { font-size: var(--t-meta); }

/* ação de cartão em coluna estreita: o principal escrito, o resto em ícone com rótulo lido por leitor de tela */
.icone-acao { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--linha-forte); border-radius: var(--r-m); background: var(--painel); color: var(--tinta-2); }
.icone-acao svg.i { width: 15px; height: 15px; }
/* o ⋯ de uma linha (maisAcoes): o mesmo quadrado dos ícones do cartão; a lista abre para a esquerda, alinhada a ele */
.menu-linha > summary.icone-acao { cursor: pointer; list-style: none; }
.menu-linha > summary::-webkit-details-marker { display: none; }
.menu-linha[open] > summary.icone-acao { border-color: var(--tinta-2); color: var(--tinta); }
.menu-linha .menu-lista { left: auto; right: 0; min-width: 220px; }
.menu-lista button[data-tom="perigo"] { color: var(--perigo); }
/* celular (depois das regras gerais acima, senão elas vencem): os ícones da altura dos botões ao lado, e o ⋯ abre
   como folha embaixo, na largura da tela — preso ao botão, saía cortado pela esquerda (01/10) */
@media (max-width: 899px) {
  .icone-acao { width: 40px; height: 40px; }
  .menu-linha .menu-lista { position: fixed; z-index: 60; top: auto; left: 12px; right: 12px; bottom: calc(84px + var(--base-segura)); width: auto; min-width: 0; max-width: none; }
  .menu-linha .menu-lista button { padding: 12px; }
}
@media (hover: hover) { .icone-acao:hover { border-color: var(--tinta-2); color: var(--tinta); } }
/* o principal nunca encolhe abaixo do próprio nome: na coluna estreita ele fica sozinho na linha e os ícones descem
   (01/10: com o lápis do "aprovar com nota", o Aprovar saía cortado em "Aprov") */
.cartao-acoes .botao.primario { flex: 1 0 auto; min-width: 104px; }
/* coluna estreita do quadro: o Aprovar na linha dele e os ícones juntos embaixo, nunca separados */
.cartao-caixa { container-type: inline-size; }
@container (max-width: 260px) { .cartao-acoes .botao.primario { flex-basis: 100%; } }
.grupo-linha { align-items: center; }
.grupo-linha > .estado { margin-left: auto; }
.grupo-acoes { display: flex; gap: 4px; flex: none; }
.grupo-acoes .icone-acao { width: 28px; height: 28px; border-radius: var(--r-m); }
.grupo-acoes .icone-acao svg.i { width: 14px; height: 14px; }

/* ---------- interruptor: WhatsApp ligado/desligado ---------- */

/* a pista de que o cartão abre: some no hover para não competir com o conteúdo */
.grupo-quem svg.i { width: 13px; height: 13px; color: var(--apagado); margin-left: auto; }
.grupo-dica { margin: 0; padding: 0 12px 10px; font-size: var(--t-meta); color: var(--apagado); }

/* ---------- capacidades: skills, MCP e ferramentas ---------- */
.cap-grupo { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--linha); }
.cap-grupo:first-child { border-top: 0; padding-top: 0; }
.cap-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cap-topo h4 { margin: 0; font-size: var(--t-corpo); }
.cap-lista { display: grid; gap: 6px; }
.cap-item { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); }
.cap-item.pausado { opacity: .6; }
.cap-cabeca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cap-cabeca b { font-size: var(--t-corpo); }
.cap-cabeca .mono { font-size: var(--t-rotulo); overflow-wrap: anywhere; }
.cap-ferramentas { display: grid; gap: 4px; margin-top: 4px; }
.cap-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: var(--r-m); background: var(--painel); font-size: var(--t-meta); }
.cap-linha .mono { font-size: var(--t-meta); }
.cap-linha > .miudo { flex: 1; min-width: 0; }
.cap-linha.esperando { background: var(--atencao-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 28%, transparent); }
.cap-linha.recusada { opacity: .55; }
.cap-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.chave-pequena { min-height: 26px; padding: 0 10px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); font-size: var(--t-rotulo); color: var(--apagado); }
.chave-pequena.sim { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-tinta); font-weight: 600; }
.chave-pequena:disabled { opacity: .7; }

.busca-cap { display: flex; gap: 8px; }
.busca-cap input { flex: 1; min-width: 0; min-height: 36px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-ui); color: var(--tinta); }
.busca-cap input:focus-visible { border-color: var(--marca); }
.cap-item a { color: var(--marca-tinta); overflow-wrap: anywhere; }

.marcavel.fino { padding: 7px 11px; }
.marcavel.fino input { width: 17px; height: 17px; }
.aviso-fonte { color: var(--atencao); }
.recado-registro { display: grid; gap: 8px; justify-items: start; padding: 11px 13px; border-radius: var(--r-m); background: var(--atencao-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 28%, transparent); }
.recado-registro p { margin: 0; font-size: var(--t-meta); color: var(--atencao); }
.escrevendo { display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--marca-suave); color: var(--marca-tinta); font-size: var(--t-ui); }
form.esperando { opacity: .75; }
form.esperando #sk-esperando { opacity: 1; }
.codigo-script { margin: 0; padding: 14px; border-radius: var(--r-m); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); font-family: var(--mono); font-size: var(--t-meta); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* faixa de assunto (21/09): em que frente a conversa está, o que mais está aberto e o que o time quer levantar.
   A unidade de contexto deixou de ser o canal e passou a ser o assunto; isto é o que torna isso visível. */
.faixa-assunto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 12px 7px 20px;
  background: var(--marca-suave); border-bottom: 1px solid color-mix(in srgb, var(--marca) 14%, transparent);
  color: var(--marca-tinta); font-size: var(--t-ui); }
.faixa-assunto .titulo-assunto { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(46vw, 420px); }
.faixa-assunto .passo-assunto { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(34vw, 300px); }
.faixa-assunto .sep { opacity: .45; }
.faixa-assunto .outras { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.faixa-assunto .chip-assunto { border: 1px solid color-mix(in srgb, var(--marca) 26%, transparent); background: transparent;
  color: inherit; border-radius: var(--r-pilula); padding: 2px 10px; font-size: var(--t-meta); cursor: pointer; }
.faixa-assunto .chip-assunto.proposto { border-style: dashed; font-weight: 600; }
.faixa-assunto .chip-assunto:hover { background: color-mix(in srgb, var(--marca) 12%, transparent); }
.faixa-assunto .chip-assunto.plano { font-family: var(--mono); font-size: var(--t-meta); }
/* o diálogo passou a mostrar o plano do time, que tem passo por linha (21/09): sem isto as quebras
   somem. Texto de uma linha dos outros diálogos não muda. */
#dialogo-texto { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }
/* interruptor "ver arquivadas" dentro do rótulo da seção Força-tarefa (21/09) */
.rotulo .link-rotulo { margin-left: 8px; border: 0; background: none; padding: 0; font: inherit; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--marca); cursor: pointer; }
.rotulo .link-rotulo:hover { text-decoration: underline; }

/* Barra do áudio que continua tocando entre conversas (22/09). O player é o MESMO elemento movido para cá,
   então posição e velocidade seguem — trocar de conversa não interrompe o podcast. */
.audio-fixo { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 20px;
  background: var(--elevado); border-top: 1px solid var(--linha); }
/* o mesmo player da mensagem, do mesmo tamanho, no centro: largo, as 34 barras viravam palitos soltos (01/10) */
.audio-fixo [data-audio] { flex: 0 1 auto; width: min(420px, 100%); min-width: 0; margin: 0 auto; }
.audio-fixo .audio-fechar { flex: 0 0 auto; }
.audio-na-barra { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-m);
  border: 1px dashed var(--linha); font-size: var(--t-meta); color: var(--apagado); }
.audio .audio-ouvir { flex: 0 0 auto; border: 0; background: none; padding: 2px 4px; cursor: pointer;
  font-size: 14px; line-height: 1; opacity: .55; }
.audio .audio-ouvir:hover { opacity: 1; }

/* Minhas conexões: as contas do Eduardo, com estado e quem pode usar cada uma (22/09) */
.conexoes { display: grid; gap: 10px; }
.conexao { display: grid; gap: 6px; align-content: start; border: 1px solid var(--linha); border-radius: var(--r-m); padding: 12px 14px; }
.conexao > .estado { justify-self: start; }
.conexao-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conexao-topo strong { flex: 1; min-width: 0; font-size: var(--t-corpo); }
.conexao .miudo { margin: 6px 0 0; }
.conexao-portas { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--linha); }
.conexao-portas .porta { display: flex; align-items: center; gap: 10px; font-size: var(--t-ui); }
.conexao-portas .porta b { min-width: 34px; }
.conexao-portas .porta span { flex: 1; min-width: 0; color: var(--apagado);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Comando que roda no computador dele, não aqui: o login do NotebookLM mora no Windows, então a linha mostra
   o que digitar em vez de um botão que não teria como funcionar (22/09). */
.conexao-comandos { margin: 10px 0 0; display: grid; gap: 8px; }
.conexao-comandos dt { font-size: var(--t-ui); color: var(--apagado); }
.conexao-comandos dd { margin: 2px 0 0; }
.conexao-comandos code { display: block; background: var(--elevado); border: 1px solid var(--linha);
  border-radius: var(--r-m); padding: 7px 9px; font-size: var(--t-meta); overflow-x: auto; white-space: pre; }

/* E-mails esperando o botão dele, no topo do quadro (22/09). O corpo inteiro fica a um clique: decidir sem ler
   é o que este bloco existe para evitar. */

.parar-resposta { color: var(--perigo); }

/* ---------- cofre na conversa: o pedido de segredos vira formulário no cartão (24/09) ---------- */
.chave-lugar { text-align: left; }
.chave-form input[type=password], .chave-form input[type=text] { font-family: var(--mono); }
.chave-vai { font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); overflow-wrap: anywhere; }
.chave-feito { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--t-ui); color: var(--marca-tinta); }
.chave-feito svg.i, .etiqueta svg.i, .conversar-topo svg.i, .chip-novo svg.i, .chip-editar svg.i, .audio-na-barra svg.i { width: 14px; height: 14px; }
.lista-itens .rotulo .dobra svg.i { width: 12px; height: 12px; }
.chip-assunto svg.i { width: 12px; height: 12px; vertical-align: -2px; }

/* ---------- questionário: o time pergunta antes de fazer (questionarios.py) ---------- */
.msg.q-aberto > .msg-texto { display: none; }  /* o formulário já traz as perguntas */
.questionario { display: grid; gap: 0; max-width: 560px; margin-top: 4px; padding: 0;
  background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--r-g); box-shadow: var(--sombra-leve);
  overflow: hidden; }
.questionario > * { padding: 14px 16px; }
.questionario > * + * { border-top: 1px solid var(--linha); }
.q-topo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding-bottom: 4px; font-size: var(--t-corpo); }
.q-topo + .q-porque { border-top: 0; }
.q-porque { margin: 0; padding-top: 0; font-size: var(--t-ui); color: var(--apagado); }
.q-campo { border: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.q-pergunta { font-size: var(--t-corpo); line-height: 1.4; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.q-pergunta > b { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--marca-suave); color: var(--marca-tinta); font-size: var(--t-rotulo); }
.q-pergunta em { font-style: normal; font-size: var(--t-meta); color: var(--apagado); margin-left: 4px; }
.q-ajuda, .q-palpite { font-size: var(--t-meta); color: var(--apagado); }
.q-campo textarea { min-height: 44px; }
.q-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.q-opcao { position: relative; }
.q-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.q-opcao > span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-pilula);
  border: 1px solid var(--linha-forte); background: var(--painel); font-size: var(--t-ui); }
.q-opcao > input:checked + span { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-tinta); }
.q-opcao input:focus-visible + span { box-shadow: 0 0 0 3px var(--marca-suave); }
/* opção longa ou com porquê: lista de linhas com marcador, em vez de pílulas quebrando em duas linhas */
.q-opcoes.em-lista { flex-direction: column; flex-wrap: nowrap; }
.q-opcoes.em-lista .q-opcao > span { display: grid; gap: 2px; min-height: 0; padding: 9px 12px 9px 36px; border-radius: var(--r-m);
  position: relative; line-height: 1.35; }
.q-opcoes.em-lista .q-opcao > span::before { content: ""; position: absolute; left: 12px; top: 11px; width: 14px; height: 14px;
  border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--painel); box-sizing: border-box; }
.q-opcoes.em-lista input[type=checkbox] + span::before { border-radius: var(--r-p); }
.q-opcoes.em-lista input:checked + span::before { border: 4px solid var(--marca); }
.q-opcoes.em-lista input[type=checkbox]:checked + span::before { border: 0; background: var(--marca); }
.q-opcoes.em-lista .q-opcao:hover > span { border-color: var(--marca); }
.q-opcao-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--tinta); }
.q-opcao-detalhe { font-size: var(--t-meta); color: var(--apagado); }
.q-opcao input:checked + span .q-opcao-titulo { color: var(--marca-tinta); font-weight: 600; }
.q-cor { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-p); vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.q-opcao-titulo code { font-family: var(--mono); font-size: var(--t-meta); background: none; border: 0; padding: 0; color: inherit; }
.q-botoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--fundo); }
.q-dica { font-size: var(--t-meta); color: var(--apagado); }
/* o botão do pedido da entrevista (Confirmar / Abrir formulário): na margem do texto do aviso, logo abaixo dele */
.sistema .entrevista-botoes { display: flex; gap: 8px; margin-top: 10px; white-space: normal; }

/* Fase E: o estado do dia no cartão do Time — legível, senão é ruído que ele não atribui a nada */
.agente-hoje { font-size: var(--t-meta); color: var(--apagado); font-style: italic; }

/* ＋ Novo (23/09): o que se abre ou se cria, num lugar só e à vista */
.lista-topo .novo { flex: none; }
.lista-topo .estado-lista { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.menu-novo-corpo { display: grid; gap: 2px; padding: 22px 18px 18px; }
.menu-novo-corpo h2 { margin: 0 0 4px 4px; }
.menu-novo-corpo .rotulo { margin: 12px 0 2px 4px; }
.item-novo { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; text-align: left; padding: 7px 8px; border: 0; border-radius: var(--r-m); background: none; color: inherit; font: inherit; cursor: pointer; }
.item-novo .ic { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-m); background: var(--elevado); color: var(--tinta-2); }
.item-novo .ic svg.i { width: 18px; height: 18px; }
.item-novo b { font-size: var(--t-ui); font-weight: 600; }
.item-novo small { color: var(--apagado); font-size: var(--t-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-novo:hover, .item-novo:focus-visible { background: var(--elevado); }
.item-novo:hover .ic, .item-novo:focus-visible .ic { background: var(--marca-suave); color: var(--marca-tinta); }

/* catálogo de vagas modelo (catalogo.py) */
.corpo-catalogo { display: grid; gap: 10px; padding: 22px; max-width: 640px; }
.catalogo-lista { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.vaga-catalogo { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-m); }
.vaga-catalogo header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vaga-catalogo header small { color: var(--tinta-2); font-size: var(--t-ui); }
.vaga-catalogo p { margin: 0; }
.vaga-catalogo .botoes { display: flex; gap: 8px; justify-content: flex-end; }
.vaga-catalogo .botoes input { flex: 1; min-width: 0; }
.vaga-catalogo.no-time { opacity: .6; }

/* Saúde e backup (saude.py, backup.py) */
.saude { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.saude li { display: grid; grid-template-columns: 1.2em minmax(8em, 13em) 1fr; gap: 6px; align-items: baseline; }
.saude li.andando > span:first-child { color: var(--tinta-2); }
.saude li > span:first-child svg.i { width: 16px; height: 16px; vertical-align: -3px; }
.saude-tecnico { margin: 0 0 12px; font-size: var(--t-ui); color: var(--tinta-2); }
.saude-tecnico ul { margin: 6px 0 0; padding-left: 18px; }
.saude li.ok > span:first-child { color: var(--marca); }
.saude li.ruim > span:first-child, .saude li.ruim b { color: var(--perigo); }
.saude li small { grid-column: 3; color: var(--tinta-2); }
.linha-backup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linha-backup .botao, .busca-cap .botao, .perguntar .botao { min-height: 40px; }
.linha-backup input { flex: 1; min-width: 140px; }

.passos-remoto { margin: 0 0 10px; padding-left: 1.2em; display: grid; gap: 6px; }
code.quebra { word-break: break-all; }

/* ---------- 24/09 (quita-d8): lista mais enxuta, frentes numa lista só, ações da nota ---------- */
/* Trabalhos, Agenda, Time e Ajustes viram atalhos de uma linha, dois por fileira */
/* seção da lista que dobra */
.lista-itens .rotulo .dobra { border: 0; background: none; padding: 2px 4px; margin-left: -4px; font: inherit; color: inherit;
  letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-p); }
.lista-itens .rotulo .dobra:hover { color: var(--tinta-2); }
.lista-itens .rotulo .conta { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.lista-itens .rotulo .ponto { position: static; }
.lista-itens .rotulo .link-rotulo { margin-left: auto; }
/* frentes da conversa: a lista inteira abre embaixo da faixa */
.faixa-assunto .painel-frentes { flex-basis: 100%; margin: 4px 0 2px; padding: 8px; border-radius: var(--r-m);
  background: var(--painel); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); max-height: 46vh; overflow-y: auto; }
.lista-frentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.frente { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-m); }
.frente.atual { background: var(--marca-suave); }
.frente-marca { display: grid; place-items: center; }
.frente-meio { display: grid; gap: 1px; min-width: 0; }
.frente-meio b { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frente-meio small { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frente-estado { font-weight: 600; }
.frente-estado.proposto { color: var(--marca-tinta); }
.frente-estado.parado { color: var(--atencao); }
.frente-acoes { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.frentes-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 8px 2px; border-top: 1px solid var(--linha); margin-top: 6px; }
.frentes-pe .miudo { flex-basis: 100%; }
@media (max-width: 700px) {
  .frente { grid-template-columns: auto minmax(0, 1fr); }
  .frente-acoes { grid-column: 2; }
}
/* ações do diálogo da nota (ouvir, copiar, conversar sobre a entrega) */
.nota-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
#dialogo-frente .fio { padding: 4px 0; }

/* mapa das buscas no Maps e na Receita (MapLibre + OpenFreeMap, 28/09): cartão com título, mapa, legenda e lista */
.mapa-lugar { position: relative; isolation: isolate; z-index: 0; width: min(600px, 100%); margin-top: 8px; border-radius: var(--r-g); overflow: hidden; box-shadow: 0 0 0 1px var(--linha), var(--sombra-leve); background: var(--elevado); }
.mapa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px 8px; }
.mapa-topo b { font-size: var(--t-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-topo span { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; }
.mapa-caixa { height: 340px; background: var(--painel); display: grid; place-items: center; font-size: var(--t-ui); color: var(--apagado); }
.mapa-caixa .maplibregl-canvas { outline: none; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--linha); font-size: var(--t-meta); color: var(--tinta-2); }
.mapa-chip { display: inline-flex; align-items: center; gap: 5px; }
.mapa-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--painel), 0 0 0 2.5px var(--linha); }
.mapa-obs { color: var(--apagado); margin-left: auto; }
.mapa-lista { border-top: 1px solid var(--linha); }
.mapa-lista summary { cursor: pointer; padding: 8px 14px; font-size: var(--t-ui); font-weight: 600; color: var(--marca-tinta); list-style: none; }
.mapa-lista summary::-webkit-details-marker { display: none; }
.mapa-itens { max-height: 240px; overflow-y: auto; padding: 0 6px 6px; }
.mapa-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--r-m); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mapa-item:hover, .mapa-item:focus-visible { background: var(--painel); }
.mapa-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-rotulo); font-weight: 700; color: var(--sobre-cor); background: var(--c); }
.mapa-item-nome { min-width: 0; font-size: var(--t-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-item-nome small { display: block; font-size: var(--t-rotulo); color: var(--apagado); overflow: hidden; text-overflow: ellipsis; }
.mapa-nota { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; text-align: right; }
.mapa-nota small { display: block; font-size: var(--t-rotulo); font-weight: 400; color: var(--apagado); }
.mapa-pop .maplibregl-popup-content { padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); color: var(--tinta); box-shadow: var(--sombra); font: var(--t-ui)/1.45 var(--sans); }
.mapa-pop .maplibregl-popup-close-button { color: var(--apagado); font-size: 16px; padding: 0 6px; }
.mapa-pop.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--elevado); }
.mapa-pop.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--elevado); }
.mapa-pop.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--elevado); }
.mapa-pop.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--elevado); }
.pop { display: grid; gap: 2px; padding-right: 10px; }
.pop-nome { font-size: var(--t-corpo); }
.pop-apagado { color: var(--apagado); font-size: var(--t-meta); }
.pop-nota span { color: var(--apagado); font-size: var(--t-meta); }
.pop a { margin-top: 4px; font-weight: 600; color: var(--marca-tinta); text-decoration: none; }
@media (max-width: 600px) { .mapa-caixa { height: 280px; } .mapa-obs { margin-left: 0; } }

/* skills sugeridas (sugeridas.py): um grupo por categoria, fechado até abrir */
.sug-grupo { margin-top: 6px; }
.sug-grupo > summary { cursor: pointer; padding: 6px 2px; }
.sug-grupo .cap-lista { margin: 6px 0 10px; }



/* encaminhar (encaminhar.py, 24/09): prévia do que vai, e a lista de conversas para escolher uma */
.enc-previa { margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--marca); border-radius: 0 10px 10px 0; background: var(--elevado); font-size: var(--t-ui); color: var(--tinta-2); overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }
.enc-previa b { color: var(--tinta); margin-right: 4px; }
.enc-destinos { display: grid; gap: 6px; max-height: min(46vh, 360px); overflow-y: auto; padding: 2px; }
.enc-destinos .marcavel input { border-radius: 50%; }

/* ---------- a lista de entregáveis (entregaveis.py, 01/10) ----------
   Um item por coisa combinada, com a sigla do formato; o mesmo desenho na conversa, na tarefa e na pasta Entregas. */
.item-sigla { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-p); font-family: var(--mono); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .02em; background: var(--neutro-suave); color: var(--tinta-2); }
.item-sigla[data-formato="documento"] { background: var(--perigo-suave); color: var(--perigo); }
.item-sigla[data-formato="planilha"] { background: var(--marca-suave); color: var(--marca-tinta); }
.item-sigla[data-formato="pagina"], .item-sigla[data-formato="apresentacao"] { background: color-mix(in srgb, var(--info) 14%, var(--painel)); color: var(--info); }
.item-sigla[data-formato="imagem"], .item-sigla[data-formato="audio"] { background: var(--atencao-suave); color: var(--atencao); }
.item-sigla[data-formato="agenda"] { background: var(--marca-suave); color: var(--marca-tinta); }
.item-sigla[data-formato="receita"] { background: color-mix(in srgb, var(--info) 14%, var(--painel)); color: var(--info); }
.fica-c { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-m); background: var(--atencao-suave); }
.fica-c .rotulo { color: var(--atencao); }
.fica-c ul { margin: 0; padding-left: 18px; font-size: var(--t-ui); color: var(--tinta); display: grid; gap: 2px; }
/* no cartão da conversa (06/10): uma linha que abre, no tom de atenção */
.fica-c.recolhido { padding: 8px 12px; }
.fica-c.recolhido > summary { cursor: pointer; list-style: none; }
.fica-c.recolhido > summary::-webkit-details-marker { display: none; }
.fica-c.recolhido > summary::after { content: " ›"; }
.fica-c.recolhido[open] > summary::after { content: " ⌄"; }
.fica-c.recolhido[open] ul { margin-top: 6px; }
/* o recado no cartão da conversa em até 4 linhas; o inteiro está ao abrir a entrega */
.entrega-c-recado.curto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
@media (max-width: 599px) { .entrega-c .itens-c { grid-template-columns: 1fr; } }
.acoes-c { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* o cartão "Seu time" (boas_vindas.time_proposto): rostos, o que cada um faz e por onde começar */
.time-proposto { display: grid; gap: 10px; margin-top: 10px; text-align: left; }
.tp-vagas { display: grid; gap: 6px; }
.tp-vaga { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-m); cursor: pointer; }
.tp-vaga:has(input:not(:checked)) { opacity: .55; }
.tp-vaga input { margin-top: 9px; accent-color: var(--marca); }
.tp-vaga .avatar { flex: none; color: var(--sobre-cor); }
.tp-txt { display: grid; gap: 2px; min-width: 0; font-size: var(--t-ui); }
.tp-txt small { color: var(--apagado); font-size: var(--t-meta); line-height: 1.4; }
.tp-rotulo { margin: 4px 0 0; font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.tp-entregas { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-entrega { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); font-size: var(--t-ui); cursor: pointer; }
.tp-entrega:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-tinta); }
.tp-entrega input { position: absolute; opacity: 0; pointer-events: none; }
.tp-feito { white-space: normal; height: auto; padding-block: 4px; }
.acoes-c .miudo { flex: 1 1 220px; }

/* a entrega na conversa: um cartão só */
.entrega-c, .combinado-c { display: grid; gap: 12px; max-width: 560px; margin-top: 4px; padding: 14px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); min-width: 0; }
.entrega-c-cab { display: grid; gap: 4px; justify-items: start; }
.entrega-c-titulo { margin: 0; font-family: var(--serifa); font-style: italic; font-weight: 500; font-size: var(--t-sec); line-height: 1.3; color: var(--tinta); text-wrap: balance; }
.entrega-c-recado, .entrega-recado { margin: 0; font-size: var(--t-ui); line-height: 1.5; color: var(--tinta-2); }
.itens-c { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.item-c { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px 8px 8px; border-radius: var(--r-m); border: 1px solid var(--linha); background: var(--elevado); color: var(--tinta); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.item-c.principal { border-color: var(--marca); }
.item-c.sem { cursor: default; opacity: .7; }
.item-c-meio { display: grid; min-width: 0; }
.item-c-nome { font-size: var(--t-ui); font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-c small, .item-l small, .item-t small { font-size: var(--t-meta); color: var(--apagado); }
.item-sit { flex: none; align-self: start; padding: 0 6px; border-radius: var(--r-pilula); font-size: var(--t-rotulo); font-weight: 600; background: var(--neutro-suave); color: var(--apagado); }
.item-sit.info { background: color-mix(in srgb, var(--info) 14%, var(--painel)); color: var(--info); }
.item-sit.perigo { background: var(--perigo-suave); color: var(--perigo); }
@media (hover: hover) { .item-c:not(.sem):hover { border-color: var(--tinta-2); } }
.como-c { font-size: var(--t-meta); color: var(--apagado); border-top: 1px solid var(--linha); padding-top: 8px; }
.como-c summary { cursor: pointer; }
.como-c ul { margin: 6px 0 0; padding-left: 18px; }

/* "Você vai receber": a lista ao vivo */
.combinado-c-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.combinado-c-cab b { font-family: var(--serifa); font-style: italic; font-weight: 500; font-size: var(--t-sec); }
.combinado-c-quem { margin: 2px 0 8px; }
.combinado-c-sub { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.combinado-c-sub b { font-size: var(--t-meta); font-weight: 600; }
/* as partes do plano no cartão "Vou fazer assim" (entregaveis._plano_curto, protótipo Plano-A) */
.plano-c { margin: 4px 0 6px; padding-left: 1.4em; display: grid; gap: 3px; font-size: var(--t-ui); }
.plano-c li { padding-left: 2px; }
.plano-c li small { margin-left: 6px; color: var(--apagado); font-size: var(--t-meta); }
.plano-c li.feito { color: var(--apagado); }
.plano-c li.feito > span { text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.itens-l, .itens-t { list-style: none; margin: 0; padding: 0; display: grid; }
.item-l, .item-t { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); min-width: 0; }
.item-l:first-child, .item-t:first-child { border-top: 0; }
.item-l-meio, .item-t-meio { flex: 1; display: grid; gap: 1px; min-width: 0; }
.item-l-nome, .item-t-nome { font-size: var(--t-ui); font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.item-l-lado { display: flex; align-items: center; gap: 8px; flex: none; }
.item-l.fora .item-l-nome, .item-t.fora .item-t-nome { text-decoration: line-through; color: var(--apagado); font-weight: 500; }
.item-l.fora .item-sigla, .item-t.fora .item-sigla { opacity: .5; }
.item-t .acoes-t { flex: none; display: flex; gap: 6px; align-items: center; }
.versoes-item { margin-top: 4px; font-size: var(--t-meta); color: var(--apagado); }
.versoes-item summary { cursor: pointer; }
.versoes-item ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.versoes-item li { display: flex; align-items: center; gap: 8px; }
.texto-inteiro .entrega-texto { max-height: none; }

/* a pasta Entregas */
.entregas-filtro, .entregas-lista { width: 100%; max-width: 1080px; margin-inline: auto; }
.entregas-filtro { margin-bottom: 12px; }
.entregas-lista { display: grid; gap: 12px; }
.entrega-final .cabeca-bloco { display: grid; gap: 2px; }
.titulo-final { font-family: var(--serifa); font-style: italic; font-size: var(--t-sec); text-align: left; color: var(--tinta); }
/* Receitas (02/10): o replay de uma tarefa; os campos do dia e o play */
.receitas-lista { width: 100%; max-width: 1080px; margin-inline: auto; display: grid; gap: 12px; }
.receita-t { display: grid; gap: 8px; }
.receita-t .cabeca-bloco { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.receita-nome b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-sec); color: var(--tinta); }
.receita-pedido { font-size: var(--t-ui); color: var(--tinta-2); }
.campos-r { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }
.campo-r { display: grid; gap: 4px; font-size: var(--t-meta); color: var(--tinta-2); }
.campo-r input { width: 100%; }
/* a receita que a tarefa de montagem entrega (02/10): os blocos juntos, sem o respiro de seção */
.receita-montada { display: grid; gap: 6px; }
.receita-montada > p, .receita-montada > ul, .receita-montada > ol, .receita-montada > h4 { margin: 0; }
.receita-montada > h4 { margin-top: 8px; }
.receita-montada .falhas-t { padding-left: 20px; display: grid; gap: 2px; }
.campo-marca { background: var(--marca-suave); color: var(--marca-tinta); border-radius: var(--r-p); padding: 0 4px; font-weight: 600; }
@media (max-width: 640px) {
  .item-t { flex-wrap: wrap; }
  .item-t-meio { flex-basis: calc(100% - 48px); }
  .item-t .acoes-t { margin-left: 48px; }
  /* a lista do Vou fazer assim numa linha por item (06/10): o estado e o Tirar à direita, o nome quebra */
  .item-l { align-items: flex-start; }
  .item-l-lado { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* ---------- o visualizador (visualizador.py, 01/10): o entregável aberto na sala ---------- */
.dialogo-ver { width: min(1100px, calc(100vw - 32px)); height: min(92dvh, 1100px); }
.ver-corpo { padding: 16px; background: var(--fundo); display: grid; align-content: start; gap: 12px; }
.ver-espera { justify-self: center; margin-top: 24px; }
.ver-pdf { display: grid; justify-items: center; gap: 16px; }
.ver-pagina-pdf { display: grid; place-items: center; max-width: 100%; background: var(--painel); border-radius: var(--r-p); box-shadow: var(--sombra-leve); overflow: hidden; }
.ver-pagina-pdf canvas { display: block; max-width: 100%; height: auto !important; }
.ver-corpo[data-formato="pagina"] { padding: 0; }
.ver-pagina { width: 100%; height: 100%; min-height: 70dvh; border: 0; background: var(--painel); }
.ver-imagem { display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.ver-imagem img { max-width: 100%; max-height: calc(92dvh - 120px); object-fit: contain; border-radius: var(--r-p); box-shadow: var(--sombra-leve); }
.ver-imagem.real { cursor: zoom-out; place-items: start; overflow: auto; }
.ver-imagem.real img { max-width: none; max-height: none; }
.ver-audio { padding: 24px 0; }
.ver-texto { margin: 0; padding: 20px 24px; background: var(--painel); border-radius: var(--r-m); border: 1px solid var(--linha); overflow-wrap: anywhere; }
pre.ver-texto { font-family: var(--mono); font-size: var(--t-meta); white-space: pre-wrap; }
.ver-abas { justify-self: start; }
.ver-planilha { overflow: auto; max-height: calc(92dvh - 170px); background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-m); }
.ver-planilha table { border-collapse: separate; border-spacing: 0; font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.ver-planilha th, .ver-planilha td { padding: 6px 10px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ver-planilha thead th { position: sticky; top: 0; z-index: 1; background: var(--elevado); color: var(--tinta); font-weight: 600; }
.ver-planilha .n { position: sticky; left: 0; background: var(--elevado); color: var(--apagado); text-align: right; font-family: var(--mono); }
.ver-planilha thead .n { z-index: 2; }
/* editar na tela (fase 2): texto e prévia lado a lado; no celular, um embaixo do outro */
.editor-duplo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: calc(92dvh - 150px); }
.editor-texto { width: 100%; min-height: 100%; resize: none; padding: 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-m); background: var(--painel); color: var(--tinta); font: inherit; font-size: var(--t-ui); line-height: 1.55; }
.editor-texto.mono { font-family: var(--mono); font-size: var(--t-meta); }
.editor-texto:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.editor-previa { min-width: 0; overflow: auto; padding: 16px 20px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-m); }
iframe.editor-previa { padding: 0; min-height: 100%; }
.ver-planilha.editando td[data-c] { cursor: text; }
.ver-planilha.editando td[data-c]:focus { outline: 2px solid var(--marca); outline-offset: -2px; background: var(--marca-suave); }
@media (max-width: 640px) {
  .dialogo-ver { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .dialogo-ver .log-topo { flex-wrap: wrap; row-gap: 8px; }
  .dialogo-ver .log-cabeca { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .dialogo-ver .nota-acoes { order: 3; flex-basis: 100%; }
  .editor-duplo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(320px, 1fr) minmax(240px, auto); }
  .ver-corpo { padding: 8px; }
}

/* ---------- Hoje (03/10): a primeira tela, uma lista que termina ---------- */
.hoje { display: grid; gap: 26px; width: 100%; max-width: 760px; margin: 0 auto; padding: 22px 20px 48px; }
.hoje-cab { display: grid; gap: 8px; }
.hoje-ola { font: italic 400 var(--t-grande)/1.15 var(--serifa); color: var(--tinta); margin: 0; }
.hoje-ontem { color: var(--tinta-2); margin: 0; }
.hoje-agenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hoje-agenda ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hoje-sec { display: grid; gap: 10px; }
.hoje-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hoje-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); }
.hoje-meio { display: grid; gap: 2px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.hoje-meio b { font-weight: 600; overflow-wrap: anywhere; }
.hoje-meio small { color: var(--apagado); font-size: var(--t-meta); }
.hoje-acoes { display: flex; gap: 6px; align-items: center; }
.hoje-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--atencao-suave); color: var(--atencao); }
.hoje-ic svg { width: 16px; height: 16px; }
.hoje-mini { width: 36px; height: 36px; border-radius: var(--r-p); object-fit: cover; background: var(--elevado); border: 1px solid var(--linha); }
.hoje-mini.sigla { display: grid; place-items: center; font: 600 10px var(--mono); color: var(--tinta-2); }
.hoje-proximo { color: var(--tinta-2); margin: 0; }
@media (max-width: 760px) {
  .hoje { padding: 16px 16px 32px; gap: 20px; }
  .hoje-item { grid-template-columns: 32px minmax(0, 1fr); }
  .hoje-acoes { grid-column: 1 / -1; display: flex; gap: 8px; }
  /* a ação do cartão na largura dele, como no protótipo (Hoje A no celular): é o toque que importa */
  .hoje-acoes .botao { flex: 1 1 0; justify-content: center; min-height: 44px; }
}

/* pessoa da Equipe (pessoas.py, 03/10): o que o papel não permite nem aparece (o servidor também recusa) */
#app[data-papel="equipe"] [data-acao="aprovar-entrega"], #app[data-papel="equipe"] [data-acao="seguir-trabalho"],
#app[data-papel="equipe"] [data-acao="teto-trabalho"], #app[data-papel="equipe"] [data-acao="ligar-conexao"],
#app[data-papel="equipe"] [data-acao="fechar-cartao"], #app[data-papel="equipe"] [data-acao="pausar-trabalho"],
#app[data-papel="equipe"] [data-acao="retomar-trabalho"], #app[data-papel="equipe"] [data-acao="link-cliente"],
#app[data-papel="equipe"] [data-acao="lista-confirmar"], #app[data-papel="equipe"] [data-acao="reabrir-trabalho"],
#app[data-papel="equipe"] [data-acao="nova-subtarefa"], #app[data-papel="equipe"] [data-acao="lista-tirar"],
#app[data-papel="equipe"] [data-acao="lista-reviver"], #app[data-papel="equipe"] [data-acao="voz"] { display: none !important; }
#app[data-papel="equipe"] [data-lugar="memoria"], #app[data-papel="socio"] [data-lugar="memoria"] { display: none !important; }
#app[data-papel="equipe"] .lista [data-canal^="dm:"], #app[data-papel="equipe"] .lista [data-canal="notas"],
#app[data-papel="socio"] .lista [data-canal^="dm:"], #app[data-papel="socio"] .lista [data-canal="notas"] { display: none !important; }

/* a biblioteca da missão (biblioteca.py, 03/10): Ver e o ⋯ juntos, à direita da linha */
.mem-acao { display: contents; }
.mem-topo .menu-lista { left: auto; right: 0; }
.mem-item > footer .mem-botoes { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#mem-modos { margin-bottom: 8px; }

/* quem está com a Sala aberta agora (pessoas.py, 03/10): ponto verde e os nomes, depois do subtítulo */
.presenca { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.presenca small { margin-left: 6px; font-size: var(--t-meta); color: var(--apagado); }
@media (max-width: 720px) { .presenca small { display: none; } }
.avatar .online { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--marca); border: 2px solid var(--painel); }
.convite-papeis { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.convite-papel { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--linha); cursor: pointer; }
.convite-papel:has(input:checked) { box-shadow: inset 0 0 0 2px var(--marca); background: var(--marca-suave); }
.convite-papel input { width: auto; height: auto; flex: none; margin: 3px 0 0; }
.convite-papel span { display: grid; gap: 2px; flex: 1; min-width: 0; text-align: left; }
.convite-papel small { color: var(--apagado); font-size: var(--t-meta); }
#convite-msg { width: 100%; box-sizing: border-box; }
.hoje-item.novo .hoje-meio b { font-weight: 700; }
.troca-tamanho .aba { font-size: var(--t-meta); padding: 2px 10px; min-height: 26px; }
/* Memória → Dados (05/10) */
.dados-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.dados-titulo { display: grid; gap: 2px; flex: 1 1 14em; min-width: 0; }
.dados-titulo small { color: var(--apagado); font-size: var(--t-meta); }
.dados-sub { margin: 18px 0 8px; font-size: var(--t-corpo); }
.dados-perguntas { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-g); background: var(--atencao-suave); }
.dados-perguntas h3 { margin: 0; font-size: var(--t-corpo); }
.dados-perguntas > .miudo { margin: 0; }
.dados-pergunta { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); }
.dados-pergunta legend { padding: 0 4px; font-size: var(--t-ui); font-weight: 600; }
.dados-outra { width: min(100%, 18em); }
.dicionario { display: grid; gap: 4px; margin-top: 8px; overflow-x: auto; }
/* O que tem dentro (05/10, "melhorar a disposição"): busca ao lado do título; cada tabela em duas linhas */
.dados-dentro-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.dados-filtro { width: min(280px, 100%); }
.dados-tabelas { display: grid; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); overflow: hidden; }
.dados-tabela { border-top: 1px solid var(--linha); }
.dados-tabela:first-child { border-top: 0; }
.dados-tabela > summary { list-style: none; cursor: pointer; display: grid; gap: 3px; padding: 10px 14px; }
.dados-tabela > summary::-webkit-details-marker { display: none; }
.dados-tabela > summary:hover { background: var(--elevado); }
.dados-tabela[open] > summary { background: var(--elevado); }
.dados-tabela > div { padding: 4px 14px 14px; }
.dt-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.dt-nome .mono { font-weight: 600; font-size: var(--t-corpo); overflow-wrap: anywhere; }
.dt-meta { color: var(--apagado); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.dt-nome .estado { margin-left: auto; font-size: var(--t-meta); }
.dt-linha { color: var(--apagado); font-size: var(--t-meta); line-height: 1.45; max-width: 75ch; }
.dados-regras { display: grid; gap: 8px; }
.dados-regra { border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); padding: 10px 14px; display: grid; gap: 6px; min-width: 0; }
.dados-regra header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dados-regra p { margin: 0; line-height: 1.5; }
.dados-sql-ver { margin: 4px 0 0; padding: 8px 10px; border-radius: var(--r-p); background: var(--fundo); font: var(--t-meta)/1.5 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14em; overflow: auto; }
.dic-linha { display: grid; grid-template-columns: minmax(8em, 1fr) minmax(12em, 2.4fr) minmax(5em, .6fr) 3.5em 3.5em; gap: 6px; align-items: center; min-width: 560px; }
.dic-linha.dic-topo { font-size: var(--t-meta); color: var(--apagado); }
.dic-linha > span.mono { display: flex; gap: 4px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); }
.dic-linha > span.mono svg.i { width: 14px; height: 14px; color: var(--marca); flex: none; }
.dic-linha input[type=text] { min-width: 0; }
.dic-linha input[type=checkbox] { justify-self: center; width: 16px; height: 16px; accent-color: var(--marca); }
.grade-dados { max-height: 420px; overflow: auto; margin-top: 10px; border: 1px solid var(--linha); border-radius: var(--r-m); }
.grade-dados table { border-collapse: collapse; font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.grade-dados th, .grade-dados td { padding: 5px 10px; border-bottom: 1px solid var(--linha); text-align: left; white-space: nowrap; }
.grade-dados th { position: sticky; top: 0; background: var(--elevado); font-weight: 600; }
.dados-pedir { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.dados-pedir textarea, #dados-sql { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .dados-pedir { grid-template-columns: 1fr; } }
.dados-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 10px 0; }
.dados-tipo { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); color: var(--tinta); cursor: pointer; font: inherit; }
.dados-tipo:hover { border-color: var(--marca); }
.dados-tipo small { color: var(--apagado); font-size: var(--t-meta); }
.dados-permissao { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); }
.dados-permissao p { margin: 0; }
.dados-permissao pre { margin: 0; padding: 8px; overflow-x: auto; font-size: var(--t-meta); background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-p); }
.dados-permissao .botao { justify-self: start; }
@media (min-width: 640px) { #dialogo-dados { width: min(640px, calc(100vw - 32px)); } }
.dados-pergunta .marcavel > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.marcavel input.dados-outra { flex: 1 1 12em; width: auto; min-width: 10em; height: auto; margin: 0; }
.dados-pergunta .marcavel > span { flex: 1; }
.dados-nivel { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-g); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.dados-nivel-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dados-nivel-topo .miudo { flex: 1 1 16em; margin: 0; }
.dados-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-ui); }
.dados-passos li { display: flex; gap: 8px; align-items: center; color: var(--apagado); }
.dados-passos li.ok { color: var(--tinta); }
.dados-passos li svg.i { width: 15px; height: 15px; color: var(--marca); }
.dados-passos li > i { width: 9px; height: 9px; margin: 0 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.dados-provas { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 6px; font-size: var(--t-meta); }
.prova-c { display: grid; gap: 6px; margin-top: 8px; }
.prova-c code { display: block; white-space: pre-wrap; word-break: break-word; font-size: var(--t-meta); color: var(--tinta-2); }
.prova-c small { color: var(--apagado); }
.drive-escolher { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); }
.drive-lista { display: grid; gap: 4px; max-height: min(320px, 40vh); overflow: auto; }
.drive-item { display: grid; gap: 1px; text-align: left; padding: 7px 10px; border: 1px solid var(--linha); border-radius: var(--r-p); background: var(--painel); color: var(--tinta); font: inherit; cursor: pointer; }
.drive-item small { color: var(--apagado); font-size: var(--t-meta); }
.drive-item.sel, .drive-item:hover { border-color: var(--marca); }
.dados-acesso { display: grid; gap: 10px; }
.dados-acesso .dados-sub { margin-bottom: 0; }
.dados-grade { max-height: none; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-m); }
.dados-lendo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; }
.dados-perguntas { gap: 8px; }
.dp-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dp-topo b { font-size: var(--t-ui); }
.dp-pergunta { margin: 0; font-size: var(--t-corpo); font-weight: 600; }
.dados-perguntas .mono.miudo { margin: -4px 0 0; }
.dp-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-opcao { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); color: var(--tinta); font: inherit; font-size: var(--t-ui); cursor: pointer; }
.dp-opcao:hover { border-color: var(--marca); }
.dp-opcao.palpite { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.dp-opcao small { color: var(--marca-tinta); font-size: var(--t-meta); }
.dp-outra { display: flex; gap: 6px; }
.dp-outra input { flex: 1; min-width: 0; }
.dp-rodape { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dados-sub small { font-weight: 400; }
#dialogo-app { width: min(640px, calc(100vw - 32px)); }
.app-modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; }
.app-modelo { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border: 1px solid var(--linha);
  border-radius: var(--r-m); background: var(--painel); color: var(--tinta); font: inherit; cursor: pointer; }
.app-modelo:hover { border-color: var(--marca); }
.app-modelo span { line-height: 1.45; }
.app-modelo small { color: var(--apagado); font-size: var(--t-meta); line-height: 1.4; }
.app-modelo .app-modelo-quem { margin-top: 2px; }
.app-regras { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }
.app-novo-acesso { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: 8px; }
@media (max-width: 560px) { .app-novo-acesso { grid-template-columns: 1fr 1fr; } .app-novo-acesso .botao { grid-column: 1 / -1; } }
.app-link { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--marca-suave); }
.app-link .ms-linha { display: flex; gap: 6px; }
.app-link input { flex: 1; min-width: 0; }
.vigia-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; }
.de-onde { margin: 4px 0; font-size: var(--t-meta); }
.de-onde summary { color: var(--apagado); }
.de-onde ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 6px; }
.de-onde code { display: block; margin-top: 2px; white-space: pre-wrap; word-break: break-word; color: var(--tinta-2); }
/* IA e gasto: os três números (05/10) */
.ia-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }
.ia-numeros > div { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: var(--r-m); background: var(--elevado); }
.ia-numeros b { font-size: var(--t-sec); font-variant-numeric: tabular-nums; }
.ia-numeros small { color: var(--apagado); font-size: var(--t-meta); }
.ia-numeros .barra { margin-top: 6px; }
details.construir > summary:focus-visible { outline-offset: 2px; }
/* o que o time sabe fazer, no Time (05/10) */
.cap-time { display: grid; gap: 10px; margin-top: 8px; }
.cap-time-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cap-time-topo .titulo-time { margin: 0; }
.cap-time > .miudo { margin: 0; }
.cap-espera { display: grid; gap: 8px; }
.metodo { display: grid; gap: 4px; padding: 10px 14px; }
.metodo + .metodo { border-top: 1px solid var(--linha); }
.metodo.pausado { opacity: .7; }
.metodo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.metodo-nome { display: grid; gap: 2px; flex: 1 1 16em; min-width: 0; }
.metodo-nome small { color: var(--apagado); font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metodo-anexos summary { font-size: var(--t-meta); color: var(--apagado); }
.cap-cat { margin: 12px 0 6px; font-size: var(--t-ui); }
/* as contas ligadas, uma linha cada, e a grade de quem pode usar (05/10) */
.contas { display: grid; border: 1px solid var(--linha); border-radius: var(--r-m); overflow: hidden; }
.conta { display: grid; gap: 6px; padding: 12px 14px; }
.conta + .conta { border-top: 1px solid var(--linha); }
.conta.quebrada { background: color-mix(in srgb, var(--perigo) 6%, transparent); }
.conta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.conta-nome { display: grid; gap: 2px; flex: 1 1 14em; min-width: 0; }
.conta-nome small { color: var(--apagado); font-size: var(--t-meta); }
.conta-nome .estado { font-size: var(--t-meta); }
.conta-quem { display: flex; gap: 10px; align-items: center; }
.quem-usa { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-meta); color: var(--apagado); }
.quem-usa > small { text-transform: uppercase; letter-spacing: .05em; }
.rostos { display: inline-flex; align-items: center; }
.rostos .avatar.p { width: 24px; height: 24px; font-size: 11px; box-shadow: 0 0 0 2px var(--painel); }
.rostos .avatar + .avatar { margin-left: -6px; }
.rostos small { margin-left: 4px; }
.conta-botoes { display: flex; gap: 6px; align-items: center; }
.conta-sobre summary { font-size: var(--t-meta); color: var(--apagado); }
.conectar-mais { margin: 18px 0 4px; }
.conexoes-grupo h4 { margin: 10px 0 6px; font-size: var(--t-ui); }
.conexoes-grupo h4 small { font-weight: 400; color: var(--apagado); }
details.construir { border-top: 1px solid var(--linha); padding: 10px 0; }
details.construir > summary { font-weight: 600; font-size: var(--t-ui); }
.grade-quem { --colunas: 1; display: grid; grid-template-columns: 1fr repeat(var(--colunas), auto); gap: 6px 16px; align-items: center; max-height: 55vh; overflow: auto; }
.grade-quem > b { font-size: var(--t-meta); color: var(--apagado); text-align: center; }
.grade-agente { display: flex; gap: 8px; align-items: center; min-width: 0; }
.grade-agente > span { display: grid; min-width: 0; font-size: var(--t-ui); }
.grade-agente small { color: var(--apagado); font-size: var(--t-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-marca { display: flex; justify-content: center; }
.grade-marca input { width: 18px; height: 18px; accent-color: var(--marca); }
/* Ajustes mais simples (05/10): a linha da Sala, o resumo de cada seção e a faixa do que falta */
.linha-sala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.linha-sala .acoes-t { display: flex; gap: 8px; margin: 0; }
.resumo-ia { margin: 0; font-size: var(--t-ui); }
.resumo-ia b { font-variant-numeric: tabular-nums; }
.saude.saude-curta li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; }
.saude.saude-curta li > :nth-child(n+3) { grid-column: 2; }
.falta-resolver { display: grid; gap: 6px; margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-g); background: var(--atencao-suave); }
.falta-resolver > b { color: var(--atencao); font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .05em; }
.falta-resolver ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.falta-resolver li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.falta-resolver li span { display: grid; min-width: 0; font-size: var(--t-ui); }
.falta-resolver li small { color: var(--apagado); font-size: var(--t-meta); }
/* a caixa de entrada do Hoje (Hoje-B) e o plano editável no painel (Plano-B) */
.fio-ent-linha { margin: -4px 0 0; }
.plano-editavel li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.plano-editavel li > span:first-child { flex: 1 1 220px; min-width: 0; }
.plano-quem { font-size: var(--t-meta); padding: 2px 24px 2px 8px; min-height: 28px; width: auto; }
.plano-bts { display: inline-flex; gap: 2px; }
.plano-bts .icone-botao { width: 28px; height: 28px; font-size: var(--t-meta); }
.fio-entrega { grid-template-columns: minmax(0, 1fr); }
.fio-entrega .ms-linha { flex-wrap: wrap; }
@media (max-width: 599px) { .plano-editavel li > span:first-child { flex-basis: 100%; } .fio-entrega .ms-linha input { flex-basis: 100%; } }
/* os números sem fonte da entrega (protótipo Ensinar-B) */
.sem-fonte { display: grid; gap: 6px; margin: 8px 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--atencao-suave); }
.sem-fonte ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--t-ui); }
/* o quadro (protótipo Visao-B): o filtro do que espera você e a previsão no cartão */
.quadro-topo { display: flex; gap: 8px; margin-bottom: 10px; }
.cartao-previsao { display: block; margin-top: 4px; font-size: var(--t-meta); color: var(--apagado); }
/* Minhas conexões em catálogo (protótipo Conexao-B) */
.conexoes-grupo { display: grid; gap: 8px; margin-bottom: 18px; }
.conexoes-grupo > .conexoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.conexoes-sala > summary { cursor: pointer; }
.conexao-outro { border-style: dashed; }
/* a confiança com cada cliente no cartão do agente (protótipo Jogo-B) */
.por-cliente { margin-top: 6px; }
.por-cliente summary { cursor: pointer; }
.por-cliente ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.por-cliente li { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 10px; align-items: center; }
.pc-nome { display: grid; gap: 1px; min-width: 0; font-size: var(--t-ui); }
.pc-nome small { color: var(--apagado); font-size: var(--t-meta); }
.pc-barra { height: 6px; border-radius: var(--r-pilula); background: var(--neutro-suave); overflow: hidden; }
.pc-barra b { display: block; height: 100%; background: var(--marca); }
@media (max-width: 599px) { .por-cliente li { grid-template-columns: minmax(0, 1fr) 60px; } .por-cliente li .botao { grid-column: 1 / -1; justify-self: start; } }
.aviso-vagas { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 4px; padding: 10px 14px; border: 0; border-radius: var(--r-m); background: var(--atencao-suave); color: var(--atencao); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.aviso-vagas svg { margin-left: auto; }
/* "Enquanto você dormia" na Simples (protótipo Uau-B): o que ficou pronto à noite, em cartões grandes */
.hoje-noite h2 { margin: 0 0 12px; font: italic 500 var(--t-titulo)/1.25 var(--serifa); text-wrap: balance; }
.noite-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.noite-cartao { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); overflow: hidden; min-width: 0; }
.noite-capa { display: block; padding: 0; border: 0; background: var(--elevado); aspect-ratio: 4 / 3; cursor: zoom-in; overflow: hidden; }
.noite-capa.sem-capa { aspect-ratio: 3 / 1; }
.noite-capa img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.noite-sigla { display: grid; place-items: center; height: 100%; font: italic 500 40px var(--serifa); color: var(--apagado); }
.noite-meio { display: grid; gap: 2px; padding: 12px 14px 4px; min-width: 0; }
.noite-meio b { font-size: var(--t-ui); }
.noite-meio small { color: var(--apagado); font-size: var(--t-meta); }
.noite-acoes { display: flex; gap: 8px; padding: 10px 14px 14px; }
/* a pergunta do agente respondida no próprio Hoje (protótipo Hoje-A) */
/* a Memória da Simples (protótipo Cerebro-B): mandar, perguntar e o que o time já sabe */
.memoria-simples { display: grid; gap: 20px; max-width: 760px; }
.memoria-simples h2 { margin: 0 0 6px; font-size: var(--t-sec); font-weight: 600; }
.memoria-simples p { margin: 0 0 12px; color: var(--tinta-2); }
.ms-mandar { padding: 20px; border: 1.5px dashed var(--linha-forte); border-radius: var(--r-g); background: var(--painel); display: grid; gap: 6px; }
.ms-mandar.solta { border-color: var(--marca); background: var(--marca-suave); }
.ms-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-linha { display: flex; gap: 8px; }
.ms-linha input { flex: 1; min-width: 0; }
.ms-sabe > div { display: grid; gap: 8px; }
.ms-sabe .botao { justify-self: start; }
.hoje-pergunta { grid-column: 2 / -1; display: grid; gap: 8px; min-width: 0; }
.hoje-pergunta p { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); white-space: pre-line; }
.hoje-resp { display: flex; gap: 8px; min-width: 0; }
.hoje-resp input { flex: 1 1 0; width: auto; min-width: 0; }
#app[data-papel="equipe"] .gasto-sala { display: none; }  /* dinheiro é do dono e do sócio */

/* o cliente convidado (pessoas.py, 03/10): Hoje e a conversa dele; o resto nem aparece (o servidor também recusa) */
#app[data-papel="cliente"] [data-acao="aprovar-entrega"], #app[data-papel="cliente"] [data-acao="seguir-trabalho"], #app[data-papel="cliente"] [data-acao="teto-trabalho"], #app[data-papel="cliente"] [data-acao="ligar-conexao"], #app[data-papel="cliente"] [data-acao="fechar-cartao"], #app[data-papel="cliente"] [data-acao="pausar-trabalho"], #app[data-papel="cliente"] [data-acao="retomar-trabalho"], #app[data-papel="cliente"] [data-acao="link-cliente"], #app[data-papel="cliente"] [data-acao="lista-confirmar"], #app[data-papel="cliente"] [data-acao="reabrir-trabalho"], #app[data-papel="cliente"] [data-acao="nova-subtarefa"], #app[data-papel="cliente"] [data-acao="lista-tirar"], #app[data-papel="cliente"] [data-acao="lista-reviver"], #app[data-papel="cliente"] [data-acao="aprovar-com-nota"], #app[data-papel="cliente"] [data-acao="refazer-entrega"], #app[data-papel="cliente"] [data-acao="incluir-pessoa"], #app[data-papel="cliente"] [data-acao="editar-time"], #app[data-papel="cliente"] [data-acao="novo"], #app[data-papel="cliente"] [data-acao="salvar-receita"], #app[data-papel="cliente"] [data-acao="apresentacao-final"] { display: none !important; }
#app[data-papel="cliente"] [data-lugar]:not([data-lugar="hoje"]):not([data-lugar="conversa"]),
#app[data-papel="cliente"] .gasto-sala, #app[data-papel="cliente"] #faixa-trabalhos,
#app[data-papel="cliente"] #rodando, #app[data-papel="cliente"] [data-log],
#app[data-papel="cliente"] [data-interromper], #app[data-papel="cliente"] [data-acao="voz"] { display: none !important; }

/* o Hoje completo (hoje.py, 03/10): o projeto tem três linhas no meio, e o estado e o botão à direita */
.hoje-projeto .hoje-meio { display: grid; gap: 2px; text-align: left; min-width: 0; }
.hoje-projeto .hoje-proximo { font-size: var(--t-ui); margin: 0; }
.hoje-projeto .hoje-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hoje-mais { list-style: none; padding: 4px 12px; }

/* a central de notificações (notificacoes.py, 04/10): o sino ao lado do "?", com o número das novidades */
.botao-sino { position: relative; margin-right: 6px; }
.botao-sino .contador { top: -7px; right: -7px; }
.dialogo-notificacoes { width: min(640px, calc(100vw - 32px)); }
.dialogo-notificacoes .hoje-sec + .hoje-sec { margin-top: 18px; }
.dialogo-notificacoes .hoje-sec h3 { margin: 0 0 8px; }
.dialogo-notificacoes .ponto { display: inline-block; vertical-align: middle; }
/* no celular o topo leva título, missão, "?", sino e o estado: com o sino, "Ajustes" virava "Aj…". "No ar" fica só o
   ponto (a palavra continua no aria-label); pausada e sem conexão continuam escritas, porque pedem atenção */
@media (max-width: 700px) {
  .topo-acoes { gap: 6px; }
  .botao-ajuda, .botao-sino { margin-right: 0; }
  .topo-acoes .estado-sala:not(.pausada):not(.sem-conexao), .estado-lista .estado-sala:not(.pausada):not(.sem-conexao) { padding: 0 12px; gap: 6px; }
  .topo-acoes .estado-sala:not(.pausada):not(.sem-conexao) > span:first-of-type,
  .estado-lista .estado-sala:not(.pausada):not(.sem-conexao) > span:first-of-type { display: none; }
  /* a conversa ainda tem voltar, avatar e voz: o "?" sai dali (fica no topo de todas as outras telas) */
  #conversa-topo .botao-ajuda { display: none; }
}

/* a Lara tirando dúvida (ajuda.py, 03/10): o "?" ao lado do selo da sala, e o diálogo */
.botao-ajuda { margin-right: 6px; }
.dialogo-ajuda { width: min(640px, calc(100vw - 32px)); }
.ajuda-campo { display: flex; gap: 8px; flex-wrap: wrap; }
.ajuda-campo input { flex: 1; min-width: 0; }
.ajuda-secoes { display: grid; gap: 6px; }
.ajuda-secao { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: var(--r-m); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.ajuda-secao small { color: var(--apagado); font-size: var(--t-meta); }
.ajuda-texto { display: grid; gap: 6px; margin-top: 10px; }
.ajuda-msg { width: 100%; box-sizing: border-box; }
.ajuda-resolveu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ajuda-pe { margin-top: 14px; text-align: right; }
.ajuda-tutoriais { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; text-align: left; border: 0; border-radius: var(--r-m); background: var(--marca-suave); color: var(--marca-tinta); font: inherit; cursor: pointer; }
.ajuda-tutoriais span:first-child { display: grid; gap: 2px; }
.ajuda-tutoriais small { font-size: var(--t-meta); color: var(--tinta-2); }
.ajuda-tutoriais .seta { font-size: var(--t-titulo); line-height: 1; }

/* os tutoriais (tutoriais.py, 05/10): a lista em cartões e, aberto, o caso, os passos e Fazer comigo */
.dialogo-tutoriais { width: min(880px, calc(100vw - 32px)); }
.tut-moldura { display: grid; gap: 12px; padding: 22px; }
#tutoriais-corpo { display: grid; gap: 12px; min-width: 0; }
#tutoriais-corpo > .miudo { margin: 0; }
.tut-abas { justify-self: start; }
.tut-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tut-cartao { display: grid; gap: 6px; align-content: start; text-align: left; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); color: var(--tinta); font: inherit; cursor: pointer; }
.tut-cartao:hover, .tut-cartao:focus-visible { border-color: var(--marca); }
.tut-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tut-topo .sigla-f { font: 600 var(--t-rotulo) var(--mono); letter-spacing: .04em; color: var(--marca-tinta); background: var(--marca-suave); border-radius: var(--r-p); padding: 2px 6px; }
.tut-topo small { color: var(--apagado); font-size: var(--t-meta); }
.tut-cartao b { font-size: var(--t-corpo); line-height: 1.3; }
.tut-quem { font-size: var(--t-meta); color: var(--tinta-2); }
.tut-caso { color: var(--apagado); font-size: var(--t-meta); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tut-detalhe { display: grid; gap: 16px; }
.tut-detalhe section { display: grid; gap: 6px; }
.tut-detalhe .dados-sub { margin: 0; }
.tut-voltar { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.tut-voltar svg.i { width: 14px; height: 14px; }
.tut-caso-bloco { padding: 12px 14px; border-radius: var(--r-m); background: var(--elevado); }
.tut-caso-bloco p, .tut-pedido p { margin: 0; line-height: 1.55; max-width: 70ch; }
.tut-recebe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tut-recebe li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.tut-recebe svg.i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--marca); }
.tut-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: passo; }
.tut-passos li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; counter-increment: passo; }
.tut-passos li::before { content: counter(passo); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-tinta); font: 600 var(--t-meta) var(--mono); }
.tut-pedido { padding: 12px 14px; border-radius: var(--r-m); border: 1px dashed var(--linha-forte); }
.tut-pedido mark { background: var(--atencao-suave); color: inherit; border-radius: var(--r-p); padding: 0 2px; }
.tut-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pedir-tutoriais { justify-self: start; margin-top: 4px; }
@media (max-width: 899px) { .tut-moldura { padding: 18px 16px; } .tut-grade { grid-template-columns: minmax(0, 1fr); } }

/* pergunte à missão (biblioteca.py, 03/10): a resposta com a nota de cada fonte, e as fontes embaixo */
.biblio-perguntar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-m); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.biblio-texto { margin: 0; font-size: var(--t-corpo); line-height: 1.6; }
.nota-fonte { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px; border-radius: var(--r-p); background: var(--marca-suave); color: var(--marca-tinta); font-size: .8em; font-weight: 700; vertical-align: super; }
.biblio-fontes { display: grid; gap: 6px; }
.biblio-fonte { display: flex; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); background: var(--fundo); }
.biblio-fonte > div { display: grid; gap: 2px; min-width: 0; font-size: var(--t-meta); }
.biblio-fonte span { color: var(--apagado); }

/* o seletor de cliente no Hoje (clientes.py, 03/10) */
.seletor-cliente { margin: 4px 0 8px; flex-wrap: wrap; }

/* as duas camadas, Simples e Time (camadas.py, 04/10): a chave e a sugestão gentil de subir */
.chave-camada { display: grid; gap: 6px; }
.camada-simples [data-so-time], body:not(.camada-simples) [data-so-simples] { display: none !important; }
.chave-camada .abas { justify-self: start; }
.aviso-camada { display: grid; gap: 10px; margin: 4px 0 8px; padding: 14px 16px; border-radius: var(--r-g); background: var(--marca-suave); color: var(--tinta); }
.aviso-camada p { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); max-width: 64ch; }
.aviso-camada b { color: var(--tinta); }
.acoes-camada { display: flex; flex-wrap: wrap; gap: 8px; }

/* a autonomia de cada agente no Time (autonomia.py): a chave de três posições e a confiança */
.autonomia-ag { display: grid; gap: 6px; grid-column: 1 / -1; }
.autonomia-ag .abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.autonomia-ag .aba { font-size: var(--t-meta); padding-inline: 6px; text-align: center; white-space: normal; line-height: 1.2; }

/* a sua marca nas entregas (marca.py): a prévia da capa, com a cor e o logo */
.marca-ajuste { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: start; }
.marca-previa { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-m); background: var(--painel); border: 1px solid var(--linha); }
.marca-previa img { max-height: 40px; max-width: 160px; object-fit: contain; }
.marca-previa .rotulo { color: var(--cor); }
.marca-previa b { font: 600 var(--t-sec)/1.25 var(--serifa); color: var(--tinta); }
.marca-previa i { display: block; height: 3px; border-radius: var(--r-pilula); background: var(--cor); }
.marca-campos { display: grid; gap: 12px; min-width: 0; }
.marca-campos input[type="color"] { width: 64px; min-height: 40px; padding: 2px; }
@media (max-width: 640px) { .marca-ajuste { grid-template-columns: minmax(0, 1fr); } }

/* o próximo passo que aparece sozinho, e a primeira semana (protótipo Ensinar-A) */
.proximo-passo { display: grid; gap: 10px; margin: 4px 0 18px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); box-shadow: var(--sombra-leve); }
.proximo-cab { display: flex; gap: 12px; align-items: flex-start; }
.proximo-meio { display: grid; gap: 8px; min-width: 0; flex: 1; }
.proximo-texto { margin: 0; font-size: var(--t-corpo); font-weight: 600; color: var(--tinta); }
.proximo-dica { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); }
.proximo-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.primeira-semana { border-top: 1px solid var(--linha); padding-top: 8px; }
.primeira-semana summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; list-style: none; }
.primeira-semana summary::-webkit-details-marker { display: none; }
.barra-passos { flex: 1 1 120px; height: 6px; border-radius: var(--r-pilula); background: var(--linha); overflow: hidden; }
.barra-passos b { display: block; height: 100%; background: var(--marca); }
.primeira-semana ul { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 8px; }
.primeira-semana li { display: flex; gap: 10px; align-items: flex-start; }
.primeira-semana li > span:nth-child(2) { display: grid; gap: 1px; font-size: var(--t-ui); flex: 1; min-width: 0; }
.primeira-semana li > .botao { flex: none; align-self: center; }
.primeira-semana li small { color: var(--apagado); font-size: var(--t-meta); }
.primeira-semana li.pulado b, .primeira-semana li:not(.feito):not(.agora) b { color: var(--apagado); font-weight: 500; }
.marca-passo { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-pilula); border: 1.5px solid var(--linha-forte); color: var(--marca-texto); }
.marca-passo svg.i { width: 13px; height: 13px; }
.primeira-semana li.feito .marca-passo { background: var(--marca); border-color: var(--marca); }
.primeira-semana li.agora .marca-passo { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }

/* o mês numa tela (protótipo Visao-C) */
.dialogo-mes { width: min(520px, calc(100vw - 32px)); }
#mes-corpo { display: grid; gap: 14px; }
.mes-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mes-cifra { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-g); border: 1px solid var(--linha); background: var(--painel); }
.mes-cifra b { font: italic 400 var(--t-grande)/1.1 var(--serifa); white-space: nowrap; }
.mes-cifra span { font-size: var(--t-meta); color: var(--tinta-2); }
.mes-cifra.sol { background: var(--atencao-suave); border-color: transparent; }
.mes-espera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: var(--r-g); background: var(--atencao-suave); color: var(--tinta); font-size: var(--t-ui); font-weight: 600; text-align: left; cursor: pointer; }
.mes-espera svg.i { margin-left: auto; width: 16px; height: 16px; }
.mes-quem { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.mes-quem li { display: flex; gap: 10px; align-items: flex-start; }
.mes-quem li span { display: grid; gap: 1px; min-width: 0; font-size: var(--t-ui); }
.mes-quem small { color: var(--apagado); font-size: var(--t-meta); }

/* "Fale o que você precisa" no Hoje da Simples (protótipo Uau-A) */
.pedir-hoje { display: grid; gap: 12px; margin: 4px 0 18px; }
.pedir-hoje.cheio { justify-items: center; text-align: center; gap: 14px; padding: 28px 16px 8px; }
.pedir-hoje.cheio h2 { margin: 6px 0 0; font: italic 400 var(--t-grande)/1.15 var(--serifa); }
.pedir-hoje.cheio > p { margin: 0; color: var(--tinta-2); font-size: var(--t-corpo); }
.pedir-caras { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.pedir-cara { display: grid; justify-items: center; gap: 6px; }
.pedir-cara .avatar { width: 52px; height: 52px; font-size: var(--t-sec); box-shadow: 0 0 0 4px var(--fundo), var(--sombra-leve); }
.pedir-cara small { font-size: var(--t-meta); color: var(--tinta-2); }
.pedir-mic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r-pilula); background: var(--marca); color: var(--marca-texto); cursor: pointer; }
.pedir-mic svg.i { width: 22px; height: 22px; }
.pedir-mic.grande { width: 128px; height: 128px; margin: 18px 0; box-shadow: 0 0 0 14px color-mix(in srgb, var(--marca) 14%, transparent), 0 0 0 30px color-mix(in srgb, var(--marca) 7%, transparent), var(--sombra); }
.pedir-mic.grande svg.i { width: 50px; height: 50px; }
.pedir-barra { display: flex; gap: 10px; align-items: center; }
.pedir-campo { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; text-align: left; border: 1px solid var(--linha-forte); border-radius: var(--r-pilula); background: var(--painel); color: var(--apagado); font-size: var(--t-corpo); cursor: text; }
.pedir-sugs { display: grid; gap: 8px; width: 100%; max-width: 520px; }
.pedir-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.pedir-tipo { display: grid; justify-items: start; gap: 2px; padding: 12px; text-align: left; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); color: var(--tinta); font: inherit; cursor: pointer; }
.pedir-tipo:hover { border-color: var(--marca); }
.pedir-tipo b { font-size: var(--t-ui); font-weight: 600; }
.pedir-tipo small { color: var(--apagado); font-size: var(--t-meta); line-height: 1.35; }
.pedir-tipo .sigla-f { font: 600 var(--t-rotulo) var(--mono); letter-spacing: .04em; color: var(--marca-tinta); background: var(--marca-suave); border-radius: var(--r-p); padding: 2px 6px; margin-bottom: 4px; }
@media (max-width: 599px) { .pedir-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pedir-sugs.linha { display: flex; flex-wrap: wrap; max-width: none; }
.pedir-sug { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); color: var(--tinta); font-size: var(--t-ui); text-align: left; cursor: pointer; box-shadow: var(--sombra-leve); }
.pedir-sug span { flex: 1; min-width: 0; }
.pedir-sug svg.i { width: 16px; height: 16px; color: var(--apagado); flex: none; }
.pedir-sugs.linha .pedir-sug { flex: 0 1 auto; min-height: 36px; padding: 6px 12px; border-radius: var(--r-pilula); box-shadow: none; }
.pedir-sugs.linha .pedir-sug svg.i { display: none; }

/* Menos carga (05/10, o dono: "reduzir a quantidade de textos e botões e elementos"): no computador, o que não é a
   próxima ação do cartão aparece ao passar o mouse ou ao focar; no toque fica sempre à vista */
@media (hover: hover) {
  .cartao-caixa .cartao-acoes.ao-passar, .cartao-caixa .icone-acao { opacity: 0; transition: opacity .12s; }
  .cartao-caixa:hover .cartao-acoes.ao-passar, .cartao-caixa:focus-within .cartao-acoes.ao-passar,
  .cartao-caixa:hover .icone-acao, .cartao-caixa:focus-within .icone-acao { opacity: 1; }
}

/* O rosto do agente (retratos.py, F10): a foto preenche o círculo e a cor do agente vira um anel fino */
.avatar.foto { background: var(--elevado); box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px var(--cor); }
.avatar.foto > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.foto.pp { box-shadow: 0 0 0 1.5px var(--cor); }

/* A revelação da entrega (F10): a faixa na cor da marca no alto e quem fez, com o rosto, antes do título */
.entrega-c.revelacao { border-top: 3px solid var(--marca-entrega); }
.entrega-c-quem { display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); color: var(--tinta-2); font-weight: 500; }
.entrega-c-quem .estado { margin-left: 4px; }

/* O time vivo (F10): os rostos de quem trabalha, no botão de estado do topo desde 06/10, respirando devagar */
.estado-sala .caras-estado .avatar { animation: respira 2.6s ease-in-out infinite; }
.estado-sala .caras-estado .avatar:nth-child(2) { animation-delay: .4s; } .estado-sala .caras-estado .avatar:nth-child(3) { animation-delay: .8s; }
@keyframes respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .estado-sala .caras-estado .avatar { animation: none; } }

/* Respiro (06/10, o dono: "ainda me sinto sufocado quando vejo as telas"): no Hoje, cada seção é UM painel com linhas
   divididas por um fio, não uma caixa por linha; mais ar entre as seções; o que anda é uma linha de rostos */
.hoje-lista { gap: 0; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden; }
.hoje-lista > .hoje-item { border: 0; border-radius: 0; background: none; padding: 12px 14px; }
.hoje-lista > .hoje-item + .hoje-item { border-top: 1px solid var(--linha); }
.hoje-sec { margin-top: 28px; }
.hoje-ver-mais { margin-top: 8px; font-size: var(--t-ui); }
.hoje-andando { display: flex; align-items: center; gap: 4px; width: 100%; padding: 10px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); color: var(--tinta-2); font: inherit; font-size: var(--t-ui); text-align: left; cursor: pointer; }
.hoje-andando > .avatar { margin-right: -8px; }
.hoje-andando > .hoje-andando-txt { margin-left: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-andando > svg { flex: none; }
@media (hover: hover) { .hoje-andando:hover { border-color: var(--linha-forte); } }
.autonomia-menu > summary { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); color: var(--tinta-2); cursor: pointer; }
.autonomia-menu > summary svg { width: 14px; height: 14px; }
.autonomia-menu .menu-lista button[aria-pressed="true"] { background: var(--marca-suave); }
.hoje > *, .hoje-sec { min-width: 0; }
.hoje-andando { min-width: 0; max-width: 100%; }
.opcao-presenca { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 14px; font-size: var(--t-ui); color: var(--tinta); }
.opcao-presenca input { width: 18px; height: 18px; accent-color: var(--marca); }
.opcao-presenca small { flex-basis: 100%; padding-left: 28px; color: var(--apagado); font-size: var(--t-meta); }

/* O agente ligando (chamadas.py, 06/10): um cartão no canto, o rosto respirando, o motivo e as duas respostas; no
   celular, no alto da tela, por cima das abas */
#chamada-toque { position: fixed; z-index: 60; top: 72px; right: 20px; width: min(380px, calc(100vw - 32px)); }
.chamada { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha-forte); box-shadow: var(--sombra); animation: chega .25s ease-out; }
.chamada-rosto .avatar { width: 48px; height: 48px; animation: chamando 1.6s ease-out infinite; }
.chamada-meio { display: grid; gap: 2px; min-width: 0; }
.chamada-meio b { font-size: var(--t-corpo); color: var(--tinta); }
.chamada-meio span { font-size: var(--t-ui); color: var(--tinta-2); line-height: 1.4; }
.chamada-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.chamada-acoes svg { width: 16px; height: 16px; margin-right: 4px; }
@keyframes chamando { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes chega { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { #chamada-toque { top: 12px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .chamada, .chamada-rosto .avatar { animation: none; } }

/* O convite a falar na entrevista da empresa (06/10): a primeira conversa, de preferência por voz */
.convite-voz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; font-size: var(--t-ui); color: var(--tinta-2); }
.convite-voz b { color: var(--tinta); }
.convite-voz svg { width: 18px; height: 18px; margin-right: 6px; }
/* o papel de cada pessoa em texto de gente, não em fonte de código (Ajustes → Pessoas) */
.pessoas-lista .linha-simples small, #sec-pessoas .linha-simples small { font-family: inherit; white-space: normal; }
/* o título da tarefa no projeto fica numa linha, cortado com reticências (06/10: passava da borda do cartão) */
.tarefas-p li, .tarefa-p { min-width: 0; }
.tarefa-p { display: flex; align-items: center; gap: 8px; width: 100%; overflow: hidden; }
.tarefa-p-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campos-receita > summary { font-size: var(--t-ui); color: var(--tinta-2); cursor: pointer; }

/* O Hoje em duas colunas (06/10, o dono: "a página tá muito vertical"): a coluna de 760 px no meio de uma tela de
   1.440 empilhava oito seções. À esquerda, larga, o que é seu; à direita, o que o time faz, em linhas compactas. No
   bom-dia, as horas devolvidas viram um link no canto. Abaixo de 980 px, uma coluna só; no celular, a ação fica ao
   lado do item, pequena, em vez de uma faixa verde da largura da tela embaixo de cada um */
.hoje { max-width: 1160px; gap: 18px; padding: 24px 28px 48px; }
.hoje-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hoje-cab-texto { display: grid; gap: 6px; min-width: 0; }
.hoje-mes { display: inline-flex; align-items: baseline; gap: 6px; flex: none; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--r-pilula); background: var(--painel); color: var(--tinta-2); font: inherit; font-size: var(--t-ui); cursor: pointer; }
.hoje-mes b { font: italic 500 var(--t-sec)/1 var(--serifa); color: var(--tinta); }
.hoje-mes svg { width: 14px; height: 14px; align-self: center; }
@media (hover: hover) { .hoje-mes:hover { border-color: var(--linha-forte); color: var(--tinta); } }
.hoje-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 36px; align-items: start; }
.hoje-grade.uma { grid-template-columns: minmax(0, 760px); justify-content: center; }
.hoje-principal, .hoje-lado { display: grid; gap: 0; min-width: 0; align-content: start; }
.hoje-principal > .hoje-sec:first-child, .hoje-lado > .hoje-sec:first-child, .hoje-principal > .hoje-noite:first-child { margin-top: 0; }
.hoje-principal > .proximo-passo { margin: 22px 0 0; }
.hoje-lado .hoje-sec { margin-top: 22px; gap: 8px; }
.hoje-lado .hoje-lista > .hoje-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 9px 12px; }
.hoje-lado .hoje-item .avatar { width: 28px; height: 28px; }
.hoje-lado .hoje-mini, .hoje-lado .hoje-ic { width: 28px; height: 28px; }
.hoje-lado .hoje-meio b { font-weight: 500; font-size: var(--t-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-lado .hoje-meio small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-lado .primeira-semana { border-top: 0; padding-top: 0; }
.proximo-passo { padding: 14px 16px; gap: 6px; box-shadow: none; }
.proximo-dica { font-size: var(--t-meta); }
@media (max-width: 979px) {
  .hoje-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hoje-lado { margin-top: 6px; }
  .hoje-lado > .hoje-sec:first-child { margin-top: 22px; }
}
@media (max-width: 760px) {
  .hoje { padding: 16px 16px 32px; gap: 14px; }
  .hoje-cab { flex-wrap: wrap; }
  .hoje-item { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .hoje-acoes { grid-column: auto; }
  .hoje-acoes .botao { flex: none; min-height: 40px; }
}
.hoje-principal .hoje-meio b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Ver detalhes do texto longo (06/10): embaixo do título, na coluna do texto */
.hoje-det { grid-column: 2 / -1; margin-top: -4px; }
.hoje-det > summary { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); color: var(--tinta-2); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 2px; }
.hoje-det > summary::-webkit-details-marker { display: none; }
.hoje-det[open] > summary { margin-bottom: 4px; }
.hoje-det p { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); white-space: pre-line; overflow-wrap: anywhere; }
.proximo-det { grid-column: auto; margin-top: 0; }
.hoje-aprendeu > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.hoje-aprendeu > summary::-webkit-details-marker { display: none; }
.hoje-aprendeu > summary::after { content: "›"; color: var(--apagado); transition: transform .15s; }
.hoje-aprendeu[open] > summary::after { transform: rotate(90deg); }
.hoje-lado .hoje-aprendeu .hoje-meio b, .hoje-lado .hoje-aprendeu .hoje-meio small { white-space: normal; }
/* Dispensar no Hoje (06/10): um x discreto ao fim da linha; no computador aparece ao passar o mouse */
.hoje-dispensar { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-p); background: none; color: var(--apagado); cursor: pointer; }
.hoje-dispensar svg { width: 14px; height: 14px; }
/* Espera você alinhado (06/10, o dono: "tudo desalinhado"): o botão de cada linha com a mesma largura e a mesma borda
   direita, o link ao lado dele à esquerda, e a pergunta com a resposta na coluna do título, terminando onde os botões
   terminam (o x do Dispensar ocupa o fim da linha) */
.hoje-principal .hoje-acoes .botao.primario { min-width: 128px; justify-content: center; }
.hoje-principal .hoje-acoes .link { margin-right: 6px; white-space: nowrap; }
.hoje-item.com-pergunta:has(.hoje-dispensar) .hoje-resp { margin-right: 38px; }
.hoje-resp .botao { min-width: 128px; justify-content: center; }
@media (max-width: 760px) { .hoje-item.com-pergunta:has(.hoje-dispensar) .hoje-resp { margin-right: 40px; } .hoje-resp .botao { min-width: 0; } }
@media (hover: hover) {
  .hoje-dispensar { opacity: 0; transition: opacity .12s; }
  .hoje-item:hover .hoje-dispensar, .hoje-dispensar:focus-visible { opacity: 1; }
  .hoje-dispensar:hover { background: var(--elevado); color: var(--tinta); }
}
.hoje-desfazer { margin: 0 0 8px; }
.hoje-desfazer + .hoje-sec { margin-top: 0; }
/* "P2", "AG8" dentro de uma fala: texto até a Sala confirmar que existe; aí link do tamanho do texto, que abre o cartão
   rápido ao lado (21-referencias.js) */
.objeto-citado { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: text; }
.objeto-citado.ok { color: var(--marca-tinta); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.ficha-rapida { position: fixed; z-index: 60; display: grid; gap: 8px; justify-items: start; padding: 12px 14px 14px; background: var(--painel); border: 1px solid var(--linha); border-radius: var(--r-g); box-shadow: var(--sombra); }
.ficha-r-topo { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ficha-r-fechar { display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -8px -6px 0; border: 0; background: none; color: var(--apagado); border-radius: var(--r-p); cursor: pointer; }
.ficha-r-titulo { font-size: var(--t-corpo); line-height: 1.35; }
.ficha-r-linhas { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-ui); color: var(--tinta-2); }
/* O Hoje com o painel da tarefa aberto ao lado (06/10): uma coluna só, para não espremer o que espera você */
body.fio-ao-lado .hoje-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
body.fio-ao-lado .hoje-lado > .hoje-sec:first-child { margin-top: 22px; }
.hoje-filtro { margin: 0; padding: 8px 12px; border-radius: var(--r-m); background: var(--marca-suave); color: var(--tinta); font-size: var(--t-ui); }
.hoje-filtro .link { margin-left: 6px; }
.hoje-lista > .hoje-item.aberto { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
/* Espera você agrupado por cliente (06/10, quando passa de 8 e há mais de um cliente): uma linha por cliente com o
   que tem e Revisar em sequência só dele; aberto, os itens embaixo. E a barra da fila no alto do painel */
.hoje-grupos { display: grid; gap: 8px; }
.hoje-grupo { border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); overflow: hidden; }
.hoje-grupo-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.hoje-grupo-nome { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; background: none; border: 0; padding: 0; color: var(--tinta); font: inherit; cursor: pointer; }
.hoje-grupo-nome .mono { color: var(--tinta-2); font-size: var(--t-ui); }
.hoje-grupo-nome small { flex-basis: 100%; color: var(--apagado); font-size: var(--t-meta); }
.hoje-grupo-nome::before { content: "›"; color: var(--apagado); transition: transform .15s; margin-right: 2px; }
.hoje-grupo.aberto .hoje-grupo-nome::before { transform: rotate(90deg); }
.hoje-grupo .hoje-lista { border: 0; border-top: 1px solid var(--linha); border-radius: 0; }
.hoje-grupo .hoje-ver-mais { margin: 8px 14px 10px; }
.fio-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; background: var(--marca-suave); color: var(--tinta); font-size: var(--t-ui); }
.fio-fila-acoes { display: flex; align-items: center; gap: 10px; }
/* aprovar em lote e soltar quem já merece (06/10): o botão ao lado do título, e a sugestão numa linha logo embaixo */
.hoje-espera-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hoje-espera-cab .botao svg { width: 14px; height: 14px; margin-right: 4px; }
.hoje-volume { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 10px 14px; border-radius: var(--r-g); background: var(--marca-suave); }
.hoje-volume p { margin: 0; font-size: var(--t-ui); color: var(--tinta); }
.hoje-grupo-cab .botao + .botao { margin-left: 0; }
@media (max-width: 760px) { .hoje-volume { grid-template-columns: 32px minmax(0, 1fr); } .hoje-volume .hoje-acoes { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 760px) {
  .hoje-grupo-cab { flex-wrap: wrap; }
  .hoje-grupo-nome { flex-basis: 100%; }
  .hoje-grupo-cab .botao { flex: 1 1 auto; justify-content: center; }
}
/* celular: o texto do item com a largura toda e as ações embaixo, à direita e pequenas (06/10: com o x do Dispensar,
   o título ficava numa coluna de três palavras) */
@media (max-width: 760px) {
  .hoje-item { grid-template-columns: 32px minmax(0, 1fr); }
  .hoje-acoes { grid-column: 2 / -1; justify-content: flex-end; }
  .hoje-acoes:empty { display: none; }
  .hoje-lado .hoje-lista > .hoje-item { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .hoje-lado .hoje-acoes { grid-column: auto; }
}
@media (max-width: 760px) {
  .hoje-item.com-pergunta { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .hoje-item.com-pergunta .hoje-acoes { grid-column: auto; }
}
/* O painel da tarefa mais leve (06/10, o dono: "ficou meio ruim de ver na tela, muita informação"): o título em uma ou
   duas linhas no tamanho de seção, as páginas numa faixa só que rola de lado, dois botões à vista e o resto no ⋯; no
   fio, a entrega vira uma linha (está no topo) com o recado fechado; e nada rola de lado no painel */
#dialogo-fio #fio-titulo { font-size: var(--t-titulo); line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#dialogo-fio .fio-paginas { display: flex; grid-template-columns: none; gap: 8px; max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scroll-snap-type: x proximity; }
#dialogo-fio .fio-pag { flex: 0 0 76px; scroll-snap-align: start; }
#dialogo-fio .fio-paginas > p { flex: 0 0 auto; align-self: center; }
#dialogo-fio .fio-corpo, #dialogo-fio .fio-entrega { overflow-x: hidden; }
#dialogo-fio .fio-corpo .msg, #dialogo-fio .fio-corpo .entrega-c { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#dialogo-fio .fio-corpo table { display: block; max-width: 100%; overflow-x: auto; }
.entrega-c.no-fio { display: grid; gap: 6px; padding: 10px 12px; }
.entrega-c.no-fio .entrega-c-quem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-ui); color: var(--tinta-2); }
.item-sit-t { font-weight: 600; color: var(--apagado); }
.item-sit-t.info { color: var(--info); }
.item-sit-t.perigo { color: var(--perigo); }
details.sem-fonte { display: block; padding: 8px 12px; }
details.sem-fonte > summary { cursor: pointer; list-style: none; font-size: var(--t-meta); font-weight: 600; color: var(--atencao); display: flex; align-items: center; gap: 6px; }
details.sem-fonte > summary::-webkit-details-marker { display: none; }
details.sem-fonte > summary::after { content: "›"; transition: transform .15s; }
details.sem-fonte[open] > summary::after { transform: rotate(90deg); }
details.sem-fonte[open] > summary { margin-bottom: 6px; }
details.sem-fonte .acoes-c { margin-top: 6px; }
.itens-c .item-c-nome { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* A conversa mais limpa (06/10, o dono: "muitos elementos misturados na conversa, termos técnicos, componentes que
   poluem"). Os avisos da Sala são linhas cinzas que abrem, sem caixa, e vários seguidos viram "4 avisos da Sala"; o
   que espera você numa tarefa é um cartão só, com o nome dela e o estado no alto; o "Vou fazer assim" diz quem faz e
   quanto leva, e o resto fica em Detalhes */
.sistema.interino.linha { display: flex; align-items: center; gap: 4px; padding: 3px 10px; }
.avisos-sala { align-self: center; width: min(94%, 640px); margin: 8px 0 0; color: var(--apagado); font-size: var(--t-meta); }
.avisos-sala > summary { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 10px; border-radius: var(--r-pilula); cursor: pointer; list-style: none; }
.avisos-sala > summary::-webkit-details-marker { display: none; }
.avisos-sala > summary .hora { font-family: var(--mono); font-size: var(--t-rotulo); }
.avisos-sala .avisos-n { flex: none; font-weight: 600; color: var(--tinta-2); }
.avisos-sala .avisos-ultimo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avisos-sala > summary svg.i { width: 13px; height: 13px; flex: none; transition: transform .2s ease; }
.avisos-sala[open] > summary svg.i { transform: rotate(90deg); }
.avisos-sala[open] .avisos-ultimo { display: none; }
.avisos-sala .avisos-lista { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--linha); margin: 2px 0 4px 18px; }
.avisos-sala .avisos-lista > .sistema { width: auto; margin: 1px 0 0; }
@media (hover: hover) { .avisos-sala > summary:hover { background: var(--elevado); color: var(--tinta-2); } }
.tarefa-viva { max-width: 640px; margin: 10px 0 4px 48px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); overflow: hidden; }
.tarefa-viva-cab { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--linha); background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.tarefa-viva-cab .avatar { width: 28px; height: 28px; }
.tarefa-viva-cab svg.i { width: 14px; height: 14px; color: var(--apagado); }
.tarefa-viva-meio { display: grid; gap: 1px; min-width: 0; }
.tarefa-viva-meio b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-viva-meio small { font-size: var(--t-meta); color: var(--apagado); }
@media (hover: hover) { .tarefa-viva-cab:hover { background: var(--elevado); } }
.tarefa-viva-corpo { padding: 4px 14px 12px; }
.tarefa-viva-corpo .msg { padding: 0; grid-template-columns: minmax(0, 1fr); }
.tarefa-viva-corpo .msg-av, .tarefa-viva-corpo .msg-quem { display: none; }
.tarefa-viva-corpo .msg > * { grid-column: 1 / -1; }
.tarefa-viva-corpo .combinado-c { border: 0; padding: 6px 0 0; max-width: none; background: none; }
.tarefa-viva-corpo .sistema { align-self: stretch; max-width: none; margin: 6px 0 0; padding: 0; background: none; box-shadow: none; }
.combinado-det > summary { cursor: pointer; font-size: var(--t-meta); color: var(--tinta-2); text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.combinado-det > summary::-webkit-details-marker { display: none; }
.combinado-det[open] > summary { margin-bottom: 6px; }
@media (max-width: 599px) { .tarefa-viva { margin-left: 0; } }
.tarefa-viva-corpo .combinado-c { gap: 8px; padding: 2px 0 0; }
.tarefa-viva-corpo .combinado-c-quem { margin: 0; }
.tarefa-viva-corpo .msg-texto { margin: 0; }
.tarefa-viva-corpo { padding-top: 10px; }
.avisos-sala .avisos-lista > * { align-self: stretch; max-width: 100%; min-width: 0; width: auto; }
.sistema .hora, .avisos-sala .hora { white-space: nowrap; flex: none; }
/* o dia antigo recolhido (06/10): a etiqueta do dia com quantas mensagens; aberto, a conversa daquele dia */
.dia-antigo { display: flex; flex-direction: column; }
.dia-antigo > summary { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 2px; list-style: none; cursor: pointer; color: var(--apagado); font-size: var(--t-meta); }
.dia-antigo > summary::-webkit-details-marker { display: none; }
.dia-antigo > summary .dia { margin: 0; }
.dia-antigo > summary svg.i { width: 13px; height: 13px; transition: transform .2s ease; }
.dia-antigo[open] > summary svg.i { transform: rotate(90deg); }
.dia-antigo-corpo { display: flex; flex-direction: column; }
/* o "Falar com…" do Privado e a troca Do time · Com o cliente */
.abas-cliente { margin-right: 4px; }
.abas-cliente .ponto { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); vertical-align: middle; }
/* procurar e perguntar sobre a conversa (06/10): a faixa embaixo do topo, os achados e a resposta */
.procura { padding: 8px 16px 10px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.procura-linha { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; }
.procura-ic svg { width: 16px; height: 16px; color: var(--apagado); }
.procura-linha input { flex: 1; min-width: 0; }
.procura-resultado { max-width: 760px; margin: 0 auto; }
.procura-resultado:empty { display: none; }
.procura-resultado > p { margin: 8px 0 0; }
.procura-lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 40vh; overflow-y: auto; display: grid; gap: 2px; }
.procura-lista button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-m); background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .procura-lista button:hover { background: var(--elevado); } }
.procura-quem { font-size: var(--t-meta); color: var(--apagado); }
.procura-trecho { font-size: var(--t-ui); overflow-wrap: anywhere; }
.procura-resposta { display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--marca-suave); color: var(--tinta); font-size: var(--t-ui); }
.procura-resposta small { color: var(--tinta-2); font-size: var(--t-meta); }
/* a busca por cima da conversa (06/10, o dono: "ruim isso"): os achados flutuam sob o campo, sem empurrar a conversa;
   o que gente disse primeiro, os avisos da Sala mais claros, e a palavra procurada destacada */
.procura { position: relative; z-index: 6; }
.procura-resultado { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% - 2px); width: min(760px, calc(100% - 32px)); padding: 6px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); box-shadow: var(--sombra); }
.procura-resultado > p { margin: 4px 8px; }
.procura-lista { margin: 0; max-height: min(420px, 55vh); }
.procura-lista li.aviso .procura-trecho { color: var(--tinta-2); }
.procura-trecho mark { background: var(--atencao-suave); color: inherit; border-radius: var(--r-p); padding: 0 1px; }
.procura-resposta { margin: 0; }
/* "Falar com alguém do time" no fim do Privado */
.falar-com { display: block; margin: 0; }
.falar-com > summary { list-style: none; cursor: pointer; }
.falar-com > summary::-webkit-details-marker { display: none; }
.falar-com-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px dashed var(--linha-forte); color: var(--tinta-2); }
.falar-com-ic svg { width: 16px; height: 16px; }
.falar-com-lista { display: grid; gap: 2px; padding: 4px 8px 8px 52px; }
.falar-com-lista button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: var(--r-m); background: none; color: var(--tinta); font: inherit; font-size: var(--t-ui); text-align: left; cursor: pointer; }
.falar-com-lista button small { margin-left: auto; color: var(--apagado); font-size: var(--t-meta); }
@media (hover: hover) { .falar-com-lista button:hover { background: var(--elevado); } }
/* o topo único (06/10): o botão de estado com os rostos de quem trabalha; o sino com um ponto, sem número */
.estado-sala .caras-estado { display: inline-flex; }
.estado-sala .caras-estado .avatar { width: 20px; height: 20px; margin-right: -6px; box-shadow: 0 0 0 2px var(--painel); }
.estado-sala .caras-estado .avatar:last-child { margin-right: 4px; }
.estado-sala.trabalhando { color: var(--marca-tinta); }
.botao-sino { position: relative; }
.ponto-sino { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--atencao); box-shadow: 0 0 0 2px var(--painel); }
@media (max-width: 599px) { #conversa-topo > .avatar { display: none; } }
@media (max-width: 599px) { .estado-sala .caras-estado .avatar:last-child { margin-right: 0; } }
@media (max-width: 599px) { .estado-sala .caras-estado .avatar:nth-child(n+3) { display: none; } .estado-sala .caras-estado .avatar:nth-child(2) { margin-right: 0; } }
/* fechar o privado (privados.py, 06/10): botão escrito no computador, no ⋯ no celular */
@media (max-width: 599px) { .fechar-privado-t { display: none; } }
@media (min-width: 600px) { .fechar-privado-m { display: none; } }
/* o questionário (06/10): um cartão pequeno na conversa e o formulário no painel; no celular, a tela toda */
.q-resumo { display: flex; align-items: center; gap: 12px; max-width: 560px; margin-top: 4px; padding: 12px 14px; border-radius: var(--r-g); background: var(--painel); border: 1px solid var(--linha); }
.q-resumo-texto { flex: 1; display: grid; gap: 2px; min-width: 0; font-size: var(--t-ui); }
.dialogo-questionario { width: min(680px, calc(100vw - 32px)); }
.dialogo-questionario #questionario-corpo { display: grid; }
.dialogo-questionario .q-cabeca { display: flex; gap: 12px; align-items: flex-start; padding: 22px 56px 14px 22px; border-bottom: 1px solid var(--linha); }
.dialogo-questionario .q-cabeca h2 { font-size: var(--t-sec); }
.dialogo-questionario .q-cabeca p { margin: 4px 0 0; }
.dialogo-questionario form.questionario { max-width: none; margin: 0; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.dialogo-questionario form.questionario > * { padding: 16px 22px; }
.dialogo-questionario .q-pergunta { font-weight: 500; }
.dialogo-questionario .q-botoes { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; background: var(--painel); }
@media (max-width: 599px) {
  .dialogo-questionario { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .dialogo-questionario .q-cabeca, .dialogo-questionario form.questionario > * { padding-left: 16px; padding-right: 16px; }
  /* tela cheia: os botões no pé da tela */
  .dialogo-questionario[open] { display: flex; flex-direction: column; }
  .dialogo-questionario #questionario-corpo { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
  .dialogo-questionario form.questionario { flex: 1; display: flex; flex-direction: column; }
  .dialogo-questionario .q-botoes { margin-top: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* vários questionários no mesmo painel, e a resposta «do dono» curta na conversa (06/10) */
.dialogo-questionario form.questionario > .q-bloco { display: grid; gap: 0; padding: 0; }
.dialogo-questionario .q-bloco > * { padding: 16px 22px; }
.dialogo-questionario .q-bloco + .q-bloco { border-top: 6px solid var(--elevado); }
.dialogo-questionario .q-bloco > .q-bloco-cab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding-bottom: 0; }
.q-bloco-cab .miudo { grid-column: 2; }
.q-bloco-cab b { font-size: var(--t-corpo); }
.q-respondido { display: grid; gap: 6px; }
.q-respondido .rotulo { color: var(--marca-tinta); }
.q-respondido ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.q-respondido li { display: grid; gap: 1px; }
.q-respondido .q-r { color: var(--tinta); }
.q-respondido small { font-size: var(--t-meta); color: var(--apagado); }
@media (max-width: 599px) { .dialogo-questionario .q-bloco > * { padding-left: 16px; padding-right: 16px; } }

/* ---------- Trabalhos navega como Conversas (06/10, 32-trabalhos-casa.js) ----------
   Uma moldura só: a lista à esquerda, o lugar à direita com o topo sempre igual, e três peças (a linha, o cartão do
   quadro e a miniatura), com o mesmo título, o mesmo raio e o mesmo espaçamento em todo lugar */
#trabalhos-corpo[data-modo="casa"] { padding: 0; overflow: hidden; display: flex; }
#trabalhos-corpo[data-modo="casa"] > * { max-width: none; margin: 0; }
.lugar-t { min-height: 48px; cursor: pointer; color: var(--tinta); }
.lugar-t:hover { background: var(--elevado); }
.lugar-t.ativo:hover { background: var(--marca-suave); }
.topo-t { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 0 12px; margin-bottom: 4px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
.voltar-t { display: none; }
.vazio-linha { margin: 0; padding: 8px 10px; font-size: var(--t-ui); color: var(--apagado); }
.grade-t { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.miniatura-t { display: grid; gap: 6px; width: 100%; padding: 8px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); color: var(--tinta); text-align: left; font: inherit; cursor: pointer; }
.miniatura-t:hover { border-color: var(--linha-forte); }
.miniatura-t-capa { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-m); background: var(--elevado); overflow: hidden; }
.miniatura-t-capa img { width: 100%; height: 100%; object-fit: cover; }
.miniatura-t-nome { font-size: var(--t-ui); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.miniatura-t small { font-size: var(--t-meta); color: var(--apagado); }
@media (max-width: 899px) {
  .voltar-t { display: inline-grid; }
  .topo-t { padding-top: 10px; }
  .grade-t { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* o que veio das abas antigas dentro da moldura: o mesmo título e sem os códigos e tempos de sistema (06/10) */
.miniatura-t-capa.sem-imagem { aspect-ratio: 5 / 2; color: var(--apagado); }
.miniatura-t-capa.sem-imagem svg { width: 22px; height: 22px; }
@media (max-width: 899px) {
  /* o quadro no celular: uma coluna por vez, de lado; o que só aparecia ao passar o mouse fica na tarefa */
}

/* ---------- a vida de um pedido (06/10): as cinco etapas, na Lista de cima para baixo e no Quadro de lado ---------- */
.voltar-t.sempre { display: inline-grid; }
.etapa-t { display: grid; gap: 4px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); min-width: 0; scroll-margin-top: 90px; }
.etapa-t > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: var(--t-corpo); font-weight: 600; }
.etapa-t > h3 small { font-size: var(--t-meta); font-weight: 400; color: var(--apagado); }
.etapa-t > .link { justify-self: start; margin: 4px 10px 0; }
.linha-tempo-t { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.linha-tempo-t li { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-ui); color: var(--apagado); }
.linha-tempo-t li i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--linha-forte); transform: translateY(1px); }
.linha-tempo-t li.feito { color: var(--tinta); }
.linha-tempo-t li.feito i { background: var(--marca); border-color: var(--marca); }
.pedir-t { position: relative; }
.pedir-t > summary { list-style: none; cursor: pointer; }
.pedir-t > summary::-webkit-details-marker { display: none; }
.pedir-t .menu-lista { right: 0; left: auto; min-width: 300px; }
.pedir-t .menu-lista button { display: grid; gap: 1px; text-align: left; }
.pedir-t .menu-lista small { font-size: var(--t-meta); color: var(--apagado); font-weight: 400; }

/* o plano editável em colunas fixas (06/10, o dono: "tá tudo torto" e "não tá usando o design system no dropdown"):
   a parte, quem faz (a escolha da Sala) e três lugares para os controles, em toda linha */
.plano-editavel { padding-left: 1.4em; }
.plano-editavel li { display: grid; grid-template-columns: minmax(0, 1fr) 128px 96px; align-items: center; gap: 4px 10px; min-height: 40px; }
.plano-editavel li > span:first-child { flex: initial; }
.plano-editavel .escolha-botao { min-height: 32px; padding: 0 10px; font-size: var(--t-ui); }
.plano-editavel .plano-quem-t { margin: 0; padding-left: 11px; }
.plano-bts { display: grid; grid-template-columns: repeat(3, 32px); justify-content: end; }
.plano-bts .icone-acao { width: 32px; height: 32px; }
.plano-bts svg { width: 16px; height: 16px; }
@media (max-width: 599px) { .plano-editavel li { grid-template-columns: minmax(0, 1fr) 112px; } .plano-editavel li > span:first-child { grid-column: 1 / -1; } .plano-bts { justify-content: end; } }

/* ---------- Trabalhos: um quadro, uma tela (06/10, 32-trabalhos-casa.js) ----------
   a página não rola: o quadro ocupa a altura e cada coluna rola sozinha; Com você é a coluna forte; Pedido encolhe
   para uma tira com o número; o projeto é um recorte no topo e uma faixa de uma linha */
.casa-q { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 12px 20px 0; gap: 10px; }
.casa-q.detalhe { overflow-y: auto; padding-bottom: 24px; }
.ponto-t { width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); }
.ponto-t.atencao { background: var(--atencao); } .ponto-t.andando { background: var(--marca); } .ponto-t.ok { background: var(--marca); opacity: .5; }
.pontos-t { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pontos-t i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--linha-forte); }
.pontos-t i.feito { background: var(--marca); border-color: var(--marca); }
.pontos-t small { margin-left: 4px; font-size: var(--t-meta); color: var(--apagado); font-variant-numeric: tabular-nums; }
.colunas-cel-t { display: none; }
.cartoes-n { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cartao-n { display: grid; border-radius: var(--r-m); background: var(--painel); box-shadow: var(--sombra-leve); border: 1px solid var(--linha); min-width: 0; }
.cartao-n.voce { border-color: color-mix(in srgb, var(--atencao) 30%, var(--linha)); }
.cartao-n.travado { box-shadow: inset 3px 0 0 var(--perigo), var(--sombra-leve); }
.cartao-n-corpo { display: grid; gap: 6px; padding: 10px 12px; border: 0; background: none; color: var(--tinta); text-align: left; font: inherit; cursor: pointer; min-width: 0; border-radius: var(--r-m); }
.cartao-n-corpo:hover { background: var(--elevado); }
.cartao-n-titulo { font-size: var(--t-ui); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cartao-n-quem { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-meta); color: var(--tinta-2); }
.cartao-n-quem > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-n-estado { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-meta); color: var(--apagado); }
.cartao-n-estado > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-n.voce .cartao-n-estado { color: var(--atencao); }
.trilha-t { display: inline-flex; gap: 3px; flex: none; }
.trilha-t i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); }
.trilha-t i.on { background: var(--marca); }
.cartao-n-acao { display: flex; gap: 6px; padding: 0 12px 10px; }
.dialogo-pedir-t { width: min(520px, calc(100vw - 32px)); }
.acoes-pedir-t { display: flex; align-items: center; gap: 8px; }
.acoes-pedir-t > span { flex: 1; }
.campo > span em { font-style: normal; font-size: var(--t-meta); color: var(--apagado); margin-left: 4px; }
@media (max-width: 899px) {
  .casa-q { padding: 10px 14px 0; }
  .colunas-cel-t { display: flex; overflow-x: auto; }
  .colunas-cel-t .aba b { font-family: var(--mono); font-size: var(--t-meta); margin-left: 4px; }
}

/* Com você vazia não toma a coluna larga */
.cartao-n-corpo { gap: 5px; padding: 9px 10px; }
.cartao-n-linha { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-meta); }
.cartao-n-linha .cartao-n-quem { flex: 0 1 auto; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-n-linha .cartao-n-estado { flex: 1 1 auto; justify-content: flex-end; }
.cartao-n { grid-template-columns: minmax(0, 1fr); }
.cartao-n-acao { padding: 0 10px 9px; }
.cartao-n-acao .botao { min-height: 30px; padding: 0 10px; }
/* o menu do clique direito: o mesmo da Sala, no ponto do clique (06/10) */
.menu-contexto-t { position: fixed; top: 0; left: 0; z-index: 60; min-width: 200px; }
.menu-contexto-t button[data-tom="perigo"] { color: var(--perigo); }

/* ---------- Trabalhos em profundidade (06/10): as medidas do Hoje ---------- */
#trabalhos-corpo[data-modo="casa"] > .casa-fundo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fundo-pagina { display: grid; gap: 18px; width: 100%; max-width: 1160px; margin: 0 auto; padding: 24px 28px 48px; }
.fundo-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fundo-cabeca > div { display: grid; gap: 6px; min-width: 0; }
.titulo-fundo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.titulo-fundo h1, .titulo-fundo h2, .fundo-cabeca h1 { margin: 0; font: italic 400 var(--t-grande)/1.15 var(--serifa); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ponto-t.vazio { background: none; border: 1.5px solid var(--linha-forte); }
.casa-fundo .hoje-principal .hoje-sec:first-child { margin-top: 0; }
.vazio-fundo { margin: 0; padding: 14px; border: 1px dashed var(--linha); border-radius: var(--r-g); }
.item-fundo { grid-template-columns: 36px minmax(0, 1fr) auto; }
.item-fundo .hoje-meio small { display: flex; align-items: center; gap: 6px; }
.item-fundo.travado { box-shadow: inset 3px 0 0 var(--perigo); }
.item-fundo.aberto { background: var(--elevado); }
.abre-t svg { width: 16px; height: 16px; }
.fundo-t { grid-column: 2 / -1; display: grid; gap: 12px; padding: 4px 0 6px; }
.fundo-t-sec { display: grid; gap: 6px; }
.fundo-t .plano-editavel { padding-left: 1.2em; margin: 0; }
.fundo-t .ms-linha { display: flex; gap: 8px; }
.fundo-t .ms-linha input { flex: 1; min-width: 0; }
.fundo-t-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fundo-t-acoes .perigo-t { margin-left: auto; color: var(--perigo); }
.item-projeto-t .hoje-acoes { display: flex; align-items: center; gap: 12px; }
.quietos-t > summary { cursor: pointer; list-style: none; }
.quietos-t > summary::-webkit-details-marker { display: none; }
.quietos-t > summary::after { content: " ›"; }
.quietos-t[open] > summary::after { content: " ⌄"; }
.quietos-t[open] > summary { margin-bottom: 10px; }
.ver-mais-fundo { justify-self: center; margin-top: 8px; }
.lado-texto { margin: 0; font-size: var(--t-ui); line-height: 1.5; color: var(--tinta-2); }
.hoje-lado .miudo .avatar { width: 20px; height: 20px; vertical-align: middle; }
.lado-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.lado-grade .miniatura-t-capa.sem-imagem { display: none; }
.caras-lado { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.caras-lado small { margin-left: 6px; font-size: var(--t-meta); color: var(--apagado); }
.hoje-lado .acoes-lado-t { display: flex; align-items: center; justify-content: space-between; }
.casa-q { max-width: 1400px; margin: 0 auto; width: 100%; }
@media (max-width: 899px) {
  .fundo-pagina { padding: 16px 14px 40px; }
  .titulo-fundo h1 { font-size: var(--t-titulo); }
  .fundo-cabeca { flex-wrap: wrap; }
  .fundo-t { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .item-fundo .hoje-acoes:not(:has(.botao)) { grid-column: 3; grid-row: 1; }
  .item-fundo { grid-template-columns: 32px minmax(0, 1fr) auto; }
}

/* ---------- o quadro como tela (06/10): nas medidas do Hoje, colunas iguais da altura do que têm ---------- */
.qd-pagina { max-width: 1240px; gap: 22px; }
.fundo-cabeca > .qd-topo-acoes { display: flex; align-items: center; gap: 12px; flex: none; }
.qd-vistas { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pilula); background: var(--elevado); }
.qd-vistas button { border: 0; background: none; padding: 6px 14px; border-radius: var(--r-pilula); font: inherit; font-size: var(--t-ui); font-weight: 500; color: var(--tinta-2); cursor: pointer; }
.qd-vistas button.sel { background: var(--painel); color: var(--tinta); box-shadow: var(--sombra-leve); }
.qd-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.qd-coluna { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-g); background: var(--elevado); min-width: 0; }
.qd-coluna.qd-col-com_voce:not(.vazia) { background: color-mix(in srgb, var(--atencao) 9%, var(--fundo)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 22%, transparent); }
.qd-cab { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px; min-width: 0; }
.qd-cab h3 { margin: 0; font-size: var(--t-ui); font-weight: 600; color: var(--tinta); }
.qd-cab b { font-family: var(--mono); font-size: var(--t-meta); font-weight: 500; color: var(--apagado); }
.qd-col-com_voce:not(.vazia) .qd-cab h3, .qd-col-com_voce:not(.vazia) .qd-cab b { color: var(--atencao); }
.qd-cab .link { margin-left: auto; font-size: var(--t-meta); white-space: nowrap; }
.qd-coluna .cartoes-n { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qd-vazio { margin: 0; padding: 14px 6px; font-size: var(--t-meta); color: var(--apagado); text-align: center; border: 1px dashed var(--linha-forte); border-radius: var(--r-m); }
.qd-mais { justify-self: center; font-size: var(--t-meta); }
.qd-prontos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.qd-pronto { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 7px 6px; border: 0; border-radius: var(--r-m); background: none; text-align: left; font: inherit; font-size: var(--t-meta); color: var(--tinta); cursor: pointer; }
.qd-pronto:hover { background: var(--painel); }
.qd-pronto span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-pronto small { color: var(--apagado); font-size: var(--t-meta); }
.qd-sobre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 28px; align-items: start; padding-top: 18px; border-top: 1px solid var(--linha); }
.qd-sobre .hoje-sec { margin: 0; }
@media (max-width: 899px) {
  .qd-quadro { grid-template-columns: minmax(0, 1fr); }
  .qd-coluna { display: none; }
  .qd-coluna.no-cel { display: grid; }
  .qd-cab h3, .qd-cab > b { display: none; }
  .qd-cab:not(:has(.link)) { display: none; }
  .fundo-cabeca > .qd-topo-acoes { width: 100%; justify-content: space-between; }
  .qd-sobre { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* a faixa dos projetos é o recorte do quadro (06/10): Todos primeiro, o escolhido marcado, o resto no seletor */
.qd-volta { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: var(--t-meta); }
.qd-volta svg { width: 14px; height: 14px; }
.qd-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: -8px; }
.qd-filtros .filtro { cursor: pointer; }
.qd-quem { position: relative; }
.qd-quem > summary { list-style: none; cursor: pointer; }
.qd-quem > summary::-webkit-details-marker { display: none; }
.qd-quem > summary svg { width: 14px; height: 14px; }
.qd-pagina { animation: qd-entra .16s ease-out; }
@keyframes qd-entra { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qd-pagina { animation: none; } }
@media (max-width: 899px) {
  .qd-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .qd-filtros .filtro { flex: none; }
}

/* procurar projeto: um campo na linha dos filtros (06/10) */
.qd-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.qd-barra .qd-filtros { margin: 0; }
.qd-busca { position: relative; display: flex; align-items: center; flex: 0 1 320px; min-width: 220px; }
.qd-busca > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--apagado); pointer-events: none; }
.qd-busca input { width: 100%; min-height: 36px; padding: 0 12px 0 36px; border-radius: var(--r-pilula); border: 1px solid var(--linha-forte); background: var(--painel); font: inherit; font-size: var(--t-ui); color: var(--tinta); }
.qd-busca input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.qd-busca-lista { top: calc(100% + 6px); left: 0; right: 0; width: auto; max-width: none; max-height: 60vh; overflow-y: auto; margin: 0; list-style: none; z-index: 30; }
.qd-busca-lista button { position: relative; display: grid; gap: 1px; width: 100%; padding-left: 28px; }
.qd-busca-lista button .ponto-t { position: absolute; left: 11px; top: 50%; margin-top: -4px; display: block; }
.qd-busca-lista button.ativo { background: var(--elevado); }
.qd-busca-lista button.sel b { color: var(--marca-tinta); }
.qd-busca-resto { padding: 8px 10px; font-size: var(--t-meta); color: var(--apagado); }
@media (max-width: 899px) {
  .qd-busca { flex: 1 1 100%; min-width: 0; }
  .qd-barra .qd-filtros { width: 100%; min-width: 0; }
  .qd-pagina > * { min-width: 0; }
}

/* o fio ao lado entra deslizando e a página abre espaço junto, sem pulo (06/10, o dono: "incomoda essa experiência e
   mudança brusca"): no Hoje, em Trabalhos e na conversa */
#conversa, main.lugar { transition: margin-right .24s cubic-bezier(.2, .8, .2, 1); }
#dialogo-fio.ao-lado[open] { animation: fio-entra .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes fio-entra { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #conversa, main.lugar { transition: none; } #dialogo-fio.ao-lado[open] { animation: none; } }
.cartao-n.no-fio { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca), var(--sombra-leve); }
.qd-pronto.no-fio { background: var(--marca-suave); }
/* com o painel ao lado, as colunas não espremem: guardam a largura e o quadro rola de lado */
@media (min-width: 900px) { body.fio-ao-lado .qd-quadro { grid-template-columns: repeat(4, minmax(236px, 1fr)); overflow-x: auto; padding-bottom: 6px; } }

/* a Lista alinhada (06/10, o dono: "desalinhado V/H" e "o que é mais importante, e muito espaço vazio"): o pronto
   em linhas iguais numa caixa, o estado e as etapas do projeto em colunas fixas, e o próximo passo em destaque */
.lado-prontos { padding: 4px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.lado-prontos .qd-pronto { padding: 8px; font-size: var(--t-ui); }
.lado-prontos .qd-pronto small { font-size: var(--t-meta); }
.item-projeto-t .hoje-acoes { display: grid; grid-template-columns: 132px 74px; align-items: center; gap: 12px; justify-items: end; }
.item-projeto-t .pontos-t { justify-self: end; }
.quietos-t > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border-radius: var(--r-p); }
.quietos-t > summary::after, .quietos-t[open] > summary::after { content: none; }
.quietos-t > summary svg { width: 14px; height: 14px; transition: transform .15s; }
.quietos-t[open] > summary svg { transform: rotate(180deg); }
.quietos-t > summary:focus { outline: none; }
.quietos-t > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.proximo-t { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.proximo-t p { margin: 0; font-size: var(--t-corpo); line-height: 1.5; color: var(--tinta); }
.proximo-t small { display: block; margin-top: 6px; font-size: var(--t-meta); color: var(--apagado); }
@media (max-width: 760px) { .item-projeto-t .hoje-acoes { grid-column: 2 / -1; grid-template-columns: auto auto; justify-content: start; } }

/* ---------- Time (06/10, a proposta): cartões iguais, a semana ao lado, o agente abre ao lado ---------- */
#time-corpo:has(> .tm-pagina) { padding: 0; }
.tm-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tm-card { display: grid; grid-template-rows: auto auto auto; gap: 10px; width: 100%; height: 100%; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); box-shadow: var(--sombra-leve); text-align: left; font: inherit; color: var(--tinta); cursor: pointer; }
.tm-card:hover { border-color: var(--linha-forte); }
.tm-card.no-fio { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca), var(--sombra-leve); }
.tm-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.tm-nome { display: grid; gap: 2px; min-width: 0; }
.tm-nome b { font-size: var(--t-corpo); }
.tm-nome small, .tm-agora span { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-agora { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.tm-agora i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); }
.tm-agora.on i { background: var(--marca); }
.tm-agora.on span { color: var(--tinta-2); }
.tm-pe { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--linha); }
.tm-pe small { margin-left: auto; font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; }
.tm-aut { font-size: var(--t-meta); color: var(--tinta-2); white-space: nowrap; }
.tm-indo { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.tm-numeros { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tm-numeros span { display: grid; gap: 2px; }
.tm-numeros b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); color: var(--tinta); }
.tm-numeros small { font-size: var(--t-meta); color: var(--apagado); }
.tm-rank, .tm-grupos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tm-rank button { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; border: 0; border-radius: var(--r-m); background: none; text-align: left; font: inherit; font-size: var(--t-meta); color: var(--tinta); cursor: pointer; }
.tm-rank button:hover, .tm-grupos button:hover { background: var(--elevado); }
.tm-rank small { color: var(--apagado); }
.tm-barra { height: 6px; border-radius: var(--r-pilula); background: var(--elevado); overflow: hidden; }
.tm-barra b { display: block; height: 100%; background: var(--marca); }
.tm-grupos { padding: 4px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.tm-grupos button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-m); background: none; font: inherit; color: var(--tinta); cursor: pointer; text-align: left; }
.tm-grupos button > svg { width: 14px; height: 14px; color: var(--apagado); flex: none; }
.tm-grupo-nome { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: var(--t-ui); }
.tm-grupo-nome b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-grupos .rostos .avatar + .avatar { margin-left: -6px; }
.tm-metodos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.tm-metodos li { padding: 4px 10px; border-radius: var(--r-pilula); background: var(--painel); border: 1px solid var(--linha); font-size: var(--t-meta); color: var(--tinta-2); }
.tm-contratar { position: relative; }
.tm-contratar .menu-lista { left: auto; right: 0; }
.painel-agente { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 44vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--linha); border-radius: 0; box-shadow: var(--sombra); z-index: 30; background: var(--fundo); overflow-y: auto; }
.painel-agente[open] { animation: fio-entra .24s cubic-bezier(.2, .8, .2, 1); }
.pa-cab { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
.pa-cab h2 { margin: 0; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); }
.pa-cab .miudo { margin: 2px 0 0; }
.pa-acoes { display: flex; align-items: center; gap: 6px; }
.pa-corpo { display: grid; gap: 22px; padding: 18px 20px 32px; }
.pa-sec { display: grid; gap: 10px; }
.pa-sec .rotulo { margin: 0; }
.pa-frase { margin: 0; font-size: var(--t-corpo); line-height: 1.5; }
.pa-lista { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--t-ui); color: var(--tinta-2); }
.pa-chave { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pilula); background: var(--elevado); justify-self: start; }
.pa-chave button { border: 0; background: none; padding: 6px 14px; border-radius: var(--r-pilula); font: inherit; font-size: var(--t-ui); color: var(--tinta-2); cursor: pointer; }
.pa-chave button.sel { background: var(--painel); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-leve); }
.pa-miudas { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--t-meta); color: var(--tinta-2); }
.pa-miudas small { margin-right: 8px; color: var(--apagado); font-family: var(--mono); }
.dialogo-metodos-t { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow-y: auto; }
@media (max-width: 899px) {
  .tm-grade { grid-template-columns: minmax(0, 1fr); }
  .painel-agente { width: 100vw; border-left: 0; }
}

/* abas no painel do agente e na biblioteca de métodos; o plano em linhas leves (06/10) */
.pa-abas { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--linha); overflow-x: auto; background: var(--fundo); }
.pa-abas button { flex: none; padding: 10px 6px; margin-right: 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--t-ui); color: var(--apagado); cursor: pointer; }
.pa-abas button.sel { color: var(--tinta); border-bottom-color: var(--marca); font-weight: 600; }
.pa-cab.sem-rosto { grid-template-columns: minmax(0, 1fr) auto; }
.pa-numeros { gap: 12px 28px; }
.tm-numeros b.pa-palavra { font-size: var(--t-corpo); }
.pa-metodos { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pa-metodos li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.pa-metodos small { font-size: var(--t-meta); color: var(--apagado); }
.pa-cab .menu-lista { left: auto; right: 0; }
.dialogo-metodos-t .pa-corpo { padding-top: 16px; }
.pl-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.pl-linha { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.pl-linha:last-child { border-bottom: 0; }
.pl-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--elevado); font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-2); }
.pl-n svg { width: 12px; height: 12px; }
.pl-linha.feito .pl-n { background: var(--marca-suave); color: var(--marca-tinta); }
.pl-linha.feito .pl-texto { color: var(--apagado); }
.pl-texto { font-size: var(--t-ui); line-height: 1.45; padding-top: 1px; }
.pl-lado { display: flex; align-items: center; gap: 4px; }
.pl-quem { position: relative; }
.pl-quem > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: var(--r-pilula); font-size: var(--t-meta); color: var(--tinta-2); cursor: pointer; }
.pl-quem > summary::-webkit-details-marker { display: none; }
.pl-quem > summary:hover { background: var(--elevado); }
.pl-quem > summary svg { width: 12px; height: 12px; color: var(--apagado); }
.pl-quem .menu-lista { left: auto; right: 0; min-width: 180px; }
.pl-quem-t { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--apagado); }
.pl-add > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; cursor: pointer; font-size: var(--t-ui); }
.pl-add > summary::-webkit-details-marker { display: none; }
.pl-add > summary svg { width: 14px; height: 14px; }
.pl-add .ms-linha { margin-top: 8px; }
.pl-pausar { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-meta); }
.pl-pausar svg { width: 12px; height: 12px; }
@media (max-width: 599px) { .pl-linha { grid-template-columns: 24px minmax(0, 1fr); } .pl-lado { grid-column: 2; justify-content: space-between; } }
.pl-vazio { width: 32px; }
.pa-sec > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* ---------- a pesquisa a fundo (pesquisa_funda.py, 06/10): a escada e o plano ----------
   Quatro degraus que sobem: a barra de cada um cresce com a profundidade, e o escolhido e os de baixo ficam na cor
   da marca (é a escolha do dono). No celular a escada deita (um degrau por linha), logo abaixo. */
.escada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 4px; }
.degrau { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  min-height: 92px; padding: 8px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel);
  color: var(--tinta); font: inherit; font-size: var(--t-meta); text-align: left; cursor: pointer; }
.degrau:hover:not([disabled]) { border-color: var(--linha-forte); }
.degrau:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.degrau[disabled] { cursor: default; opacity: .7; }
.degrau b { font-size: var(--t-ui); line-height: 1.2; }
.degrau small { color: var(--apagado); font-size: var(--t-rotulo); }
.degrau-barra { --h: 1; display: block; width: 100%; height: calc(var(--h) * 9px); margin-bottom: 4px;
  border-radius: var(--r-p); background: var(--neutro-suave); transition: background .15s; }
.degrau.cheio .degrau-barra { background: var(--marca-suave); }
.degrau.sel { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.degrau.sel .degrau-barra { background: var(--marca); }
.escada-frase { margin: 2px 0 8px; }
.plano-p { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--linha);
  border-radius: var(--r-g); background: var(--painel); }
.plano-p-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plano-p-pergunta { margin: 0; font-family: var(--serifa); font-style: italic; font-size: var(--t-sec); line-height: 1.35; }
.plano-p-lista { margin: 0; padding-left: 20px; font-size: var(--t-ui); }
.plano-p-lista li { margin: 2px 0; }
.plano-p-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: var(--t-ui); }
.plano-p-dl dt { color: var(--apagado); }
.plano-p-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* no celular os quatro nomes não cabem lado a lado ("Investig-ar"): a escada deita, um degrau por linha, e a
     barra cresce para o lado */
  .escada { grid-template-columns: 1fr; gap: 4px; }
  .degrau { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 0;
    padding: 8px 10px; }
  .degrau-barra { flex: none; width: 64px; height: 10px; margin: 0; --enche: var(--linha);
    background: linear-gradient(to right, var(--enche) calc(var(--h) * 25%), var(--neutro-suave) 0); }
  .degrau.cheio .degrau-barra { --enche: var(--marca-suave); background: linear-gradient(to right, var(--enche)
    calc(var(--h) * 25%), var(--neutro-suave) 0); }
  .degrau.sel .degrau-barra { --enche: var(--marca); background: linear-gradient(to right, var(--enche)
    calc(var(--h) * 25%), var(--neutro-suave) 0); }
  .degrau small { margin-left: auto; }
  .plano-p-dl { grid-template-columns: 1fr; }
  .plano-p-dl dd { margin-bottom: 4px; }
}

/* treinar e com cada cliente, na página do agente (06/10) */
.pa-clientes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pa-clientes li { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.pa-cliente-nome { display: grid; gap: 2px; min-width: 0; }
.pa-cliente-nome small { font-size: var(--t-meta); color: var(--apagado); }
.pa-ensinar { display: grid; gap: 8px; }
.pa-ensinar textarea { width: 100%; resize: vertical; min-height: 64px; }
.pa-ensinar-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pa-regras { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.pa-regras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px 4px 8px 12px; border-left: 3px solid var(--marca); background: var(--painel); border-radius: var(--r-p); font-size: var(--t-ui); }
.pa-sugestao { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center; }
.pa-sugestao > span { display: grid; gap: 2px; min-width: 0; }
.pa-sugestao small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pa-busca-aprender { width: 100%; }
@media (max-width: 599px) { .pa-clientes li { grid-template-columns: minmax(0, 1fr) auto; } .pa-clientes .tm-barra { grid-column: 1 / -1; grid-row: 2; } }
.pa-ensinar { margin: 0; padding: 0; }
.pa-conversar svg { width: 16px; height: 16px; }
.pa-sabe > summary { font-size: var(--t-ui); }
@media (max-width: 599px) { .pa-conversar span { display: none; } .pa-cab .miudo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* a biblioteca de métodos com tamanho fixo (não pula entre as abas), a busca no alto e o cartão de ensinar (06/10) */
dialog.dialogo-metodos-t[open] { display: flex; flex-direction: column; height: min(760px, calc(100dvh - 48px)); width: min(860px, calc(100vw - 32px)); overflow: hidden; }
.dialogo-metodos-t > .pa-cab, .dialogo-metodos-t > .mt-busca, .dialogo-metodos-t > .pa-abas { flex: none; }
.dialogo-metodos-t > .pa-corpo { flex: 1; min-height: 0; overflow-y: auto; }
.mt-busca { position: relative; padding: 12px 20px 4px; }
.mt-busca > svg { position: absolute; left: 32px; top: 50%; margin-top: 4px; transform: translateY(-50%); width: 16px; height: 16px; color: var(--apagado); pointer-events: none; }
.mt-busca input { width: 100%; min-height: 40px; padding-left: 38px; border-radius: var(--r-pilula); }
.mt-sob-medida { padding: 14px 16px; border: 1px dashed var(--linha-forte); border-radius: var(--r-g); background: var(--painel); }
.mt-sob-medida p { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); }
.mt-sob-medida .botao { justify-self: start; }
.mt-sob-medida .botao svg { width: 14px; height: 14px; }
.tm-ensinar { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-g); background: var(--marca-suave); border: 1px solid color-mix(in srgb, var(--marca) 25%, transparent); }
.tm-ensinar-topo { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; }
.tm-ensinar-topo b { display: block; font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); color: var(--marca-tinta); }
.tm-ensinar-topo small { font-size: var(--t-meta); color: var(--tinta-2); }
.tm-ensinar-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--painel); color: var(--marca); }
.tm-ensinar-ic svg { width: 18px; height: 18px; }
.tm-ensinar-form { display: flex; gap: 8px; }
.tm-ensinar-form input { flex: 1; min-width: 0; background: var(--painel); }
.tm-ensinar > .link { justify-self: start; font-size: var(--t-meta); }
.so-computador-t > .hoje-sec:first-child, .so-celular-t > .hoje-sec:first-child { margin-top: 0; }
.mt-sob-medida { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mt-sob-medida p { flex: 1 1 260px; }
@media (max-width: 599px) {
  dialog.dialogo-metodos-t[open] { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .dialogo-metodos-t .pa-cab h2 { font-size: var(--t-corpo); }
  .dialogo-metodos-t .pa-cab .botao span, .dialogo-metodos-t .pa-cab .botao { white-space: nowrap; }
}
.so-celular-t { display: none; }
@media (max-width: 899px) { .so-celular-t { display: block; } .so-computador-t { display: none; } }
.pa-corpo { align-content: start; }
/* a lista longa dentro da janela de métodos: as linhas guardam a altura do que têm (com overflow, o grid as espremia a zero) */
.dialogo-metodos-t > .pa-corpo { grid-auto-rows: max-content; }
@media (min-width: 900px) { .hoje-principal > .so-celular-t + .hoje-sec { margin-top: 0; } }

/* Contratar: quem você precisa (06/10) e a ficha com o técnico recolhido */
dialog.dialogo-quem-precisa { width: min(560px, calc(100vw - 32px)); padding: 0; }
dialog form.qp-form { display: grid; gap: 0; padding: 0; }
.qp-form textarea { width: 100%; resize: vertical; }
.qp-como { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qp-op { position: relative; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); cursor: pointer; }
.qp-op input { position: absolute; opacity: 0; pointer-events: none; }
.qp-op small { font-size: var(--t-meta); color: var(--apagado); line-height: 1.4; }
.qp-op.sel { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: var(--marca-suave); }
.qp-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px 18px; border-top: 1px solid var(--linha); }
.qp-pe .link { font-size: var(--t-meta); }
.qp-botoes { display: flex; gap: 8px; margin-left: auto; }
.ficha-avancado { margin-top: 8px; }
.ficha-avancado > summary { font-weight: 600; }
.ficha-avancado > summary small { margin-left: 6px; font-weight: 400; color: var(--apagado); font-size: var(--t-meta); }
@media (max-width: 599px) { .qp-como { grid-template-columns: minmax(0, 1fr); } }
#ficha-corpo > .ficha-sec:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* o resumo do agente numa olhada (06/10) */
.pa-agora { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); text-align: left; font: inherit; color: var(--tinta); }
button.pa-agora { cursor: pointer; }
button.pa-agora:hover { border-color: var(--linha-forte); }
.pa-agora > i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); }
.pa-agora.on > i { background: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.pa-agora > span { display: grid; gap: 2px; min-width: 0; }
.pa-agora small { font-size: var(--t-meta); color: var(--apagado); }
.pa-agora b { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-agora > svg { width: 14px; height: 14px; color: var(--apagado); }
.pa-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pa-tile { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); min-width: 0; }
.pa-tile > b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); line-height: 1.1; color: var(--tinta); }
.pa-tile > b.pa-palavra { font-size: var(--t-corpo); }
.pa-tile > b.pa-palavra.ok { color: var(--marca-tinta); }
.pa-tile small { font-size: var(--t-meta); color: var(--apagado); line-height: 1.35; }
.pa-vazio { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--linha-forte); border-radius: var(--r-g); }
.pa-vazio p { margin: 0; font-size: var(--t-ui); color: var(--tinta-2); }
.pa-vazio .botao svg { width: 14px; height: 14px; }
.pa-atalhos { display: grid; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); overflow: hidden; }
.pa-atalho { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: none; font: inherit; font-size: var(--t-ui); color: var(--tinta); text-align: left; cursor: pointer; }
.pa-atalho + .pa-atalho { border-top: 1px solid var(--linha); }
.pa-atalho:hover { background: var(--elevado); }
.pa-atalho b { font-weight: 500; color: var(--tinta-2); }
.pa-atalho svg { width: 14px; height: 14px; color: var(--apagado); }
@media (max-width: 599px) { .pa-tiles { gap: 6px; } .pa-tile { padding: 10px; } .pa-vazio { flex-direction: column; align-items: flex-start; } }

/* ---------- O que o time sabe (06/10): a Memória nas medidas do Hoje ---------- */
#memoria-corpo:has(> .mc-pagina) { padding: 0; }
.mc-pagina { max-width: 1160px; }
.fundo-cabeca > .fundo-cabeca-acoes { display: flex; align-items: center; gap: 12px; flex: none; }
.mc-ensinar { position: relative; }
.mc-ensinar .menu-lista { left: auto; right: 0; min-width: 280px; }
.mc-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mc-busca { position: relative; flex: 1 1 280px; min-width: 0; }
.mc-busca > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--apagado); pointer-events: none; }
.mc-busca input { width: 100%; min-height: 38px; padding-left: 36px; border-radius: var(--r-pilula); }
.mc-lista { display: grid; margin: 0; padding: 4px 0; list-style: none; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.mc-linha { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; }
.mc-linha + .mc-linha { border-top: 1px solid var(--linha); }
.mc-linha.apagada { opacity: .6; }
.mc-meio { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--tinta); }
button.mc-meio { cursor: pointer; }
.mc-texto { font-size: var(--t-ui); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mc-meio small { font-size: var(--t-meta); color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-acoes { display: flex; align-items: center; gap: 6px; }
.mc-sigla { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-p); background: var(--elevado); border: 1px solid var(--linha); font-family: var(--mono); font-size: var(--t-rotulo); color: var(--tinta-2); }
.mc-trecho .mc-texto { -webkit-line-clamp: 3; }
.mc-quem { display: grid; gap: 2px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.mc-quem button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--r-m); background: none; font: inherit; font-size: var(--t-ui); color: var(--tinta); text-align: left; cursor: pointer; }
.mc-quem button:hover { background: var(--elevado); }
.mc-quem button.sel { background: var(--marca-suave); color: var(--marca-tinta); font-weight: 600; }
.mc-quem small { font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); }
.mc-quem .hoje-ic { width: 24px; height: 24px; }
.mc-onde { flex-wrap: wrap; margin-bottom: 8px; }
.mc-onde .filtro { min-height: 28px; padding: 0 10px; font-size: var(--t-meta); }
.mc-extras { display: grid; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); overflow: hidden; }
.mc-extra + .mc-extra { border-top: 1px solid var(--linha); }
.mc-extra > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; list-style: none; cursor: pointer; font-size: var(--t-ui); }
.mc-extra > summary::-webkit-details-marker { display: none; }
.mc-extra > summary small { margin-left: auto; font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); }
.mc-extra > summary svg { width: 14px; height: 14px; color: var(--apagado); transition: transform .15s; }
.mc-extra[open] > summary svg { transform: rotate(180deg); }
.mc-extra-corpo { display: grid; gap: 10px; max-height: 360px; overflow-y: auto; padding: 0 12px 12px; font-size: var(--t-meta); }
.mc-extra-corpo article { display: grid; gap: 2px; }
.mc-extra-corpo small { color: var(--apagado); }
.mc-pergunte { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.mc-pergunte-form { display: flex; gap: 8px; }
.mc-pergunte-form input { flex: 1; min-width: 0; }
.mc-resposta { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: var(--t-ui); }
.mc-resposta p { margin: 0; line-height: 1.5; }
.mc-resposta-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-fonte { display: grid; gap: 16px; }
.fonte-abas { padding: 0; margin: 4px 0 4px; }
@media (max-width: 899px) { .mc-topo { flex-direction: column; align-items: stretch; } .mc-busca { flex: none; } }
.fonte-abas ~ .dados-acesso > .dados-sub, .fonte-abas ~ .dados-consulta > .dados-sub:first-child { display: none; }
.mc-time { width: 32px; height: 32px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); }

/* ---------- Ajustes nas medidas do Hoje (06/10): linhas que abrem ao lado ---------- */
#ajustes-corpo:has(> .aj-pagina) { padding: 0; }
.aj-pagina { max-width: 1160px; }
.aj-pagina > .qd-vistas { justify-self: start; }
.aj-no-ar { display: flex; align-items: center; gap: 10px; }
.aj-lista { padding: 4px 0; }
.aj-lista > li + li { border-top: 1px solid var(--linha); }
.aj-linha { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.aj-linha:hover { background: var(--elevado); }
.aj-linha.aberta { background: var(--marca-suave); }
.aj-linha .hoje-ic { width: 32px; height: 32px; background: var(--elevado); color: var(--tinta-2); }
.mc-linha.sem-ic { grid-template-columns: minmax(0, 1fr) auto; }
.aj-linha .mc-meio b { font-size: var(--t-ui); font-weight: 600; }
.aj-linha > svg { width: 14px; height: 14px; color: var(--apagado); }
.aj-valor { font-size: var(--t-meta); color: var(--tinta-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.aj-valor.atencao { color: var(--atencao); font-weight: 600; }
.aj-alerta { color: var(--atencao); }
.aj-caixa { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.aj-caixa > b { font-size: var(--t-ui); }
.aj-caixa .miudo { margin: 0; }
.aj-perigo { border-color: color-mix(in srgb, var(--perigo) 30%, var(--linha)); }
button.aj-caixa { width: 100%; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
button.aj-caixa:hover { border-color: var(--linha-forte); }
.aj-gasto { grid-template-columns: 1fr 1fr; }
.aj-gasto > span { display: grid; gap: 2px; }
.aj-gasto small { font-size: var(--t-meta); color: var(--apagado); }
.aj-gasto b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); }
.aj-gasto .barra, .aj-gasto .aj-teto { grid-column: 1 / -1; }
.aj-papeis { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aj-papeis li { display: grid; gap: 1px; font-size: var(--t-ui); }
.aj-papeis small { font-size: var(--t-meta); color: var(--apagado); }
.aj-inicial { font-family: var(--serifa); font-style: italic; font-size: var(--t-corpo); }
.aj-pagina .contas { gap: 8px; }
.aj-pagina .mc-texto b { font-weight: 600; }
.aj-pagina .pessoa-clientes { margin-top: 6px; }
.aj-cab { grid-template-columns: minmax(0, 1fr) auto; }
.aj-corpo > .sec-a-corpo, .aj-corpo { font-size: var(--t-ui); }
.aj-corpo h4 { margin: 8px 0 0; font-size: var(--t-ui); }
@media (max-width: 899px) {
  .aj-linha { grid-template-columns: 32px minmax(0, 1fr) 14px; row-gap: 2px; }
  .aj-linha > .hoje-ic, .aj-linha > svg { grid-row: 1 / 3; }
  .aj-linha .aj-valor { grid-column: 2; grid-row: 2; max-width: none; }
  .aj-linha .mc-meio small { display: none; }
  .aj-pagina > .fundo-cabeca { flex-direction: column; }
}

/* Ajustes, a 2ª volta (06/10): a marca em destaque, o painel por cima e os corpos com respiro */
.aj-marca { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; margin: 0 0 22px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.aj-marca:hover { border-color: var(--linha-forte); }
.aj-marca.aberta { border-color: var(--marca); }
.aj-marca-capa { background: var(--fundo); }
.aj-marca-texto { display: grid; gap: 8px; justify-items: start; }
.aj-marca-texto > b { font-size: var(--t-corpo); font-weight: 500; line-height: 1.4; }
.aj-marca-texto small { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-meta); color: var(--tinta-2); }
.aj-cor { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--linha); }
.aj-frase { margin: 0; font-size: var(--t-corpo); line-height: 1.55; color: var(--tinta); }
.aj-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aj-numeros > span { display: grid; align-content: start; gap: 4px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.aj-numeros b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); line-height: 1.1; }
.aj-numeros b small { font-family: var(--sans); font-style: normal; font-size: var(--t-meta); color: var(--apagado); }
.aj-numeros > span > small { font-size: var(--t-meta); color: var(--apagado); line-height: 1.35; }
.aj-numeros b.aj-palavra { font-size: var(--t-corpo); }
.aj-bloco { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--linha); }
.aj-bloco .rotulo { margin: 0; }
.aj-bloco .miudo { margin: 0; }
.aj-corpo { gap: 18px; }
.aj-corpo .ms-linha { display: flex; gap: 8px; margin: 0; padding: 0; }
.aj-corpo .ms-linha input { flex: 1; min-width: 0; }
.aj-titulo-sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aj-titulo-sec .rotulo { margin: 0; }
.aj-papeis { padding: 4px 0; }
.aj-papeis > li { display: grid; gap: 2px; padding: 10px 14px; }
.aj-papeis > li + li { border-top: 1px solid var(--linha); }
.aj-inicial { font-family: var(--serifa); font-style: italic; font-size: var(--t-corpo); }
.mc-meio small .estado { margin-right: 4px; }
@media (max-width: 899px) {
  .aj-marca { grid-template-columns: minmax(0, 1fr); }
  .aj-numeros { grid-template-columns: minmax(0, 1fr); }
}
/* quita-b9 · Para seguir no Hoje (06/10, o dono: "ficou desalinhado"): o botão de cada linha com a mesma largura,
   como o primário do Espera você, para todos terminarem na mesma coluna */
.hoje-seguir .hoje-acoes .botao { min-width: 128px; justify-content: center; }
@media (max-width: 760px) { .hoje-seguir .hoje-acoes .botao { min-width: 104px; } }
.hoje-seguir .hoje-meio b, .hoje-seguir .hoje-meio small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoje-seguir-mais > summary { list-style: none; display: inline-block; cursor: pointer; }
.hoje-seguir-mais > summary::-webkit-details-marker { display: none; }
.hoje-seguir-mais[open] > summary { display: none; }
.hoje-seguir-mais > .hoje-lista { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.hoje-seguir:has(> .hoje-seguir-mais[open]) > .hoje-lista { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hoje-seguir:has(> .hoje-seguir-mais[open]) > .hoje-seguir-mais { margin-top: -10px; }  /* o gap do .hoje-sec */

/* Ajustes, a 3ª volta (06/10): guia com progresso, controles que valem no toque, contas em quadrados com a marca */
.aj-cartao { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
button.aj-cartao { width: 100%; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
button.aj-cartao:hover { border-color: var(--linha-forte); }
.aj-campo-nome { display: block; margin-bottom: 8px; font-size: var(--t-meta); font-weight: 600; color: var(--tinta-2); }
.aj-guia { display: grid; gap: 12px; margin-bottom: 22px; padding: 18px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); }
.aj-guia > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aj-guia > header div { display: grid; gap: 2px; }
.aj-guia > header b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); }
.aj-guia > header small { font-size: var(--t-meta); color: var(--apagado); }
.aj-guia ol { display: grid; margin: 0; padding: 0; list-style: none; }
.aj-guia li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.aj-guia li + li { border-top: 1px solid var(--linha); }
.aj-guia li.feito .aj-guia-txt { opacity: .55; }
.aj-guia li.feito .aj-guia-txt b { text-decoration: line-through; }
.aj-guia-txt { display: grid; gap: 1px; min-width: 0; }
.aj-guia-txt b { font-size: var(--t-ui); font-weight: 600; }
.aj-guia-txt small { font-size: var(--t-meta); color: var(--apagado); }
.aj-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linha-forte); color: var(--sobre-cor); }
.aj-check svg { width: 13px; height: 13px; }
.feito > .aj-check, .sel > .aj-check { background: var(--marca); border-color: var(--marca); }
.aj-marca-cartao { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 22px; }
.aj-marca-campos { display: grid; gap: 16px; }
.aj-marca-campos .miudo { margin: 0; }
.aj-amostras { display: flex; flex-wrap: wrap; gap: 8px; }
.aj-amostra { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid var(--painel); background: var(--c); box-shadow: 0 0 0 1px var(--linha); cursor: pointer; }
.aj-amostra.sel { box-shadow: 0 0 0 2px var(--tinta); }
.aj-amostra:hover { transform: scale(1.08); }
.aj-outra { background: conic-gradient(from 0deg, var(--perigo), var(--atencao), var(--marca), var(--ag2, var(--marca)), var(--perigo)); color: var(--sobre-cor); }
.aj-outra svg { width: 14px; height: 14px; }
.aj-outra input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aj-logo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aj-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aj-opcao { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.aj-opcao:hover { border-color: var(--linha-forte); }
.aj-opcao.sel { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.aj-opcao > .aj-check { position: absolute; top: 12px; right: 12px; }
.aj-opcao b { font-size: var(--t-corpo); font-weight: 600; }
.aj-opcao small { font-size: var(--t-meta); color: var(--apagado); line-height: 1.35; }
.aj-convite .hoje-ic { width: 32px; height: 32px; margin-bottom: 6px; background: var(--elevado); color: var(--tinta-2); }
.aj-mais { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--t-meta); font-weight: 600; color: var(--marca-tinta); }
.aj-mais svg { width: 12px; height: 12px; }
.aj-aparencia { gap: 0; padding: 4px 16px; }
.aj-chave { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; cursor: pointer; }
.aj-chave + .aj-chave { border-top: 1px solid var(--linha); }
.aj-chave > span { display: grid; gap: 2px; min-width: 0; }
.aj-chave b { font-size: var(--t-ui); font-weight: 600; }
.aj-chave small { font-size: var(--t-meta); color: var(--apagado); }
.aj-chave input[role="switch"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aj-chave input[role="switch"] + i { flex: none; position: relative; width: 42px; height: 24px; border-radius: var(--r-pilula); background: var(--linha-forte); transition: background .15s; }
.aj-chave input[role="switch"] + i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--painel); box-shadow: var(--sombra-leve); transition: transform .15s; }
.aj-chave input[role="switch"]:checked + i { background: var(--marca); }
.aj-chave input[role="switch"]:checked + i::after { transform: translateX(18px); }
.aj-chave input[role="switch"]:focus-visible + i { outline: 2px solid var(--marca); outline-offset: 2px; }
.aj-gasto2 { gap: 12px; }
.aj-gasto-num { display: grid; gap: 2px; }
.aj-gasto-num b { font-family: var(--serifa); font-style: italic; font-weight: 400; font-size: var(--t-titulo); }
.aj-gasto-num small { font-size: var(--t-meta); color: var(--apagado); }
.aj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aj-gasto2 > .link { justify-self: start; }
.aj-busca-contas { margin-bottom: 4px; }
.aj-quadrados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.aj-quadrados-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aj-quadrado { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; min-height: 168px; padding: 14px; border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); cursor: pointer; }
.aj-quadrado:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-leve); }
.aj-quadrado.quebrada { border-color: color-mix(in srgb, var(--atencao) 45%, var(--linha)); }
.aj-quadrado > b { font-size: var(--t-ui); font-weight: 600; margin-top: 4px; }
.aj-quadrado > small { font-size: var(--t-meta); color: var(--tinta-2); line-height: 1.4; }
.aj-q-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.aj-q-ok { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); color: var(--sobre-cor); }
.aj-q-ok svg { width: 13px; height: 13px; }
.aj-q-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.aj-selo { font-size: var(--t-meta); color: var(--apagado); }
.aj-logo { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-m); background: var(--c); color: var(--sobre-cor); font-weight: 700; font-size: var(--t-corpo); }
.aj-conta-cab { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.aj-conta-cab .aj-logo { width: 44px; height: 44px; }
.aj-conta-cab > div { display: grid; gap: 2px; }
.aj-conta-cab small { font-size: var(--t-meta); color: var(--apagado); }
.aj-motor { gap: 8px; }
.aj-motor-logos { display: flex; gap: 6px; }
.aj-motor-logos .aj-logo { width: 28px; height: 28px; font-size: var(--t-meta); }
.aj-motor small { font-size: var(--t-meta); color: var(--apagado); }
@media (max-width: 899px) {
  .aj-marca-cartao, .aj-opcoes { grid-template-columns: minmax(0, 1fr); }
  .aj-quadrados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-quadrado { min-height: 0; }
}
.aj-guia-feitos { display: flex; align-items: center; gap: 6px; margin: 0; }
.aj-guia-feitos svg { width: 13px; height: 13px; color: var(--marca); }
.aj-chips .filtro { padding: 0 10px; min-height: 30px; }
.hoje-lado .aj-linha { grid-template-columns: 32px minmax(0, 1fr) 14px; row-gap: 2px; }
.hoje-lado .aj-linha > .hoje-ic, .hoje-lado .aj-linha > svg { grid-row: 1 / 3; }
.hoje-lado .aj-linha .aj-valor { grid-column: 2; grid-row: 2; max-width: none; }
.hoje-lado .aj-linha .mc-meio small { display: none; }
/* Conexões numa grade só, com filtro e os logos (06/10) */
.aj-contas-topo { display: grid; gap: 10px; margin-bottom: 14px; }
.aj-filtros-conta { flex-wrap: wrap; }
.aj-logo svg { width: 20px; height: 20px; fill: var(--sobre-cor); }
.aj-motor-logos .aj-logo svg { width: 15px; height: 15px; }
.aj-conta-cab .aj-logo svg { width: 24px; height: 24px; }
.aj-outro { border-style: dashed; background: none; font: inherit; color: var(--tinta); text-align: left; }
.aj-logo-mais { --c: var(--elevado); color: var(--tinta-2); }
.aj-logo-mais svg { fill: none; stroke: currentColor; }
.aj-conta-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aj-conta-estado small { font-size: var(--t-meta); color: var(--apagado); }
.aj-conta-quem { margin-left: auto; }
@media (max-width: 899px) { .aj-filtros-conta { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .aj-filtros-conta .filtro { flex: none; } }

/* a marca tirada do site ou de uma imagem (dna.py, 57-marca.js; quita-d9, 06/10) */
.dna-marca { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.dna-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dna-linha input[type=url] { flex: 1 1 200px; min-width: 0; }
.dna-proposta { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--r-m); background: var(--painel); }
.dna-proposta > img { max-height: 44px; max-width: 200px; object-fit: contain; justify-self: start; }
.dna-proposta p { margin: 0; }
.dna-cores { display: flex; gap: 12px; flex-wrap: wrap; }
.dna-cor { display: flex; align-items: center; gap: 6px; }
.dna-cor i { width: 28px; height: 28px; border-radius: var(--r-p); border: 1px solid var(--linha); flex: none; }
.dna-cor small { font-size: var(--t-meta); color: var(--apagado); line-height: 1.25; font-family: var(--mono); }
.dna-com-logo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-meta); color: var(--apagado); }
/* a decisão do chamado do zelador, presa no pé do painel (06/10) */
.chamado-decisao { position: sticky; bottom: 0; z-index: 1; display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--marca); border-radius: var(--r-g); background: var(--painel); box-shadow: var(--sombra); }
.chamado-decisao .conserto { margin: 0; padding: 0; border: 0; background: none; }
.chamado-decisao .agora-t { margin: 0; }
.chamado-decisao .conserto > p:nth-of-type(2) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* a missão no mesmo lugar em toda aba (06/10, o dono: "me incomoda muito o nome da missão mudar de lugar dependendo
   da aba"): o botão de estado muda de largura ("no ar" ou "trabalhando" com os rostos) e empurrava a missão; no
   computador ela vai para o começo do topo, antes do título, como o caminho Missão › Lugar, alinhada com a da lista de
   conversas */
@media (min-width: 900px) {
  .conversa-topo > .topo-acoes { display: contents; }
  .conversa-topo > .topo-acoes > .missao-no-topo { order: -1; display: flex; align-items: center; gap: 12px; }
  .conversa-topo > .topo-acoes > .missao-no-topo::after { content: ""; width: 1px; height: 28px; background: var(--linha); }
  .conversa-topo > .topo-acoes > .missao-no-topo .menu-lista { left: 0; right: auto; }
}
/* o sino como caixa de entrada (06/10): uma frase por linha, os dias separando */
.sino-item .sino-frase { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--t-ui); line-height: 1.4; color: var(--tinta-2); }
.sino-item .sino-frase b { font-weight: 600; color: var(--tinta); }
.sino-item .sino-frase span { color: var(--tinta); font-weight: 500; }
.sino-item small .ponto { margin-right: 6px; }
.sino-mais { margin-top: 8px; }
/* a lembrança numa linha só (06/10): o resto no title e no Mudar */
.mc-linha:not(.mc-trecho) .mc-texto { -webkit-line-clamp: 1; }
/* a vista Apps em Trabalhos (06/10) */
.app-modelo-q { font: inherit; color: var(--tinta); text-align: left; justify-items: start; }
.app-q .aj-logo svg { fill: none; stroke: currentColor; }
/* o Bip, quem conserta a Sala (06/10): um robozinho com o rosto dele */
.avatar.bip { --bip-olho: var(--painel); background: color-mix(in srgb, var(--ag6) 14%, var(--painel)); color: var(--ag6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ag6) 30%, var(--linha)); }
.avatar.bip svg { width: 74%; height: 74%; }

/* ---------- a Agenda nas medidas do Hoje (06/10): a semana como planejador, hoje e os próximos ao lado ---------- */
#agenda-corpo:has(> .ag-pagina) { padding: 0; }
.ag-nav { display: flex; align-items: center; gap: 4px; }
.ag-hoje-sel { border-color: var(--linha); }
.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linha); border-radius: var(--r-g); background: var(--painel); overflow: hidden; }
.ag-dia { display: grid; grid-template-rows: auto 1fr auto; min-height: 260px; min-width: 0; padding: 10px 8px; }
.ag-dia + .ag-dia { border-left: 1px solid var(--linha); }
.ag-dia.fds { background: color-mix(in srgb, var(--elevado) 55%, var(--painel)); }
.ag-dia.passou > header, .ag-dia.passou .ag-item { opacity: .6; }
.ag-dia > header { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding-bottom: 10px; }
.ag-dia > header span { font-size: var(--t-meta); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.ag-dia > header b { font-family: var(--mono); font-size: var(--t-ui); font-weight: 500; color: var(--tinta-2); }
.ag-dia.hoje > header b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: var(--sobre-cor); }
.ag-dia.hoje > header span { color: var(--marca-tinta); }
.ag-itens { display: grid; align-content: start; gap: 6px; }
.ag-item { display: grid; gap: 2px; width: 100%; padding: 7px 8px; border: 0; border-left: 3px solid var(--cor, var(--linha-forte)); border-radius: var(--r-p); background: var(--elevado); font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.ag-item:hover { background: color-mix(in srgb, var(--cor, var(--linha)) 10%, var(--elevado)); }
.ag-item.atrasado { border-left-color: var(--perigo); }
.ag-item.feito .ag-item-titulo { text-decoration: line-through; color: var(--apagado); }
.ag-item.previsto { background: none; border: 1px dashed var(--linha-forte); border-left: 3px dashed var(--cor, var(--linha-forte)); }
.ag-item-hora { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); }
.ag-item-hora svg { width: 11px; height: 11px; }
.ag-item-titulo { font-size: var(--t-meta); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ag-marcar { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; padding: 6px; border: 1px dashed transparent; border-radius: var(--r-p); background: none; font: inherit; font-size: var(--t-meta); color: var(--apagado); cursor: pointer; opacity: 0; transition: opacity .15s; }
.ag-dia:hover .ag-marcar, .ag-marcar:focus-visible { opacity: 1; border-color: var(--linha-forte); }
.ag-marcar svg { width: 12px; height: 12px; }
.ag-dica { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.ag-dica svg { width: 12px; height: 12px; }
.ag-filtros { flex-wrap: wrap; margin-bottom: 8px; }
.ag-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--linha); }
@media (max-width: 899px) {
  .ag-semana { grid-template-columns: minmax(0, 1fr); }
  .ag-dia { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; column-gap: 10px; padding: 10px 12px; }
  .ag-dia + .ag-dia { border-left: 0; border-top: 1px solid var(--linha); }
  .ag-dia > header { grid-row: 1 / 3; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 2px 0 0; }
  .ag-dia:not(.hoje):not(:has(.ag-item)) .ag-itens { display: none; }
  .ag-marcar { opacity: 1; justify-content: flex-start; margin-top: 0; padding: 4px 0; border: 0; }
  .ag-dia:has(.ag-item) .ag-marcar { display: none; }
  .ag-pagina > .fundo-cabeca { flex-direction: column; align-items: stretch; }
  .ag-pagina .qd-topo-acoes { flex-wrap: wrap; gap: 8px; }
  .ag-pagina .qd-topo-acoes > .botao.primario { margin-left: auto; }
  .ag-lado-hoje { display: none; }
}

/* ---------- a página da tarefa nas medidas do Hoje (06/10, prévia): o Como foi feito como uma história ---------- */
#trabalhos-corpo:has(.tc-pagina) { padding: 0; }
.tc-cabeca h1 { font-size: var(--t-titulo); }
.tc-por { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; font-size: var(--t-ui); color: var(--tinta-2); }
.tc-por b { color: var(--tinta); font-weight: 600; }
.tc-pagina .hoje-principal > * + * { margin-top: 18px; }
.tc-historia { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tc-cap { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.tc-cap + .tc-cap { border-top: 1px solid var(--linha); }
.tc-cap:first-child { padding-top: 2px; }
.tc-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-tinta); }
.tc-ic svg { width: 16px; height: 16px; }
.tc-cap b { display: block; margin-bottom: 4px; font-size: var(--t-ui); font-weight: 600; }
.tc-cap p { margin: 0 0 6px; font-size: var(--t-ui); line-height: 1.5; color: var(--tinta-2); }
.tc-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pilula); background: var(--elevado); border: 1px solid var(--linha); font-size: var(--t-meta); color: var(--tinta); text-decoration: none; }
a.tc-chip:hover { border-color: var(--linha-forte); }
.tc-fontes { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-criterios { display: grid; gap: 6px; margin: 4px 0 8px; padding: 0; list-style: none; }
.tc-criterios li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: var(--t-ui); line-height: 1.45; color: var(--tinta); }
.tc-criterios svg { width: 15px; height: 15px; margin-top: 2px; }
.tc-criterios li.ok svg { color: var(--marca); }
.tc-criterios li.nao svg { color: var(--perigo); }
.tc-voltas summary { cursor: pointer; font-size: var(--t-meta); color: var(--tinta-2); }
.tc-voltas ol { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--t-meta); color: var(--tinta-2); }
.tc-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.tc-log { margin-top: 8px; }
.tc-quem { gap: 0; padding: 4px 16px; }
.tc-linha { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; font-size: var(--t-ui); }
.tc-linha + .tc-linha { border-top: 1px solid var(--linha); }
.tc-linha > span:first-child { color: var(--apagado); font-size: var(--t-meta); }
.tc-linha > span:last-child { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tc-linha small { color: var(--apagado); font-size: var(--t-meta); }
.tc-pedido p { margin: 0; font-size: var(--t-ui); line-height: 1.5; color: var(--tinta-2); }
.tc-aceite { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); background: var(--elevado); }
.tc-aceite small { font-size: var(--t-meta); font-weight: 600; color: var(--tinta-2); }
.tc-inteiro summary { cursor: pointer; font-size: var(--t-meta); color: var(--marca-tinta); }
.tc-v { font-family: var(--mono); font-size: var(--t-meta); background: var(--elevado); color: var(--tinta-2); }
.tc-registro { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tc-registro li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: var(--t-meta); color: var(--tinta-2); }
.tc-registro time { color: var(--apagado); }
.tc-cabeca h1 { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tc-voltas { margin: 4px 0 8px; }
@media (max-width: 899px) {
  .tc-pagina .decisao-t .acoes-t, .tc-pagina .decisao-t > .acoes, .tc-pagina .decisao-t button { display: none; }
  .tc-cabeca { flex-direction: column; align-items: stretch; }
  .tc-pagina { padding-bottom: 96px; }
}
.tc-criterios small { display: block; margin-top: 1px; font-size: var(--t-meta); color: var(--apagado); line-height: 1.4; }
.qd-busca-lista button .qd-busca-ic { position: absolute; left: 8px; top: 50%; margin-top: -7px; display: grid; place-items: center; width: 14px; color: var(--apagado); }
.qd-busca-ic svg { width: 13px; height: 13px; }
.tc-quem2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; }
.tc-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-pessoa > span:last-child { display: grid; min-width: 0; }
.tc-pessoa b { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-pessoa small { font-size: var(--t-meta); color: var(--apagado); }
/* as duas colunas começam juntas: o primeiro cartão de cada lado na mesma altura (06/10, "desalinhado") */
.tc-pagina .hoje-lado > .hoje-sec:first-child, .tc-pagina .hoje-principal > :first-child { margin-top: 0; }
.tc-pagina .hoje-lado > .hoje-sec + .hoje-sec { margin-top: 18px; }
.tc-pedido > .rotulo { margin: 0; }
.linha-rodando-com { display: flex; align-items: center; gap: 6px; }
.linha-rodando-com > .linha-rodando { flex: 1; min-width: 0; }

/* ---------- o tocador de áudio (06/10): o nome em cima, a onda embaixo, o ⋯ no lugar do fone; preso embaixo, o
   mesmo cartão da largura da caixa de mensagem, com o ✕ dentro ---------- */
.audio { width: min(380px, 100%); gap: 10px; padding: 8px 8px 8px 8px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.audio-meio { display: grid; gap: 2px; flex: 1; min-width: 0; }
.audio-nome { font-size: var(--t-meta); font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-meio .audio-onda { height: 20px; }
.audio-vel { height: 26px; min-width: 40px; }
.audio details.menu > summary { width: 28px; height: 28px; }
.audio .audio-fechar { flex: none; }
.audio-fixo { justify-content: center; padding: 8px 20px 0; background: none; border-top: 0; }
.audio-fixo [data-audio] { width: 100%; max-width: 760px; margin: 0 auto; box-shadow: inset 0 0 0 1px var(--linha), var(--sombra-leve); }
.audio-na-barra { gap: 8px; border-style: solid; border-radius: var(--r-g); background: var(--elevado); color: var(--tinta-2); }
.audio-na-barra svg { width: 14px; height: 14px; color: var(--marca); }
.audio-na-barra b { font-weight: 600; color: var(--tinta); }
/* preso embaixo, largo: a onda vira uma linha de progresso (as 34 barras ficavam palitos soltos) */
.audio-fixo .audio-onda { height: 14px; }
.audio-fixo .audio-onda i { display: none; }
.audio-fixo .audio-onda::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--r-pilula); background: var(--linha-forte); }
.audio-fixo .audio-passou { top: 50%; bottom: auto; height: 4px; margin-top: -2px; border-radius: var(--r-pilula); background: var(--marca); }

/* ---------- as siglas de arquivo num estilo só (06/10, "manter harmonia e padrão"): neutras como em Memória, Ajustes
   e no Hoje, sem uma cor por formato; o formato é a sigla ---------- */
.item-sigla, .item-sigla[data-formato] { background: var(--elevado); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha); }
/* ---------- a grade do que ficou pronto simétrica (06/10, "desalinhado e não simétrico"): toda capa na mesma proporção
   (com imagem ou só a sigla), o nome sempre com o espaço de duas linhas e os cartões da mesma altura na linha ---------- */
.grade-t > li { display: flex; }
.grade-t .miniatura-t { height: 100%; grid-template-rows: auto auto 1fr; align-content: start; }
.grade-t .miniatura-t-capa, .grade-t .miniatura-t-capa.sem-imagem { aspect-ratio: 16 / 10; }
.grade-t .miniatura-t-nome { min-height: calc(2 * 1.35em); }
.grade-t .miniatura-t small { align-self: end; }
/* o achado da internet em uma frase (06/10) */
.achado-web .cap-cabeca b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.achado-frase { margin: 4px 0 0; font-size: var(--t-ui); line-height: 1.5; color: var(--tinta-2); }
.achado-site { margin: 8px 0 0; }
/* o aviso que aparece e some (07/10): um ícone, no máximo duas linhas, tocar fecha */
.aviso { display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 10px 16px 10px 12px; border-radius: var(--r-g); line-height: 1.45; cursor: pointer; }
.aviso[hidden] { display: none; }
.aviso-ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--marca); color: var(--sobre-cor); }
.aviso-ic svg { width: 12px; height: 12px; }
.aviso.erro .aviso-ic { background: var(--sobre-cor); color: var(--perigo); }
.aviso-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* o calendário do compromisso (07/10): o cartão das listas da página, com o mês em grade */
.cal-ag { margin: -4px 0 12px; padding: 12px; border-radius: var(--r-g); background: var(--elevado); box-shadow: inset 0 0 0 1px var(--linha); }
.cal-ag[hidden] { display: none; }
.cal-ag-atalhos { display: flex; gap: 6px; margin-bottom: 10px; }
.cal-ag-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: var(--t-ui); }
.cal-ag-semana, .cal-ag-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-ag-semana span { font-size: var(--t-meta); color: var(--apagado); padding: 4px 0; }
.cal-ag-dia { height: 34px; border: 0; border-radius: var(--r-m); background: none; color: var(--tinta); font: inherit; font-size: var(--t-ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-ag-dia:hover { background: var(--elevado); }
.cal-ag-dia.passou { color: var(--apagado); }
.cal-ag-dia.cal-ag-hj { box-shadow: inset 0 0 0 1px var(--marca); font-weight: 600; }
.cal-ag-dia.sel { background: var(--marca); color: var(--sobre-cor); font-weight: 600; }
#ag-quando-caixa .escolha-botao { width: 100%; }
/* o XP no cartão do agente (07/10): o nível, o XP e a barra até o próximo, no lugar do selo de confiança */
.tm-nivel { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; row-gap: 4px; min-width: 96px; }
.tm-nivel > b { font-size: var(--t-meta); font-weight: 600; color: var(--tinta); }
.tm-nivel.ok > b { color: var(--marca); }
.tm-pe .tm-nivel small { margin-left: 0; font-variant-numeric: tabular-nums; }
.tm-nivel .tm-barra { grid-column: 1 / -1; height: 4px; }
.pa-xp { margin: 8px 0 0; }
/* o que está fazendo, em palavras de gente (07/10) */
.log-gente { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.log-gente li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-ui); color: var(--tinta); }
.log-gente li:last-child { border-bottom: 0; }
.log-gente time { font-family: var(--mono); font-size: var(--t-meta); color: var(--apagado); padding-top: 2px; }
.log-gente small { color: var(--apagado); }
.log-gente li.agora { color: var(--marca); font-weight: 600; }
.log-gente li.erro { color: var(--perigo); }
.log-gente .pontos { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.log-gente .pontos i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .35; animation: pontinho 1.2s infinite; }
.log-gente .pontos i:nth-child(2) { animation-delay: .2s; } .log-gente .pontos i:nth-child(3) { animation-delay: .4s; }
@keyframes pontinho { 50% { opacity: 1; } }
.log-tecnico { margin-top: 16px; }
.log-tecnico > summary { cursor: pointer; font-size: var(--t-meta); color: var(--apagado); }
/* A sala sem rolagem de lado e com uma barra só, fina (07/10, o dono: "muita barra de rolagem"): o texto do atalho
   corta em vez de alargar o painel */
.painel-corpo { overflow-x: hidden; scrollbar-width: thin; }
.painel .atalhos button { min-width: 0; }
.painel .atalhos button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pedir mudanca num app (39-apps.js; quita-d9, 07/10) */
.app-mudar { display: grid; gap: 8px; margin: 14px 0 4px; }
.app-mudar textarea { width: 100%; min-height: 56px; resize: vertical; box-sizing: border-box; }
.app-mudar .botao { justify-self: start; }
.app-mudando { margin: 12px 0 0; }
/* o WhatsApp «do dono»: o modo, o risco e o QR ao vivo (59-whatsapp.js; quita-5a, 07/10). O QR traz o próprio fundo
   branco, para o celular ler também no tema escuro */
.dialogo-whatsapp { max-width: 460px; }
.wa-modos { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.wa-modos .aj-opcao { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; text-align: left; }
.wa-modos .aj-opcao small { grid-column: 2; }
.wa-risco { padding: 12px 14px; border-radius: var(--r-m); background: var(--atencao-suave); color: var(--tinta); font-size: var(--t-ui); }
.wa-risco p { margin: 0; }
.wa-li { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-weight: 600; }
.wa-qr { display: block; margin: 0 auto; width: min(260px, 70vw); height: auto; border-radius: var(--r-m); }