/* Feed do corretor — `#/feed`, a folha "Ver mais" e o sino do cabeçalho
 * (plan/23 §8, tarefa B5; web/feed.js).
 *
 * Visual do esboço aprovado (`docs/referencia/leads-feed/esboco.html`): cartão
 * branco com sombra suave; a linha do PORQUÊ em caixa alta, com a cor do
 * sentido (novo/urgente = ação carmesim, quente, morno, frio/agenda); carmesim
 * só na ação principal; "N de M feitos hoje" com a barrinha no verde de ESTADO
 * (`--teal-dark`, o token de progresso do app — nunca o carmesim de ação).
 *
 * ⚠️ Nenhuma cor fora dos dois blocos de token (CLAUDE.md §4). Todo `--fd-*`
 * tem par no escuro — `tests/test_feed_ui.py` reprova cor solta e token órfão.
 */
:root {
  --fd-quente: var(--destaque);
  --fd-morno: var(--suave);
  --fd-frio: var(--linha);
  --fd-msg-s: #e4f7ef;          /* balão da mensagem pronta (o "sms" do esboço) */
  --fd-alvo: #f6dfae;           /* o cartão que o sino apontou, por um instante */
  --fd-sombra-linha: 0 6px 18px -14px rgba(17, 24, 39, .35);   /* a linha da fila (mais leve que o cartão) */
  /* Feed v3 (Stitch, 06/10) */
  --fd-borda-forte: #d0d5dd;    /* contorno dos botões secundários (o "outline" do Stitch) */
  --fd-sombra-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --fd-novo-s: #fff0ef;         /* fundo do selo do momento no cabeçalho da linha aberta */
  --fd-sobre-cor: #ffffff;      /* texto sobre o selo cheio da origem (ZAP, WA…) */
  --fd-balao-on: rgba(255, 255, 255, .22);   /* o balão da contagem no filtro selecionado (carmesim) */
}

:root[data-tema="escuro"] {
  --fd-quente: var(--destaque);
  --fd-morno: var(--suave);
  --fd-frio: var(--linha);
  --fd-msg-s: #12302a;
  --fd-alvo: #5c4516;
  --fd-sombra-linha: 0 6px 18px -14px rgba(0, 0, 0, .6);
  --fd-borda-forte: #3b4756;
  --fd-sombra-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --fd-novo-s: #3a1f22;
  --fd-sobre-cor: #0b1220;
  --fd-balao-on: rgba(255, 255, 255, .22);
}

