/* ORBIT Empresa · paginas/tarefas_folha.css — as Tarefas: a folha de uma tarefa (a F5 da construção, 23/10).

   A cópia da página aprovada (4-construcao/referencia/tarefa/parte.css, a segunda volta), só com o que é da folha e com o
   prefixo da área (tf-: esta folha carrega em todas as páginas). Os componentes são os do sistema visual (visual.css:
   o-pill, o-tag, o-chip, o-btn, o-aviso, o-detalhe, o-dados, o-menu, o-veu, o-janela, o-ponto, o-vazio…) e as peças da
   gestão que já servem (gestao.css: g-etiquetas, g-detalhe, g-dados, g-pre), sem os redefinir. As cores só das fichas,
   a escala 4/8 e os pontos de viragem do visual.css (53,75 em = 860 px).

   A moldura: no computador, a folha abre à direita (640 px), por cima da página Tarefas, dentro do véu da casa (tocar no
   véu fecha); no telemóvel, é a folha inteira (tapa o topo e a barra de baixo). A barra de cima («‹ Tarefas» e o ⋯) fica
   presa e o corpo rola por dentro. Na página aprovada a folha rolava com a página (era estática); aqui o quadro por trás
   fica parado onde estava (a página não rola com a folha aberta: .tf-sem-rolar, no <html>). */

/* ── com a folha aberta, a página por trás não rola ─────────────────────────────────────────────────────────────── */
/* a roda do rato por cima do véu rolava a página (achado 6 da revisão); o lugar da barra de rolar fica, para a página
   não saltar para o lado ao abrir e ao fechar */
.tf-sem-rolar { overflow: hidden; }
.tf-sem-rolar--calha { scrollbar-gutter: stable; }

/* ── a moldura ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.tf-folha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-veu);
  display: flex; flex-direction: column; width: min(640px, 100%); min-width: 0;
  border-left: 1px solid var(--linha-2); background: var(--painel); color: var(--ink); box-shadow: var(--sombra-flutua);
  animation: o-entra-direita var(--dur-2) ease-out;
}
/* a barra de cima: «‹ Tarefas» e o ⋯, com a altura do topo da casa. Os 12 px dos lados põem a seta e o ⋯ a direito com o
   texto da folha (24 px), descontado o espaço de dentro dos botões */
.tf-barra {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  min-height: var(--topo-alt); padding: env(safe-area-inset-top, 0px) var(--e-3) 0;
  border-bottom: 1px solid var(--linha); background: var(--painel);
}
.tf-barra-fim { display: flex; align-items: center; gap: var(--e-1); }
.tf-corpo {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--e-8); min-width: 0;
  padding: var(--e-6) var(--e-6) calc(var(--e-8) + env(safe-area-inset-bottom, 0px));
}
.tf-corpo:focus { outline: none; }
/* o aviso de uma fotografia atrasada (o vigia das tarefas parado): uma linha calma, no topo */
.tf-atrasada { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.45; }
/* items-start de propósito: a frase pode partir em duas linhas e o ícone fica na primeira (a caixa dele tem a altura dela) */
.tf-atrasada > .o-ic { flex: none; height: 1.45em; color: var(--aviso); }

/* a carregar: a frase e o esqueleto do título e das linhas */
.tf-carregar { display: flex; flex-direction: column; gap: var(--e-3); }
.tf-carregar > .o-esqueleto { margin: 0; }
.tf-esqueleto-titulo { width: 70%; height: 20px; }
.tf-nao-existe { margin: 0; }

/* ── o cabeçalho: o título com o estado, «Precisa de ti», as etiquetas e a ação principal ───────────────────────── */
.tf-cabeca { position: relative; display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
/* «Precisa de ti» sem frase: o marcador amarelo (o traço do cartão do quadro), na borda da folha ao lado do cabeçalho.
   A frase só aparece quando diz uma coisa nova (a resposta a um comentário); para quem não vê, um «Precisa de ti.»
   escondido no cabeçalho */
.tf-cabeca--precisa::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--e-6)); width: 2px; background: var(--aviso);
}
.tf-titulo { min-width: 0; margin: 0; color: var(--ink); font: 600 var(--t-titulo)/1.3 var(--sans); overflow-wrap: break-word; }
.tf-titulo:focus { outline: none; }
/* o estado preso à última palavra do título (como no cartão do quadro): nunca fica sozinho numa linha. O centro vem do
   contentor (inline-flex centrado), que assenta na linha de base do título pela palavra. Uma última palavra comprida (um
   nome de ficheiro, um endereço) parte onde for preciso, e a pill desce para a linha de baixo só quando não cabe ao lado
   dela: nada sai da folha (achado 3 da revisão) */
