/* SALA DE CONTROLE: estilo.
   Celular primeiro (360 a 430 px), depois tablet e computador. Dois temas (escuro e claro) por variaveis.
   Regras que este arquivo cumpre e os testes medem:
   - texto >= 13 px, alvo de toque >= 44 px, foco sempre visivel, contraste AA nos dois temas;
   - nada de rolagem para o lado: todo texto de dado quebra em qualquer ponto (overflow-wrap:anywhere);
   - estado = bolinha + palavra (a cor sozinha nunca diz o estado);
   - caixas nunca encostadas: todo grupo de caixas tem "gap" de pelo menos 10 px;
   - sem estilo dentro do HTML (CSP style-src 'self'): so classes. */

@font-face {
  font-family: "Satoshi";
  src: url("fontes/Satoshi-Variable.woff2") format("woff2-variations"), url("fontes/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* ---------- cores (claro e arejado por padrao; escuro no mesmo espirito) ---------- */
/* CLARO: os numeros vieram das imagens da inspiracao (cores lisas amostradas: fundo #F8F6FB, tile #F4F4F4, azul #3C70F0) */
:root,
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #f7f6fa;
  --mancha-lilas: #e8ddf8;
  --mancha-verde: #d9f1e3;
  --mancha-pessego: #fbe3d6;
  --vidro: rgba(255, 255, 255, 0.66);
  --vidro-forte: rgba(255, 255, 255, 0.92); /* 0,92: o texto que rola por tras nao pode aparecer nos rotulos, nem onde o desfoque nao desenha */
  --vidro-borda: rgba(255, 255, 255, 0.7);
  --camada: #fbfaff;
  --camada-2: #efeef3;
  --icone-fundo: #ffffff;
  --faixa-trabalhando: rgba(227, 240, 220, 0.82);
  --faixa-esperando: rgba(236, 228, 250, 0.82);
  --faixa-neutra: rgba(255, 255, 255, 0.6);
  --campo: rgba(236, 235, 243, 0.82);
  --ativo: #e3e2eb;
  --barra: #4b4b57;
  --texto-ola: #3b3b46;
  --linha: rgba(60, 60, 90, 0.12);
  --linha-forte: #7a849f;
  --texto: #121216;
  --texto-2: #62626e;
  /* a cor de destaque vem do catalogo (tema.js poe --destaque-claro e --destaque-escuro no <html>); sem escolha, o azul de sempre */
  --acento: var(--destaque-claro, #3069f0);
  --acento-sombra: color-mix(in srgb, var(--acento) 38%, transparent);
  --acento-texto: #121216;
  --sobre-acento: #ffffff;
  --foco: var(--destaque-claro, #3069f0);
  --ok: #167a35;
  --espera: #946200;
  --pronta: #8a3f9e;
  --noar: #0b7a5b;
  --parada: #5c6880;
  --erro: #b3261e;
  --recado: rgba(190, 172, 247, 0.3);
  --recado-linha: rgba(190, 172, 247, 0);
  --sombra: 0 18px 48px rgba(46, 38, 92, 0.08), 0 2px 6px rgba(46, 38, 92, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --sombra-leve: 0 8px 24px rgba(46, 38, 92, 0.07), 0 1px 3px rgba(46, 38, 92, 0.04);
  --cab-topo: rgba(247, 246, 250, 0.92); /* 0,92: o titulo tem de ler sem depender do desfoque (o veu some para baixo pela mascara) */
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0d1020;
  --mancha-verde: rgba(30, 160, 118, 0.36);
  --mancha-lilas: rgba(110, 90, 232, 0.4);
  --mancha-pessego: rgba(190, 110, 80, 0.16);
  --icone-fundo: #252b4a;
  --faixa-trabalhando: rgba(40, 90, 78, 0.5);
  --faixa-esperando: rgba(70, 60, 130, 0.5);
  --faixa-neutra: rgba(255, 255, 255, 0.06);
  --campo: var(--vidro-forte);
  --ativo: #3a4170;
  --barra: #aab2cf;
  --texto-ola: var(--texto-2);
  --vidro: rgba(30, 35, 64, 0.62);
  --vidro-forte: rgba(34, 40, 74, 0.92);
  --vidro-borda: rgba(255, 255, 255, 0.1);
  --camada: #151a30;
  --camada-2: #252b4a;
  --linha: rgba(255, 255, 255, 0.12);
  --linha-forte: #7d88ad;
  --texto: #eef0fb;
  --texto-2: #aab2cf;
  --acento: var(--destaque-claro, #2563eb);
  --acento-texto: var(--destaque-escuro, #8fb0ff);
  --sobre-acento: #ffffff;
  --foco: var(--destaque-escuro, #9db9ff);
  --ok: #4ade80;
  --espera: #f5b83d;
  --pronta: #d9a6ee;
  --noar: #3ddcb0;
  --parada: #98a4b8;
  --erro: #ff7b7b;
  --recado: rgba(61, 117, 255, 0.28);
  --recado-linha: rgba(120, 160, 255, 0.45);
  --sombra: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --sombra-leve: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --cab-topo: rgba(13, 16, 32, 0.92);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

a {
  color: var(--acento-texto);
}

/* Regra da casa: numero e rotulo em Satoshi, com algarismos de largura igual (tabular-nums). Monoespaco SO dentro de bloco de codigo de um
   balao (.md-codigo e .codigo-inline). A classe .mono ficou so como apelido de "numero/hora pequeno". */
.mono {
  font-family: inherit;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.texto-suave {
  color: var(--texto-2);
  font-size: 0.875rem;
}

.texto-quebra {
  overflow-wrap: anywhere;
  min-width: 0;
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.pular {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 50;
  min-height: 44px;
  padding: 0 16px;
  background: var(--camada);
  color: var(--texto);
  border: 2px solid var(--foco);
  border-radius: 10px;
  font: inherit;
}

.pular:focus {
  top: 8px;
}

/* ---------- barra de cima (no maximo 56 px) ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  background: var(--camada);
  border-bottom: 1px solid var(--linha);
}

/* Em 360 px, com "reconectando…" na tela, a barra fica apertada: o nome encolhe com reticencias em vez de
   passar por cima dos botoes. */
.marca {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 420px) {
  .topo {
    gap: 8px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }

  .marca {
    font-size: 1.0625rem;
  }
}

.fluxo {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  margin: 0;
  white-space: nowrap;
}

.botao-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  cursor: pointer;
}

.botao-icone:hover {
  background: var(--camada-2);
}

:root[data-tema="escuro"] .icone-lua,
:root[data-tema="claro"] .icone-sol {
  display: none;
}

.botao-sair {
  flex: 0 0 auto;
  padding: 0 10px;
}

/* ---------- abas: embaixo no celular, em cima no computador ---------- */
.abas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--camada);
  border-top: 1px solid var(--linha);
}

.abas a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 4px;
  color: var(--texto-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.abas a[aria-current="page"] {
  color: var(--acento-texto);
  box-shadow: inset 0 3px 0 var(--acento);
}

.abas a:hover {
  background: var(--camada-2);
}

/* ---------- estado: bolinha + palavra ---------- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  font-weight: 600;
}

.ponto {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--parada);
}

.fluxo[data-estado="trabalhando"] .ponto,
.ponto-trabalhando {
  background: var(--ok);
}

.fluxo[data-estado="esperando"] .ponto,
.ponto-esperando {
  background: var(--espera);
}

.ponto-pronta {
  background: var(--pronta);
}

.ponto-erro {
  background: var(--erro);
}

/* parada: aro vazio, para nao depender so da cor */
.ponto-parada {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--parada);
}

.ponto-trabalhando {
  animation: pulsar 1.8s ease-in-out infinite;
}

.fluxo[data-estado="trabalhando"] .ponto {
  animation: pulsar 1.8s ease-in-out infinite;
}

@keyframes pulsar {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- pagina ---------- */
.titulo-tela {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
}

.secao {
  margin-bottom: 28px;
}

.secao-titulo {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.grade {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.atualizado,
.resumo-tarefas {
  margin-bottom: 12px;
}

/* ---------- cartao ---------- */
.cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 14px;
  min-width: 0;
}

.cartao-titulo {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.cartao-tarefa .acoes {
  margin-top: auto;
}

.grande {
  font-size: 1.25rem;
  font-weight: 700;
}

.linha-etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.etiqueta {
  display: inline-block;
  padding: 2px 10px;
  background: var(--camada-2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--texto);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.etiqueta-provavel {
  border-style: dashed;
  border-color: var(--linha-forte);
}

.etiqueta-aviso {
  border-color: var(--espera);
}

.lista-simples,
.lista-links,
.lista-agentes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lista-links {
  gap: 10px;
}

.sub {
  display: grid;
  gap: 2px;
}

.timer {
  display: grid;
  gap: 2px;
}

.agora {
  font-weight: 500;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- uso de conta e barras ---------- */
.uso {
  display: grid;
  gap: 6px;
}

.uso-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.uso-rotulo {
  font-size: 0.9375rem;
}

.uso-valor {
  font-size: 1rem;
}

.barra {
  display: block;
  height: 10px;
  background: var(--camada-2);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--linha);
}

.barra-cheia {
  display: block;
  height: 100%;
  background: var(--acento);
  border-radius: 5px;
}

.barra-alta .barra-cheia {
  background: var(--espera);
}

/* ---------- botoes e campos ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  background: var(--camada-2);
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  border-color: var(--texto-2);
}

.botao-principal {
  background: var(--acento);
  color: var(--sobre-acento);
  border-color: transparent;
}

.botao-principal:hover {
  border-color: var(--texto);
}

.botao-leve {
  background: transparent;
  color: var(--acento-texto);
  border-color: transparent;
  padding: 0 8px;
  align-self: flex-start;
}

.botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.campo {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
}

.campo::placeholder {
  color: var(--texto-2);
  opacity: 1;
}

.campo-codigo {
  font-size: 1.25rem;
  letter-spacing: 0.3em;
}

.campo-recado {
  min-height: 112px;
  resize: vertical;
  line-height: 1.45;
}

.linha-campo {
  display: grid;
  gap: 6px;
}

.linha-campo label,
.rotulo-campo {
  font-size: 0.9375rem;
  font-weight: 700;
}

.caixa-marcar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 0.9375rem;
}

.caixa-marcar input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--acento-texto);
}

/* ---------- avisos ---------- */
.aviso {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: var(--camada-2);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
}

.aviso-erro {
  border-color: var(--erro);
}

.aviso-info {
  border-color: var(--pronta);
  margin-bottom: 12px;
}

.vazio {
  padding: 24px 8px;
  text-align: center;
}

.vazio-titulo {
  font-weight: 700;
  margin-bottom: 4px;
}

.resultado {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--linha-forte);
  background: var(--camada-2);
  overflow-wrap: anywhere;
}

.resultado-ok {
  border-color: var(--ok);
}

.resultado-erro {
  border-color: var(--erro);
}

/* ---------- detalhes (abre e fecha) ---------- */
.detalhes summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}

.detalhes[open] > summary {
  margin-bottom: 6px;
}

/* ---------- ligacao para outra tela ---------- */
.linha-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 12px;
  color: var(--texto);
  text-decoration: none;
  min-width: 0;
}

a.linha-link:hover {
  border-color: var(--acento-texto);
}

.cartao .linha-link {
  background: var(--camada-2);
}

.linha-atual {
  border-color: var(--acento-texto);
}

.linha-link-titulo {
  font-weight: 700;
  color: var(--texto);
}

.linha-link-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lista-conversas {
  max-width: 48rem;
}

/* ---------- conversa ---------- */
.conversa-cab {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  max-width: 60rem;
}

.conversa-cab .titulo-tela {
  margin-bottom: 0;
}

.voltar {
  padding-left: 0;
  justify-content: flex-start;
}

.migalhas ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 0.875rem;
}

.migalhas li + li::before {
  content: "›";
  margin-right: 6px;
  color: var(--texto-2);
}

.linha-link-curta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

.agentes {
  padding: 4px 14px;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 12px;
}

.agente-linha {
  display: grid;
  gap: 4px;
}

.lista-agentes .nivel-1 {
  margin-left: 12px;
}

.lista-agentes .nivel-2 {
  margin-left: 24px;
}

.lista-agentes .nivel-3,
.lista-agentes .nivel-4 {
  margin-left: 36px;
}

.despachos {
  max-width: 60rem;
}

.fio-caixa {
  display: grid;
  gap: 12px;
  max-width: 60rem;
}

.fio {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dia-separador {
  align-self: center;
  padding: 2px 12px;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 700;
  border-bottom: 1px solid var(--linha);
}

.item {
  min-width: 0;
}

.msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: fit-content;
  max-width: min(100%, 44rem);
  padding: 10px 14px;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 14px;
}

.msg-esq {
  align-self: flex-start;
}

.msg-dir {
  align-self: flex-end;
  background: var(--recado);
  border-color: var(--recado-linha);
}

.msg-erro {
  border-color: var(--erro);
}

.msg-tipo {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.msg-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.msg-cab .tempo {
  color: var(--texto-2);
}

.msg-texto {
  white-space: pre-wrap;
}

.colapsado {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.completo {
  margin: 0;
  padding: 10px;
  max-height: 26rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 8px;
  color: var(--texto);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fio .item-ferramenta {
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--linha-forte);
  display: grid;
  gap: 4px;
  max-width: 60rem;
}

.ferr-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.ferr-nome {
  font-weight: 700;
  color: var(--texto);
}

.ferr-resumo {
  color: var(--texto-2);
  font-size: 0.875rem;
}

.msg-corpo {
  min-width: 0;
}

.ferr-linha .msg-corpo {
  flex: 1 1 12rem;
}

.item-estado {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  color: var(--texto-2);
  font-size: 0.875rem;
  text-align: center;
}

.cartao-filho {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--camada-2);
  border: 1px solid var(--acento);
  border-radius: 10px;
  color: var(--texto);
  text-decoration: none;
}

.cartao-filho-rotulo {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cartao-filho-abrir {
  color: var(--acento-texto);
  font-weight: 700;
  font-size: 0.875rem;
}

.fio-vazio {
  list-style: none;
}

.flutuante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(56px + env(safe-area-inset-bottom) + 16px);
  z-index: 15;
  box-shadow: var(--sombra);
}

.flutuante-grupo {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.aviso-flutuante {
  margin: 0;
  padding: 6px 12px;
  background: var(--camada);
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--sombra);
}

/* ---------- recado ---------- */
.recado {
  margin-top: 28px;
  max-width: 60rem;
}

.recado-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.janela {
  width: min(92vw, 40rem);
  max-height: 88vh;
  padding: 20px;
  background: var(--camada);
  color: var(--texto);
  border: 1px solid var(--linha-forte);
  border-radius: 16px;
  box-shadow: var(--sombra);
}

.janela[open] {
  display: grid;
  gap: 12px;
}

.janela::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.texto-final {
  margin: 0;
  padding: 12px;
  max-height: 40vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--fundo);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  font-size: 0.875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.acoes-janela {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ---------- entrar ---------- */
.entrar {
  max-width: 26rem;
  margin: 5vh auto 0;
}

.formulario {
  gap: 16px;
}

.entrar-texto {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ---------- arvore ---------- */
.arvore,
.no-filhos {
  list-style: none;
  padding: 0;
}

.arvore {
  margin-top: 14px;
}

.no-filhos {
  margin-top: 10px;
  margin-left: 6px;
}

.no {
  padding-left: 12px;
  border-left: 2px solid var(--linha-forte);
}

.no + .no {
  margin-top: 10px;
}

.no-provavel {
  border-left-style: dashed;
}

.arvore > .no {
  border-left: 0;
  padding-left: 0;
}

.no-linha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 10px;
  color: var(--texto);
  text-decoration: none;
  max-width: 44rem;
}

.no-nome {
  font-weight: 700;
}

/* ---------- ao vivo ---------- */
.filtros {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  max-width: 60rem;
}

.feed {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  max-width: 60rem;
}

.feed-item {
  background: var(--camada);
  border: 1px solid var(--linha);
  border-radius: 12px;
  min-width: 0;
}

.feed-link {
  display: grid;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--texto);
  text-decoration: none;
}

.feed-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.feed-topo .tempo {
  color: var(--texto-2);
}

.feed-texto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.feed-ferr {
  color: var(--texto-2);
  font-size: 0.875rem;
}

.item-erro .etiqueta-tipo {
  border-color: var(--erro);
}

/* ---------- computador ---------- */
@media (min-width: 900px) {
  .abas {
    position: static;
    display: flex;
    gap: 4px;
    margin-left: 12px;
    padding: 0;
    background: transparent;
    border-top: 0;
  }

  .abas a {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    box-shadow: none;
  }

  .abas a[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--acento);
    border-radius: 10px 10px 0 0;
  }

  .marca {
    flex: 0 0 auto;
  }

  .topo::after {
    content: "";
    order: 1;
    flex: 1 1 auto;
  }

  .fluxo,
  .botao-icone,
  .botao-sair {
    order: 2;
  }

  main {
    padding-bottom: 40px;
  }

  .flutuante {
    bottom: 24px;
  }
}

/* =====================================================================================================================
   CARA NOVA (direcao de arte do Carvalho, 10/10): claro e arejado, vidro fosco, cantos grandes, UM azul vivo,
   botoes redondos cinza claros, barra flutuante embaixo no celular, tres colunas no computador.
   ===================================================================================================================== */

/* ZERO ZOOM (item 3). touch-action nao herda: o que vale e a INTERSECAO do elemento ate a raiz, e o Safari ignora maximum-scale. Por
   isso TODO elemento leva pan-x pan-y (so rolar, nunca pinca nem toque duplo). Nenhuma regra usa manipulation, pinch-zoom ou auto
   (um unico "manipulation" muda o comportamento no iPhone). base/zoom.js cancela tambem os eventos de gesto. */
html,
body,
* {
  touch-action: pan-x pan-y;
}

/* a pagina inteira nao se arrasta alem das pontas (o "elastico" do Safari); as listas que rolam por dentro nao passam a rolagem adiante */
html {
  overscroll-behavior: none;
}

/* Fundo: quase branco com manchas pastel (verde e lilas) que se repetem a cada 1500 px na pagina inteira. Fica no proprio <html>
   (e nao num elemento fixo) para aparecer igual em foto de pagina inteira e para nao pesar na rolagem. */
html {
  background-color: var(--fundo);
  /* cada mancha fica INTEIRA dentro do ladrilho de 1500 px (some antes das bordas): sem emenda quando o ladrilho se repete */
  background-image:
    radial-gradient(ellipse 70% 230px at 0% 70px, var(--mancha-pessego), transparent 72%),
    radial-gradient(ellipse 95% 330px at 100% 190px, var(--mancha-lilas), transparent 72%),
    radial-gradient(ellipse 85% 360px at 0% 560px, var(--mancha-verde), transparent 72%),
    radial-gradient(ellipse 75% 280px at 100% 940px, var(--mancha-pessego), transparent 72%),
    radial-gradient(ellipse 90% 300px at 0% 1230px, var(--mancha-lilas), transparent 72%);
  background-size: 100% 1500px;
  background-repeat: repeat-y;
}

/* Algarismos de largura igual (tabular-nums) so onde ha hora, contagem ou numero que se compara; no texto corrido ficam os naturais */
time,
.tempo,
.mono,
.selo-novas,
.uso-valor,
.grande,
.bloco-conta,
.cartao-data,
.sinal,
.cab-sub,
.recado-estado,
.contador {
  font-variant-numeric: tabular-nums;
}

body {
  background: transparent;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.ponto-noar {
  background: var(--noar);
}

/* ---------- vidro ---------- */
/* O desfoque (backdrop-filter) so vai onde ha poucos elementos (cabecalho, barra, folha, campo de recado):
   em listas de dezenas de cartoes ele pesa no iPhone, e sobre o fundo suave quase nao se ve. */
.vidro {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 28px;
  box-shadow: var(--sombra);
}

/* ---------- casca ---------- */
#conteudo {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px calc(112px + env(safe-area-inset-bottom));
}

#conteudo .col-meio {
  min-width: 0;
}

body[data-rota="p"] #conteudo {
  padding-bottom: 0;
}

body[data-rota="entrar"] #conteudo {
  padding-bottom: 24px;
}

.cab {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  margin: 0 -16px 8px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  /* como nas inspiracoes: o cabecalho nao e uma faixa branca; um veu desfocado que some para baixo (mascara) cobre o que rola por tras */
  isolation: isolate;
}

.cab::before {
  content: "";
  position: absolute;
  inset: 0 0 -14px;
  z-index: -1;
  background: var(--cab-topo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
  pointer-events: none;
}

.cab-lado {
  min-width: 48px;
  display: flex;
}

.cab-centro {
  min-width: 0;
  text-align: center;
}

.cab-titulo {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.cab-sub {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--texto-2);
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
}

.cab-direita {
  display: flex;
  justify-content: flex-end;
}

.botao-redondo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  background: var(--camada-2);
  color: var(--texto);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
}

.botao-redondo:hover {
  background: var(--linha);
}

.botao-claro {
  background: var(--camada-2);
  color: var(--texto);
}

.botao-azul {
  background: var(--acento);
  color: var(--sobre-acento);
  box-shadow: 0 6px 16px var(--acento-sombra);
}

.botao-azul:hover {
  filter: brightness(0.9);
}

.botao-azul:disabled {
  opacity: 0.45;
  box-shadow: none;
}

/* ---------- barra de baixo (celular) / lateral (computador) ---------- */
.barra-app {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: min(calc(100% - 24px), 420px);
  height: 68px;
  padding: 0 6px;
  background: var(--vidro-forte);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--vidro-borda);
  border-radius: 34px;
  box-shadow: var(--sombra);
}

.barra-app a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  min-height: 56px;
  color: var(--texto-2);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 20px;
}

.barra-app a[aria-current="page"] {
  color: var(--acento-texto);
}

.barra-centro {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: var(--acento);
  color: var(--sobre-acento) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 20px var(--acento-sombra);
}



.barra-rotulo {
  line-height: 1.1;
}

/* na conversa (celular) a barra sai do caminho: o campo de recado ocupa o fundo */
@media (max-width: 1023px) {
  body[data-rota="p"] .barra-app {
    display: none;
  }
}

/* ---------- avatares ---------- */
.avatar {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--camada);
  background: linear-gradient(135deg, var(--av, #2c728c), var(--av2, #1d4f64));
}

.av-p {
  width: 24px;
  height: 24px;
  font-size: 0.8125rem;
}

.av-m {
  width: 40px;
  height: 40px;
  font-size: 0.875rem;
}

.av-g {
  width: 56px;
  height: 56px;
  font-size: 1.0625rem;
}

.av-gg {
  width: 72px;
  height: 72px;
  font-size: 1.375rem;
}

.av-iniciais {
  position: relative;
  z-index: 0;
}

.av-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}

.av-selo {
  position: absolute;
  z-index: 2;
  right: -4px;
  bottom: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--texto);
  color: var(--camada);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--camada);
}