/* ── a tela ────────────────────────────────────────────────────────────── */
.fd-tela { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
.fd-tela p { margin: 0; }
.fd-col-fila { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Fila | Em andamento (20/10, Icaro): no celular, duas abas — a fila inteira não fica entre a pessoa e as conversas;
   no PC, lado a lado, o "Em andamento" fixo à direita com rolagem própria. */
.fd-abas { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--bg3); }
.fd-abas[hidden] { display: none; }
.fd-aba { flex: 1 1 0; min-height: 44px; border: 0; border-radius: 9px; background: none; box-shadow: none; font: inherit;
  font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.fd-aba b { font-weight: 800; }
.fd-aba.on { background: var(--bg2); color: var(--fg); box-shadow: var(--fd-sombra-sm); }
.fd-aba:focus-visible { outline: 2px solid var(--acao-texto); outline-offset: 2px; }
@media (max-width: 1179px) {
  .fd-tela.aba-and .fd-col-fila { display: none; }
  .fd-tela.aba-and .fd-and { margin-top: 0; }
  .fd-tela:not(.aba-and) .fd-and:not([hidden]) { display: none; }
}
@media (min-width: 1180px) {
  .fd-tela.com-and { max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    column-gap: 24px; row-gap: 16px; align-items: start; }
  .fd-tela.com-and > .fd-topo { grid-column: 1 / -1; }
  .fd-abas, .fd-abas:not([hidden]) { display: none; }
  .fd-tela.com-and > .fd-and { grid-column: 2; grid-row: 2; margin-top: 0; position: sticky; top: 12px;
    max-height: calc(100vh - 24px); overflow-y: auto; padding-right: 4px; }
  .fd-tela.com-and > .fd-col-fila { grid-column: 1; grid-row: 2; }
  /* 22/10: o tamanho das colunas escolhido no cabeçalho do Em andamento (lembrado no navegador) */
  .fd-tela.com-and.prop-meio, .fd-tela.com-and.prop-and { max-width: 1440px; }
  .fd-tela.com-and.prop-meio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fd-tela.com-and.prop-and { grid-template-columns: minmax(360px, 2fr) minmax(0, 3fr); }
}
.fd-and-acoes { display: inline-flex; align-items: center; gap: 8px; }.fd-and-ver:hover { background: none; text-decoration: underline; }
   /* no celular há abas */
.fd-filtro.fd-oculta.on .fd-filtro-p { background: var(--bg3); border-color: var(--line); color: var(--fg); }
.fd-titulo, .fd-frase, .fd-porque, .fd-principal, .fd-fim b {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.fd-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fd-titulo { margin: 0; font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.02em; }

.fd-lista { display: flex; flex-direction: column; gap: 12px; }
.fd-esq { height: 132px; border-radius: 14px; background: var(--bg3); animation: fd-pulso 1.1s ease-in-out infinite alternate; }
@keyframes fd-pulso { from { opacity: .5; } to { opacity: 1; } }

/* ── o cartão ──────────────────────────────────────────────────────────── */
.fd-cartao { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--fd-sombra-sm); padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 6px;
  transition: opacity .2s ease, transform .2s ease, box-shadow .3s ease; }
.fd-cartao.saindo { opacity: 0; transform: translateX(28px); }
.fd-cartao.fd-alvo { box-shadow: 0 0 0 3px var(--fd-alvo), var(--sombra-card); }
/* O corpo inteiro é o botão do "Ver mais". O `button` global é carmesim: aqui não. */
.fd-corpo, .fd-corpo:hover { display: flex; flex-direction: column; gap: 5px; width: 100%; min-height: 44px;
  margin: 0; padding: 10px 10px 4px; background: none; border: 0; border-radius: 12px; color: var(--fg);
  text-align: left; font: inherit; cursor: pointer; }
.fd-corpo:hover .fd-frase { text-decoration: underline; text-underline-offset: 3px; }
.fd-corpo:focus-visible { outline: 2px solid var(--acao); outline-offset: -2px; }
.fd-porque { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.fd-hora { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.fd-cor-acao { color: var(--acao-texto); }
.fd-cor-quente { color: var(--fd-quente); }
.fd-cor-morno { color: var(--fd-morno); }
.fd-cor-frio { color: var(--fd-frio); }
.fd-frase { font-size: 15.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fd-quem { font-size: 13px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.fd-imovel { display: flex; align-items: center; gap: 10px; margin-top: 4px; min-width: 0; }
.fd-thumb { width: 56px; height: 44px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg3);
  color: var(--muted); display: grid; place-items: center; }
.fd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-thumb .ico { width: 22px; height: 22px; }
.fd-im-txt { min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.fd-im-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-im-t b { font-variant-numeric: tabular-nums; }
.fd-im-txt small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

.fd-acoes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.fd-acoes button, .fd-leves button { min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px;
  line-height: 1.2; }
.fd-principal { flex: 1 1 150px; font-weight: 800; }
.fd-leves-cartao { display: flex; gap: 6px; margin-left: auto; }
/* "Pôr na minha agenda" no cartão da visita de amanhã (link, não botão de ação). */
.fd-agenda { padding: 0 10px; }
.fd-agenda .ld-agenda { font-size: 13.5px; }
.fd-sec, .fd-sec:hover { flex: 1 1 auto; background: var(--bg2); border: 1px solid var(--line); color: var(--fg); }
.fd-sec:hover { background: var(--bg3); }
.fd-leve, .fd-leve:hover { flex: 0 0 auto; background: var(--bg3); border: 1px solid var(--line); color: var(--fg);
  font-weight: 600; }
.fd-leve:hover { border-color: var(--fg); }
.fd-acoes button:disabled, .fd-leves button:disabled { background: var(--bg3); color: var(--muted); border-color: var(--line); }


/* ── Ver mais (o miolo da folha de baixo de servicos.js) ───────────────── */
.ld-folha .fd-porque { margin-top: 2px; }
.fd-resumo { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--bg3); }
.fd-resumo-nome { margin: 0; font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.fd-im-link { display: block; color: var(--fg); text-decoration: none; padding: 8px; border: 1px solid var(--line);
  border-radius: 12px; min-height: 44px; }
.fd-im-link .fd-imovel { margin: 0; }
.fd-leves { display: flex; gap: 8px; }
.fd-leves .fd-leve { flex: 1 1 0; }
.fd-abrir-ficha { align-self: center; min-height: 44px; display: inline-flex; align-items: center; }
.fd-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fd-foto { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg3); color: var(--muted);
  display: grid; place-items: center; }
.fd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-foto .ico { width: 24px; height: 24px; }
.fd-im-dados { display: flex; flex-direction: column; gap: 2px; }
.fd-im-dados p { margin: 0; }
.fd-im-preco { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.fd-im-dados .ld-link { min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.fd-leads { display: flex; flex-direction: column; gap: 8px; }
.ld-folha label.fd-lead { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--fg); font-weight: 400;
  cursor: pointer; }
.fd-lead.fd-atual { border-color: var(--acao); box-shadow: 0 0 0 1px var(--acao); }
.fd-lead input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--acao); }
.fd-lead-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fd-lead-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 800; overflow-wrap: anywhere; }
/* o que o cliente procura (06/10): decidir antes de mandar o link */
.fd-lead-proc { font-size: 12.5px; line-height: 17px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.fd-lead-abrir { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -6px 0 0 4px;
  font-size: 13px; font-weight: 700; }
/* no meio do "um por vez", abrir a ficha fecharia a folha e perderia a sequência */
.fd-enviando .fd-lead-abrir { display: none; }
.fd-score { font-size: 12px; color: var(--muted); }
.fd-envio:empty { display: none; }
.fd-msg { display: block; margin-top: 4px; padding: 7px 9px; border-radius: 10px; background: var(--fd-msg-s);
  color: var(--fg); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-aviso > span { display: block; flex: 1; min-width: 0; }
.fd-aviso .fd-porque { margin-bottom: 2px; }
.fd-aviso-t { display: block; font-weight: 700; overflow-wrap: anywhere; }

/* ── o sino ────────────────────────────────────────────────────────────── */
header.top .fd-sino, header.top .fd-sino:hover { position: relative; flex: none; display: inline-grid;
  place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px;
  background: transparent; border: 1px solid var(--line); color: var(--fg); }
header.top .fd-sino:hover { background: var(--bg3); }
.fd-sino .ico { width: 22px; height: 22px; }
.fd-sino-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--acao); color: var(--acao-fg); font-size: 11.5px; font-weight: 800;
  line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--bg2); }
.fd-sino-n[hidden] { display: none; }

/* ══ Feed v3 (06/10) — a tela "Feed v3" do Stitch, porta fiel ═══════════════
 * filtros → "Aprovar agora" → "Fila da equipe Total" em cartões, um por lead, que abrem no lugar.
 * Medidas do Stitch: cartão 14px de raio com sombra leve; rótulos 11px em caixa alta; chips de 6px de raio;
 * botões de 10px de raio e 44px; carmesim só no botão principal de cada bloco. Cor só por token semântico (31/10: as cores de módulo saíram do Feed;
 * `--acao*`, `--atencao-*` do app e os `--fd-*` acima, com par no escuro). O alvo de toque fica em 44px mesmo
 * onde o Stitch desenha menor (os filtros): o botão é o alvo; a pílula desenhada dentro tem o tamanho dele. */
.fd-tela .fd-rot, .fd-sec-t, .fd-fila-t, .fd-linha-nome, .fd-tag, .fd-filtro, .fd-apr-t b, .fd-int-preco,
.fd-passo-b, .fd-barra-lead button, .fd-apr button, .fd-relogio, .fd-fila, .fd-selo, .fd-av-ini {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* o avatar: iniciais, anel da temperatura e o selo cheio da origem no canto */
.fd-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--bg3); color: var(--fg); border: 1px solid var(--line); }
.fd-av-g { width: 44px; height: 44px; border-width: 2px; }
.fd-av-ini { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.fd-av-g .fd-av-ini { font-size: 15px; }
.fd-temp-quente { border-color: var(--fd-quente); }
.fd-temp-morno { border-color: var(--fd-morno); }
.fd-selo { position: absolute; right: -5px; bottom: -4px; padding: 0 4px; border-radius: 4px; font-size: 8.5px;
  font-weight: 800; line-height: 14px; color: var(--fd-sobre-cor); box-shadow: var(--fd-sombra-sm); }
.fd-selo-portal { background: var(--texto); }
.fd-selo-maysa { background: var(--texto); }
.fd-selo-site { background: var(--texto); }
.fd-selo-manual { background: var(--texto); }

/* filtros: pílula carmesim cheia (selecionado) ou branca com borda; a contagem num balão */
.fd-barra { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fd-barra .fd-filtros { flex: 1; min-width: 0; }
.fd-filtros { display: flex; gap: 8px; overflow-x: auto; margin: -4px 0; scrollbar-width: none; }
.fd-filtro-p .ico { width: 15px; height: 15px; flex: none; }
/* a ordem (06/10): um botão no fim da barra; as quatro numa folha */
.fd-ordem-w { flex: none; }
.fd-ordem-w[hidden] { display: none; }
.fd-ordens { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.fd-ordem-op { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 13.5px; font-weight: 700;
  text-align: left; cursor: pointer; }
.fd-ordem-op:hover, .fd-ordem-op:focus-visible { background: var(--bg3); outline: none; }
.fd-ordem-op .ico, .fd-ordem-v { width: 16px; height: 16px; flex: none; color: var(--acao-texto); }
.fd-ordem-op small { display: block; font-size: 11.5px; line-height: 15px; font-weight: 500; color: var(--muted); }

.fd-filtros::-webkit-scrollbar { display: none; }
.fd-filtros[hidden] { display: none; }
/* ordem e origem (06/10, pedido do Icaro: "um select é horrível para agilidade"): chips de um toque, uma faixa
   por controle, que rola de lado no celular. O alvo de toque é o botão (44 px); a pílula é menor que a dos filtros
   e, ligada, fica em tinta de texto — o carmesim continua só dos filtros de cima. */
.fd-ctrl { display: flex; flex-direction: column; gap: 0; }
.fd-ctrl[hidden] { display: none; }
.fd-ctrl-l { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fd-ctrl-l::-webkit-scrollbar { display: none; }
.fd-ctrl-r { flex: none; min-width: 50px; font-size: 12px; font-weight: 700; color: var(--muted); }
.fd-op, .fd-op:hover { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--fg); }
.fd-op-p { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg2); font-size: 12.5px; line-height: 16px; font-weight: 600;
  white-space: nowrap; }
.fd-op:hover .fd-op-p { background: var(--bg3); }
.fd-op-p b { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-op.on .fd-op-p { background: var(--fg); border-color: var(--fg); color: var(--bg2); }
.fd-op.on .fd-op-p b { color: inherit; }
.fd-op:focus-visible { outline: none; }
.fd-op:focus-visible .fd-op-p { outline: 2px solid var(--acao); outline-offset: 2px; }
.fd-filtro-ativo { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.fd-filtro-ativo .ld-link, .fd-fim .ld-link { min-height: 44px; padding: 0 4px; background: none; border: 0; font: inherit;
  font-weight: 700; color: var(--acao-texto); cursor: pointer; }
.fd-resto { margin: 4px 0 0; font-size: 12.5px; line-height: 18px; color: var(--muted); text-align: center; }
/* a dica de deslizar só faz sentido no toque */
.fd-filtro, .fd-filtro:hover { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; color: var(--fg); }
.fd-filtro-p { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line); font-size: 13px; line-height: 16px; font-weight: 700;
  letter-spacing: .01em; }
.fd-filtro:hover .fd-filtro-p { background: var(--bg3); }
.fd-filtro-p b { padding: 0 6px; border-radius: 999px; background: var(--bg3); color: var(--muted); font-size: 10px;
  line-height: 15px; font-variant-numeric: tabular-nums; }
.fd-filtro-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--destaque); }
.fd-filtro.on .fd-filtro-p { background: var(--acao); border-color: var(--acao); color: var(--acao-fg);
  box-shadow: var(--fd-sombra-sm); }
.fd-filtro.on .fd-filtro-p b { background: var(--fd-balao-on); color: var(--acao-fg); }
.fd-filtro:focus-visible { outline: none; }
.fd-filtro:focus-visible .fd-filtro-p { outline: 2px solid var(--acao); outline-offset: 2px; }

/* títulos de seção: "Aprovar agora" e "Fila da equipe Total" */
.fd-aprovar { display: flex; flex-direction: column; gap: 8px; }
.fd-aprovar[hidden] { display: none; }
.fd-sec-t, .fd-fila-t { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 17px; line-height: 22px;
  font-weight: 700; letter-spacing: -.01em; color: var(--fg); }
.fd-sec-ico { display: inline-grid; color: var(--suave); }
.fd-sec-ico .ico { width: 20px; height: 20px; }
.fd-sec-t b { padding: 1px 8px; border-radius: 999px; background: var(--liberar-s); color: var(--liberar-fg);
  font-size: 11px; line-height: 16px; font-weight: 800; }
.fd-fila-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.fd-fila-t b { padding: 1px 8px; border-radius: 999px; background: var(--bg3); color: var(--muted); font-size: 11px;
  line-height: 16px; font-weight: 800; }
/* o cartão "A Maysa preparou" */
.fd-apr { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--bg2);
  border: 1px solid var(--line); box-shadow: var(--fd-sombra-sm); transition: opacity .2s ease, transform .2s ease; }
.fd-apr.saindo { opacity: 0; transform: translateX(28px); }
.fd-apr.fd-alvo { box-shadow: 0 0 0 3px var(--fd-alvo); }.fd-relogio { padding: 4px 10px; border-radius: 999px; background: var(--atencao-s); color: var(--amber); font-size: 11px;
  line-height: 14px; font-weight: 800; white-space: nowrap; }.fd-apr .fd-apr-ok { flex: none; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 10px; font-size: 13px; font-weight: 700; box-shadow: var(--fd-sombra-sm); }
.fd-apr-ok .ld-ico { width: 18px; height: 18px; }
.fd-apr-pe { display: flex; align-items: center; gap: 8px; }
.fd-apr-pe .fd-sec { flex: none; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .02em; }
/* "Descrições para o site" (22/10): o cartão do "Aprovar agora", com o texto inteiro para ler antes de aprovar */
.fd-desc-im { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.fd-desc-im:hover .fd-im-t { text-decoration: underline; }
.fd-desc-txt { margin: 0; max-height: 260px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--bg3);
  border: 1px solid var(--line); font-size: 13px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.fd-desc-motivo { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--atencao-s); color: var(--amber);
  font-size: 12px; font-weight: 700; }
.fd-apr .fd-apr-ok:disabled { opacity: .5; cursor: not-allowed; }
.fd-apr-pe .fd-sec .ico { width: 16px; height: 16px; }
.fd-desc-dica { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
@media (max-width: 480px) { .fd-desc-dica { display: none; } }.fd-hora { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); white-space: nowrap; }.fd-rot { margin: 0 0 6px; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.fd-rot .ico { width: 14px; height: 14px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-chip { padding: 4px 8px; border-radius: 6px; background: var(--bg3); color: var(--muted); font-size: 12px; line-height: 16px;
  font-weight: 500; }
.fd-chip-preco { color: var(--teal); font-weight: 600; }.fd-painel { display: flex; flex-direction: column; gap: 14px; }
.fd-painel:empty { display: none; }
.fd-painel-carregando { font-size: 12.5px; }
.fd-msg-portal { margin: 0; padding: 10px; border-left: 2px solid var(--acao); border-radius: 0 8px 8px 0;
  background: var(--bg3); font-size: 13px; line-height: 18px; font-style: italic; overflow-wrap: anywhere; }
/* 057: a prévia da primeira mensagem da Maysa — as quebras de linha do texto valem (vem escapado). */
.fd-iniciar-previa { margin: 0 0 12px; font-style: normal; white-space: pre-line; }
.fd-web-txt { min-height: 150px; }   /* a 1ª mensagem do corretor, editável (061) */
.fd-passo { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: var(--atencao-s);
  border: 1px solid var(--atencao-borda); }
.fd-passo-ico { flex: none; display: inline-grid; color: var(--amber); }
.fd-passo-ico .ico { width: 18px; height: 18px; }
.fd-passo-t { flex: 1; min-width: 0; margin: 0; font-size: 12px; line-height: 17px; overflow-wrap: anywhere; }
.fd-passo-r { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.fd-passo-t strong { font-weight: 600; }
.fd-passo-b, .fd-passo-b:hover { flex: none; min-height: 44px; padding: 0 12px; border-radius: 6px; background: var(--acao);
  border: 0; color: var(--acao-fg); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
.fd-passo-b:hover { background: var(--acao-hover); }
.fd-resumo-maysa { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 8px; background: var(--superficie-2); }
.fd-resumo-maysa .fd-rot { color: var(--suave); margin: 0; }
.fd-resumo-maysa p { margin: 0; font-size: 13px; line-height: 18px; overflow-wrap: anywhere; white-space: pre-wrap; }
.fd-resumo-maysa small { color: var(--muted); font-size: 11.5px; }
.fd-jornada { font-size: 12.5px; color: var(--fg); line-height: 1.45; overflow-wrap: anywhere; }
.fd-pronto { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sucesso-s);
  color: var(--green); font-size: 11px; font-weight: 800; }
.fd-hist { padding-top: 6px; border-top: 1px solid var(--line); }
.fd-ativ { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fd-ativ li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 17px; min-width: 0; }
.fd-ativ-h { flex: none; min-width: 40px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.fd-ativ-p { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--muted); }
.fd-ativ-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fd-ativ-q { font-weight: 600; }
.fd-ativ-maysa .fd-ativ-p { background: var(--suave); }
.fd-ativ-maysa .fd-ativ-q { color: var(--suave); }
.fd-ativ-cliente .fd-ativ-p { background: var(--acao-texto); }
.fd-ativ-corretor .fd-ativ-p { background: var(--sucesso); }
.fd-ativ-corretor .fd-ativ-q { color: var(--sucesso); }.fd-momento { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }.fd-momento .fd-acoes { padding: 0; }
.fd-momento .fd-frase { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0; }
.fd-momento .fd-acoes button { border-radius: 8px; font-size: 12.5px; }
.fd-momento.so-texto { gap: 2px; padding: 8px 10px; background: var(--bg3); border-color: transparent; }
.fd-momento.so-texto .fd-frase { font-weight: 500; }
.fd-ativ-x { display: inline-block; padding: 0 5px; border-radius: 999px; background: var(--bg3); color: var(--muted);
  font-size: 10.5px; font-weight: 800; }/* celular estreito: o robô sai para "Maysa atende" caber inteiro ao lado do ✓ e do ⋯ */
.fd-sec, .fd-sec:hover { background: var(--bg2); border: 1px solid var(--fd-borda-forte); color: var(--fg); }
.fd-sec:hover { background: var(--bg3); }/* o fim da lista */
.fd-fim { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 24px 12px 8px; border: 0; color: var(--muted); font-size: 13px; }
.fd-fim-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sucesso-s); color: var(--sucesso); }
.fd-fim-ico .ico { width: 22px; height: 22px; }
.fd-fim b { color: var(--fg); font-size: 14px; font-weight: 700; }
.fd-fim-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }

/* a folha "Gerar coleção" */
.fd-col-lista { display: flex; flex-direction: column; gap: 8px; }
.ld-folha label.fd-col-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--fg); font-weight: 400;
  cursor: pointer; }