.tf-junto { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); max-width: 100%; }
.tf-junto-palavra { min-width: 0; overflow-wrap: anywhere; }
/* «Precisa de ti»: só o que quem lê pode fazer, no amarelo do número do separador Tarefas. items-start de propósito: a
   frase pode partir em duas linhas e o ícone fica na primeira (a caixa dele tem a altura dela) */
.tf-precisa { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; margin: 0; color: var(--ink);
  font-size: var(--t-13); line-height: 1.45; }
.tf-precisa > .o-ic { flex: none; height: 1.45em; color: var(--aviso); }
.tf-precisa-texto > b { color: var(--aviso); font-weight: 600; }
/* as frases ao lado de um ícone podem levar uma palavra comprida (um nome de ficheiro, um endereço, o título de uma
   tarefa): partem onde for preciso, sem sair da folha */
.tf-precisa-texto, .tf-veio > span, .tf-dono > span, .tf-seguinte > span { min-width: 0; overflow-wrap: anywhere; }
/* de quem é a tarefa (o membro, numa tarefa de outra pessoa) e de onde veio uma que ninguém pediu à mão (a IA anunciou-a):
   uma linha discreta (items-start, como a de cima) */
.tf-dono, .tf-veio { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; margin: 0; color: var(--ink-3);
  font-size: var(--t-13); line-height: 1.45; }
.tf-dono > .o-ic, .tf-veio > .o-ic { flex: none; height: 1.45em; color: var(--ink-3); }
.tf-veio-nome { color: var(--ink-2); }
.tf-cabeca > .o-acoes { margin-top: var(--e-1); }
/* o que vem a seguir à decisão («Aceitar»): a tarefa seguinte, já guardada, numa linha calma por baixo dos botões, com o
   nome dela como ligação. items-start de propósito: a frase parte em duas linhas e a seta fica na primeira */
.tf-seguinte { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; margin: 0; color: var(--ink-2);
  font-size: var(--t-13); line-height: 1.45; }
.tf-seguinte > .o-ic { flex: none; height: 1.45em; color: var(--ink-3); }
.tf-seguinte-nome { color: var(--ink); font-weight: 600; text-decoration: none; }
.tf-seguinte-nome:hover { text-decoration: underline; }

/* o projeto da tarefa (a ligação com o ar do o-chip: a pasta, o nome, a ordem dela lá dentro e a seta), que leva ao
   quadro com ele escolhido: «Faturação · 2.ª de 4» */
.tf-projeto {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-1); flex: none; max-width: 100%;
  min-height: 24px; padding: 2px var(--e-2); border: 1px solid var(--linha-2); border-radius: var(--r-pilula);
  background: var(--painel-2); color: var(--ink-2); font: 500 var(--t-12)/1 var(--mono); text-decoration: none; white-space: nowrap;
}
.tf-projeto > .o-ic { flex: none; color: var(--ink-3); }
.tf-projeto-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tf-projeto-ordem { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--ink-3); white-space: nowrap; }
.tf-projeto:hover { border-color: var(--accent-linha); color: var(--accent-texto); }
.tf-projeto:hover > .o-ic { color: var(--accent-texto); }

/* o estado que pede uma decisão (o erro) ou que acabou (o resultado): o aviso da casa, com o rótulo e o ícone numa linha,
   a frase, o porquê, a hora e os botões (o ícone no rótulo: ao lado do corpo, ficava ao meio do rótulo pequeno) */
