/*
 * AITSAP · Web (3 abas em Hotwire). Componentes + animações.
 * A linguagem visual do produto é o LEDGER 🟢🟡🔵 (procedência).
 */

/* ── Shell + tab-rail ─────────────────────────────────────────────────── */
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 68px 1fr;
}
.tabrail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) 0;
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border);
}
.tabrail__brand {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff; font-weight: 800; font-size: 1.1rem;
  margin-bottom: var(--space-md);
}
.tabrail__link {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.tabrail__link svg { width: 24px; height: 24px; }
.tabrail__link:hover { background: var(--color-bg-hover); color: var(--color-text); }
.tabrail__link.is-active { color: var(--color-primary); background: var(--color-bg-hover); }
.tabrail__link.is-active::before {
  content: ""; position: absolute; left: -0px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 2px; background: var(--color-primary);
  left: 0;
}
.tabrail__label { font-size: .62rem; margin-top: 2px; }
.tabrail__spacer { flex: 1; }

.app__main { min-width: 0; }

/* ── Flashes ──────────────────────────────────────────────────────────── */
#flashes { position: fixed; top: var(--space-lg); right: var(--space-lg); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); }

/* ── Conversas: 2 colunas (inbox + thread num frame) ──────────────────── */
.cx {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  height: 100dvh;
}
.cx__inbox {
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-lg);
  background: var(--color-bg);
}
.cx__inbox-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.cx__inbox-head h1 { font-size: 1.4rem; margin: 0; }
.cx__inbox-title { display: flex; align-items: baseline; gap: var(--space-sm); min-width: 0; }
.cx__new {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  font-size: 1.4rem; line-height: 1; font-weight: 400;
  border-radius: var(--radius-full);
}

/* Linha VIVA do inbox — história + contadores count-up (sobe no broadcast). */
.inbox-live { display: flex; flex-direction: column; gap: var(--space-sm); }
.inbox-live__story {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.inbox-live__story strong { color: var(--color-text); font-size: .95rem; }
.inbox-live__sep { color: var(--color-text-faded); }
.inbox-live__counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.inbox-live__count {
  padding: var(--space-sm); border-radius: var(--radius-md);
  background: var(--color-bg-card); border: 1px solid var(--color-border); text-align: center;
}
.inbox-live__num { font-size: 1.5rem; font-weight: 800; display: block; line-height: 1.1; }
.inbox-live__label {
  font-size: .68rem; color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
/* ── DIGEST DIÁRIO — o dividendo, 1x/dia, no topo. O fio --prov-blue é SOTAQUE
   ("meu agente resumindo"), não procedência: sem tick/anel/selo. Entra assentando
   de cima (digestIn, família do presenceBandIn); recua ao dispensar. ───────── */
.digest {
  position: relative;
  padding: var(--space-md); padding-right: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--prov-blue);
  display: flex; flex-direction: column; gap: var(--space-sm);
  animation: digestIn var(--dur-base) var(--ease-spring) both;
}
.digest--leaving {
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur-quick) var(--ease-enter),
              transform var(--dur-quick) var(--ease-enter);
}
.digest__dismiss {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 4px;
  color: var(--color-text-faded); border-radius: var(--radius-sm);
  transition: color var(--dur-quick) var(--ease-standard);
}
.digest__dismiss:hover { color: var(--color-text-muted); }
.digest__voice { display: block; }
.digest__phrase {
  margin: 0; font-size: .95rem; line-height: 1.4; color: var(--color-text);
  animation: fadeInUp var(--dur-base) var(--ease-enter) 80ms both;
}
.digest__counts { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.digest__count { display: flex; align-items: baseline; gap: 6px; }
.digest__num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.digest__label {
  font-size: .68rem; color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}

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

.cx__thread { min-width: 0; height: 100dvh; display: flex; flex-direction: column; }

/* Grupos de triagem */
.group__head {
  display: flex; align-items: center; gap: var(--space-sm);
  width: 100%; text-align: left;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-muted);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  background: none; border: none;
}
.group__head[aria-expanded] { cursor: pointer; }
.group__count {
  margin-left: auto;
  min-width: 22px; padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-bg-hover);
  color: var(--color-text-muted);
  font-size: .72rem; font-weight: 700; text-align: center;
}
.group__body { display: flex; flex-direction: column; gap: var(--space-sm); overflow: hidden; }
/* "Aguardando o outro" — 3º balde da triagem, calmo (você já fez a sua parte). */
.group--muted .group__head { color: var(--color-text-faded); }
.group--muted .decision { border-left-color: var(--prov-green); }
.group__body.is-collapsed { max-height: 0; }
.group__empty { padding: var(--space-sm); color: var(--color-text-faded); font-size: .85rem; }

/* Card de conversa */
.conv-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "who tick" "preview preview";
  gap: 4px var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.conv-card:hover { border-color: var(--color-border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.conv-card__who { grid-area: who; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.conv-card__avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--color-bg-hover); color: var(--color-text-muted);
  font-size: .75rem; font-weight: 700;
}
.conv-card__handle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-card__tick { grid-area: tick; align-self: center; }
.conv-card__preview {
  grid-area: preview; margin: 0;
  color: var(--color-text-muted); font-size: .88rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-card--needs_you { border-left: 3px solid var(--color-primary); }

/* Pill do modo */
.pill {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: var(--radius-full);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  background: var(--color-bg-hover); color: var(--color-text-muted);
}
.pill--mediado { background: var(--prov-yellow-soft); color: var(--prov-yellow); }
.pill--agente_a_agente { background: var(--prov-blue-soft); color: var(--prov-blue); }

/* ── Thread ───────────────────────────────────────────────────────────── */
.thread__header {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-card);
}
.thread__header h2 { margin: 0; font-size: 1.05rem; }
/* autonomy_level em frase PT-BR (empurra pra direita no header da thread). */
.thread__autonomy {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  color: var(--color-text-muted);
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--color-bg-hover); white-space: nowrap;
}
.thread__list {
  flex: 1; overflow-y: auto;
  padding: var(--space-lg);
  display: flex; flex-direction: column;
  position: relative;
  /* A 1ª bolha DESLIZA sob os cards ancorados (decisão/combinado) num fade
     suave em vez de cortar seco na borda — mata a sensação de "encostar/decepar
     a 1ª mensagem". Estático (não é movimento): não precisa de reduced-motion. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-md));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-md));
}
.thread__msgs { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); }
.agent__msgs { display: flex; flex-direction: column; gap: var(--space-sm); }
.thread__scroll-pill {
  position: sticky; bottom: var(--space-sm); align-self: center;
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; font-size: .8rem; cursor: pointer; border: none;
  box-shadow: var(--shadow-md);
}

/* Balão de mensagem */
.msg { max-width: 70%; align-self: flex-start; position: relative; }
.msg--mine { align-self: flex-end; }
.msg__bubble {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
}
.msg__bubble p { margin: 0; }
.msg--verde   .msg__bubble { border-left-color: var(--prov-green); }
.msg--amarelo .msg__bubble { border-left-color: var(--prov-yellow); background: var(--prov-yellow-soft); }
.msg--azul    .msg__bubble { border-left-color: var(--prov-blue);   background: var(--prov-blue-soft); }
.msg--mine .msg__bubble { background: var(--color-primary); color: #fff; border-color: transparent; }
.msg--mine.msg--verde .msg__bubble { border-left-color: rgba(255,255,255,.6); }
/* Procedência visível TAMBÉM nos seus balões 🟡/🔵 (o agente agiu por você):
   mantém alinhamento à direita, restaura borda-esquerda colorida + tingimento sutil. */
.msg--mine.msg--amarelo .msg__bubble {
  background: var(--prov-yellow-soft); color: var(--color-text);
  border-color: var(--color-border); border-left-color: var(--prov-yellow);
}
.msg--mine.msg--azul .msg__bubble {
  background: var(--prov-blue-soft); color: var(--color-text);
  border-color: var(--color-border); border-left-color: var(--prov-blue);
}
.msg__meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; padding: 0 var(--space-xs);
  font-size: .72rem; color: var(--color-text-faded);
}
.msg--mine .msg__meta { justify-content: flex-end; }
.msg__intent { font-style: italic; }
/* Folga pro topo do balão não colar no card a-a / divisor de intenção. */
.msg { scroll-margin-top: var(--space-md); }

/* ── REAÇÕES — um toque humano 🟢 sob a bolha ─────────────────────────────
   Chips discretos (emoji + contagem; o MEU destacado); mini-picker no
   segurar/hover. NÃO é procedência — é calor, não risco. */
.msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding: 0 var(--space-xs); }
.msg__reactions:empty { display: none; }            /* não polui quando ninguém reagiu */
.msg--mine .msg__reactions { justify-content: flex-end; }

.reaction-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-bg-card);
  font-size: .78rem; color: var(--color-text-muted); cursor: pointer;
  transition: transform var(--dur-instant) var(--ease-standard),
              background var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard);
}
.reaction-chip:hover { background: var(--color-bg-hover); }
.reaction-chip:active { transform: scale(.94); }
.reaction-chip__emoji { font-size: .92rem; line-height: 1; }
.reaction-chip__count { font-weight: 700; font-variant-numeric: tabular-nums; }
/* o MEU destaque — o verde do toque SEU (🟢), sem virar tique de procedência. */
.reaction-chip--mine { border-color: var(--prov-green); background: var(--prov-green-soft); color: var(--prov-green); }

/* Gatilho "＋": aparece no hover/focus, flutua ao lado da bolha. */
.msg__react-add {
  position: absolute; top: 50%; z-index: 2;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--color-bg-card); color: var(--color-text-muted);
  font-size: .95rem; cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(-50%);
  transition: opacity var(--dur-quick) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}
.msg--theirs .msg__react-add { right: -32px; }
.msg--mine   .msg__react-add { left: -32px; }
.msg:hover .msg__react-add, .msg:focus-within .msg__react-add { opacity: 1; pointer-events: auto; }
.msg__react-add:hover  { color: var(--color-primary); transform: translateY(-50%) scale(1.08); }
.msg__react-add:active { transform: translateY(-50%) scale(.94); }

/* Mini-picker (a allowlist curta) — flutua acima da bolha. Só some/aparece pelo
   atributo `hidden` (o :not evita que o display:flex do autor vença o UA display:none). */