.fd-col-item input[type=checkbox] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--acao); }
.fd-col-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.fd-col-txt b { font-variant-numeric: tabular-nums; color: var(--teal); }
.fd-col-txt span, .fd-col-txt small { overflow-wrap: anywhere; }
.fd-col-txt small { color: var(--muted); }
.fd-col-item .fd-score { flex: none; min-width: 34px; padding: 3px 6px; border-radius: 999px; background: var(--sucesso-s);
  color: var(--green); font-weight: 800; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fd-cartao, .fd-linha, .fd-apr, .fd-chev, .fd-linha::after { transition: none; }
  .fd-esq { animation: none; }
}

/* no celular os chips do Feed são ícone + número; o rótulo continua para o leitor de tela (06/10). No FIM do
   arquivo de propósito: a regra base da pílula vem antes e, com a mesma especificidade, ganharia daqui. */
@media (max-width: 600px) {
  .fd-filtro { position: relative; }     /* ancora o rótulo escondido: sem isto ele escapa da faixa e alarga a página */
  .fd-filtro-r { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fd-filtro-p { padding: 7px 11px; }
}

/* O telefone e o e-mail na linha aberta (06/10): para reconhecer o cliente que já fala com você no celular. */
/* "✓ Já atendido" (20/10): no celular estreito fica só o ✓ (o nome vai no aria-label) */

/* "Em andamento" (20/10): o retorno dos atendimentos, abaixo da fila de tarefas */
.fd-and { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fd-and[hidden] { display: none; }
.fd-and-ver { flex: none; min-height: 44px; padding: 0 4px; background: none; border: 0; box-shadow: none; font: inherit;
  font-weight: 700; color: var(--acao-texto); cursor: pointer; }
/* o cartão compacto e clicável (20/10): uma faixa de status com os sinais; ✋ na frente quando espera uma pessoa */
.fd-and-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--fd-sombra-sm); min-width: 0; cursor: pointer; }
.fd-and-item:hover { border-color: var(--acao-texto); }
.fd-and-item:focus-visible { outline: 2px solid var(--acao-texto); outline-offset: 2px; }
.fd-and-item.alerta { border-color: var(--destaque); border-left-width: 4px; }
/* a borda pelo estado da conversa (20/10): ✋ mão levantada · Maysa conversando · com a equipe */
.fd-and-item.st-mao { border-color: var(--destaque); border-width: 2px; border-left-width: 6px;
  background: var(--destaque-s); }