.av-p .av-selo {
  display: none;
}

.av-0 { --av: #9b3f31; --av2: #6e2a20; }
.av-1 { --av: #976030; --av2: #6a4220; }
.av-2 { --av: #786a26; --av2: #544a17; }
.av-3 { --av: #5a7425; --av2: #3f5217; }
.av-4 { --av: #317826; --av2: #20551a; }
.av-5 { --av: #267844; --av2: #17542e; }
.av-6 { --av: #26786d; --av2: #17544c; }
.av-7 { --av: #2c728c; --av2: #1d4f64; }
.av-8 { --av: #315f9b; --av2: #204272; }
.av-9 { --av: #31469b; --av2: #202f72; }
.av-10 { --av: #9b3154; --av2: #722039; }
.av-11 { --av: #9b3138; --av2: #72202a; }
.av-carvalho { --av: #2d63ea; --av2: #1b46c2; }
.av-guarda { --av: #5f6a84; --av2: #434b60; }

.av-mais {
  background: var(--camada-2);
  color: var(--texto);
  font-size: 0.8125rem;
  box-shadow: 0 0 0 2px var(--camada);
}

.pilha-av {
  display: inline-flex;
  align-items: center;
}

.pilha-av .avatar + .avatar {
  margin-left: -8px;
}

/* ---------- inicio ---------- */
.saudacao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: max(20px, env(safe-area-inset-top)) 0 18px;
}

.saudacao-ola {
  margin: 0;
  color: var(--texto-2);
  font-size: 1.0625rem;
}

.saudacao-pergunta {
  margin: 2px 0 6px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
}

.saudacao-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.875rem;
}

.blocos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}

.bloco {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 132px;
  padding: 18px;
  color: var(--texto);
  text-decoration: none;
}

.bloco-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--camada-2);
  color: var(--acento-texto);
}

.bloco-titulo {
  font-size: 1.125rem;
  font-weight: 800;
}

.bloco-conta {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-2);
}

.vazio-leve {
  padding: 8px 4px;
}

/* ---------- lista de projetos ---------- */
.filtros-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px 14px;
  padding: 2px 16px 6px;
  scrollbar-width: none;
}

.filtros-chips::-webkit-scrollbar {
  display: none;
}

.chip-filtro {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  background: var(--vidro);
  color: var(--texto);
  border: 1px solid var(--vidro-borda);
  border-radius: 22px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.chip-filtro[aria-pressed="true"] {
  background: var(--acento);
  color: var(--sobre-acento);
  border-color: transparent;
}

.lista-cartoes {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.cartao-projeto {
  display: grid;
  gap: 14px;
  padding: 16px;
  color: var(--texto);
  text-decoration: none;
  border-radius: 30px;
}

.cartao-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.cartao-titulo-caixa {
  display: grid;
  min-width: 0;
}

.cartao-nome {
  font-size: 1.0625rem;
  line-height: 1.25;
}

.cartao-data {
  font-size: 0.875rem;
}

.seta-redonda {
  pointer-events: none;
}

.cartao-midia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 10px;
}

.midia-grande {
  min-height: 150px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--camada-2);
}

.midia-lado {
  display: grid;
  align-content: space-between;
  justify-items: center;
  gap: 8px;
}

.midia-redonda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--camada-2);
  font-weight: 800;
}

.miniatura-cartao,
.miniatura-grande,
.miniatura-grade {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura-grande {
  /* proporcao fixa: a conversa nao pula quando a foto termina de carregar */
  width: min(100%, 360px);
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
  background: var(--camada-2);
}

.miniatura-pequena {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--camada-2);
}

.cartao-faixa {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--camada-2);
  border-radius: 22px;
}

.faixa-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.preview {
  font-size: 0.9375rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.preview-trabalhando {
  color: var(--ok);
  font-weight: 700;
}

.pontinhos {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.pontinhos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsar 1.2s ease-in-out infinite;
}

.pontinhos i:nth-child(2) {
  animation-delay: 0.2s;
}

.pontinhos i:nth-child(3) {
  animation-delay: 0.4s;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.selo-novas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 0.8125rem;
  font-weight: 800;
}

.cartao-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
}

/* linhas (coluna da esquerda no computador) */
.lista-linhas {
  display: grid;
  gap: 8px;
}

.linha-projeto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--texto);
  text-decoration: none;
  border-radius: 22px;
  border: 1px solid transparent;
}

.linha-projeto:hover,
.linha-projeto.ativa {
  background: var(--vidro);
  border-color: var(--vidro-borda);
}

.linha-corpo {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.linha-1,
.linha-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.linha-2 .preview {
  flex: 1 1 auto;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.linha-3 {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8125rem;
}

.linha-nome {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- conversa ---------- */
.projeto-tela {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.membros {
  padding: 4px 0 2px;
}

.membros-lista {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 10px;
  scrollbar-width: none;
}

.membros-lista::-webkit-scrollbar {
  display: none;
}

.membro {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 76px;
  flex: 0 0 auto;
  text-align: center;
}

.membro-nome {
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.15;
}

.membro-papel {
  font-size: 0.8125rem;
  color: var(--texto-2);
  line-height: 1.15;
}

.membro-vivo .avatar {
  box-shadow: 0 0 0 3px var(--ok);
}

.fio-caixa {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.busca-antiga {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.fio-novo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.item-fio {
  min-width: 0;
}

.entra {
  animation: entrar 0.22s ease-out;
}

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.alvo > .balao-corpo,
.alvo.grupo,
.alvo.sistema .sistema-pilula {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.balao {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.balao-eu {
  justify-content: flex-end;
}

.balao-corpo {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: min(82%, 640px);
  padding: 12px 14px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 24px 24px 24px 8px;
  box-shadow: var(--sombra-leve);
}

.balao-eu .balao-corpo {
  background: var(--recado);
  border-color: var(--recado-linha);
  border-radius: 24px 24px 8px 24px;
}

.balao-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 0.875rem;
}

.balao-cab .papel,
.balao-cab .para,
.balao-cab .tempo {
  color: var(--texto-2);
  font-size: 0.8125rem;
}

.balao-texto {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* (balao recortado: o texto ja vem cortado nas primeiras linhas; nada e escondido com overflow) */
.balao-texto.recortado {
  position: relative;
}

.ver-mais {
  justify-self: start;
  min-height: 44px;
  padding: 0 4px;
  background: transparent;
  color: var(--acento-texto);
  border: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.balao-acoes {
  display: flex;
  gap: 6px;
  margin: 0 0 -6px;
}

.balao-acoes .botao-redondo {
  width: 44px;
  height: 44px;
}

.balao-aviso {
  font-size: 0.8125rem;
  color: var(--texto-2);
}

.copia-oculta {
  position: fixed;
  left: -9999px;
  top: 0;
}

/* markdown dos baloes */
.md-p {
  margin: 0 0 8px;
}

.md-p:last-child {
  margin-bottom: 0;
}

.md-lista {
  margin: 0 0 8px;
  padding-left: 1.3em;
}

.md {
  min-width: 0;
  max-width: 100%;
}

.md-codigo {
  display: block;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 22em; /* bloco comprido rola POR DENTRO: nunca passa do balao */
  overflow: auto; /* so o bloco de codigo rola (para o lado e para baixo), nunca a pagina nem o balao */
  background: var(--camada-2);
  border-radius: 14px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* codigo no meio da frase: fora do balao (previas, listas) e so um trecho de texto em Satoshi, sem caixa; no balao e uma caixinha que
   quebra dentro da propria largura (inline-block), para nunca virar um retangulo comprido por cima do vizinho */
.codigo-inline {
  font-family: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.balao-texto .codigo-inline {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  background: var(--camada-2);
  border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 400;
  vertical-align: baseline;
}

.link-texto {
  color: var(--acento-texto);
  text-decoration: underline dotted;
}

/* grupo de atividade */
.grupo {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 22px;
  box-shadow: var(--sombra-leve);
}

.grupo-cab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--texto);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.grupo-texto {
  display: grid;
  min-width: 0;
}

.grupo-resumo {
  font-size: 0.875rem;
  color: var(--texto-2);
}

.grupo-seta {
  display: inline-flex;
  transition: transform 0.18s ease-out;
}

.grupo-aberto .grupo-seta {
  transform: rotate(180deg);
}

.grupo-pilulas,
.grupo-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pilula-destaque {
  display: inline-block;
  padding: 2px 10px;
  background: var(--recado);
  color: var(--texto);
  border: 1px solid var(--recado-linha);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.grupo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.acao-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 6px;
  background: transparent;
  color: var(--texto);
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

.acao-linha:hover {
  background: var(--camada-2);
}

.acao-icone {
  display: inline-flex;
  color: var(--texto-2);
}

.grupo-resto {
  padding: 4px 6px;
}

.sistema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.sistema-pilula {
  padding: 4px 14px;
  background: var(--camada-2);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--texto);
}

.dia-separador {
  align-self: center;
  list-style: none;
  padding: 2px 14px;
  color: var(--texto-2);
  font-size: 0.8125rem;
  font-weight: 800;
}

.foto-item {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.foto-corpo {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: min(82%, 380px);
}

.foto-botao {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}

.foto-botao.foto-grande {
  min-height: 44px;
}

/* campo de recado */
.compositor {
  position: sticky;
  bottom: var(--teclado, 0px); /* sobe a altura do teclado (base/teclado.js): a caixa de recado nunca fica atras dele */
  z-index: 10;
  display: grid;
  gap: 6px;
  margin: 0 -16px;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--fundo) 38%);
}

.compositor-pilula {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  background: var(--vidro-forte);
  border: 1px solid var(--vidro-borda);
  border-radius: 30px;
  box-shadow: var(--sombra);
}

.compositor-campo {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 140px;
  padding: 11px 0;
  background: transparent;
  color: var(--texto);
  border: 0;
  outline: none;
  resize: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.compositor-campo::placeholder {
  color: var(--texto-2);
  opacity: 1;
}

.compositor-pilula:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.nota-sem-recado {
  margin-bottom: 16px;
}

.fim-do-fio {
  height: 4px;
}

.puxar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  overflow: hidden;
  color: var(--texto-2);
  font-size: 0.875rem;
  font-weight: 700;
}

/* folha de baixo e janelas */
.janela {
  width: min(92vw, 40rem);
  max-height: 88vh;
  padding: 22px;
  background: var(--vidro-forte);
  color: var(--texto);
  border: 1px solid var(--vidro-borda);
  border-radius: 30px;
  box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

.folha-alca {
  display: none;
  justify-self: center;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--linha-forte);
}

.janela::backdrop {
  background: rgba(10, 14, 30, 0.5);
}

@media (max-width: 700px) {
  .folha {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 30px 30px 0 0;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    animation: subir 0.22s ease-out;
  }

  .folha-alca {
    display: block;
  }
}

@keyframes subir {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.visualizador {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  background: rgba(10, 14, 30, 0.94);
  border: 0;
  border-radius: 0;
  color: #fff;
}

.visualizador[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
}

.visualizador-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.visualizador-fechar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
}

.visualizador-legenda {
  margin: 0;
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  text-align: center;
}

/* feito, recados, fotos */
.feito-lista {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.feito-dia {
  margin: 10px 4px 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--texto-2);
}

.feito-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--texto);
  text-decoration: none;
  border-radius: 26px;
}

.feito-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--camada-2);
  color: var(--acento-texto);
}

.feito-corpo {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.feito-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.feito-texto {
  color: var(--texto);
}

.feito-fotos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.novo-lista {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.novo-opcao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  color: var(--texto);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.novo-opcao[aria-pressed="true"] {
  outline: 3px solid var(--acento);
  outline-offset: 0;
}

.novo-opcao-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.novo-escrever {
  display: grid;
  gap: 6px;
  padding: 16px 16px 6px;
}

.novo-escrever .compositor {
  position: static;
  margin: 0;
  padding: 10px 0 10px;
  background: transparent;
}

.buscar-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px;
  margin-bottom: 14px;
  border-radius: 30px;
}

.campo-busca {
  background: transparent;
  border: 0;
  outline: none;
  min-height: 48px;
}

.buscar-campo:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.buscar-resultado {
  display: grid;
  gap: 12px;
}

/* mais */
.mais-perfil {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.mais-grupo {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.mais-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--texto);
  text-decoration: none;
  border-radius: 26px;
}

.mais-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--camada-2);
  color: var(--acento-texto);
}

.mais-texto {
  display: grid;
  min-width: 0;
}

.mais-avisos {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.segmentos {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--camada-2);
  border-radius: 28px;
}

.segmento {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  background: transparent;
  color: var(--texto);
  border: 0;
  border-radius: 22px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.segmento[aria-pressed="true"] {
  background: var(--texto);
  color: var(--camada);
}

.botao-perigo {
  color: var(--erro);
  gap: 8px;
}

.pagina-antiga {
  display: block;
}

.pagina-offline {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
}

.offline {
  display: grid;
  gap: 16px;
  max-width: 26rem;
  text-align: center;
}

/* detalhes (coluna da direita) */
.detalhes-topo {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.detalhes-cartao {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 26px;
}

.detalhes-membros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.detalhes-membros li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.detalhes-membro-texto {
  display: grid;
  min-width: 0;
}

.detalhes-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detalhes-feito .feito-linha {
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 12px;
  border-radius: 20px;
}

/* botao primario/vidro das telas antigas combinando com a cara nova */
.botao {
  border-radius: 24px;
  background: var(--vidro-forte);
  border-color: var(--linha);
}

.botao-principal {
  background: var(--acento);
  color: var(--sobre-acento);
  border-color: transparent;
}

.cartao {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 28px;
  box-shadow: var(--sombra-leve);
}

.titulo-tela {
  margin: 8px 0 14px;
}

.flutuante {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

.campo {
  border-radius: 18px;
  background: var(--vidro-forte);
}

/* ---------- computador: tres colunas ---------- */
@media (min-width: 1024px) {
  .barra-app {
    top: 0;
    bottom: 0;
    left: 0;
    width: 92px;
    height: auto;
    transform: none;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 16px 0;
    border-radius: 0 32px 32px 0;
    border-left: 0;
  }

  .barra-app .barra-centro {
    order: 3;
  }

  #conteudo {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 20px;
    max-width: none;
    margin: 0;
    padding: 0 20px 0 112px;
  }

  /* de 1024 a 1279 px cabem duas colunas (projetos e conversa); os detalhes entram a partir de 1280 */
  .col-detalhes {
    display: none;
  }

  body[data-rota="entrar"] #conteudo {
    display: block;
    padding: 0 24px;
  }

  .col-lista,
  .col-detalhes {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100dvh;
    overflow-y: auto;
    padding: 0 4px 24px;
    scrollbar-width: thin;
  }

  .col-meio {
    max-width: 820px;
    width: 100%;
    padding-bottom: 24px;
  }

  body[data-rota="p"] .col-meio {
    padding-bottom: 0;
  }

  .compositor {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .cab {
    margin: 0 0 8px;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .col-lista .cab {
    position: static;
  }

  .flutuante {
    bottom: 24px;
  }

  .balao-corpo {
    max-width: min(86%, 640px);
  }
}

@media (min-width: 1280px) {
  #conteudo {
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    padding: 0 24px 0 116px;
  }

  #conteudo:has(.col-detalhes:not([hidden])) {
    grid-template-columns: 360px minmax(0, 1fr) 330px;
  }

  .col-detalhes:not([hidden]) {
    display: block;
  }
}


/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .entra,
  .folha,
  .pontinhos i {
    animation: none !important;
  }

  .grupo-seta {
    transition: none;
  }
}

/* ---------- fallback sem vidro (navegador antigo): fundo mais firme para o texto continuar legivel ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro,
  .balao-corpo,
  .grupo,
  .cartao {
    background: var(--vidro-forte);
  }
}

/* as telas antigas ja ganham o titulo no cabecalho novo: o titulo interno some para nao repetir */
.pagina-antiga > .titulo-tela {
  display: none;
}

/* tela Entrar: marca no alto */
.marca-entrar {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: 18px;
  text-align: center;
}

.marca-entrar-icone {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.marca-entrar-nome {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.entrar .titulo-tela {
  font-size: 1.125rem;
  text-align: center;
}

.pilula-erro {
  border-color: var(--erro);
}

/* ---------- Precisa de voce ---------- */
.precisa-cartao {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.precisa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.precisa-topo .secao-titulo {
  margin: 0;
}

.precisa-lista {
  display: grid;
  gap: 10px;
}

.precisa-linha {
  background: var(--camada-2);
  border-radius: 22px;
  box-shadow: none;
}

.precisa-cartao .precisa-linha {
  padding: 10px 12px;
}

.precisa-titulo {
  font-size: 0.9375rem;
}

.etiqueta-pergunta,
.etiqueta-publicar {
  border-color: var(--acento);
}

.etiqueta-reprovado,
.etiqueta-parada {
  border-color: var(--erro);
}

.preview-resultado {
  color: var(--texto);
}

.sinal {
  font-size: 0.8125rem;
}

.linha-previews {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.linha-projeto .preview {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.linha-projeto .preview-trabalhando {
  color: var(--ok);
}

.linha-projeto .preview-resultado {
  color: var(--texto);
}

/* pergunta pendente da tarefa + respostas prontas (so preenchem o campo) */
.pergunta-pendente {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 24px;
}

/* O cartao "Precisa de voce" mora na caixa de recado, que fica parada embaixo enquanto a conversa rola por tras dela. Com o vidro comum
   (0,62 no escuro, 0,66 no claro) e sem desfoque (a classe .vidro nao desfoca), o texto de tras aparecia atras da pergunta, medido na foto
   do iPhone Air em 11/10/2026. Usa o vidro firme, o mesmo da barra de abas, que deixa a pergunta legivel com ou sem desfoque. */
.compositor .pergunta-pendente {
  background: var(--vidro-forte);
}

.pergunta-titulo {
  margin: 0;
  overflow-wrap: anywhere;
}

.respostas-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* primeira tela (vem no HTML, antes de qualquer script) */
.abertura {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 70dvh;
  padding: 24px;
  text-align: center;
}

.abertura-icone {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  box-shadow: var(--sombra);
}

.abertura-nome {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.abertura-texto {
  margin: 0;
  max-width: 22rem;
  color: var(--texto-2);
}

/* Grades que NUNCA podem ser mais largas que a tela: sem isto, uma linha de membros com 6 pessoas (que rola por dentro) forcava a conversa
   inteira a ter 550 px e a pagina rolava para o lado. minmax(0, 1fr) deixa a coluna encolher. */
.projeto-tela,
.fio-caixa,
.lista-cartoes,
.cartao-projeto,
.cartao-faixa,
.feito-lista,
.novo-lista,
.mais-grupo,
.buscar-resultado,
.detalhes-topo,
.precisa-cartao,
.precisa-lista,
.balao-corpo,
.grupo,
.mais-perfil,
.pergunta-pendente,
.compositor {
  grid-template-columns: minmax(0, 1fr);
}

.blocos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.projeto-tela > *,
.fio-caixa > * {
  min-width: 0;
}

.pergunta-pendente .chip-filtro {
  background: var(--camada-2);
  border-color: transparent;
}

.pergunta-pendente .chip-filtro:hover {
  background: var(--linha);
}

/* <pre> vem do navegador em monoespaco: aqui o texto completo e a confirmacao do recado ficam em Satoshi (preservando as quebras) */
.completo,
.texto-final {
  font-family: inherit;
}

/* Icone de projeto: redondo, claro e suave (pastel com a inicial escura), como os icones das inspiracoes; as cores de pessoa (escuras) ficam so nos agentes */
.av-projeto {
  background: var(--avp);
  color: var(--avt);
  box-shadow: 0 0 0 2px var(--vidro-borda);
}

.av-0 { --avp: hsl(8 75% 91%); --avt: hsl(8 60% 28%); }
.av-1 { --avp: hsl(28 80% 90%); --avt: hsl(28 70% 25%); }
.av-2 { --avp: hsl(50 80% 88%); --avt: hsl(50 70% 22%); }
.av-3 { --avp: hsl(80 60% 89%); --avt: hsl(80 60% 20%); }
.av-4 { --avp: hsl(112 50% 89%); --avt: hsl(112 55% 20%); }
.av-5 { --avp: hsl(142 50% 88%); --avt: hsl(142 60% 19%); }
.av-6 { --avp: hsl(172 55% 87%); --avt: hsl(172 70% 18%); }
.av-7 { --avp: hsl(196 70% 89%); --avt: hsl(196 70% 22%); }
.av-8 { --avp: hsl(214 80% 91%); --avt: hsl(214 65% 28%); }
.av-9 { --avp: hsl(228 75% 92%); --avt: hsl(228 55% 30%); }
.av-10 { --avp: hsl(340 75% 92%); --avt: hsl(340 60% 28%); }
.av-11 { --avp: hsl(356 80% 92%); --avt: hsl(356 60% 28%); }

:root[data-tema="escuro"] .av-0 { --avp: hsl(8 32% 30%); --avt: hsl(8 90% 90%); }
:root[data-tema="escuro"] .av-1 { --avp: hsl(28 32% 28%); --avt: hsl(28 90% 90%); }
:root[data-tema="escuro"] .av-2 { --avp: hsl(50 30% 26%); --avt: hsl(50 90% 88%); }
:root[data-tema="escuro"] .av-3 { --avp: hsl(80 28% 26%); --avt: hsl(80 80% 88%); }
:root[data-tema="escuro"] .av-4 { --avp: hsl(112 26% 26%); --avt: hsl(112 70% 88%); }
:root[data-tema="escuro"] .av-5 { --avp: hsl(142 28% 26%); --avt: hsl(142 70% 88%); }
:root[data-tema="escuro"] .av-6 { --avp: hsl(172 30% 26%); --avt: hsl(172 75% 88%); }
:root[data-tema="escuro"] .av-7 { --avp: hsl(196 34% 28%); --avt: hsl(196 80% 90%); }
:root[data-tema="escuro"] .av-8 { --avp: hsl(214 36% 30%); --avt: hsl(214 90% 92%); }
:root[data-tema="escuro"] .av-9 { --avp: hsl(228 36% 32%); --avt: hsl(228 90% 93%); }
:root[data-tema="escuro"] .av-10 { --avp: hsl(340 32% 30%); --avt: hsl(340 90% 92%); }
:root[data-tema="escuro"] .av-11 { --avp: hsl(356 32% 30%); --avt: hsl(356 90% 92%); }

.barra-centro[aria-current="page"] {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 22%, transparent), 0 8px 20px var(--acento-sombra);
}

/* na coluna de projetos (computador) o cabecalho nao rola junto: sem o veu desfocado, que cobriria a coluna toda */
.col-lista .cab::before {
  display: none;
}

/* o botao "Mostrar mais projetos" da coluna encostava na ultima linha (vao 0 px; o medidor de colisao viu a 1440 na Aparencia quando a altura minima da caixa passou a 44) */
.col-lista .lista-linhas + .botao {
  margin-top: 12px;
}

.fotos-grade {
  display: grid;
}

/* Fotos: duas colunas no celular e cada foto e um cartao de verdade (caixa medivel, legivel) */
.fotos-grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 600px) {
  .fotos-grade {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}

.foto-cartao {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  padding: 8px 8px 10px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 24px;
  box-shadow: var(--sombra-leve);
}

.foto-cartao .foto-botao {
  aspect-ratio: 1;
  border-radius: 18px;
}

.foto-legenda {
  display: grid;
  font-size: 0.8125rem;
  padding: 0 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =====================================================================================================================
   REPLICACAO DA FAMILIA DAS TRES IMAGENS (ordem do Carvalho, 10/10, 09:25): claro SEMPRE, vidro branco sem borda escura, raio 28 a 32,
   sombra larga e macia, botoes redondos cinza claro com icone fino, UM azul (so no botao do meio da barra, no botao principal e no foco).
   ===================================================================================================================== */
.icone {
  stroke-width: 1.6;
}

.vidro {
  border-radius: 30px;
}

/* botao redondo: cinza bem claro, icone fino quase preto */
.botao-redondo,
.botao-claro {
  background: var(--camada-2);
  color: var(--texto);
}

.botao-redondo:hover {
  background: var(--linha);
}

/* cabecalho: titulo central de 20 px, peso 500, entre dois botoes redondos */
.cab-titulo {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.cab-sub {
  font-weight: 400;
}

/* azul so onde manda: ativo da barra, filtro marcado, selos e links passam a ser escuros */
.chip-filtro {
  font-weight: 500;
  border-color: var(--vidro-borda);
  box-shadow: var(--sombra-leve);
}

.chip-filtro[aria-pressed="true"] {
  background: var(--texto);
  color: var(--camada);
}

.selo-novas {
  background: var(--texto);
  color: var(--camada);
}

.barra-app a {
  font-weight: 500;
}

.barra-app a[aria-current="page"] {
  color: var(--texto);
  font-weight: 700;
}

.barra-app {
  background: var(--vidro-forte);
  border-color: var(--vidro-borda);
}

.ver-mais {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.etiqueta {
  border-color: transparent;
}

/* saudacao: 22 px leve em cima, 26 px forte embaixo (como "Hi, Marry! How can I help you?") */
.saudacao-ola {
  color: var(--texto-ola);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
}

.saudacao-pergunta {
  margin: 2px 0 8px;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pilula-precisa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--texto);
  color: var(--camada);
  border-radius: 22px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

/* blocos 2x2: quadrados, icone GRANDE em cima, icone pequeno redondo e nome embaixo */
.bloco {
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 1;
  min-height: 0;
  padding: 14px;
  border-radius: 28px;
}

.bloco-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.bloco-grande .icone-3d {
  width: 100%;
  max-width: 96px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.icone-3d {
  display: block;
  flex: 0 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}

.cab .icone-3d {
  width: 48px;
  height: 48px;
}

.precisa-topo .icone-3d {
  width: 44px;
  height: 44px;
}

.vazio .icone-3d {
  margin: 0 auto 8px;
  width: 96px;
  height: 96px;
}

.bloco-rodape {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.bloco-pequeno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--camada-2);
  color: var(--texto);
  border-radius: 50%;
}

.bloco-textos {
  display: grid;
  min-width: 0;
}

.bloco-titulo {
  font-size: 0.9375rem;
  font-weight: 500;
}

.bloco-conta {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
}

/* icone redondo do projeto: circulo branco com icone fino */
.av-icone {
  background: var(--icone-fundo);
  color: var(--texto);
  box-shadow: var(--sombra-leve);
}

/* cartao de projeto ("Chat Results"): titulo 17 px peso 500, data 13 px cinza, faixa tingida (menta quando trabalha) */
.cartao-nome {
  font-size: 1.0625rem;
  font-weight: 500;
}

.cartao-data {
  font-size: 0.8125rem;
  font-weight: 400;
}

.cartao-projeto {
  padding: 14px;
}

.cartao-faixa {
  background: var(--faixa-neutra);
  border-radius: 24px;
}

.estado-trabalhando .cartao-faixa {
  background: var(--faixa-trabalhando);
}

.estado-esperando .cartao-faixa {
  background: var(--faixa-esperando);
}

.preview {
  font-size: 1rem;
  line-height: 1.4;
}

.linha-2 .preview {
  font-size: 0.875rem;
}

.midia-grande {
  border-radius: 24px;
}

/* membros: avatar 64, nome 15 px peso 500, papel 13 px cinza embaixo (como "Diana / Designer") */
.membro {
  width: 100px;
  gap: 4px;
}

.membro .avatar {
  width: 64px;
  height: 64px;
}

.membro-nome {
  font-size: 0.9375rem;
  font-weight: 500;
}

.membro-papel {
  font-size: 0.8125rem;
  font-weight: 400;
}

.membro-vivo .avatar {
  box-shadow: 0 0 0 2px var(--camada);
}

.membro-vivo .avatar::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  background: var(--ok);
  border: 2px solid var(--camada);
  border-radius: 50%;
}

/* conversa: blocos brancos com texto preto (16 px), avatar de robo de 44 px ao lado, no topo do bloco */
.balao {
  align-items: flex-start;
}

.balao .avatar.av-m {
  width: 44px;
  height: 44px;
}

.balao-corpo {
  max-width: min(88%, 640px);
  padding: 14px 16px;
  background: var(--vidro-forte);
  border-color: var(--vidro-borda);
  border-radius: 24px;
  box-shadow: var(--sombra-leve);
}

.balao-eu .balao-corpo {
  border-radius: 24px;
}

.balao-texto {
  font-size: 1rem;
  line-height: 1.5;
}

.balao-cab {
  font-size: 0.9375rem;
  font-weight: 500;
}

.balao-acoes {
  margin-top: 2px;
}

/* campo de recado: pilula branca de vidro; botao de enviar redondo branco com seta fina (azul so com texto) */
.compositor-pilula {
  border-color: var(--vidro-borda);
  background: var(--campo);
}

.compositor-pilula .botao-azul {
  background: var(--icone-fundo);
  color: var(--texto);
  box-shadow: var(--sombra-leve);
}

.compositor-pilula .botao-azul:disabled {
  opacity: 0.7;
}

.compositor-pilula .botao-azul:not(:disabled) {
  background: var(--acento);
  color: var(--sobre-acento);
}

/* ---------- resposta ao toque (apple-design 1): tudo que se aperta responde ao dedo na hora ---------- */
button,
a[href],
summary,
[role="button"] {
  transition: transform 100ms ease-out, opacity 100ms ease-out;
}

button:not(:disabled):active,
a[href]:active,
summary:active,
[role="button"]:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active,
  a[href]:active,
  summary:active,
  [role="button"]:active {
    transform: none;
    opacity: 0.6;
  }
}

/* ---------- transparencia reduzida (apple-design 14): o vidro vira superficie lisa, sem desfoque ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-tema="claro"],
  :root[data-tema="escuro"] {
    --vidro: var(--camada);
    --vidro-forte: var(--camada);
    --cab-topo: var(--fundo);
    --faixa-trabalhando: var(--camada-2);
    --faixa-esperando: var(--camada-2);
    --faixa-neutra: var(--camada-2);
  }

  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ---------- contraste aumentado (apple-design 14): superficies quase lisas, borda de 1 px definida, texto mais forte ---------- */
@media (prefers-contrast: more) {
  :root,
  :root[data-tema="claro"],
  :root[data-tema="escuro"] {
    --vidro: var(--camada);
    --vidro-forte: var(--camada);
    --vidro-borda: var(--linha-forte);
    --cab-topo: var(--fundo);
    --linha: var(--linha-forte);
    --texto-2: var(--texto);
    --faixa-trabalhando: var(--camada-2);
    --faixa-esperando: var(--camada-2);
    --faixa-neutra: var(--camada-2);
  }

  .vidro,
  .balao-corpo,
  .grupo,
  .compositor-pilula,
  .barra-app,
  .chip-filtro,
  .cartao-faixa {
    border: 1px solid var(--linha-forte);
  }

  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* saudacao: a lupa fica no canto de cima, para o texto ter a largura toda e a pergunta caber em duas linhas */
.saudacao {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
}

.saudacao-busca {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 0;
}

.saudacao-ola {
  padding-right: 56px;
}

.precisa-topo .secao-titulo {
  flex: 1 1 auto;
}

/* computador: os quatro blocos ficam em uma fileira (quadrados do mesmo tamanho do celular, nao gigantes) */
@media (min-width: 1024px) {
  .blocos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- polimento final (critico, 10/10): nada de preto cheio, foto do cartao com teto, numeros tabulares, azul so onde manda ---------- */
/* filtro marcado: cinza claro com letra escura e mais peso (as inspiracoes nao tem preto cheio) */
.chip-filtro[aria-pressed="true"] {
  background: var(--ativo);
  color: var(--texto);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--linha);
}

/* contadores: bolinha cinza clara com letra escura, como o "+3" da inspiracao */
.selo-novas {
  background: var(--camada-2);
  color: var(--texto);
}

/* "N esperam por voce": pilula de vidro branco com um ponto vermelho */
.pilula-precisa {
  gap: 8px;
  background: var(--icone-fundo);
  color: var(--texto);
  box-shadow: var(--sombra-leve);
}

.pilula-precisa::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--erro);
  border-radius: 50%;
}

/* escolha marcada em Mais > Tema: branco com sombra suave sobre o fundo cinza */
.segmento[aria-pressed="true"] {
  background: var(--icone-fundo);
  color: var(--texto);
  box-shadow: var(--sombra-leve);
}

/* foto grande do cartao de projeto: teto de altura (a captura de tela e retrato), cortada pelo topo, com raio proprio */
.cartao-midia {
  align-items: stretch;
}

.midia-grande {
  height: 220px;
  min-height: 0;
  border-radius: 26px;
}

.midia-grande .miniatura-cartao {
  object-fit: cover;
  object-position: top;
}

.midia-redonda {
  width: 64px;
  height: 64px;
}

/* algarismos de largura igual em todo horario e contagem (inclui a pilula de dia do fio e as legendas) */
.sistema-pilula,
.foto-legenda,
.feito-dia,
.balao-cab,
.linha-1,
.linha-3,
.cartao-rodape,
.precisa-topo,
.feito-topo,
.texto-suave,
.pagina-antiga,
.visao,
.arvore,
.feed {
  font-variant-numeric: tabular-nums;
}

/* barras de uso: cinza escuro neutro (o azul fica so nos tres lugares combinados) */
.barra-cheia {
  background: var(--barra);
}

.barra-alta .barra-cheia {
  background: var(--espera);
}

/* ao rolar ate um item (irParaItem, foco), a area fixa de baixo (altura medida pelo app em --area-fixa) nao cobre o que chegou */
html {
  scroll-padding-bottom: var(--area-fixa, 0px);
}

/* texto do Ao vivo (cortado em 3 linhas): palavra comprida quebra em qualquer ponto, sobra um respiro de 4 px a direita para a ponta do
   ultimo caractere nunca ser mordida pela borda, e o corte em 3 linhas e declarado (reticencias), nunca silencioso */
.feed-texto,
.preview {
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-inline-end: 4px;
  text-overflow: ellipsis;
}

/* =====================================================================================================================
   MISSION (r162): faixas de conexao, versao nova, chaves, personalizacao, avisos no iPhone, folha "agora", fixados, motivo,
   estado do recado e barra de abas que se esconde. Tudo com alvo de 44 pt, vao de pelo menos 10 px e letra de 13 px ou mais.
   ===================================================================================================================== */

/* teclado aberto: o indicador de inicio nao esta mais embaixo, nao precisa da folga dele */
html[data-teclado="aberto"] .compositor {
  padding-bottom: 12px;
}

/* ---------- faixas calmas no alto: Sem conexao, Reconectando e a pilula de versao nova ---------- */
.faixas {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 70;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0 16px;
  pointer-events: none;
}

.faixa,
.pilula-versao {
  margin: 0;
  max-width: 100%;
  padding: 10px 18px;
  background: var(--vidro-forte);
  color: var(--texto);
  border: 1px solid var(--vidro-borda);
  border-radius: 22px;
  box-shadow: var(--sombra-leve);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.faixa-sem-conexao {
  background: var(--faixa-esperando);
}

.pilula-versao {
  min-height: 44px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  background: var(--acento);
  color: var(--sobre-acento);
  border-color: transparent;
  cursor: pointer;
  pointer-events: auto;
}

/* ---------- barra de abas: se esconde ao rolar as listas para baixo e volta ao subir ---------- */
.barra-app {
  transition: transform 0.26s ease, opacity 0.2s ease;
}

.barra-app[data-escondida] {
  transform: translate(-50%, calc(100% + 28px + env(safe-area-inset-bottom)));
  opacity: 0;
  pointer-events: none;
}

/* ---------- chave liga/desliga (alvo 56 x 44) ---------- */
.interruptor {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.interruptor::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  background: var(--linha-forte);
  border-radius: 16px;
  transition: background 0.18s ease;
}

.interruptor[aria-checked="true"]::before {
  background: var(--acento);
}

.interruptor-bola {
  position: absolute;
  top: 9px;
  left: 3px;
  width: 26px;
  height: 26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}

.interruptor[aria-checked="true"] .interruptor-bola {
  transform: translateX(24px);
}

.interruptor[aria-busy="true"] {
  opacity: 0.55;
  cursor: progress;
}

/* ---------- editar inicio, avisos ---------- */
.editar-lista {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editar-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px 8px 18px;
  border-radius: 26px;
}

.editar-linha[data-visivel="0"] .editar-nome {
  color: var(--texto-2);
}

.editar-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}

.editar-linha-simples {
  display: flex;
  align-items: center;
  gap: 10px;
}

.editar-corpo,
.aparencia-corpo,
.avisos-corpo {
  display: grid;
  gap: 18px;
  margin-bottom: 24px;
}

.avisos-cartao {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.avisos-cartao .filtros-chips {
  margin: 0;
  padding: 2px 0;
  flex-wrap: wrap;
  overflow: visible;
}

.horas-silencio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo-hora {
  font-size: 1rem; /* 16 px ou mais: o iPhone aproxima campo menor */
}

/* ---------- aparencia: cores ---------- */
.cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.cor-opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 14px;
  background: var(--vidro);
  color: var(--texto);
  border: 1px solid var(--vidro-borda);
  border-radius: 28px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.cor-opcao[aria-pressed="true"] {
  background: var(--icone-fundo);
  box-shadow: inset 0 0 0 2px var(--texto), var(--sombra-leve);
}

.cor-bola {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: var(--cor, var(--acento));
  border-radius: 50%;
}

.cor-nome {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cor-marca {
  margin-left: auto;
  display: inline-flex;
}

/* ---------- avisos no iPhone: diagnostico e passos ---------- */
.diagnostico {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.diagnostico-texto {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.passos {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.passo {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 26px;
}

.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--camada-2);
  border-radius: 50%;
  font-weight: 800;
}

.passo-agora .passo-numero {
  background: var(--acento);
  color: var(--sobre-acento);
}

.passo-corpo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.passo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.passo-icone {
  display: inline-flex;
  color: var(--acento-texto);
}

.passo-situacao {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--texto-2);
}

.passo-situacao-agora {
  color: var(--texto);
}

.passo-acoes {
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ---------- folha "O que esta fazendo agora" ---------- */
.folha-agora {
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agora-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agora-corpo {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.agora-projeto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.agora-subtitulo {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  font-weight: 800;
}

.agora-agentes,
.agora-linhas {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agora-agente {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.agora-agente-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agora-fazendo {
  font-weight: 600;
}

.agora-linhas {
  gap: 8px;
}

.agora-linhas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.cab-agora {
  width: auto;
  min-width: 44px;
  padding: 0 10px;
  border-radius: 22px;
}

/* ---------- motivo de projeto parado ou esperando ---------- */
.faixa-motivo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 16px;
  background: var(--faixa-esperando);
  border-radius: 20px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.preview-motivo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-2);
  font-weight: 600;
}

/* ---------- fixados e acoes do projeto ---------- */
.fixado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  border-radius: 26px;
}

.fixado-principal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  color: var(--texto);
  text-decoration: none;
}

.fixado-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.projeto-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
}

.acao-projeto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.projeto-acoes p {
  flex: 1 1 100%;
  margin: 0;
}

.sino-cortado {
  display: inline-flex;
  align-items: center;
  color: var(--texto-2);
}

/* ---------- estado do recado ---------- */
.recado-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--texto);
}

/* ---------- Precisa de voce: item, adiar e grupos ---------- */
.precisa-item {
  display: grid;
  gap: 8px;
}

.precisa-adiar {
  justify-self: start;
  gap: 8px;
}

.precisa-parado {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--erro);
}

.precisa-adiados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.adiar-opcoes {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.adiar-opcao {
  width: 100%;
}

/* ---------- pilula do modo foco ---------- */
.pilula-foco {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--icone-fundo);
  color: var(--texto);
  border-radius: 22px;
  box-shadow: var(--sombra-leve);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.pilula-foco::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 2px solid var(--acento);
  border-radius: 50%;
}

/* ---------- Inicio: tudo chega de uma vez ---------- */
.inicio-corpo {
  display: grid;
  gap: 0;
}

.inicio-reserva {
  min-height: 60dvh;
}

.bloco-grande-linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: var(--camada-2);
  color: var(--acento-texto);
  border-radius: 50%;
}