.reaction-picker:not([hidden]) {
  position: absolute; z-index: 6; top: -6px; transform: translateY(-100%);
  display: flex; gap: 2px; padding: 4px;
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
}
.msg--theirs .reaction-picker { left: 0; }
.msg--mine   .reaction-picker { right: 0; }
.reaction-picker__btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 4px; border-radius: var(--radius-full);
  transition: transform var(--dur-instant) var(--ease-spring), background var(--dur-instant) var(--ease-standard);
}
.reaction-picker__btn:hover  { transform: scale(1.25); background: var(--color-bg-hover); }
.reaction-picker__btn:active { transform: scale(.9); }
/* #5 — micro-etiqueta de RISCO: 🟡○ = ninguém releu o texto final. É o único
   eixo (risco) que a thread precisa gritar; o resto é a cor + o card. */
.msg__risk {
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--prov-yellow-ink);
  padding: 0 5px; border-radius: var(--radius-full);
  background: var(--prov-yellow-soft);
}

/* #7 — intenção ditada, 1× por conversa (divisor), no lugar de repetir em cada
   bolha âmbar. */
.thread__intent {
  align-self: center; margin: 0 0 var(--space-xs);
  padding: 3px 12px; border-radius: var(--radius-full);
  background: var(--prov-yellow-soft); color: var(--prov-yellow-ink);
  font-size: .74rem; font-style: italic; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
}

/* ── LINHA D'ÁGUA (F6): o passado importado (sem procedência) ──────────────
   Bolha NEUTRA — sem hue de ledger, levemente recuada (é história, não o agora).
   O ponto do tique é CINZA vazado: o AITSAP não estava lá pra atestar. */
.msg--imported .msg__bubble {
  border-left-color: var(--color-border-strong);
  background: var(--color-bg-card);
  opacity: .82;
}
.msg--mine.msg--imported .msg__bubble {
  background: var(--color-bg-hover); color: var(--color-text);
  border-color: var(--color-border); border-left-color: var(--color-border-strong);
}
.tick--imported { background: transparent; color: var(--color-text-faded); }

/* O divisor "daqui pra baixo, com procedência": marca onde o histórico cinza
   termina e o presente colorido começa. Régua fina com rótulo centrado. */
.thread__waterline {
  align-self: stretch; display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-sm) 0;
  color: var(--color-text-faded); font-size: .72rem; letter-spacing: .01em;
}
.thread__waterline::before, .thread__waterline::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--color-border);
}
.thread__waterline-label { white-space: nowrap; font-style: italic; }

/* Balão typing */
.typing { display: inline-flex; align-items: center; gap: var(--space-sm); }
.typing__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-text-faded); display: inline-block; margin: 0 1px;
}
.typing__label { font-size: .8rem; color: var(--color-text-muted); }

/* ── O tiquezinho (LEDGER v2: cor + anel + selo) ───────────────────────── */
.tick-wrap { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.tick { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-sizing: border-box; position: relative; flex: 0 0 auto; }
.tick--sm { width: 8px; height: 8px; }
/* COR = quanto de humano nas palavras (hue = provenance). currentColor guia o anel. */
.tick--verde   { background: var(--prov-green);  color: var(--prov-green); }
.tick--amarelo { background: var(--prov-yellow); color: var(--prov-yellow); }
.tick--azul    { background: var(--prov-blue);   color: var(--prov-blue); }
/* ANEL: cheio ● (um humano conferiu o texto final) vs. vazado ○ (ninguém releu — cuidado). */
.tick--full { background-color: currentColor; }
.tick--ring { background: transparent; border: 2px solid currentColor; }
/* SELO ⚯/◍ = com quem foi a conversa (glifo mono, nunca cor). */
.tick-seal { margin-left: 2px; font-size: .8em; line-height: 1; color: var(--color-text-muted); font-family: var(--font-body); }

/* ── Composer ─────────────────────────────────────────────────────────── */
.composer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-card);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.composer__row { display: flex; gap: var(--space-sm); align-items: flex-end; }
.composer textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 180px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); color: var(--color-text); font-family: inherit; font-size: 1rem;
}
.composer textarea:focus { outline: none; border-color: var(--color-primary); }
.composer__hint { margin: 0; font-size: .76rem; color: var(--color-text-faded); }
.composer__hint .tick { vertical-align: middle; }
/* #8 — legenda única de 3 itens (os 3 eixos da cor), concisa. */
.composer__legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.composer__legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* Botão contextual "Peça pro agente" (🟡) — não encolhe, não quebra o texto. */
.composer__agent { flex: 0 0 auto; white-space: nowrap; }

/* ── Agente ───────────────────────────────────────────────────────────── */
.agent { display: flex; flex-direction: column; height: 100dvh; }
.agent__head { padding: var(--space-lg) var(--space-xl) var(--space-md); border-bottom: 1px solid var(--color-border); }
.agent__head h1 { margin: 0 0 4px; font-size: 1.5rem; }
/* KPI cards — mesma linguagem dos tiles do "Resumo do dia" (card/borda/contador). */
.agent-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); padding: var(--space-lg) var(--space-xl); }
.kpi {
  padding: var(--space-md); border-radius: var(--radius-md);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.kpi__num { font-size: 2rem; font-weight: 800; line-height: 1; display: block; }
.kpi__num--blue { color: var(--prov-blue); }
.kpi__label { color: var(--color-text-muted); font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }

/* Skeleton do frame lazy + estado de erro */
.kpi--skeleton { gap: var(--space-sm); }
.skeleton-bar { display: block; border-radius: var(--radius-sm); background: var(--color-bg-hover); position: relative; overflow: hidden; }
.skeleton-bar--num { height: 2rem; width: 55%; }
.skeleton-bar--label { height: .8rem; width: 80%; }
.skeleton-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(127,127,127,.14), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.agent-dash__error {
  margin: var(--space-lg) var(--space-xl); padding: var(--space-lg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-card);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm);
  color: var(--color-text-muted);
}
@media (prefers-reduced-motion: reduce) { .skeleton-bar::after { animation: none; } }
.agent__chat { flex: 1; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--color-border); }
.agent__thread { flex: 1; overflow-y: auto; padding: var(--space-lg) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.cmd-msg { max-width: 78%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); }
.cmd-msg--user { align-self: flex-end; background: var(--color-primary); color: #fff; }
.cmd-msg--agent { align-self: flex-start; background: var(--prov-blue-soft); border-left: 3px solid var(--prov-blue); }
.agent__composer { padding: var(--space-md) var(--space-xl); border-top: 1px solid var(--color-border); }
.agent__composer input {
  width: 100%; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-bg-elevated); color: var(--color-text); font-size: 1rem;
}
.agent__composer input:focus { outline: none; border-color: var(--color-primary); }