.fd-and-item.st-maysa { border-color: var(--suave); border-left-width: 4px; }
.fd-and-item.st-pessoa { border-color: var(--sucesso); border-left-width: 4px; }
.fd-and-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.fd-and-leg-i { display: inline-flex; align-items: center; gap: 6px; }
.fd-and-leg-i::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--line); }
.fd-and-leg-i.st-mao::before { background: var(--destaque); }
.fd-and-leg-i.st-maysa::before { background: var(--suave); }
.fd-and-leg-i.st-pessoa::before { background: var(--sucesso); }
/* "Finalizar" discreto no canto (20/10): um ✕ pequeno ao lado da hora; o 1º toque vira "Finalizar?" */
.fd-and-fim { flex: none; align-self: center; min-width: 24px; height: 24px; padding: 0 6px; margin-right: -4px;
  border-radius: 6px; border: 1px solid transparent; background: none; box-shadow: none; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; opacity: .7; }
.fd-and-fim:hover, .fd-and-fim:focus-visible { opacity: 1; color: var(--fg); border-color: var(--line); }
.fd-and-fim.conf { opacity: 1; color: var(--destaque); border-color: var(--destaque); background: var(--bg2); }
.fd-and-fim:disabled { opacity: .6; cursor: progress; }
.fd-and-mao { font-size: 18px; line-height: 1; }
.fd-and-sinal { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; font-size: 12px; min-width: 0; }
.fd-and-sinal b { font-size: 12px; font-weight: 700; line-height: 16px; overflow-wrap: anywhere; }
.fd-and-sinal small { font-size: 11px; color: var(--muted); }
.fd-sinal-alerta { background: var(--destaque-s); border-color: var(--destaque); }
.fd-sinal-alerta b { color: var(--destaque); }
.fd-sinal-visita { background: var(--sucesso-s); }
.fd-sinal-visita b { color: var(--sucesso); }
.fd-sinal-pessoa { background: var(--superficie-2); }
.fd-sinal-pessoa b { color: var(--suave); }
.fd-sinal-cliente { background: var(--acao-s); }
.fd-sinal-cliente b { color: var(--acao-texto); }
.fd-and-pe { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 081: a pergunta que a Maysa passou à equipe, com o campo de resposta — dentro do cartão, sem navegar */
.fd-and-pergs { display: flex; flex-direction: column; gap: 8px; cursor: default; }
.fd-and-perg { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px;
  background: var(--bg); border: 1px dashed var(--destaque); }
.fd-and-perg-t { margin: 0; font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
.fd-and-perg-t small { color: var(--muted); font-size: 11px; }
/* 086: fora da janela de 24 h — a Maysa não manda; a resposta fica anotada */
.fd-and-perg-fora { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.fd-and-perg-r { width: 100%; box-sizing: border-box; min-height: 56px; resize: vertical; font: inherit; font-size: 14px; }
.fd-and-perg-b { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-and-perg-b button { min-height: 44px; }
.fd-and-ult { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fd-and-ult b { color: var(--fg); font-weight: 600; }
.fd-and-ir { flex: none; min-height: 32px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--acao-texto); text-decoration: none; }
.fd-and-l1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.fd-and-nome { font-weight: 700; font-size: 15px; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.fd-and-nome:hover { text-decoration: underline; }
.fd-and-l1 .fd-hora { margin-left: auto; }
.fd-and-sub { margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.fd-and-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fd-and-etapa, .fd-and-conv { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--bg3); color: var(--fg); overflow-wrap: anywhere; }
.fd-and-maysa { background: var(--superficie-2); color: var(--suave); }
.fd-and-pausada { background: var(--destaque-s); color: var(--destaque); }
.fd-and-respondeu { background: var(--acao-s); color: var(--acao-texto); }
.fd-and-pessoa { background: var(--sucesso-s); color: var(--sucesso); }
.fd-atualizar { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.fd-atualizar:disabled { opacity: .6; cursor: progress; }

/* "Ocultar Combina" (20/10): o ícone sozinho seria o mesmo do chip Combina — o rótulo fica visível também no celular */
@media (max-width: 600px) {
  .fd-oculta .fd-filtro-r { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.fd-and-cab { flex-wrap: wrap; row-gap: 6px; }

/* ══ O post (redesign da Rede, plan/32) ═══════════════════════════════════════
 * Um lead = um post, como no Instagram: cabeçalho de 52 px, a foto 4:3 de ponta a ponta, WhatsApp · Maysa · ✓
 * e a legenda. Cartão branco; quem colore é a foto. No celular o post encosta nas bordas; no computador é uma
 * coluna de até 560 px. Cor só por token semântico. */
.fd-lista:has(.fp-post) { display: flex; flex-direction: column; gap: 12px; }
.fp-post { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 560px; margin: 0 auto; }
.fp-post.saindo { opacity: 0; transform: translateX(-24px); transition: opacity .2s ease, transform .2s ease; }
.fp-cab { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 4px 4px 14px; }
.fp-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fp-quem b { font-size: 14px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-quem small { font-size: 12px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-mais { min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--suave); }
.fp-mais:hover { background: var(--superficie-2); }
.fp-midia { position: relative; aspect-ratio: 4 / 3; background: var(--superficie-2); overflow: hidden; }
.fp-midia > img, .fp-car > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-car { width: 100%; height: 100%; }
.fp-midia-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: var(--texto); font-weight: 700; font-size: 20px; line-height: 1.3; }
.fp-pill { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--etiqueta-foto-fundo); color: var(--sobre-foto);
  font-size: 11px; font-weight: 600; }
.fp-pill.destaque::before, .fp-pill.acao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.fp-pill.destaque::before { background: var(--destaque); }
.fp-pill.acao::before { background: var(--sobre-foto); }
.fp-acoes { display: flex; align-items: center; gap: 8px; padding: 12px 14px 2px; }
.fp-acoes > button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fp-whats { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
.fp-maysa { flex: 0 1 auto; padding: 0 12px; white-space: nowrap; }
.fp-imovel-acoes .fp-acoes { flex-wrap: wrap; }
.fp-maysa[aria-disabled="true"] { opacity: .55; }
.fp-ja { min-width: 44px; padding: 0 12px; }
.fp-legenda { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 14px; color: var(--texto); }
.fp-legenda p { margin: 0; font-size: 14px; line-height: 1.45; }
.fp-viu { color: var(--suave); font-size: 13px; }
.fp-trecho { color: var(--suave); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.fp-legenda .fp-hora { font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.fp-suave { color: var(--suave); font-size: 13px; margin: 0; }
.fp-imovel-acoes { padding: 0 0 12px; border: 0; background: transparent; }
.fp-carteira { height: 100%; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--superficie); }
.fp-carteira-t { margin: 0; font-weight: 700; color: var(--texto); }
.fp-carteira-lista { display: flex; flex-direction: column; gap: 10px; }
.fp-mini { display: grid; grid-template-columns: 56px 1fr; gap: 6px 10px; align-items: center; }
.fp-mini img, .fp-mini-sem { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--superficie-2); }
.fp-mini b { display: block; font-size: 13px; color: var(--texto); }
.fp-mini small { font-size: 12px; color: var(--suave); }
.fp-mini button { grid-column: 1 / -1; min-height: 44px; }
@media (max-width: 600px) {
  .fp-post { border-radius: 0; border-left: 0; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .fp-post.saindo { transition: none; } }

/* ══ "Pedem você" (redesign, plan/32): o antigo "Em andamento" ═══════════════
 * Cards que se resolvem no lugar; a cor de urgência (--destaque) marca quem espera: o anel do story e o motivo. */
.pv-topo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--superficie);
  border: 1px solid var(--linha); color: var(--suave); font-size: 13px; font-weight: 600; }
.pv-chip.on { background: var(--acao); border-color: var(--acao); color: var(--acao-fg); }
.pv-chip b { font-weight: 800; }
.pv-card { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--destaque);
  border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pv-cab { display: flex; align-items: center; gap: 10px; }
.pv-av { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--destaque-s); color: var(--destaque); font-weight: 800; font-size: 13px; flex: none; }
.pv-quem { display: flex; flex-direction: column; min-width: 0; }
.pv-quem b { color: var(--texto); font-size: 14px; }
.pv-quem small { color: var(--suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-corpo { border: 0; padding: 0; background: transparent; }
.pv-motivo { margin: 0; font-weight: 700; color: var(--texto); font-size: 15px; line-height: 1.35; }
.pv-balao { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--superficie-2); color: var(--texto);
  font-size: 14px; align-self: flex-start; max-width: 90%; }
.pv-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-acoes > button, .pv-acoes > span > button { min-height: 44px; }
.pv-vazio { display: flex; flex-direction: column; gap: 4px; padding: 24px 12px; text-align: center; color: var(--suave); }
.pv-vazio b { color: var(--texto); }
.pv-feitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-feito { padding: 10px 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha);
  color: var(--texto); font-size: 14px; }
.pv-feito small { color: var(--suave); }
.pv-feito q { display: block; margin-top: 4px; color: var(--suave); font-style: italic; }
.pv-folha .pv-card { border-left-width: 0; border: 0; padding: 0; margin: 0; }
.pv-folha .pv-motivo { font-size: 22px; line-height: 1.25; }
/* os stories: só no celular (no PC a coluna "Pedem você" está à vista) */
.pv-stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.pv-stories::-webkit-scrollbar { display: none; }
.pv-story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent;
  padding: 0; min-height: 44px; min-width: 64px; color: var(--texto); }
.pv-anel { width: 60px; height: 60px; border-radius: 50%; padding: 3px; background: var(--destaque); display: grid; }
.pv-anel .fd-av-ini { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); border: 2px solid var(--superficie); color: var(--texto); font-weight: 800; }
.pv-story-n { font-size: 12px; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1180px) { .pv-stories-w { display: none; } }

.fp-link { align-self: flex-start; min-height: 44px; padding: 0; background: transparent; color: var(--suave);
  font-size: 13px; font-weight: 600; }
.fp-link:hover { color: var(--acao-texto); }
.fd-conversas { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px;
  color: var(--texto); border-radius: 50%; }
.fd-conversas .ld-ico { width: 24px; height: 24px; }
.fd-conversas b { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--contador); color: var(--acao-fg); font-size: 10px; display: grid; place-items: center; }