.tf-estado { padding: var(--e-4); font-size: var(--t-14); }
.tf-estado > .o-aviso-corpo { display: flex; flex-direction: column; gap: var(--e-1); }
.tf-estado-rotulo { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-1); color: var(--ink-2);
  font: 600 var(--t-11)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tf-estado-rotulo > .o-ic { flex: none; }
.tf-estado.o-aviso--erro .tf-estado-rotulo > .o-ic { color: var(--erro); }
.tf-estado.o-aviso--ok .tf-estado-rotulo > .o-ic { color: var(--ok); }
.tf-estado .o-aviso-titulo { font-size: var(--t-15); line-height: 1.45; }
.tf-estado--ok .o-aviso-titulo { color: var(--ink); }
.tf-estado .o-aviso-texto { color: var(--ink); line-height: 1.55; }
.tf-estado-meta { margin: 0; color: var(--ink-2); font: 400 var(--t-12)/1.45 var(--mono); }
.tf-estado .o-acoes { margin-top: var(--e-3); }
/* «Continuar · às 15:00»: o botão fino e desligado até a conta renovar; a hora em mono, no tom do botão */
.tf-btn-hora { color: var(--ink-2); font: 500 var(--t-12)/1 var(--mono); }
/* um botão com um título comprido («Ver «faturas-por-mes-2025.html»») parte em mais linhas, sem sair da folha */
.tf-acao { min-width: 0; overflow-wrap: anywhere; }

/* ── as secções ──────────────────────────────────────────────────────────────────────────────────────────────── */
.tf-seccao { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.tf-seccao-titulo { display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--ink);
  font: 600 var(--t-16)/1.3 var(--sans); }
/* o ícone no cinzento, como o título de um cartão da casa: o laranja fica para o principal e o passo «A fazer» */
.tf-seccao-titulo > .o-ic { flex: none; color: var(--ink-3); }
.tf-vazio { margin: 0; color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }

/* em palavras simples: «O que é» e «Como está», o resumo para quem lê, no degrau de fundo acima da folha */
.tf-simples { display: flex; flex-direction: column; gap: var(--e-4); margin: 0; padding: var(--e-4) var(--e-5);
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel-2); }
/* baseline de propósito: o rótulo (mono 11) e a frase (15) são só texto, de tamanhos diferentes */
.tf-simples-linha { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: var(--e-1) var(--e-4); }
.tf-simples-rotulo { color: var(--ink-3); font: 600 var(--t-11)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tf-simples-texto { margin: 0; color: var(--ink); font-size: var(--t-15); line-height: 1.55; overflow-wrap: break-word; }

/* as datas: Criada, Começou, Acabou (ou Parou) e Para quando, lado a lado (2 × 2 no telemóvel), sem caixa. O que ainda
   não tem valor («Ainda não», «Sem dia») fica apagado: lê-se como falta */
.tf-datas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(max-content, 1fr); gap: var(--e-3) var(--e-5); }
.tf-datas > .o-dado { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 0; border-top: 0; }
.tf-datas .o-dado-valor { max-width: none; text-align: left; white-space: normal; }
.tf-datas .tf-datas-sem { color: var(--ink-3); }

/* o plano que ainda não existe: o vazio da casa, numa caixa tracejada mais baixa */
.tf-plano-vazio { padding: var(--e-6) var(--e-4); }

/* ── o plano: os passos, numa coluna com o fio entre as marcas ──────────────────────────────────────────────────── */
.tf-passos { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* items-start de propósito: a marca (24 px) fica na primeira linha do passo, ao lado do nome; o resto (o como, a ligação)
   corre por baixo dele */
.tf-passo { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start;
  column-gap: var(--e-3); padding-bottom: var(--e-5); }
.tf-passo:last-child { padding-bottom: 0; }
/* o fio: da marca deste passo à do seguinte (verde entre os feitos) */
.tf-passo:not(:last-child)::before { content: ''; position: absolute; top: calc(24px + var(--e-1)); bottom: var(--e-1);
  left: 11.5px; width: 1px; background: var(--linha-2); }
.tf-passo--feito:not(:last-child)::before { background: var(--ok-linha); }
.tf-passo-marca { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--linha-campo);
  border-radius: 50%; background: var(--painel); color: var(--ink-3); }