/* ── Você (perfil / persona) ──────────────────────────────────────────── */
.profile { max-width: 640px; margin: 0 auto; padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); }
.profile h1 { margin: 0; }
.handle-status { font-size: .82rem; margin-top: 4px; min-height: 1.1em; }
.handle-status--ok { color: var(--prov-green); }
.handle-status--taken, .handle-status--bad { color: var(--color-danger); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-bg-card);
  font-size: .85rem; cursor: pointer;
}
.chip input { position: absolute; opacity: 0; }
.chip:has(input:checked) { border-color: var(--color-primary); background: var(--color-bg-hover); color: var(--color-primary); }
.slider-row { display: flex; flex-direction: column; gap: var(--space-xs); }
.slider-row input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.slider-row output { font-weight: 700; color: var(--color-primary); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.badge-saved {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--prov-green-soft); color: var(--prov-green); font-size: .78rem; font-weight: 700;
}
.prov-legend { display: flex; flex-direction: column; gap: var(--space-xs); font-size: .82rem; color: var(--color-text-muted); }
.prov-legend > div { display: flex; align-items: center; gap: var(--space-sm); }
/* 4 cartões de exemplo abaixo da legenda (LEDGER_V2.md §3). */
.prov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.prov-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2, transparent); font-size: .8rem; color: var(--color-text-muted); }
/* Tema + Sair vivem no rail no desktop; a aba Você só os expõe no mobile. */
.you-actions { display: none; }
.you-actions__row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.you-actions__row form { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM — o movimento NARRA a delegação (tokens em application.css §2).
   Catálogo nomeado (§3). Reduced-motion específico logo abaixo (§4).
   ══════════════════════════════════════════════════════════════════════════ */

/* 3.1 — CHEGADA DE BALÃO (agente vs. seu). Direção = autoria. */
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.msg { animation: msgIn var(--dur-base) var(--ease-enter); }
.msg--mine { animation-name: msgInRight; }
@keyframes msgInRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* O balão 🔵 (só-o-agente) ASSENTA em vez de chegar: sem translate lateral e
   10ms mais devagar — o corpo sente que veio de fora, não de você. */
@keyframes msgSettle { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.msg--azul { animation-name: msgSettle; animation-duration: 250ms; }

/* Tique — só se move no NASCIMENTO (3.2/3.3). Em repouso é um fato quieto. */
@keyframes tickPulse { 0% { transform: scale(.6); opacity: .4; } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.tick--pulse { animation: tickPulse var(--dur-story) var(--ease-enter); }
/* "eco" de anel só no azul — a onda que sai do tique (a testemunha). */
@keyframes tickRing { 0% { box-shadow: 0 0 0 0 var(--prov-blue); } 100% { box-shadow: 0 0 0 10px transparent; } }
.msg--azul .tick--pulse { animation: tickPulse var(--dur-story) var(--ease-enter), tickRing 700ms var(--ease-enter); }

/* 3.2 — O ANEL FECHANDO ○→● quando VOCÊ avaliza (o coração do produto).
   spring: o overshoot é o peso da sua responsabilidade — o gesto-VOCÊ (P3). */
@keyframes ringFill {
  0%   { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; transform: scale(.9); }
  60%  { background-color: currentColor; box-shadow: inset 0 0 0 0 currentColor; transform: scale(1.28); }
  100% { background-color: currentColor; box-shadow: inset 0 0 0 0 currentColor; transform: scale(1); }
}
.msg--amarelo .tick--full.tick--pulse { animation: ringFill 520ms var(--ease-spring); }

/* 3.3 — A COR NASCE do tique pra fora (P2): o balão monta cinza e a cor VAZA.
   Sequenciada: a onda (tickRing) sai do tique ANTES da borda tingir (~80ms). */
@keyframes colorBleed {
  0%   { border-left-color: var(--color-border-strong); background: var(--color-bg-card); }
  100% { border-left-color: var(--prov-blue); background: var(--prov-blue-soft); }
}
.msg--azul .msg__bubble { animation: colorBleed var(--dur-settle) var(--ease-enter) 80ms both; }

/* 3.4 — O SELO ⚯ sendo CUNHADO quando o card a-a resolve (não fade: cunhagem).
   spring: "isto agora é permanente, não editável" (disparado por seal_mint). */
@keyframes sealMint {
  0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.decision__seal--minting { animation: sealMint var(--dur-story) var(--ease-spring); }

/* 3.7 — TYPING dos bastidores. Onda normal (ansiedade) vs. a-a azul (alívio). */
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing__dots span { animation: dot 1s infinite; }
.typing__dots span:nth-child(2) { animation-delay: .15s; }
.typing__dots span:nth-child(3) { animation-delay: .30s; }
/* a-a: os DOIS agentes acertando sozinhos — pontos azuis dizem "não precisa de você". */
.typing--aa .typing__dots span { background: var(--prov-blue); }
.typing--aa .typing__label { color: var(--prov-blue); }

/* 3.8 — COUNT-UP: quando muda por broadcast, o card registra "isto mudou agora". */
@keyframes countBump { 0% { transform: translateY(0); } 40% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
.count-bump { animation: countBump var(--dur-instant) var(--ease-standard); }

/* 3.13 — REAÇÃO nasce POPando (spring): o toque humano tem peso (P3 — é SEU).
   O contador reusa countBump ao mudar; o picker abre suave (a máquina revela). */
@keyframes reactionPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.reaction-chip--pop { animation: reactionPop var(--dur-story) var(--ease-spring); }
@keyframes pickerIn { from { opacity: 0; transform: translateY(-100%) scale(.85); } to { opacity: 1; transform: translateY(-100%) scale(1); } }
.reaction-picker.is-open { animation: pickerIn var(--dur-quick) var(--ease-spring); }

/* 3.9 — TABS: a barra VIAJA da aba antiga pra nova (é o mesmo lugar, outro
   cômodo). Indicador gerido pelo tab_controller; ::before é o fallback sem JS. */
.tabrail.js-indicator .tabrail__link.is-active::before { display: none; }
.tabrail__indicator {
  position: absolute; left: 0; width: 3px; height: 22px; border-radius: 2px;
  background: var(--color-primary); opacity: 0; pointer-events: none;
}
.tabrail.js-indicator .tabrail__indicator { opacity: 1; }
/* conteúdo da aba entra com fadeInUp curto (8px). */
@keyframes tabContentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.app__main.is-entering > * { animation: tabContentIn var(--dur-quick) var(--ease-enter); }

/* 3.10 — PRESS: o afundar-no-clique dos botões de AÇÃO-VOCÊ (registrei sua mão). */
.btn:active,
.decision__form button:active,
.composer button:active,
.agent__composer button:active { transform: scale(.97); transition: transform var(--dur-instant) var(--ease-standard); }

/* 3.11 — EMPTY-STATE que RESPIRA (a única exceção ao P4: o vazio é o produto
   funcionando). Só o ícone, ciclo lento de 4s — quase subliminar, nunca ansioso. */
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.03); opacity: 1; } }
.empty-state--breathing .empty-state__icon,
.empty-state__icon--breathing { animation: breathe 4s ease-in-out infinite; }

/* 3.12 — "NÃO REVISTO" pulsa UMA vez (o único alerta de risco; um pulso, não
   um piscar contínuo — chama atenção sem virar alarme de carro). */
@keyframes riskPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); background: color-mix(in srgb, var(--prov-yellow-soft), white 30%); }
  100% { transform: scale(1); }
}
.msg__risk--new { animation: riskPulse var(--dur-story) var(--ease-spring) 1; }

@keyframes cardShift { from { opacity: .3; transform: scale(.98); } to { opacity: 1; transform: none; } }
.conv-card--shifting { animation: cardShift var(--dur-base) var(--ease-standard); }

/* 3.6 — o card DESLIZA de um balde pro outro (FLIP real: flip_controller
   inverte o delta e solta a transição). Jóia — só lê os --dur-settle do token. */
.decision--flip { transition: transform var(--dur-settle) var(--ease-enter); will-change: transform; }

/* ── MODO PRESENÇA ─────────────────────────────────────────────────────────
   Presença é SERENA, não urgente — a diferença sensorial entre "ela está aqui"
   e "ela está digitando". O dot RESPIRA devagar (~2s), nunca o blink do typing. */
.thread__present { display: contents; } /* não quebra o flex-column da thread */

/* wrapper display:contents não gera caixa. */
.thread__presence-slot { margin-left: auto; display: inline-flex; align-items: center; }

/* Sinal vivo "@x está aqui" (troca a frase-de-máquina no header do OUTRO). */
.thread__presence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; color: var(--prov-blue);
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--prov-blue-soft); white-space: nowrap;
}

/* O dot calmo (header + inbox). Respiração lenta, opacidade .55↔1. */
.presence-dot {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%;
  background: var(--prov-blue);
  animation: presenceBreath 2s var(--ease-standard) infinite;
}

/* Inbox: pontinho de presença sobreposto ao avatar do card. */
.conv-card__avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.conv-card__presence {
  position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px;
  box-shadow: 0 0 0 2px var(--color-bg-card);
}

/* Faixa "você está no comando" — display LOCAL (presence_controller). */
.presence-band {
  align-self: stretch; margin: 0;
  padding: var(--space-xs) var(--space-lg);
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  background: var(--prov-blue-soft); color: var(--prov-blue);
  border-bottom: 1px solid var(--color-border);
}
/* ENTRADA — você agarra o volante: overshoot (spring). */
.presence-band--live { animation: presenceBandIn var(--dur-base) var(--ease-spring) both; }
/* SAÍDA — "seu agente reassumiu": crossfade calmo (settle) antes de sumir. */
.presence-band--reassumed { animation: presenceBandReassume var(--dur-settle) var(--ease-enter) both; }

/* A COLEIRA — anel fino em volta da frase-de-autonomia do agente. Em repouso é
   invisível; quando VOCÊ assume, RELAXA (○ dessatura, sem overshoot: a máquina
   cedendo, calma e inevitável). Reusa o vocabulário de anel do tique (ringFill),
   ao contrário. */
.agent-leash { transition: filter var(--dur-story) var(--ease-enter); }
.agent-leash--slack { animation: leashSlack var(--dur-story) var(--ease-enter) both; filter: saturate(.4); }
/* Pulso ONE-SHOT ao trocar a autonomia (1-toque): reusa leashSlack sem prender
   o estado dessaturado (isso é do presence). Some no animationend. */
.agent-leash--pulse { animation: leashSlack var(--dur-story) var(--ease-enter); }

@keyframes presenceBreath { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes presenceBandIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes presenceBandReassume { from { opacity: 1; } 60% { opacity: 1; } to { opacity: .35; } }
/* coleira afrouxando: o anel azul ● abre pra ○ (box-shadow expande e some). */
@keyframes leashSlack { from { box-shadow: 0 0 0 0 var(--prov-blue); } to { box-shadow: 0 0 0 6px transparent; } }

/* ── §4 — REDUCED-MOTION: movimento pode desligar; PROCEDÊNCIA nunca. ──────
   O estado-final de cor/anel/selo aparece imediatamente (é informação). */
@media (prefers-reduced-motion: reduce) {
  /* Presença: dot/coleira/faixa param — o SINAL (cor + texto) permanece. */
  .presence-dot, .agent-leash--slack, .agent-leash--pulse,
  .presence-band--live, .presence-band--reassumed { animation: none !important; }
  /* 3.1 chegada: sem translate/scale, só fade de opacity curto. */
  .msg { animation: none !important; }
  /* 3.2 anel / 3.3 cor / 3.4 selo: sem punch/bleed/cunhagem — estado final direto. */
  .tick--pulse, .msg--amarelo .tick--full.tick--pulse, .msg--azul .tick--pulse,
  .msg--azul .msg__bubble, .decision__seal--minting { animation: none !important; }
  /* 3.5 card / 3.6 FLIP: sem fold nem deslize (o flip_controller já se guarda). */
  .decision, .decision--flip, .conv-card--shifting { animation: none !important; transition: none !important; }
  /* 3.7 typing: pontos estáticos visíveis (o sinal permanece). */
  .typing__dots span { animation: none !important; }
  /* 3.8 count-up: sem bump. 3.9 tabs: sem fade de conteúdo. */
  .count-bump, .app__main.is-entering > * { animation: none !important; }
  /* 3.13 reação: chip/picker aparecem já no estado final (sem pop/abertura). */
  .reaction-chip--pop, .reaction-picker.is-open { animation: none !important; }
  /* Digest: aparece/some sem transform (o count-up já salta pro valor final). */
  .digest, .digest__phrase { animation: none !important; }
  .digest--leaving { transition: none !important; }
  /* 3.11 empty respira: PARADO (única que simplesmente desliga). */
  .empty-state--breathing .empty-state__icon,
  .empty-state__icon--breathing { animation: none !important; }
  /* 3.12 "não revisto": sem pulso, mas a pílula fica visível e estática. */
  .msg__risk--new { animation: none !important; }
  /* 3.10 press: sem scale (hover mantém — cor/shadow não é movimento problemático). */
  .btn:active, .decision__form button:active,
  .composer button:active, .agent__composer button:active { transform: none; }
}

/* ── Modal (nova conversa) ────────────────────────────────────────────── */
.modal {
  width: 420px; max-width: 92vw; border: none; padding: 0;
  border-radius: var(--radius-lg);
  background: var(--color-bg-card); color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(17, 17, 17, 0.45); backdrop-filter: blur(2px); }
.newconv { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.newconv__title { margin: 0; font-size: 1.15rem; }
.newconv__sub { margin: 0; font-size: .85rem; color: var(--color-text-muted); }
.newconv__at {
  display: flex; align-items: center; gap: var(--space-xs);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); padding: var(--space-sm) var(--space-md);
}
.newconv__at span { color: var(--color-text-muted); font-weight: 700; }
.newconv__at input {
  flex: 1; border: none; background: transparent; color: var(--color-text);
  font-size: 1rem; outline: none;
}
.newconv__actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Shell: nav vertical → BOTTOM TAB BAR fixa (libera os ~38% de largura). */
  .app { grid-template-columns: 1fr; }
  .tabrail {
    position: fixed; inset: auto 0 0 0; top: auto;
    height: auto; min-height: 56px;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    gap: 0;
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--color-border);
    z-index: var(--z-sticky);
  }
  .tabrail__brand, .tabrail__spacer, .tabrail__util { display: none !important; }
  .tabrail__link {
    flex: 1; width: auto; height: auto; min-height: 48px;
    flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: var(--radius-sm);
  }
  .tabrail__label { font-size: .68rem; margin-top: 0; }
  .tabrail__link.is-active { background: transparent; }
  .tabrail__link.is-active::before { display: none; }
  /* 3.9 — a barra vertical viajante não faz sentido na bottom-bar horizontal. */
  .tabrail__indicator { display: none !important; }

  /* Painéis full-height descontam a barra inferior. */
  .cx, .agent, .cx__thread, .cx__inbox { height: calc(100dvh - 56px); }

  /* Master/detail colapsa: inbox OU thread em tela cheia. */
  .cx { grid-template-columns: 1fr; }
  .cx__thread { display: none; }
  /* navegação Turbo (frame carregado) OU deep-link/reload (shell aberto) */
  .cx:has(turbo-frame#thread[complete]) .cx__inbox,
  .cx.is-open .cx__inbox { display: none; }
  .cx:has(turbo-frame#thread[complete]) .cx__thread,
  .cx.is-open .cx__thread { display: flex; }

  .inbox-live__counts { grid-template-columns: repeat(3, 1fr); }
  .modal { width: 92vw; }

  /* Aba Você: expõe tema + sair (que no desktop moram no rail). */
  .you-actions { display: block; }
  .profile { padding-bottom: 80px; }
}

/* ── Ponto D — card de decisão a-a (colapsado) ────────────────────────────
   A negociação de 8 rounds é ruído; aqui mora só a linha acionável. O selo ⚯
   diz "foram os agentes"; o acento azul ecoa o 🔵 (foi autônomo). Clean/light. */
/* Card a-a IN-FLOW no topo da thread: reserva espaço e empurra a lista (nunca
   overlay/sticky). O border-bottom + padding separam do 1º balão, que antes
   nascia clipado sob a sombra do card. */
.thread__decisions {
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.decision {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--prov-blue);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-sm);
  animation: decisionIn 240ms cubic-bezier(.2,.7,.2,1);
}
/* #4 — quando os dois avalizam (done) o card COLAPSA numa pílula compacta de 1
   linha: sem o lead nem os detalhes, só ✓ + resumo + "ver conversa". */
