/* Chassi da tarefa v3 — cópia literal do <style> de prototype-experiencia-dp-cockpit/public/lab-v3/tarefa.html (linhas 26–331, 29/10/2026). Não editar aqui: o que é deste projeto fica em tarefa-v3-extra.css. */
  .exec-step.failed { border-color: var(--danger); background: linear-gradient(to right, #fef2f2, #fff); }
  .exec-step.failed .step-num { background: var(--danger); color: #fff; }
  .exec-step .step-espera { font-size: 11px; color: var(--text-tertiary); }
  .exec-step .step-num svg { width: 15px; height: 15px; stroke-width: 2.75; }
  .exec-step .step-num.pend::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.6; }
  .exec-step.active .step-num.pend::after { background: #fff; opacity: 1; }

  .lab-grupo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin: 18px 0 8px; }
  .lab-grupo:first-child { margin-top: 0; }

  /* Corpo do passo: uma peça embaixo da outra, com respiro. */
  .exec-step .step-corpo { display: flex; flex-direction: column; gap: 14px; }

  /* Histórico do passo = ACORDEON dentro do próprio passo (nada suspenso por cima) */
  .lab-hist { background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .lab-hist-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
  .lab-try-lista { display: flex; flex-direction: column; gap: 12px; }
  .lab-try { display: flex; gap: 9px; align-items: flex-start; }
  .lab-try > i, .lab-try > svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; stroke-width: 2.25; }
  .lab-try.ok > i, .lab-try.ok > svg { color: var(--success); stroke: var(--success); }
  .lab-try.erro > i, .lab-try.erro > svg { color: var(--danger); stroke: var(--danger); }
  .lab-titulo-hora { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .lab-try-text { font-size: 13.5px; color: var(--text-primary); line-height: 1.4; }
  .lab-try-when { font-size: 11.5px; color: var(--text-tertiary); }
  .ta-err { margin-top: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 10px 12px; }
  .ta-err-text { font-size: 12.5px; color: var(--text-primary); line-height: 1.55; }

  /* TUDO À DIREITA, em duas linhas empilhadas e alinhadas pela borda direita:
       linha 1: horário · tag de estado
       linha 2: Eventos (N) ⚠ │ Comentários (N)
     Numa linha só ficava larga demais e empurrava a descrição do passo. Empilhado, o último
     rótulo encosta na direita e alinha entre todos os passos sozinho.
     ATENÇÃO AO PESO VISUAL: os dois EXPANDEM o próprio bloco, então não podem ter cara
     de botão — quem tem borda e fundo nesta tela é o que abre painel lateral (a Conversa).
     Aqui é disclosure puro: rótulo + chevron, igual ao .exec-ref-trigger do núcleo. */
  .exec-step .step-side { display: flex; flex-direction: column; align-items: flex-end; align-self: stretch; gap: 9px; flex-shrink: 0; }
  /* min-height: sem ela, passo com aviso fica 3px mais alto que passo sem — e a lista
     inteira perde o ritmo por causa do ícone do chip.
     margin-top:auto — a linha dos rótulos (que termina na seta) É EMPURRADA PRA BASE, tenha ou não
     uma ação acima dela. Com `space-between` no pai, o passo sem ação tinha um filho só e ele
     subia pro topo: a seta mudava de altura de um passo pro outro. */
  .exec-step .step-hist-row { display: flex; align-items: center; gap: 11px; min-height: 20px; margin-top: auto; }
  .step-sep { width: 1px; height: 13px; background: var(--border-strong); flex-shrink: 0; }
  .exec-step .step-hist { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
  .exec-step .step-hist:hover { color: var(--brand-blue); }
  .exec-step .step-hist.open { color: var(--brand-blue); }
  /* Quando o passo FEITO recolhe, quem abre é o cabeçalho do passo: estes rótulos passam a só
     informar (Eventos, comentários, alerta) e não podem parecer clicáveis nem mudar no hover. */
  .exec-step .step-hist.step-hist-info { cursor: default; }
  .exec-step .step-hist.step-hist-info:hover { color: var(--text-secondary); }
  .exec-step .step-hist .ex-chev { transition: transform .18s; flex-shrink: 0; }
  .exec-step .step-hist.open .ex-chev { transform: rotate(180deg); }
  /* A seta é UMA, no fim da linha, e não tem rótulo — o gap da linha a separaria como se fosse
     um terceiro item, então ela cola no que vem antes. */
  .exec-step .step-chev { margin-left: -4px; }
  .step-alerta { display: inline-flex; align-items: center; margin-right: -1px; }
  .step-alerta svg { width: 14px; height: 14px; flex-shrink: 0; }
  .step-alerta.viva svg { color: var(--danger); stroke: var(--danger); }
  .step-alerta.velha svg { color: #d97706; stroke: #d97706; }
  .exec-step .step-cmt, .lab-painel .step-cmt { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--text-tertiary); cursor: pointer; }
  .exec-step .step-cmt svg, .lab-painel .step-cmt svg { width: 16px; height: 16px; }
  .exec-step .step-cmt:hover, .lab-painel .step-cmt:hover { color: var(--brand-pink); }

  /* Linha 1 da direita: o horário à ESQUERDA da tag de estado. min-height porque "Em
     andamento" e "Aguardando" são texto puro e ficariam mais baixos que a badge "Feito",
     deixando o passo ativo desalinhado dos outros. */
  .exec-step .step-status { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 22px; }
  .exec-step .step-when { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }

  /* Fim do roteiro: NÃO é um card. Uma divisória atravessa o fim da lista com o selo no
     meio dela — o único elemento do roteiro que não tem caixa, então não se confunde com
     passo nenhum. (A tela de "Tarefa finalizada" centralizada é pra quem ACABOU de
     finalizar; aqui é registro de um processo que já fechou.)
     O contraste vem da COR do texto, não de fundo: verde forte e negrito, porque cinza
     claro sobre branco desaparece no monitor do operador. */
  .lab-fim { margin-top: 22px; text-align: center; }
  .lab-fim-linha { display: flex; align-items: center; gap: 16px; }
  .lab-fim-linha::before, .lab-fim-linha::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); }
  .lab-fim-selo { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--success); white-space: nowrap; }
  .lab-fim-selo svg { width: 18px; height: 18px; stroke: var(--success); stroke-width: 2.25; flex-shrink: 0; }
  .lab-fim-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 7px; }
  /* Arquivos e destino dentro do passo. O rótulo é o MESMO dos dados da solicitação (11px,
     caixa alta, tercário) pra não nascer um terceiro jeito de intitular bloco. Os chips são
     os .material-chip do núcleo, sem variante nova. */
  .lab-bl-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 10px; }
  .lab-arqs { display: flex; flex-wrap: wrap; gap: 8px; }
  /* A pasta usa o .material-chip dos arquivos. Só duas diferenças: é clicável inteira e o
     ícone tem o peso do texto (a pasta é o destino do passo, não um anexo qualquer). */
  .lab-chip-pasta { cursor: pointer; }
  .lab-chip-pasta > svg { color: var(--text-secondary); stroke: var(--text-secondary); }
  .lab-chip-pasta .material-chip-name { font-weight: 600; }
  /* Fala de gente (comentário) — avatar + nome + texto, sem caixa. O avatar carrega o "isto
     é alguém falando"; a caixa em volta era peso sem função. */
  .lab-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f25461, #f97316); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.02em; }
  .lab-fala { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
  .lab-fala:last-child { margin-bottom: 0; }
  .lab-fala-who { font-size: 12px; font-weight: 600; color: var(--text-primary); }
  .lab-fala-when { font-size: 10.5px; color: var(--text-tertiary); margin-left: 7px; font-weight: 400; }
  .lab-fala-text { font-size: 12.5px; color: var(--text-primary); line-height: 1.55; margin-top: 2px; }

  /* Campo de comentar COMPACTO: uma linha que cresce, e o botão de enviar só aparece com
     texto. Era um card com rodapé próprio, textarea de 62px e dois botões — peso de
     formulário pra uma anotação de uma frase. */
  .lab-cmt-box { border-top: 1px solid var(--border); padding: 11px 14px; background: var(--surface-subtle); }
  .lab-cmt-form { display: flex; align-items: flex-start; gap: 10px; }
  /* Aviso fixo de que o comentário é interno. Recuo alinha com o texto do campo (avatar 26 +
     gap 10) pra ler como legenda dele, não como item novo. */
  .lab-cmt-hint { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding-left: 36px; font-size: 11px; color: var(--text-tertiary); }
  .lab-cmt-hint svg { width: 12px; height: 12px; flex-shrink: 0; }
  .lab-cmt-form textarea { flex: 1; min-width: 0; box-sizing: border-box; padding: 5px 2px; border: none; background: none; font-family: inherit; font-size: 12.5px; line-height: 1.5; resize: none; outline: none; overflow: hidden; color: var(--text-primary); }
  .lab-cmt-form textarea::placeholder { color: var(--text-tertiary); }
  /* Enviar: nasce escondido e some do fluxo; aparece quando há texto (a classe entra pelo
     labRascunho, sem re-render, pra não perder o foco de quem está digitando). */
  .lab-cmt-form .lab-cmt-send { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--brand-pink); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
  .lab-cmt-form .lab-cmt-send svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 2.5; }
  .lab-cmt-form .lab-cmt-send:hover { background: var(--brand-pink-hover); }
  .lab-cmt-form.com-texto .lab-cmt-send { display: flex; }
  .lab-cmt-clip { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; background: none; font-family: inherit; font-size: 11px; color: var(--text-tertiary); cursor: pointer; flex-shrink: 0; }
  .lab-cmt-clip svg { width: 12px; height: 12px; }
  .lab-cmt-clip:hover { color: var(--brand-pink); }
  .lab-cmt-sep { width: 1px; height: 11px; background: var(--border-strong); flex-shrink: 0; }
  .lab-cmt-arqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-left: 36px; }

  .lab-try-head { display: flex; align-items: flex-start; gap: 10px; }
  .lab-try-cmt { margin-top: 1px; }
  .lab-fala-em-lanc { margin-left: 24px; padding-left: 12px; border-left: 1px solid var(--border-strong); margin-top: 10px; }
  .lab-cmt-box.em-lanc { margin-left: 24px; padding: 0 0 0 12px; margin-top: 10px; border-top: none; border-left: 1px solid var(--border-strong); background: none; }

  /* Painel lateral (Conversa · Histórico) — DESLIZA da direita, não empurra o roteiro.
     A animação é de verdade: o fundo aparece e o painel entra da borda. Sem transição ele
     "aparecia" seco e parecia bug de renderização. 240ms é o mesmo tempo dos dois lados
     (abrir e fechar) — o labDrawerFechar espera esse tempo antes de remover do DOM. */
  .lab-drawer-bd { position: fixed; inset: 0; background: rgba(15,15,15,0); z-index: 130; display: flex; justify-content: flex-end; transition: background .24s ease; }
  .lab-drawer-bd.aberto { background: rgba(15,15,15,0.35); }
  .lab-drawer { width: 460px; max-width: 92vw; background: var(--surface); height: 100%; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(15,15,15,0.18); transform: translateX(100%); transition: transform .24s cubic-bezier(.22,.61,.36,1); }
  .lab-drawer-bd.aberto .lab-drawer { transform: translateX(0); }
  .lab-drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
  .lab-drawer-title { font-size: 15px; font-weight: 700; }
  .lab-drawer-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
  .lab-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
  .lab-drawer-foot { border-top: 1px solid var(--border); padding: 14px 20px; background: var(--surface-subtle); }
  .lab-drawer-foot textarea { width: 100%; box-sizing: border-box; min-height: 74px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; font-family: inherit; font-size: 13px; resize: vertical; outline: none; }
  .lab-drawer-nota { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
  /* Opção de colocar em espera + a consequência dela, no rodapé da Conversa. */
  .lab-espera-opt { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; user-select: none; }
  .lab-espera-opt input { width: 15px; height: 15px; accent-color: var(--brand-pink); cursor: pointer; flex-shrink: 0; }
  .lab-espera-aviso { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; padding: 10px 12px; background: var(--warning-soft); border: 1px solid #f59e0b; border-radius: 9px; font-size: 12px; color: var(--warning); line-height: 1.5; }
  .lab-espera-aviso svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
  .lab-exec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  /* Os dois abridores de painel andam juntos, na direita da linha 3 do header — acima da
     posse: Histórico (a ordem das coisas) e depois Conversa (falar sobre elas). */
  .lab-head-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .lab-conversa-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
  .lab-conversa-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
  .lab-conversa-btn .lab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue); flex-shrink: 0; }

  /* Timeline do Hub, dentro do painel de Histórico: bolinha + linha + data/hora + conteúdo.
     A linha nasce embaixo da bolinha e vai até o item seguinte; o último item não tem linha. */
  .lab-tl-item { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
  .lab-tl-item:last-child { padding-bottom: 0; }
  .lab-tl-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: 2px; width: 1px; background: var(--border-strong); }
  .lab-tl-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
  .lab-tl-dot svg { width: 15px; height: 15px; stroke-width: 2.25; }
  .lab-tl-dot.escuro { background: #141414; } .lab-tl-dot.escuro svg { stroke: #fff; }
  .lab-tl-dot.claro { background: #fff; border: 1px solid var(--border-strong); } .lab-tl-dot.claro svg { stroke: var(--text-secondary); }
  .lab-tl-dot.azul { background: var(--brand-blue); } .lab-tl-dot.azul svg { stroke: #fff; }
  .lab-tl-dot.ambar { background: #f59e0b; } .lab-tl-dot.ambar svg { stroke: #fff; }
  .lab-tl-dot.verde { background: var(--success); } .lab-tl-dot.verde svg { stroke: #fff; }
  .lab-tl-dot.vermelho { background: var(--danger); } .lab-tl-dot.vermelho svg { stroke: #fff; }
  .lab-tl-corpo { flex: 1; min-width: 0; padding-top: 1px; }
  .lab-tl-when { font-size: 11.5px; color: var(--text-tertiary); }
  .lab-tl-titulo { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .lab-tl-quem { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }
  .lab-tl-escopo { font-size: 12px; font-weight: 400; color: var(--text-tertiary); margin-left: 7px; }
  .lab-tl-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
  .lab-tl-nota { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
  .lab-tl-msg { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; margin-top: 8px; font-size: 12.5px; color: var(--text-primary); line-height: 1.55; }

 /* ── v3 · MESTRE-DETALHE, MODELO GMAIL ───────────── */
  .lab-app { position: fixed; top: 0; left: var(--cockpit-sidebar-w, 236px); right: 0; bottom: 0; display: flex; flex-direction: column; min-width: 0; }
  /* O SINO continua sendo o do shell: o topbar do núcleo (sticky, transparente) passa a
     flutuar POR CIMA da linha 1 do header — o botão fica no canto direito, funcional, e
     o painel de notificações abre ancorado nele como sempre. pointer-events libera a
     área transparente pra os cliques chegarem no header embaixo. */
  .topbar { z-index: 80 !important; pointer-events: none; }
  .topbar * { pointer-events: auto; }
  .lab-cab { background: #fff; border-bottom: 1px solid var(--border); padding: 0 24px 11px; flex-shrink: 0; }
  .lab-cab-l1 { display: flex; align-items: center; min-height: 42px; }
  .lab-cab-voltar { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
  .lab-cab-voltar:hover { color: var(--brand-pink); }
  .lab-cab-titulo { font-size: 15.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
  .lab-cab-cli { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
  .lab-cab-cnpj { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
  .lab-cab-l2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .lab-cab-l3 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 7px; }
  .lab-cab-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 12px; color: var(--text-secondary); }
  .lab-cab-meta .contact-tag { transform: scale(0.95); }
  .lab-cab-l4 { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
  .lab-cab-datas { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
  .lab-cab-posse { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; font-size: 12.5px; color: var(--text-secondary); }
  /* Cancelada: a justificativa vira uma tarja fina fixa sob o header. */
  .lab-cancel-strip { background: #fef2f2; border-bottom: 1px solid var(--danger); padding: 8px 24px; font-size: 12.5px; color: var(--text-primary); flex-shrink: 0; }
  /* Aviso de leitura (modo leitura, tarefa de outro): tarja fina sob o header,
     mesma família da de "Cancelada", no azul de informação. Só existe quando há o que avisar. */
  .lab-aviso-strip { display: flex; align-items: center; gap: 9px; padding: 8px 24px; background: #eff6ff; border-bottom: 1px solid var(--info); font-size: 12.5px; color: var(--text-primary); flex-shrink: 0; min-width: 0; }
  .lab-aviso-strip svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--info); stroke: var(--info); }
  .lab-aviso-strip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lab-faixa-espera { padding: 10px 24px 0; flex-shrink: 0; }
  /* O corpo: duas colunas, cada uma dona do próprio scroll. min-height: 0 é o que
     permite os filhos encolherem pra caber — sem ele o overflow não acontece. */
  .lab-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; padding: 16px 24px 18px; }
  .lab-corpo.mini { grid-template-columns: 54px minmax(0, 1fr); }
  .lab-corpo-solo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px; }
  .lab-lateral { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  .lab-lateral-top { display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; }
  .lab-lateral-top .lab-prog { flex: 1; }
  .lab-nav-mini-btn { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
  .lab-nav-mini-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
  .lab-corpo.mini .lab-lateral-top { justify-content: center; align-items: center; flex-direction: column; gap: 8px; }
  .lab-corpo.mini .lab-prog { width: 100%; padding: 0 4px; }
  .lab-nav { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; min-height: 0; padding: 2px 2px 8px; }
  .lab-nav.mini { align-items: center; padding: 2px 0 8px; }
  .lab-nav.mini .lab-nav-item { width: auto; padding: 6px; }
  .lab-grupo-mini { width: 22px; border-top: 1px solid var(--border-strong); margin: 8px 0 2px; flex-shrink: 0; }
  /* Scrollbars presentes, não gritantes — o corte de um item no fim da lista é o
     próprio sinal de "tem mais". */
  .lab-nav::-webkit-scrollbar, .lab-painel-scroll::-webkit-scrollbar { width: 10px; }
  .lab-nav::-webkit-scrollbar-thumb, .lab-painel-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
  .lab-nav::-webkit-scrollbar-thumb:hover, .lab-painel-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); border: 3px solid transparent; background-clip: content-box; }
  /* O selo de fim fecha a LISTA de passos, no rodapé do scroll dela. */
  .lab-nav .lab-fim { margin: 14px 2px 4px; }
  .lab-nav .lab-fim-selo { font-size: 12.5px; }
  .lab-nav .lab-fim-selo svg { width: 15px; height: 15px; }
  .lab-nav .lab-fim-sub { font-size: 11px; }
  .lab-nav .lab-grupo { margin: 14px 2px 4px; }
  .lab-nav .lab-grupo:first-child { margin-top: 0; }
  .lab-nav-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit; }
  .lab-nav-item:hover { border-color: var(--brand-blue); }
  .lab-nav-item.sel { border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); background: var(--brand-blue-soft); }
  .lab-nav-item:disabled { cursor: not-allowed; background: var(--surface-subtle); opacity: 0.6; }
  .lab-nav-nome { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
  /* Linha 2 do item: timestamp à esquerda e os SINAIS (ícone + número) colados à
     direita do box — comentários a partir de 1, eventos a partir de 2. */
  .lab-nav-linha2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; min-height: 15px; }
  .lab-nav-when { font-size: 11px; color: var(--text-tertiary); }
  .lab-nav-sinais { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: auto; }
  .lab-nav-sinal { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }
  .lab-nav-sinal svg { width: 12px; height: 12px; color: var(--text-tertiary); stroke: var(--text-tertiary); }
  .lab-nav-sinal.viva { color: var(--danger); }
  .lab-nav-sinal.viva svg { color: var(--danger); stroke: var(--danger); }
  .lab-nav-sinal.velha { color: #d97706; }
  .lab-nav-sinal.velha svg { color: #d97706; stroke: #d97706; }
  /* O disco de estado fala o MESMO vocabulário do passo do lab 2 (check · ✕ · ponto),
     em 22px: o item de navegação é menor que o bloco de passo que ele substitui. */
  .lab-nav-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-muted); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .lab-nav-dot svg { width: 13px; height: 13px; stroke-width: 2.75; stroke: #fff; }
  .lab-nav-dot.pend::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); opacity: 0.7; }
  .lab-nav-item.done .lab-nav-dot { background: var(--success); border-color: var(--success); }
  .lab-nav-item.failed .lab-nav-dot { background: var(--danger); border-color: var(--danger); }
  .lab-nav-item.active .lab-nav-dot { background: #fff; border: 4px solid var(--brand-blue); }
  .lab-nav-item.active .lab-nav-dot.pend::after { display: none; }
  .lab-nav-dot.boom { position: relative; animation: labDotBoom .42s cubic-bezier(.34,1.56,.64,1) both; }
  .lab-nav-dot.boom::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--success); animation: labDotRing .55s ease-out both; }
  .lab-nav-dot.boom svg { animation: labCheckPop .34s .09s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes labDotBoom { 0% { transform: scale(.5); } 55% { transform: scale(1.24); } 100% { transform: scale(1); } }
  @keyframes labDotRing { 0% { transform: scale(.65); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
  @keyframes labCheckPop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .lab-nav-dot.boom, .lab-nav-dot.boom::before, .lab-nav-dot.boom svg { animation: none; }
    .lab-nav-dot.boom::before { display: none; }
    .lab-prog-fill { transition: none; }
  }
  .lab-painel { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .lab-painel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px;
    /* Sombra de corte: aparece só quando há conteúdo escondido acima/abaixo. */
    background: linear-gradient(#fff 30%, rgba(255,255,255,0)) top, linear-gradient(rgba(255,255,255,0), #fff 70%) bottom,
      radial-gradient(farthest-side at 50% 0, rgba(15,15,15,0.13), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(15,15,15,0.13), transparent) bottom;
    background-repeat: no-repeat; background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px; background-attachment: local, local, scroll, scroll; }
  .lab-painel-foot { border-top: 1px solid var(--border); padding-top: 14px; }
  /* Os botões do rodapé são os MESMOS do passo do lab 2 (.step-action / .step-mark-done
     do núcleo); o núcleo os escopa em .exec-step, então o rodapé re-declara o mesmo
     visual — sem variante nova. */
  .lab-painel-foot .step-status { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
  .lab-painel-foot .step-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: all .15s; white-space: nowrap; }
  .lab-painel-foot .step-action:hover { border-color: var(--brand-pink); color: var(--brand-pink); }
  .lab-painel-foot .step-action.done { background: var(--success-soft); border-color: transparent; color: var(--success); }
  .lab-painel-foot .step-mark-done { padding: 8px 14px; background: var(--brand-pink); color: #fff; border: none; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s; }
  .lab-painel-foot .step-mark-done:hover { background: var(--brand-pink-hover); }
  .lab-painel-foot .step-espera { font-size: 12px; color: var(--text-tertiary); }
  .lab-prog { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; flex-shrink: 0; padding: 0 2px; }
  .lab-prog-txt { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
  .lab-prog-bar { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
  .lab-prog-fill { height: 100%; border-radius: 999px; background: var(--success); transition: width .55s cubic-bezier(.22,.61,.36,1); }

  .lab-vazio { font-size: 13px; color: var(--text-secondary); }

  /* O operador-ui.css foi escrito pras telas do Autopilot, onde não existe "solicitação do
     cliente": ele esconde com !important tudo o que é dessa natureza — o cartão de decisão, as
     abas do formulário, o botão Editar, a faixa do colaborador e o bloco de anexos. Nesta tela as
     duas naturezas convivem (a Validação é de DP), então o esconde é desfeito peça por peça.
     Escopo em .lab-app de propósito: vale só dentro desta tela. */
  .lab-app .decision-card { display: block !important; }
  .lab-app #form-tabs { display: inline-flex !important; }
  .lab-app #form-edit-btn { display: block !important; }
  .lab-app #form-collab-strip { display: block !important; }
  .lab-app #attachments-block { display: block !important; }