.tf-passo--feito .tf-passo-marca { border-color: var(--ok-linha); background: var(--ok-fundo); color: var(--ok); }
.tf-passo--afazer .tf-passo-marca { border-color: var(--accent-linha); background: var(--painel); }
.tf-passo--erro .tf-passo-marca { border-color: var(--erro-linha); background: var(--erro-fundo); color: var(--erro); }
.tf-passo-corpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
/* o nome e o estado numa linha da altura da marca: a marca fica ao centro da primeira linha, também se o nome partir */
.tf-passo-linha { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-2); min-height: 24px; margin: 0; }
.tf-passo-nome { min-width: 0; color: var(--ink); font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
.tf-passo--por .tf-passo-nome { color: var(--ink-2); font-weight: 500; }
.tf-passo-estado { color: var(--ink-3); font: 500 var(--t-12)/1 var(--mono); white-space: nowrap; }
.tf-passo--feito .tf-passo-estado { color: var(--ok); }
.tf-passo--afazer .tf-passo-estado { color: var(--accent-texto); }
.tf-passo--erro .tf-passo-estado { color: var(--erro); }
.tf-passo-como { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.55; overflow-wrap: break-word; }
.tf-passo-como > b { color: var(--ink-3); font-weight: 500; }
.tf-passo--erro .tf-passo-como > b { color: var(--erro); }
/* os planos das outras conversas da tarefa, recolhidos por baixo do principal */
.tf-outro-plano > summary { gap: var(--e-2); }
.tf-outro-plano-nome { min-width: 0; overflow-wrap: break-word; }
.tf-outro-plano .o-detalhe-corpo { padding-top: var(--e-2); }

/* uma ligação pequena de texto («Ver na conversa», «Ver o que está a fazer»): calma, no ink-2, com a seta da casa;
   acende ao passar. Repete-se em cada passo, por isso não leva o acento */
.tf-ligacao { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--ink-2);
  font: 500 var(--t-13)/1.3 var(--sans); text-decoration: none; white-space: nowrap; }
.tf-ligacao > .o-ic { flex: none; color: var(--ink-3); }
.tf-ligacao:hover { color: var(--ink); text-decoration: underline; }
.tf-ligacao:hover > .o-ic { color: var(--ink); }

/* ── quem está a trabalhar: as conversas (com os ajudantes delas por baixo) e os agentes ─────────────────────────── */
.tf-quem-lista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--linha); border-radius: var(--r-cartao);
  background: var(--painel); }
/* items-start de propósito: o ícone, o título e o botão alinham pela primeira linha (o título tem a altura do ícone); o
   resto da conversa (o papel, os ajudantes) corre por baixo, e no telemóvel pode ter quatro linhas */
.tf-quem { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); }
.tf-quem:first-child { border-top: 0; }
.tf-quem-ic { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--painel-2); color: var(--ink-3); }
.tf-quem-corpo { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.tf-quem-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; min-height: 28px;
  margin: 0; }
/* a primeira linha do título com a altura do ícone (28 px: 20 de linha e 4 de cada lado): a pill que parte para a linha
   de baixo, ou o título que parte em duas, deixa o ícone ao centro da primeira linha (o flex com wrap centra por linha) */
.tf-quem-titulo > b { min-width: 0; padding: var(--e-1) 0; color: var(--ink); font: 600 var(--t-14)/20px var(--sans);
  overflow-wrap: break-word; }
.tf-quem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; margin: 0;
  color: var(--ink-3); font: 400 var(--t-12)/1.4 var(--mono); }
.tf-quem-fim { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); }
.tf-quem-filhos { grid-column: 2 / -1; grid-row: 2; display: flex; flex-direction: column; gap: var(--e-3); min-width: 0;
  padding-left: var(--e-3); border-left: 1px solid var(--linha-2); }
.tf-ajudante { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.tf-ajudante-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; margin: 0;
  color: var(--ink-3); font-size: var(--t-13); line-height: 1.4; }