.decision--closed {
  border-left-color: var(--prov-green); opacity: .95;
  flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: var(--space-sm); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
}
.decision--closed .decision__top { display: contents; }
.decision--closed .decision__lead,
.decision--closed .decision__details { display: none; }
.decision--closed .decision__summary { margin: 0; font-size: .9rem; }
.decision--closed .decision__summary strong { font-weight: 600; }
.decision--closed .decision__state { margin: 0; }
.decision--closed .decision__actions { margin: 0; }
.decision--closed .decision__see { margin-left: auto; }

.decision__top { display: flex; align-items: center; gap: var(--space-sm); }
.decision__seal {
  font-size: 1.05rem; line-height: 1; color: var(--prov-blue);
  flex: 0 0 auto;
  font-family: var(--font-body); /* fallback de símbolo pro glifo ⚯ não virar tofu */
}
.decision--closed .decision__seal { color: var(--prov-green); }
.decision__lead { margin: 0; font-size: .85rem; color: var(--color-text-muted); }
.decision__who { color: var(--color-text); font-weight: 600; }

.decision__summary { margin: 2px 0 0; font-size: 1.02rem; line-height: 1.35; color: var(--color-text); }
.decision__summary strong { font-weight: 700; }
.decision__details { margin: 0; font-size: .88rem; color: var(--color-text-muted); }

.decision__state { margin: 2px 0 0; font-size: .8rem; color: var(--color-text-muted); font-weight: 600; }
.decision__state--done { color: var(--prov-green); }

.decision__actions { display: flex; align-items: center; gap: var(--space-sm); margin-top: 4px; flex-wrap: wrap; }
.decision__form { margin: 0; }
.decision__see { margin-left: auto; }

/* ✨3 — O card NASCE dobrando pra cima (como se as últimas bolhas dobrassem
   num só card). transform-origin embaixo → sensação de fold. */
@keyframes decisionIn {
  from { opacity: 0; transform: translateY(14px) scaleY(.94); }
  to   { opacity: 1; transform: none; }
}
.decision { transform-origin: bottom center; }

/* "Ver conversa" — a sala dos fundos, read-only. */
.aa {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.aa__head { display: flex; align-items: center; gap: var(--space-md); }
.aa__caption { margin: 0; font-size: .82rem; color: var(--color-text-faded); font-style: italic; }
.aa__rounds { display: flex; flex-direction: column; gap: var(--space-sm); max-height: 46dvh; overflow-y: auto; }

.aa-round { max-width: 82%; display: flex; flex-direction: column; gap: 3px; }
.aa-round--mine { align-self: flex-end; align-items: flex-end; }
.aa-round--theirs { align-self: flex-start; }
.aa-round__who {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; color: var(--color-text-faded);
}
.aa-round__who span { color: var(--color-text-muted); font-weight: 600; }
.aa-round__bubble {
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--prov-blue);
  background: var(--prov-blue-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: .9rem; line-height: 1.4; color: var(--color-text);
}
.aa-round__bubble p { margin: 0; }

@media (prefers-reduced-motion: reduce) { .decision { animation: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   GRUPOS (It.2) — avatares por iniciais coloridas determinísticas, compositor
   de chips, cabeçalho multi-avatar e autoria por-bolha (estilo WhatsApp).
   A cor (hue) vem de --av-hue (helper Ruby handle_hue == chip_compose.js).
   ══════════════════════════════════════════════════════════════════════════ */

/* Avatar por iniciais — luminosidade no CSS (varia por tema), hue no inline. */
.av {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-full);
  font-weight: 700; font-size: .75rem; line-height: 1;
  background: hsl(var(--av-hue, 220) 62% 90%);
  color: hsl(var(--av-hue, 220) 46% 32%);
  user-select: none;
}
.av--xs { width: 20px; height: 20px; font-size: .56rem; }
.av--sm { width: 30px; height: 30px; font-size: .75rem; }
.av--md { width: 38px; height: 38px; font-size: .86rem; }
.av--more { background: var(--color-bg-hover); color: var(--color-text-muted); }
:root[data-theme="dark"] .av {
  background: hsl(var(--av-hue, 220) 38% 24%);
  color: hsl(var(--av-hue, 220) 72% 80%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .av {
    background: hsl(var(--av-hue, 220) 38% 24%);
    color: hsl(var(--av-hue, 220) 72% 80%);
  }
}

/* Pilha de avatares empilhados (grupo) — cada um com anel na cor da superfície. */
.avstack { display: inline-flex; flex: 0 0 auto; }
.avstack .av { box-shadow: 0 0 0 2px var(--color-bg-card); }
.avstack .av:not(:first-child) { margin-left: -10px; }
.avstack .av--xs:not(:first-child) { margin-left: -7px; }
.avstack .av--md:not(:first-child) { margin-left: -13px; }

/* ── Compositor de chips (nova-conversa / grupo) ────────────────────────── */
.chipbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);
  padding: 6px 8px; min-height: 46px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-card); cursor: text;
  transition: border-color var(--transition-fast);
}
.chipbox:focus-within { border-color: var(--color-primary); }
.chip-tok {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px; border-radius: var(--radius-full);
  background: var(--color-bg-hover); font-size: .82rem; font-weight: 600;
  animation: chipIn var(--dur-quick) var(--ease-spring);
}
.chip-tok__name { line-height: 1; }
.chip-tok__x {
  border: none; background: none; cursor: pointer;
  padding: 0 1px; font-size: 1.05rem; line-height: 1;
  color: var(--color-text-muted); border-radius: var(--radius-full);
  transition: color var(--transition-fast);
}
.chip-tok__x:hover { color: var(--color-danger); }
.chipbox__at { display: inline-flex; align-items: center; gap: 3px; flex: 1 1 120px; }
.chipbox__at > span { color: var(--color-text-muted); font-weight: 700; }
.chipbox__at input {
  flex: 1; min-width: 90px; border: none; outline: none; background: none;
  font: inherit; padding: 5px 0; color: var(--color-text);
}
@keyframes chipIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* Campo do nome do grupo — surge (2+ chips) com um reveal suave. */
.newconv__groupname { margin: 0; gap: var(--space-xs); }
.newconv__groupname:not(.hidden) { animation: fieldReveal var(--dur-base) var(--ease-enter); }
.newconv__grouplabel { font-size: .85rem; color: var(--color-text-muted); }
@keyframes fieldReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cabeçalho de grupo na thread ───────────────────────────────────────── */
.thread__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.thread__who h2 {
  margin: 0; font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread__count { font-size: .72rem; color: var(--color-text-muted); }

/* ── Autoria por-bolha (grupo) — nome + avatar do autor sobre a bolha do OUTRO.
   A SUA fica à direita, sem rótulo. A cor de procedência da bolha não muda. ── */
.msg__author { display: flex; align-items: center; gap: 6px; margin: 0 0 3px 2px; }
.msg__author-name { font-size: .74rem; font-weight: 700; color: var(--color-text-muted); }
.msg--authored .msg__bubble { border-top-left-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .chip-tok, .newconv__groupname:not(.hidden) { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMBINADO — a mensagem-pra-coordenar (humano-iniciada, N-way). Reusa a casca
   do .decision, mas SEM selo ⚯: no lugar, o ANEL de avatares que preenche e a
   BORDA-esquerda na cor do criador (🟢/🟡). O tally conta só `topo`.
   ══════════════════════════════════════════════════════════════════════════ */
.thread__combinados { display: flex; flex-direction: column; gap: var(--space-sm); }
.thread__combinados:not(:empty) { padding: var(--space-md) var(--space-md) 0; }

.combinado {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--prov-green);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-sm);
  transform-origin: bottom center;
  animation: decisionIn var(--dur-base) var(--ease-enter);
}
.combinado--verde   { border-left-color: var(--prov-green); }
.combinado--amarelo { border-left-color: var(--prov-yellow); }

.combinado__top { display: flex; align-items: center; gap: var(--space-sm); }
.combinado__lead { margin: 0; font-size: .85rem; color: var(--color-text-muted); }
.combinado__who { color: var(--color-text); font-weight: 600; }
.combinado__risk { color: var(--prov-yellow-ink); font-weight: 600; }

.combinado__title { margin: 2px 0 0; font-size: 1.02rem; line-height: 1.35; color: var(--color-text); }
.combinado__title strong { font-weight: 700; }

/* Quando/onde: linha discreta, ícones mono (nada compete com a regra das 3 cores). */
.combinado__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-md); }
.combinado__field {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85rem; color: var(--color-text-muted);
}
.combinado__field span[aria-hidden] { filter: grayscale(1); opacity: .75; }

