/* Central: bento (fix/central-ui-bento, 2026-11-02). Carregado depois de styles.css: as regras daqui sobrepõem as de lá. */

/* ── Status só fora do normal: o pill "pronto" fica no DOM com hidden (app.js, pillStatus) ── */
.pill[hidden]{display:none}

/* ── Time: a Lia num cartão herói e os setores em grade bento ── */
.time-cabec{align-items:flex-start}
.time-lia{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin:18px 0 22px;padding:18px 22px;background:var(--cartao);border:1px solid var(--borda);border-radius:22px}
.time-lia b{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.time-lia small{display:block;margin-top:2px;color:var(--apagado);font-size:14px;line-height:1.4}
/* os setores em colunas CSS (alvenaria): alturas diferentes, sem buraco e sem esticar cartão */
.time-setores{columns:3 300px;column-gap:16px}
.time-setor{break-inside:avoid;display:flex;margin:0 0 16px;gap:10px;padding:16px;border-radius:20px}
.time-setor h2.s{margin:0 0 2px;font-size:11px;letter-spacing:.16em}
.time-setor h2.s > span{font-size:12px;letter-spacing:0;text-transform:none;color:var(--apagado);font-weight:500}
.time-dot{gap:8px;padding:12px 14px;border-radius:var(--raio-cartao);background:var(--realce);transition:background-color 160ms ease-out,border-color 160ms ease-out}
.time-dot h3{font-size:15px}
.time-dot:hover{background:var(--hover);border-color:var(--borda-verde)}
.time-dot:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
@media (max-width: 600px){
  .time-lia{grid-template-columns:auto minmax(0,1fr)}
  .time-lia .btn{grid-column:1/-1;justify-self:start}
  /* no celular o setor é uma lista, sem cartão dentro de cartão: cabeçalho com fio e DOTs com divisor */
  .time-setor{padding:0;margin:0 0 22px;background:none;border:0;border-radius:0}
  .time-setor > h2.s{padding-bottom:8px;border-bottom:1px solid var(--borda)}
  .time-setor .time-dot{padding:12px 0;background:none;border:0;border-radius:0}
  .time-setor .time-dot:hover{background:none}
  .time-setor .time-dot + .time-dot{border-top:1px solid var(--borda)}
}

/* ── Conversa vazia com um DOT: bloco centrado e sugestões em cartões ── */
/* o bloco fica à esquerda, na largura do título (560px), colado no campo: o vazio sobra acima, não no meio */
/* mesma coluna do composer (760px centrada) e o texto alinhado ao texto do campo (18px): as bordas batem */
.vazio-dot{align-items:flex-start;gap:10px;max-width:760px;width:100%;margin:auto auto 24px;padding:12px 18px;text-align:left}
.vazio-dot .vazio-titulo{font-size:19px}
.vazio-dot > p.muted{margin:0;max-width:52ch}
/* duas colunas fixas na coluna do composer (auto-fit abria uma terceira vazia); uma só no celular */
.sugestoes-grade{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:14px;text-align:left}
.sugestao{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:56px;padding:12px 14px;background:var(--cartao);border:1px solid var(--borda);border-radius:14px;color:var(--texto-2);font:inherit;font-size:14px;line-height:1.35;text-align:left;cursor:pointer;animation:sugestao-entra 180ms ease-out both}
.sugestao span{min-width:0;overflow-wrap:anywhere}
.sugestao svg{flex:none;color:var(--destaque)}
.sugestao:hover{background:var(--realce);border-color:var(--borda-verde)}
.sugestao:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
.sugestao:nth-child(2){animation-delay:40ms}
.sugestao:nth-child(3){animation-delay:80ms}
/* número ímpar de sugestões: a última, sozinha na fileira, ocupa a largura (sem buraco na grade) */
.sugestao:last-child:nth-child(odd){grid-column:1/-1}
@keyframes sugestao-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ── Conversa com um DOT: a coluna direita em cartões da casa (um por seção, o título dentro) ── */
.rail > .rail-card + .rail-card{margin-top:4px}
.rail-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;background:var(--cartao);border:1px solid var(--borda);border-radius:14px}
.rail-card > h2.s{margin:0}
/* dentro do cartão, o DOT é uma linha (sem o fundo próprio: nada de cartão dentro de cartão) */
.rail-card .rr{width:calc(100% + 12px);margin:0 -6px;padding:4px 6px;background:none;border-radius:10px}
.rail-card .rr:hover{background:var(--realce)}
.rail-card .rr:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}
.rail-hab{display:flex;align-items:center;gap:10px;min-height:36px;color:var(--texto-2);font-size:14px;line-height:1.3}
.rail-hab svg{flex:none;color:var(--destaque)}
.rail-hab span{min-width:0;overflow-wrap:anywhere}
.rail-ver{justify-self:start;min-height:40px;padding:6px 14px}

/* ── (cui7) Conversa: até 1100 px a coluna da direita é uma gaveta, aberta pelo botão "Contexto" ── */
/* o Contexto mora no cabeçalho, ao lado do Ver detalhes; só aparece quando a coluna da direita some */
.conv-acoes{display:flex;align-items:center;gap:8px;flex:none}
.conv-ctx{display:none}
.conv-veu{display:none}
.conv-ctx-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.conv-ctx-topo b{font-size:15px}
@media (max-width: 1100px){
  .conv-ctx{display:inline-flex;min-height:40px;padding:6px 14px}
  .conv-veu{display:block;position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.55);cursor:pointer}
  .rail.rail-conversa{display:flex;position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(320px,88vw);margin:0;transform:translateX(100%);visibility:hidden;transition:transform 200ms ease-out,visibility 200ms;box-shadow:-18px 0 40px -20px rgba(0,0,0,.7)}
  .rail.rail-conversa.aberta{transform:none;visibility:visible}
}
/* (rodada 8) celular: o Voltar sozinho na faixa de cima; o nome embaixo dele; Contexto e Ver detalhes numa linha
   própria abaixo do nome, perto do que eles tratam (antes ficavam na faixa do Voltar, acima do nome). O .conv-acoes é
   o wrapper do Contexto com o Ver detalhes; sem Contexto, o Ver detalhes vai sozinho para a mesma linha. */
@media (max-width: 640px){
  .conv-cab{grid-template-columns:minmax(0,1fr);grid-template-areas:"voltar" "tit" "acoes"}
  .conv-acoes,.conv-cab > .conv-det{grid-area:acoes;justify-self:start}
  .conv-acoes{flex-wrap:wrap;gap:8px}
}

@media (prefers-reduced-motion: reduce){
  .sugestao{animation:none}
  .time-dot{transition:none}
  .rail.rail-conversa{transition:none}
}
@media (max-width: 560px){
  .sugestoes-grade{grid-template-columns:1fr}
}