.tf-ajudante-titulo > .o-ic { flex: none; }
.tf-ajudante-titulo > b { min-width: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.tf-devolveu { margin: 0; color: var(--ink-2); font-size: var(--t-13); line-height: 1.55; overflow-wrap: break-word; }
.tf-devolveu > b { color: var(--ink-3); font-weight: 500; }

/* ── o que se pediu e o contexto ─────────────────────────────────────────────────────────────────────────────── */
.tf-pedido { display: flex; flex-direction: column; gap: var(--e-2); margin: 0; }
.tf-pedido-texto { margin: 0; padding: var(--e-1) 0 var(--e-1) var(--e-4); border-left: 2px solid var(--linha-campo);
  color: var(--ink); font-size: var(--t-15); line-height: 1.55; overflow-wrap: break-word; }
.tf-pedido-texto > p { margin: 0; white-space: pre-wrap; }
.tf-pedido-quem { margin: 0; padding-left: calc(var(--e-4) + 2px); color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); }
.tf-contexto { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tf-contexto-item { display: flex; flex-direction: column; gap: 2px; padding: var(--e-3) 0; border-top: 1px solid var(--linha-fraca); }
.tf-contexto-item:first-child { padding-top: 0; border-top: 0; }
.tf-contexto-item:last-child { padding-bottom: 0; }
.tf-contexto-texto { margin: 0; color: var(--ink); font-size: var(--t-corpo); line-height: 1.55; overflow-wrap: break-word; }
.tf-contexto-quem { margin: 0; color: var(--ink-3); font: 400 var(--t-12)/1.45 var(--mono); }

/* ── os comentários: o fio das pessoas, da IA e da WeSolve, com as linhas do OS por baixo de cada um ─────────────── */
.tf-fio { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* items-start de propósito: a marca de quem escreve (28 px) fica ao lado do nome, na primeira linha da mensagem */
.tf-msg { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start;
  column-gap: var(--e-3); padding-bottom: var(--e-5); scroll-margin-top: var(--e-4); }
.tf-msg:last-child { padding-bottom: 0; }
.tf-msg:focus { outline: none; }
/* o fio: de quem escreve ao seguinte */
.tf-msg:not(:last-child)::before { content: ''; position: absolute; top: calc(28px + var(--e-1)); bottom: var(--e-1);
  left: 13.5px; width: 1px; background: var(--linha); }
.tf-autor { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--linha-2); border-radius: 50%;
  background: var(--painel-3); color: var(--ink); font: 600 var(--t-11)/1 var(--mono); text-transform: uppercase; }
/* a IA: o quadrado com o acento, como no Chat; a WeSolve: a cor de apoio, como a etiqueta dela */
.tf-autor--ia { border-color: var(--accent-linha); border-radius: var(--r-cartao); background: var(--accent-fundo);
  color: var(--accent-texto); }
.tf-autor--wesolve { border-color: var(--apoio-linha); background: var(--apoio-fundo); }
.tf-autor--os { border-color: var(--linha); background: var(--painel-2); color: var(--ink-3); }
.tf-msg-corpo { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
/* o nome e a hora numa linha da altura da marca */
.tf-msg-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-height: 28px; margin: 0; }
.tf-msg-nome { padding: var(--e-1) 0; color: var(--ink); font: 600 var(--t-13)/20px var(--sans); }   /* a linha da marca (28 px), também quando a cabeça parte */
.tf-msg-hora { color: var(--ink-3); font: 400 var(--t-12)/1.3 var(--mono); }
.tf-msg-marca { color: var(--aviso); font: 500 var(--t-12)/1.3 var(--sans); }
/* a caixa de cada mensagem acompanha o texto (como no Chat), até à largura toda */
.tf-msg-texto { align-self: flex-start; max-width: 100%; margin: 0; padding: var(--e-2) var(--e-3); border: 1px solid var(--linha);
  border-radius: var(--r-caixa); background: var(--painel-2); color: var(--ink); font-size: var(--t-corpo); line-height: 1.55;
  overflow-wrap: break-word; white-space: pre-wrap; }
/* a mensagem a que «Ver a resposta» leva fica marcada */
.tf-msg--alvo .tf-msg-texto { border-color: var(--aviso-linha); background: var(--aviso-fundo); }
.tf-os { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
/* a linha do OS, igual à do Chat: o ícone das tarefas e a frase, mais pequena e cinzenta do que as mensagens (lê-se, mas
   não chama). items-start de propósito: a frase pode partir em duas linhas e o ícone fica na primeira (a caixa dele
   tem a altura dela) */
.tf-os-linha { display: flex; align-items: flex-start; gap: var(--e-2); min-width: 0; color: var(--ink-3);
  font: 400 var(--t-13)/1.5 var(--sans); overflow-wrap: break-word; }
.tf-os-linha > .o-ic { flex: none; height: 1.5em; }
.tf-os-linha--falhou { color: var(--erro); }
.tf-os-texto { min-width: 0; }
.tf-os-nome { color: var(--ink-2); }

/* ── «O que mudou» (a janela da casa): a lista dos ficheiros que a conversa mudou ───────────────────────────────── */
.tf-ficheiros { display: flex; flex-direction: column; gap: var(--e-1); max-height: 50vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.tf-ficheiro { display: flex; align-items: center; gap: var(--e-2); min-width: 0; padding: var(--e-1) 0; color: var(--ink-2); }
.tf-ficheiro > .o-ic { flex: none; color: var(--ink-3); }
.tf-ficheiro-nome { min-width: 0; color: var(--ink); font: 500 var(--t-13)/1.4 var(--mono); overflow-wrap: anywhere; }

/* ── telemóvel (até 860 px, ou toque deitado com pouca altura): a folha inteira ─────────────────────────────────── */
/* ── as ações (a FA, 23/10) ─────────────────────────────────────────────────────────────────────────────────────── */
/* «Mudar» (ou «Pôr um dia») ao lado do nome «Para quando», para o admin e quem pediu: uma ligação de texto pequena, no
   cinzento das ligações calmas e sublinhada (o laranja fica para o principal). baseline de propósito: o nome e a ligação
   são só texto, do mesmo tamanho */
.tf-datas-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); }
.tf-datas-mudar { position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font: 500 var(--t-12)/1.4 var(--sans); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--linha-campo); text-underline-offset: 3px; }
.tf-datas-mudar:hover { color: var(--ink); text-decoration-color: currentColor; }
/* o «Ver na conversa» da resposta da IA, por baixo do balão; e o «Entregar numa conversa nova» na linha do OS que diz
   que o comentário não se entregou (a linha parte e o botão desce, se não couber) */