/* ── Anel de avatares + tally ("N de M toparam") ─────────────────────────── */
.combinado__consensus { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: 2px; }
.combinado__ring { display: inline-flex; }
.combinado__ava { display: inline-flex; border-radius: var(--radius-full); }
.combinado__ava:not(:first-child) { margin-left: -6px; }
.combinado__ava .av { box-shadow: 0 0 0 2px var(--color-bg-card); }
/* O anel verde do "topou" fica POR CIMA do próximo avatar (senão o vizinho
   clipa o +4px de shadow e as iniciais embolam). */
.combinado__ava--topo { position: relative; z-index: 1; }

/* pendente = cinza vazado; topo = aceso (anel verde); não posso = traço apagado;
   talvez = meio-tom. O tally conta SÓ topo. */
.combinado__ava--pending .av { filter: grayscale(1); opacity: .45; }
.combinado__ava--topo .av { box-shadow: 0 0 0 2px var(--prov-green), 0 0 0 4px var(--color-bg-card); }
.combinado__ava--talvez .av { opacity: .6; }
.combinado__ava--nao_posso .av { filter: grayscale(1); opacity: .5; position: relative; }
.combinado__ava--nao_posso { position: relative; }
.combinado__ava--nao_posso::after {
  content: ""; position: absolute; inset: 50% 2px auto 2px; height: 2px;
  background: var(--color-text-faded); transform: translateY(-50%) rotate(-8deg);
}
.combinado__tally { font-size: .85rem; color: var(--color-text-muted); font-weight: 600; }
.combinado__tally strong { color: var(--prov-green); font-weight: 700; }

/* ── Botões de resposta (seus 3) ─────────────────────────────────────────── */
.combinado__actions { display: flex; align-items: center; gap: var(--space-sm); margin-top: 4px; flex-wrap: wrap; }
.combinado__btns { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.combinado__form { margin: 0; }
.combinado__btn {
  border: 1px solid var(--color-border-strong); background: var(--color-bg-card);
  color: var(--color-text); font-weight: 600;
  transition: transform var(--dur-instant) var(--ease-standard), border-color var(--transition-fast), background var(--transition-fast);
}
.combinado__btn:active { transform: scale(.96); }
.combinado__btn--topo.is-active { border-color: var(--prov-green); background: var(--prov-green-soft); color: var(--prov-green); }
.combinado__btn--talvez.is-active { border-color: var(--prov-yellow); background: var(--prov-yellow-soft); color: var(--prov-yellow); }
.combinado__btn--nao_posso.is-active { border-color: var(--color-border-strong); background: var(--color-bg-hover); }

/* Já respondeu → colapsa atrás de "trocar" (reversível). */
.combinado__mine { font-size: .82rem; color: var(--color-text-muted); }
.combinado__mine > summary { cursor: pointer; list-style: none; font-weight: 600; }
.combinado__mine > summary::-webkit-details-marker { display: none; }
.combinado__swap { color: var(--color-primary); }
.combinado__mine[open] .combinado__btns { margin-top: var(--space-sm); }

/* ── Fechado — carimbo ✓ Fechado cunhado ─────────────────────────────────── */
.combinado--fechado { border-left-color: var(--prov-green); opacity: .96; }
.combinado--fechado .combinado__actions { margin-top: 0; }
.combinado__stamp {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85rem; font-weight: 700; color: var(--prov-green);
  transform-origin: left center;
}
.combinado--fechado .combinado__stamp { animation: sealMint var(--dur-story) var(--ease-spring); }

/* ── MOTION (§5): SPRING só pro SEU toque (ringFill); o outro chega com
   --ease-enter (bleed verde). O carimbo reusa sealMint. ─────────────────── */
.combinado__ava--filling .av { animation: ringFill 520ms var(--ease-spring); color: var(--prov-green); }
@keyframes combinadoArrive {
  0%   { box-shadow: 0 0 0 0 var(--prov-green), 0 0 0 4px var(--color-bg-card); opacity: .5; }
  100% { box-shadow: 0 0 0 2px var(--prov-green), 0 0 0 4px var(--color-bg-card); opacity: 1; }
}
.combinado__ava--arriving .av { animation: combinadoArrive var(--dur-story) var(--ease-enter) both; }

/* ══════════════════════════════════════════════════════════════════════════
   F3 — DECISÃO com QUÓRUM: barra por opção que ENCHE até o limiar (a largura
   cheia É o limiar — "bastam N"); o vencedor sela verde, os outros desbotam.
   Sim/não reusa o anel + um medidor. A linha de quórum dá a batida de cunhagem.
   ══════════════════════════════════════════════════════════════════════════ */
.combinado__decision { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: 2px; }
.combinado__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.combinado__opt { display: flex; flex-direction: column; gap: 4px; }
.combinado__opt-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.combinado__opt-label { color: var(--color-text); font-weight: 600; font-size: .92rem; }
.combinado__opt-count { color: var(--color-text-muted); font-size: .82rem; }
.combinado__opt-count strong { color: var(--prov-green); font-weight: 700; }

/* Medidor: fundo = trilho; preenche até o LIMIAR (100% == quórum atingido).
   A largura anima com spring quando o card é trocado por broadcast (o anel enchendo). */
.combinado__meter { display: block; position: relative; height: 8px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.combinado__meter--wide { flex: 1; min-width: 80px; align-self: center; }
.combinado__meter-fill {
  display: block; height: 100%; width: calc(var(--pct, 0) * 1%);
  background: var(--prov-green); border-radius: inherit;
  transition: width var(--dur-story) var(--ease-spring);
}
.combinado__opt--won .combinado__opt-label { color: var(--prov-green); }
.combinado__opt--won .combinado__meter-fill { background: var(--prov-green); }
.combinado__opt--lost { opacity: .5; }

/* Linha de quórum: a regra + "bastam N". Pulsa (cunhagem) quando o card sela. */
.combinado__quorum { margin: 0; font-size: .8rem; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 5px; transform-origin: left center; }
.combinado__quorum span[aria-hidden] { opacity: .7; }
@keyframes quorumMint { 0% { transform: scale(1); } 40% { transform: scale(1.06); color: var(--prov-green); } 100% { transform: scale(1); } }
.combinado__quorum--minting { animation: quorumMint var(--dur-story) var(--ease-spring); }

/* Botão de opção ativo = seu voto (verde, como o topo). */
.combinado__btn--opt.is-active { border-color: var(--prov-green); background: var(--prov-green-soft); color: var(--prov-green); }

/* ── Mini-form "＋ Combinado" (folha inline sobre o composer) ─────────────── */
.combinado-new { position: relative; }
.combinado-new__trigger { list-style: none; cursor: pointer; white-space: nowrap; }
.combinado-new__trigger::-webkit-details-marker { display: none; }
.combinado-new__sheet {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  width: min(320px, 78vw);
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-elevated); box-shadow: var(--shadow-md);
  animation: fieldReveal var(--dur-base) var(--ease-enter);
}
.combinado-new__row { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--color-text-muted); }
.combinado-new__row input {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; color: var(--color-text); background: var(--color-bg-card);
}
.combinado-new__row input:focus { outline: none; border-color: var(--color-primary); }
.combinado-new__error { margin: 0; font-size: .8rem; color: var(--color-danger); }
.combinado-new__foot { display: flex; justify-content: flex-end; margin-top: 2px; }