.tf-msg-ver { margin: 0; }
.tf-os-linha:has(> .tf-os-acao) { flex-wrap: wrap; }
.tf-os-acao { flex: 1 0 100%; padding-left: calc(var(--e-2) + 16px); }

/* a caixa do comentário, presa em baixo da folha (fora do corpo que rola): fechada, o campo da casa (o contorno de 3:1)
   com o convite e um «Enviar» calmo (ainda não há nada para enviar, e o laranja fica para o principal do cabeçalho);
   aberta, para onde vai o comentário e o ✕, numa linha, por cima da caixa da casa (o-compor), com o «Enviar» principal */
.tf-compor { flex: none; padding: var(--e-3) var(--e-6) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha); background: var(--painel); }
.tf-compor[hidden] { display: none; }
.tf-compor-fechada { display: flex; align-items: center; gap: var(--e-2); width: 100%; min-width: 0; margin: 0;
  padding: var(--e-1) var(--e-1) var(--e-1) var(--e-3); border: 1px solid var(--linha-campo); border-radius: var(--r-caixa);
  background: var(--painel-2); color: inherit; font: 400 var(--t-15)/1.3 var(--sans); text-align: left; cursor: pointer; }
.tf-compor-fechada:hover { border-color: var(--accent-linha); }
.tf-compor-fechada[hidden] { display: none; }
.tf-compor-convite { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-3); font-size: var(--t-15); line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap; }
.tf-compor-convite--rascunho { color: var(--ink-2); }
.tf-compor-enviar { flex: none; color: var(--ink-2); pointer-events: none; }
.tf-compor-aberta[hidden] { display: none; }
.tf-compor-cima { display: flex; align-items: center; gap: var(--e-2); min-width: 0; margin: 0 0 var(--e-2); }
.tf-compor-nota { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink-2); font-size: var(--t-12); line-height: 1.45; }
.tf-compor-fechar { flex: none; }
.tf-compor-texto { max-height: 30vh; }