/* Gaveta de DECISÃO (opcional) dentro da folha — intocada = combinado clássico. */
.combinado-new__adv { border-top: 1px solid var(--color-border); padding-top: var(--space-sm); }
.combinado-new__adv-trigger { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--color-primary); list-style: none; }
.combinado-new__adv-trigger::-webkit-details-marker { display: none; }
.combinado-new__adv-body { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
.combinado-new__hint { margin: 0; font-size: .75rem; color: var(--color-text-muted); }
.combinado-new__opt input {
  width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: 6px 9px; font: inherit; color: var(--color-text); background: var(--color-bg-card);
}
.combinado-new__opt input:focus { outline: none; border-color: var(--color-primary); }
.combinado-new__add {
  align-self: flex-start; border: 1px dashed var(--color-border-strong); background: transparent;
  color: var(--color-primary); font-weight: 600; font-size: .78rem;
  border-radius: var(--radius-sm); padding: 5px 9px; cursor: pointer;
}
.combinado-new__quorum span { font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .combinado, .combinado__ava--filling .av, .combinado__ava--arriving .av,
  .combinado--fechado .combinado__stamp, .combinado-new__sheet,
  .combinado__quorum--minting {
    animation: none !important;
  }
  .combinado__meter-fill { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSINATURA DE COMUNICAÇÃO — o ledger vira handshake honesto.
   WhatsApp dá "visto por último"; aqui damos "é assim que @você se comunica":
   inforjável, calmo, escolhido. A barra é a sua letra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A barra 3-cores (reusada na aba Você e no /@handle) ─────────────────── */
.sigbar__track {
  display: flex; width: 100%; height: 12px; overflow: hidden;
  border-radius: var(--radius-full); background: var(--color-border);
}
.sigbar--sm .sigbar__track { height: 8px; }
.sigbar__seg { height: 100%; width: calc(var(--pct, 0) * 1%); min-width: 0; }
.sigbar__seg--verde   { background: var(--prov-green); }
.sigbar__seg--amarelo { background: var(--prov-yellow); }
.sigbar__seg--azul    { background: var(--prov-blue); }
.sigbar__seg--empty   { width: 100%; background: var(--color-border); }

/* Fill na CHEGADA: cada segmento cresce de 0, na ORDEM do ledger
   (verde→amarelo→azul — a mesma sequência que a cor "nasce" numa mensagem).
   Timing `story` (confiança). Depois DESCANSA: nada de respirar perpétuo. */
.sigbar--fill .sigbar__seg { animation: sigFill var(--dur-story) var(--ease-enter) both; }
.sigbar--fill .sigbar__seg--amarelo { animation-delay: 150ms; }
.sigbar--fill .sigbar__seg--azul    { animation-delay: 300ms; }
@keyframes sigFill { from { width: 0; } }

.sigbar__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: var(--space-sm) 0 0; font-size: .82rem; color: var(--color-text-muted);
}
.sigbar__stat { display: inline-flex; align-items: center; gap: 5px; }
.sigbar__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sigbar__dot--verde   { background: var(--prov-green); }
.sigbar__dot--amarelo { background: var(--prov-yellow); }
.sigbar__dot--azul    { background: var(--prov-blue); }
.sigbar__phrase {
  margin: var(--space-sm) 0 0; font-size: .92rem; font-weight: 600; color: var(--color-text);
}
.sigbar--sm .sigbar__phrase { font-size: .82rem; font-weight: 500; color: var(--color-text-muted); }

/* "Ainda formando": a ÚNICA exceção que respira — honesto, não há dado. */
.sigbar--forming .sigbar__seg--empty {
  animation: sigForming 2.6s var(--ease-standard) infinite;
}
@keyframes sigForming { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
.sigbar__phrase--forming { color: var(--color-text-muted); font-weight: 500; }

/* ── Card "Sua assinatura" (aba Você) ───────────────────────────────────── */
.sig-card__note { margin: var(--space-sm) 0 0; color: var(--color-text-muted); font-size: .85rem; }
.sig-card__rule { border: none; border-top: 1px solid var(--color-border); margin: var(--space-md) 0; }

/* ── O ESPELHO "como te veem" ────────────────────────────────────────────── */
.sig-mirror__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-sm); margin-bottom: var(--space-sm);
  font-size: .85rem; color: var(--color-text-muted);
}
.sig-preview {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-md); background: var(--color-bg);
}
.sig-preview > strong { display: block; margin-bottom: var(--space-sm); }
.sig-preview__phrase { margin: var(--space-sm) 0 0; font-size: .85rem; color: var(--color-text-muted); }

/* Segmented control Pessoal|Negócio */
.seg form { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full);
  background: var(--color-bg); border: 1px solid var(--color-border); }
.seg__opt {
  position: relative; font-size: .78rem; padding: 3px 10px; border-radius: var(--radius-full);
  cursor: pointer; color: var(--color-text-muted); transition: var(--transition-fast);
}
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt.is-on { background: var(--color-bg-card); color: var(--color-text); font-weight: 600; }

/* ── /@handle — mini-assinatura no "sobre" ──────────────────────────────── */
.pub__signature { margin: var(--space-sm) 0 0; }

/* ── REDUCED-MOTION: sem fill, sem respiro; o SINAL (proporção) fica ─────── */
@media (prefers-reduced-motion: reduce) {
  .sigbar--fill .sigbar__seg { animation: none !important; }
  .sigbar--forming .sigbar__seg--empty { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIRETÓRIO DE AGENTES (It.7) — a vitrine descobrível. Clean, tema light,
   responsivo. Reusa tokens de motion do It.1 (nada novo inventado).
   ═══════════════════════════════════════════════════════════════════════════ */
.dir__head { padding: var(--space-lg) var(--space-md) var(--space-md); text-align: center; }
.dir__title { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.dir__sub { margin: var(--space-xs) auto 0; max-width: 44ch; color: var(--color-text-muted); font-size: .92rem; }

/* Busca — uma barra única, PULL. Ícone à esquerda, campo cresce. */
.dir__search { position: relative; display: flex; align-items: center; gap: var(--space-sm);
  max-width: 460px; margin: var(--space-lg) auto 0; }
.dir__search-icon { position: absolute; left: 14px; font-size: 1.05rem; color: var(--color-text-faded); pointer-events: none; }
.dir__search input[type="search"] { flex: 1; padding: .7rem 1rem .7rem 2.4rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-bg-card); color: var(--color-text); font-size: .95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.dir__search input[type="search"]:focus { outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--prov-blue-soft); }

/* Grade responsiva de cards. */
.dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md); padding: var(--space-lg) var(--space-md); }

/* Card — leva DIRETO pro /@handle. Sobe 2px no hover (quick=UI). */
.agcard { border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-bg-card); overflow: hidden;
  transition: transform var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard),
              box-shadow var(--dur-quick) var(--ease-standard); }
.agcard:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.08)); }
.agcard__link { display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-md); color: inherit; text-decoration: none; height: 100%; }
.agcard__top { display: flex; align-items: center; gap: var(--space-sm); }
.agcard__id { display: flex; flex-direction: column; min-width: 0; }
.agcard__handle { font-weight: 700; font-size: .98rem; color: var(--color-text); }
.agcard__name { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agcard__blurb { margin: 0; color: var(--color-text-muted); font-size: .88rem; line-height: 1.4; }
.agcard__sig { margin-top: auto; }
.agcard__sig .sigbar__phrase { font-size: .78rem; margin: .3rem 0 0; }

/* CTA "Conversar →" — a ação do humano ganha o spring; a seta desliza. */
.agcard__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem;
  margin-top: var(--space-sm); padding: .4rem .9rem; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; font-size: .85rem; font-weight: 600;
  transition: transform var(--dur-instant) var(--ease-spring), filter var(--dur-quick) var(--ease-standard); }
.agcard:hover .agcard__cta { filter: brightness(1.06); transform: scale(1.03); }
.agcard__arrow { transition: transform var(--dur-quick) var(--ease-enter); }
.agcard:hover .agcard__arrow { transform: translateX(3px); }

/* Vazio + viral. */
.dir__empty { grid-column: 1 / -1; text-align: center; padding: var(--space-xl) var(--space-md);
  color: var(--color-text-muted); }
.dir__empty-hint { color: var(--color-text-faded); font-size: .88rem; margin-top: var(--space-2xs); }
.dir__viral { text-align: center; padding: var(--space-lg) var(--space-md) var(--space-xl);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.dir__viral-line { margin: 0; color: var(--color-text); font-weight: 600; }

/* Toggle subordinado do diretório (aba Você) — recuado sob o público. */
.switch--sub { margin-top: var(--space-sm); padding-left: var(--space-md);
  border-left: 2px solid var(--color-border); }

/* ── MOTION: cascata de entrada (enter=máquina, settle). De baixo pra cima,
   stagger ~60ms capado nos 8 primeiros (o resto entra junto). A assinatura
   preenche sozinha via signature_bar_controller (colorBleed do tique). ── */
@keyframes agcardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
/* A cascata é gesto de PRIMEIRA IMPRESSÃO (load sem filtro), não de filtro. Só
   .dir__grid--cascade (grade sem `q`) escalona; renders de busca aparecem
   instantâneos — senão a stagger re-dispara a cada tecla e os cards piscam. */
.dir__grid--cascade .agcard { animation: agcardIn var(--dur-settle) var(--ease-enter) both; }
.dir__grid--cascade .agcard:nth-child(1) { animation-delay: 0ms; }
.dir__grid--cascade .agcard:nth-child(2) { animation-delay: 60ms; }
.dir__grid--cascade .agcard:nth-child(3) { animation-delay: 120ms; }
.dir__grid--cascade .agcard:nth-child(4) { animation-delay: 180ms; }
.dir__grid--cascade .agcard:nth-child(5) { animation-delay: 240ms; }
.dir__grid--cascade .agcard:nth-child(6) { animation-delay: 300ms; }
.dir__grid--cascade .agcard:nth-child(7) { animation-delay: 360ms; }
.dir__grid--cascade .agcard:nth-child(8) { animation-delay: 420ms; }
.dir__grid--cascade .agcard:nth-child(n+9) { animation-delay: 460ms; }

/* Duplo guard: reduced-motion → tudo aparece, nada se move. */
@media (prefers-reduced-motion: reduce) {
  .dir__grid--cascade .agcard { animation: none !important; }
  .agcard, .agcard__cta, .agcard__arrow { transition: none !important; }
}

/* ── BUSCA ────────────────────────────────────────────────────────────────
   Uma superfície de achar, par natural do inbox de triar. Coluna centrada,
   campo grudado no topo, resultados AGRUPADOS por tipo. A linguagem é a mesma
   do produto: avatar com hue do @, tique de procedência na mensagem, card do
   agente reusado do diretório. Marca-texto sutil no termo. ─────────────────── */
.srch { max-width: 720px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); min-height: 100dvh; }
.srch__head { display: flex; align-items: center; gap: var(--space-sm);
  position: sticky; top: 0; z-index: 2; padding: var(--space-sm) 0 var(--space-md);
  background: linear-gradient(var(--color-bg) 78%, transparent); }
.srch__back { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radius-full); color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast); }
.srch__back:hover { background: var(--color-bg-hover); color: var(--color-text); }

.srch__form { position: relative; display: flex; align-items: center; gap: var(--space-sm); flex: 1; }
.srch__icon { position: absolute; left: 16px; font-size: 1.15rem; color: var(--color-text-faded); pointer-events: none; }
.srch__form input[type="search"] { flex: 1; padding: .8rem 1rem .8rem 2.6rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-bg-card); color: var(--color-text); font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.srch__form input[type="search"]:focus { outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--prov-blue-soft); }

/* Estados vazios — convite (sem termo) e "nada" (com termo sem acerto). */
.srch__hint, .srch__empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--color-text-muted); }
.srch__hint-icon { font-size: 2.4rem; color: var(--color-text-faded); animation: breathe 3.6s var(--ease-standard) infinite; }
.srch__hint-lead, .srch__empty-lead { margin: var(--space-sm) 0 var(--space-xs); font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.srch__hint-sub { margin: 0 auto; max-width: 46ch; line-height: 1.5; font-size: .92rem; }
.srch__empty-sub { margin: 0; font-size: .9rem; color: var(--color-text-faded); }

/* Grupos por tipo. */
.srch__groups { display: flex; flex-direction: column; gap: var(--space-xl); padding-top: var(--space-sm); }
.srch__group-title { display: flex; align-items: center; gap: var(--space-sm);
  margin: 0 0 var(--space-sm); font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-text-muted); }
.srch__group-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-full); background: var(--color-bg-hover); color: var(--color-text-muted);
  font-size: .7rem; font-weight: 700; letter-spacing: 0; }
.srch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }

/* Linha de resultado (conversa · mensagem · combinado). */
.srch__result { border-radius: var(--radius-md); }
.srch__row { display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  color: inherit; text-decoration: none; border: 1px solid transparent;
  transition: background var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); }
.srch__row:hover { background: var(--color-bg-card); border-color: var(--color-border); }
.srch__row:active { transform: scale(.995); }
.srch__row-ava, .srch__row-tick { flex: 0 0 auto; display: inline-flex; align-items: center; }
.srch__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srch__row-title { font-weight: 600; font-size: .95rem; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch__row-sub, .srch__row-snippet { font-size: .85rem; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch__row-snippet { line-height: 1.4; }
.srch__row-go { flex: 0 0 auto; color: var(--color-text-faded); font-size: 1.05rem;
  transition: transform var(--dur-quick) var(--ease-enter), color var(--dur-quick) var(--ease-standard); }
.srch__row:hover .srch__row-go { transform: translateX(3px); color: var(--color-text-muted); }
.srch__row-time { flex: 0 0 auto; font-size: .72rem; color: var(--color-text-faded); }
.srch__dot { color: var(--color-text-faded); margin: 0 2px; }

/* A borda-cor do ledger na mensagem/combinado: o risco fala mesmo na busca. */
.srch__result--verde   .srch__row { border-left: 3px solid var(--prov-green); }
.srch__result--amarelo .srch__row { border-left: 3px solid var(--prov-yellow); }
.srch__result--azul    .srch__row { border-left: 3px solid var(--prov-blue); }

/* Estado do combinado — só palavra, cor do texto. */
.srch__status { font-weight: 700; }
.srch__status--aberto    { color: var(--prov-blue); }
.srch__status--fechado   { color: var(--prov-green); }
.srch__status--cancelado { color: var(--color-text-faded); }

/* Marca-texto do termo — sutil, herda o amarelo-soft do ledger. */
mark.srch-hl { background: var(--prov-yellow-soft); color: var(--color-text);
  padding: 0 .12em; border-radius: 3px; font-weight: 600; }

/* Cards de agente reusam o diretório, em grade compacta. */
.srch__agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-md); }

/* ── MOTION: os resultados entram em cascata leve (enter=máquina). Cada grupo
   assenta, e as linhas escalonam ~28ms (capado). Como cada query debounced é um
   render fresco, a cascata É a transição-ao-filtrar — curta pra não piscar. ── */
@keyframes srchIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.srch__group { animation: srchIn var(--dur-base) var(--ease-enter) both; }
.srch__list .srch__result, .srch__agents > * { animation: srchIn var(--dur-base) var(--ease-enter) both; }
.srch__list .srch__result:nth-child(1), .srch__agents > *:nth-child(1) { animation-delay: 20ms; }
.srch__list .srch__result:nth-child(2), .srch__agents > *:nth-child(2) { animation-delay: 48ms; }
.srch__list .srch__result:nth-child(3), .srch__agents > *:nth-child(3) { animation-delay: 76ms; }
.srch__list .srch__result:nth-child(4), .srch__agents > *:nth-child(4) { animation-delay: 104ms; }
.srch__list .srch__result:nth-child(5), .srch__agents > *:nth-child(5) { animation-delay: 132ms; }
.srch__list .srch__result:nth-child(6), .srch__agents > *:nth-child(6) { animation-delay: 160ms; }
.srch__list .srch__result:nth-child(n+7), .srch__agents > *:nth-child(n+7) { animation-delay: 180ms; }

/* Ações do inbox (lupa + novo), agrupadas. */
.cx__inbox-actions { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
.cx__search { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-full); }

/* Duplo guard: reduced-motion → tudo aparece, nada se move. */
@media (prefers-reduced-motion: reduce) {
  .srch__group, .srch__list .srch__result, .srch__agents > * { animation: none !important; }
  .srch__hint-icon { animation: none !important; }
  .srch__row, .srch__row-go { transition: none !important; }
}

/* ══ ATENDIMENTO PÚBLICO v2 — oferta ancorada + lead/pedido estruturado ══════ */

/* ── Oferta (aba Você): textarea + preview lado a lado (prova de que escreveu
      certo). Sem catálogo/foto/estoque — só as linhas parseadas. ─────────── */
.offer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
@media (max-width: 640px) { .offer__grid { grid-template-columns: 1fr; } }
.offer__input { font-family: var(--font-mono, ui-monospace, monospace); font-size: .85rem; line-height: 1.5; }
.offer-prev {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); min-height: 4rem;
}
.offer-prev__cap {
  display: block; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-faded); margin-bottom: var(--space-xs);
}
.offer-prev__empty { font-size: .82rem; margin: 0; }
.offer-prev__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.offer-prev__item {
  display: flex; align-items: baseline; gap: var(--space-xs); font-size: .88rem;
  animation: chipIn var(--dur-quick) var(--ease-spring);
}
.offer-prev__name { font-weight: 600; }
.offer-prev__price { color: var(--prov-blue); font-variant-numeric: tabular-nums; }
.offer-prev__obs { color: var(--color-text-faded); font-size: .8rem; }

/* ── Leads/pedidos do público no inbox do dono — destacados, mastigados ──── */
.leads { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.leads__head { font-size: .85rem; color: var(--color-text-faded); margin: 0 0 var(--space-2xs); }
.leads__count { font-weight: 700; color: var(--prov-blue); font-variant-numeric: tabular-nums; }

.lead {
  border: 1px solid var(--color-border); border-left: 3px solid var(--prov-blue);
  border-radius: var(--radius-md); padding: var(--space-md);
  background: var(--color-bg-card); display: flex; flex-direction: column; gap: var(--space-sm);
}
.lead__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.lead__badge { font-weight: 700; font-size: .9rem; }
.lead__ago { font-size: .78rem; color: var(--color-text-faded); }

.lead__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lead__line { display: flex; align-items: baseline; gap: var(--space-sm); font-size: .92rem; }
.lead__line--settle { animation: msgSettle 250ms var(--ease-enter) both; }
.lead__qty { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 2.4em; }
.lead__name { flex: 1; }
.lead__price { color: var(--color-text-faded); font-variant-numeric: tabular-nums; }

.lead__total {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px dashed var(--color-border); padding-top: var(--space-xs);
}
.lead__subtotal { color: var(--prov-blue); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.lead__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.lead__meta div { display: flex; gap: var(--space-xs); font-size: .85rem; }
.lead__meta dt { color: var(--color-text-faded); margin: 0; }
.lead__meta dd { margin: 0; font-weight: 600; }

.lead__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.lead__disc summary { cursor: pointer; list-style: none; display: inline-flex; }
.lead__disc summary::-webkit-details-marker { display: none; }
.lead__thread {
  margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 4px;
  max-height: 15rem; overflow-y: auto;
}
.lead__msg { margin: 0; font-size: .85rem; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.lead__msg--v { background: var(--prov-green-soft, rgba(0,0,0,.03)); }
.lead__msg--a { background: var(--prov-blue-soft); }
.lead__who { opacity: .8; margin-right: 4px; }
.lead__confirm { margin-top: var(--space-sm); }
.lead__draft {
  width: 100%; font-size: .85rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
  /* MOVIMENTO pode desligar; o PEDIDO (itens, preço, contato) permanece. */
  .offer-prev__item, .lead__line--settle, .lead__subtotal.count-bump { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   F3 — SEUS CANAIS + PORTAL DE CONEXÃO (QR vivo → selo cunhado). Reusa tokens do
   It.1 (breathe, sealMint, --prov-green, .modal, .card, .btn). O badge do canal é
   MONOCROMÁTICO (currentColor) — o cano nunca vira identidade.
   ═══════════════════════════════════════════════════════════════════════════ */
.channels { margin: 0; }
.channels-card { display: flex; flex-direction: column; gap: var(--space-sm); }

/* ── Linha de canal ──────────────────────────────────────────────────────── */
.channel-row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0;
}
.channel-row + .channel-row { border-top: 1px solid var(--color-border); }

.channel-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--color-bg-hover); color: var(--color-text-muted); /* muted, nunca verde-marca */
}
.channel-row--connected .channel-badge { color: var(--color-text); }
.channel-row--soon .channel-badge { opacity: .5; }

.channel-row__body { flex: 1 1 auto; min-width: 0; }
.channel-row__name { display: block; font-size: .98rem; line-height: 1.2; }
.channel-row__meta {
  margin: 2px 0 0; font-size: .82rem; color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.channel-row__meta--muted { color: var(--color-text-faded); }
.channel-row--soon .channel-row__name { color: var(--color-text-muted); }

.channel-row__actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-xs); }
.channel-row__form { margin: 0; }
.channel-row__unpair { color: var(--color-text-muted); }

/* Pontinho de estado (calmo — nunca pisca). */
.channel-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--color-text-faded); }
.channel-dot--on { background: var(--prov-green); }
.channel-dot--paused { background: var(--prov-yellow); }
.channel-dot--wait { background: var(--prov-blue); animation: presenceBreath 2s var(--ease-standard) infinite; }

.chip--soon {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 10px; border-radius: var(--radius-full);
  background: var(--color-bg-hover); color: var(--color-text-faded); cursor: default;
}

/* Banner calmo do modo férias — kill-switch, sem alarde vermelho. */
.channel-banner {
  margin: var(--space-xs) 0 0; padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md); font-size: .85rem; line-height: 1.4;
}
.channel-banner--paused {
  background: var(--prov-yellow-soft); color: var(--prov-yellow-ink);
  border-left: 3px solid var(--prov-yellow);
}