/* as janelas das decisões: as escolhas de «Mover para um projeto», uma por linha (uma lista de sítios, não um
   interruptor), cada uma com o ícone dela no cinzento, que acende com a escolhida; o nome do projeto novo logo por baixo;
   «Ou passa esta tarefa a projeto ›» por baixo das escolhas */
.tf-escolhas { flex-direction: column; flex-wrap: nowrap; }
.tf-escolhas > .o-escolha { flex: none; width: 100%; min-width: 0; text-align: left; }
.tf-escolhas .o-escolha-titulo { min-width: 0; max-width: 100%; }
.tf-escolhas .o-escolha-titulo > .o-ic { flex: none; color: var(--ink-3); }
.tf-escolhas .o-escolha[aria-checked="true"] .o-escolha-titulo > .o-ic { color: inherit; }
.tf-escolha-nome { min-width: 0; overflow-wrap: anywhere; }
.tf-novo-campo { margin-top: var(--e-3); }
.tf-novo-campo[hidden] { display: none; }
.tf-campo { min-width: 0; }
.tf-dia { max-width: 240px; }
.tf-janela-ou { margin: var(--e-4) 0 0; }
.tf-ligacao--botao { padding: 0; border: 0; background: none; cursor: pointer; }

@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .tf-folha { width: 100%; border-left: 0; box-shadow: none; }
  /* a seta e o ⋯ a direito com o texto (16 px), descontado o espaço de dentro dos botões de 44 px */
  .tf-barra { padding: env(safe-area-inset-top, 0px) var(--e-1) 0; }
  .tf-corpo { gap: var(--e-6); padding: var(--e-5) var(--e-4) calc(var(--e-8) + env(safe-area-inset-bottom, 0px)); }
  .tf-cabeca--precisa::before { left: calc(-1 * var(--e-4)); }
  .tf-os-linha { font-size: var(--t-14); }
  .tf-simples { padding: var(--e-4); }
  .tf-simples-linha { grid-template-columns: minmax(0, 1fr); }
  .tf-datas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* no telemóvel, nada abaixo dos 12 px (também as etiquetas em maiúsculas) */
  .tf-simples-rotulo, .tf-estado-rotulo, .tf-autor, .tf-folha .o-tag { font-size: var(--t-12); }
  /* as ações descem para debaixo do texto e dos ajudantes da conversa (que ficam juntos dela), pela ordem do HTML */
  .tf-quem { grid-template-columns: 28px minmax(0, 1fr); padding: var(--e-3); }
  .tf-quem-filhos, .tf-quem-fim { grid-column: 2; grid-row: auto; }
  .tf-quem-fim { justify-content: flex-start; }
  /* os botões do cabeçalho e do aviso dois por linha, a meias (como nos Agentes); um que não cabe, ou sozinho, fica com
     a linha toda */
  .tf-cabeca > .o-acoes > .tf-acao, .tf-estado .o-acoes > .tf-acao { flex: 1 1 auto; min-width: calc(50% - var(--e-1)); }
  .tf-compor { padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom, 0px)); }
  /* a linha fechada com a letra do campo do telemóvel (16 px), e o convite também */
  .tf-compor-convite { font-size: var(--t-16); }
  .tf-dia { max-width: none; }
}
/* no toque: 44 px de alvo nas ligações pequenas, sem mudar a linha (a área do toque cresce por fora, como no avatar) */
@media (max-width: 53.75em), (pointer: coarse) {
  .tf-ligacao, .tf-seguinte-nome { position: relative; }
  .tf-ligacao::before, .tf-seguinte-nome::before, .tf-datas-mudar::before { content: ''; position: absolute; inset: -14px -8px; }
  .tf-projeto { min-height: 32px; padding: 0 var(--e-3); }
  .tf-projeto::before { content: ''; position: absolute; inset: -7px -2px; }
}