/* ── O PORTAL (modal) ────────────────────────────────────────────────────── */
.channel-modal { width: 400px; max-width: 92vw; position: relative; }
.channel-modal__close {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  border: none; background: transparent; color: var(--color-text-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px;
}
.channel-modal__close:hover { color: var(--color-text); }
.channel-modal__body { padding: var(--space-xl) var(--space-lg) var(--space-lg); }

.channel-connect { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); }
.channel-connect__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--color-bg-hover); color: var(--color-text-muted);
  animation: breathe 4s ease-in-out infinite;
}
.channel-connect__title { margin: var(--space-xs) 0 0; font-size: 1.2rem; }
.channel-connect__lede { margin: 0; font-size: .92rem; color: var(--color-text-muted); line-height: 1.5; max-width: 30ch; }
.channel-connect__hint { margin: 0; font-size: .82rem; color: var(--color-text-muted); max-width: 32ch; }
.channel-connect__note { margin: var(--space-xs) 0 0; font-size: .78rem; color: var(--color-text-faded); }
.channel-connect__cta { margin-top: var(--space-sm); }
.btn--block { width: 100%; }

/* ── O ANEL que RESPIRA + o QR ───────────────────────────────────────────── */
.qr-ring {
  --ring: var(--prov-green);
  display: grid; place-items: center;
  padding: 12px; border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--color-bg-card), var(--color-bg-card)) padding-box,
    conic-gradient(from 0deg, var(--ring), color-mix(in srgb, var(--ring), white 55%), var(--ring)) border-box;
  border: 3px solid transparent;
  margin: var(--space-sm) 0;
}
.qr-ring--breathe { animation: breathe 3.2s ease-in-out infinite; }
.qr-ring turbo-frame { display: grid; place-items: center; }
.qr-img { display: block; width: 240px; height: 240px; border-radius: var(--radius-md); background: #fff; }

.qr-skeleton {
  width: 240px; height: 240px; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--color-bg-hover);
}
.qr-skeleton__pulse {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--color-border-strong); animation: breathe 1.4s ease-in-out infinite;
}

/* ── O SELO cunhado (beat C) — reusa sealMint + --prov-green ──────────────── */
.channel-seal-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); }
.channel-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: var(--prov-green-soft); color: var(--prov-green);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--prov-green), transparent 88%);
}
.channel-seal--minting { animation: sealMint var(--dur-story) var(--ease-spring); }
.channel-seal__title { margin: var(--space-xs) 0 0; font-size: 1.15rem; }
.channel-seal__phone { margin: 0; font-size: .9rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.channel-seal__done { margin-top: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  /* O movimento pode desligar; o SINAL (QR, selo, estado) permanece parado. */
  .channel-connect__glyph, .qr-ring--breathe, .qr-skeleton__pulse,
  .channel-seal--minting, .channel-dot--wait { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COCKPIT UNIFICADO (F-front) — a inbox mistura conversas nativas e WhatsApp no
   MESMO card/baldes. WhatsApp é CANO, não identidade: o badge é 14px, mono
   (currentColor/muted), NUNCA o verde da marca. Reusa .seg, agent-leash,
   leashSlack, tokens de motion do It.1 — nada de componente novo inventado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* display_ref: @handle nativo, ou pushName + badge-de-canal (o "@wa_…" some). */
.who-ref { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; }
.who-ref__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Badge de canal MONOCROMÁTICO — herda currentColor, esmaecido; sem cor de marca. */
.channel-badge--inline {
  flex: 0 0 auto; display: inline-flex; align-self: center;
  color: var(--color-text-faded); opacity: .8;
}
.channel-badge--inline svg { display: block; }
/* No card, o tique de cor (last_message_provenance) faz o trabalho de cor — o
   badge fica de propósito neutro pra não competir com o ledger. */
.conv-card__handle .who-ref { max-width: 100%; }

/* ── AUTONOMIA 1-TOQUE — a coleira em .seg sob o header (DM nativa E WhatsApp) ── */
.autonomy-bar {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-card);
}
.autonomy-bar__lead {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: .74rem; color: var(--color-text-muted); white-space: nowrap;
}
.autonomy-bar__lead .who-ref { font-weight: 600; color: var(--color-text); }
/* o "tether" da coleira: um traço curto que desbota quando a coleira afrouxa. */
.agent-leash__tether {
  width: 12px; height: 2px; border-radius: 2px; flex: 0 0 auto;
  background: var(--prov-blue); opacity: .55;
  transition: opacity var(--dur-story) var(--ease-enter);
}
.agent-leash--slack .agent-leash__tether { opacity: .15; }
/* container do .seg de 4 vias: reusa .seg__opt; permite quebrar em 2 linhas em
   telas estreitas (as frases são longas de propósito — falam humano, não enum). */
.autonomy-seg {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; margin-left: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg); border: 1px solid var(--color-border);
}
.autonomy-seg .seg__opt { font-size: .74rem; }

/* ── MODO FÉRIAS / chip caído — banner calmo DENTRO da conversa de WhatsApp ──── */
.channel-thread-banner {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-size: .82rem; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.channel-thread-banner > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.channel-thread-banner__act { margin: 0; }
.channel-thread-banner__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.channel-thread-banner--paused { background: var(--prov-yellow-soft); color: var(--prov-yellow-ink); }
.channel-thread-banner--paused .channel-thread-banner__dot { background: var(--prov-yellow); }
.channel-thread-banner--off { background: var(--color-bg-hover); }
.channel-thread-banner--off .channel-thread-banner__dot { background: var(--color-text-faded); }

/* presença viva no header (o inner é o alvo que o backstop esconde) */
.thread__presence-live { display: inline-flex; align-items: center; gap: 6px; }

/* ── WEDGE dismissível — "seu agente pode cuidar do seu WhatsApp também" ─────── */
.wa-wedge {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-sm);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-card); font-size: .84rem; color: var(--color-text-muted);
}
.wa-wedge__badge { flex: 0 0 auto; display: inline-flex; color: var(--color-text-faded); }
.wa-wedge__body { flex: 1 1 auto; min-width: 0; }
.wa-wedge__link { color: var(--color-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.wa-wedge__close {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-faded); font-size: 1rem; line-height: 1; padding: 4px;
}
.wa-wedge__close:hover { color: var(--color-text); }

/* ── COCKPIT HOME (F2) — a home logada: dashboard vivo (blocos) + comando ────
   Reusa 100% o design system: cards, .kpi, .conv-card, .tick, motion tokens.
   Acentos SÓ nas cores de procedência (--prov-*) + neutro. ────────────────── */
.cockpit { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cockpit__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--space-lg) var(--space-xl); }
.cockpit__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg);
}
.cockpit__head h1 { font-size: 1.3rem; margin: 0; }
.cockpit__tools { display: flex; align-items: center; gap: var(--space-sm); }
.cockpit__refresh { display: inline-flex; align-items: center; gap: var(--space-xs); }
.cockpit__refresh-btn { display: inline-flex; align-items: center; gap: 6px; }
.cockpit__period {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-card); color: var(--color-text);
  font-size: .82rem; padding: 4px 8px;
}
.cockpit__meta { font-size: .76rem; color: var(--color-text-faded); margin-top: var(--space-md); }

/* blocos — entrada com stagger sutil (fadeInUp da casa, 60ms/bloco, capado). */
.cockpit__blocks { display: flex; flex-direction: column; gap: var(--space-md); max-width: 720px; }
.blk {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-bg-card); padding: var(--space-md) var(--space-lg);
  animation: fadeInUp var(--dur-base) var(--ease-enter) both;
  animation-delay: calc(min(var(--i, 0), 8) * 60ms);
}
@media (prefers-reduced-motion: reduce) { .blk { animation: none !important; } }
.blk__title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted); margin: 0 0 var(--space-sm);
}
/* acento = fio à esquerda, na paleta de procedência (nunca cor nova). */
.blk--accent-verde   { border-left: 3px solid var(--prov-green); }
.blk--accent-amarelo { border-left: 3px solid var(--prov-yellow); }
.blk--accent-azul    { border-left: 3px solid var(--prov-blue); }

/* hero — saudação grande + frase do agente. */
.blk--hero { background: transparent; border: 0; padding: 0 0 var(--space-xs); }
.blk-hero__title { font-size: 1.5rem; font-weight: 800; margin: 0; }
.blk-hero__phrase { color: var(--color-text-muted); margin: var(--space-xs) 0 0; }

/* stats — linha de contadores (reusa .kpi). */
.blk-stats__row { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.blk-stat--verde   .blk-stat__num { color: var(--prov-green); }
.blk-stat--amarelo .blk-stat__num { color: var(--prov-yellow-ink, var(--prov-yellow)); }
.blk-stat--azul    .blk-stat__num { color: var(--prov-blue); }

/* listas (needs_you / agent_did / combinados) */
.blk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.blk-item {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md);
}
.blk-item:hover { background: var(--color-bg-hover, rgba(128,128,128,.08)); }
.blk-item__name { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.blk-item__preview {
  font-size: .84rem; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blk-did { display: flex; align-items: baseline; gap: var(--space-sm); }
.blk-did__text { color: var(--color-text); }
.blk-did__link { text-decoration: none; }
.blk-did__link:hover { text-decoration: underline; }
.blk-komb { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.blk-komb__title { font-weight: 600; }
.blk-komb__tally { font-size: .8rem; color: var(--color-text-muted); white-space: nowrap; }

/* conversations — mini conv-cards (reusa .conv-card). */
.blk-convs { display: flex; flex-direction: column; gap: var(--space-sm); }
.blk-conv { animation: none; } /* o stagger é do bloco-pai, não de cada card */

/* alert / note */
.blk-alert__text, .blk-note__text { margin: 0; color: var(--color-text); }
.blk--note .blk-note__text { color: var(--color-text-muted); font-style: italic; }

/* actions — chips que PREENCHEM o composer. */
.blk-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.blk-chip {
  border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer;
  background: var(--color-bg-card); color: var(--color-text);
  font-size: .84rem; padding: 6px 12px;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}
.blk-chip:hover { border-color: var(--prov-blue); transform: translateY(-1px); }
.blk-chip:active { transform: none; }

/* o comando embaixo — reusa .agent__chat; limita a altura pro dashboard mandar. */
.cockpit__chat { flex: 0 0 auto; max-height: 42vh; }
.cockpit__chat .agent__thread { min-height: 96px; }