/* =========================================================================
   Catálogo Inteligente - busca conversacional em três colunas.
   Tela NOVA; a anterior segue em catalogo_inteligente_anterior.tpl.
   O legado estiliza button/a/h1-h6/ul/p globalmente em style.css, por isso
   os resets explícitos dentro de .ci.
   ========================================================================= */

.ci {
  /* Claro e escuro trocam SÓ estes tokens - nenhuma cor solta lá embaixo. */
  --ci-fundo:      #F4F7FA;
  --ci-papel:      #FFFFFF;
  --ci-linha:      #E2E8EF;
  --ci-linha-forte:#C6D0DA;
  --ci-texto:      #191C1D;
  --ci-suave:      #667A88;
  --ci-rotulo:     #003366;
  --ci-acento:     #0076AD;
  --ci-acento-esc: #1E3A5F;
  --ci-acento-fr:  #E2F0F8;
  --ci-ok:         #166534;
  --ci-ok-fundo:   #DCFCE7;
  --ci-aviso:      #92400E;
  --ci-aviso-linha:#F0C36D;
  --ci-aviso-fundo:#FFF8E8;
  --ci-polegar:    #C6D0DA;
  --ci-raio:       14px;
  --ci-calha:      10px;
  /* Tamanho FIXO da capa na estante, em px de propósito: em % a capa
     acompanhava a largura da tela e nunca era a mesma duas vezes. 3:4. */
  --ci-capa-l:     168px;
  --ci-capa-a:     224px;

  box-sizing: border-box;
  display: grid;
  /* Uma coluna ate a primeira busca: a lateral so existe quando ha
     historico para ver e faceta para refinar. */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 88rem;
  height: calc(100vh - 220px);
  min-height: 520px;
  /* Respiro do cabeçalho do site: sem ele a caixa do chat encosta na
     barra de cima e os dois parecem um bloco só. */
  margin: 20px auto 32px;
  font-family: 'Outfit', 'Signika', Arial, sans-serif;
  color: var(--ci-texto);
  text-align: left;
}

.ci *, .ci *:before, .ci *:after { box-sizing: border-box; }
/* o legado fixa cor e margem em h1..h6 e p; aqui a cor vem do contexto */
.ci p, .ci h1, .ci h2, .ci h3, .ci ul, .ci ol, .ci li { margin: 0; padding: 0; color: inherit; font-family: inherit; }
.ci ul, .ci ol { list-style: none; }
/* O legado tem "a.button,button{height:32px;padding:0 20px}". Com
   box-sizing:border-box esse padding comia a largura inteira dos botões
   redondos daqui - o de enviar ficava com 0px de área útil e o ícone
   sumia. Cada botão desta tela declara o próprio padding; o reset só
   impede que o do legado vaze. */
.ci button {
  padding: 0; height: auto;
  text-transform: none; letter-spacing: normal; text-shadow: none;
  box-shadow: none; font-family: inherit;
}
.ci a { text-decoration: none; }

@media (prefers-color-scheme: dark) {
  .ci:not([data-tema="claro"]) {
    --ci-fundo: #0F191C; --ci-papel: #16232A; --ci-linha: #24353E;
    --ci-linha-forte: #354A56; --ci-texto: #E6EDF1; --ci-suave: #93A7B3;
    --ci-rotulo: #9EC8E4; --ci-acento: #5FC0EE; --ci-acento-esc: #9ED4F5;
    --ci-acento-fr: #17323F; --ci-ok: #86EFAC; --ci-ok-fundo: #14351F;
    --ci-aviso: #FBBF24; --ci-aviso-linha: #6B5320; --ci-aviso-fundo: #35290F;
    --ci-polegar: #354A56;
  }
}
.ci[data-tema="escuro"] {
  --ci-fundo: #0F191C; --ci-papel: #16232A; --ci-linha: #24353E;
  --ci-linha-forte: #354A56; --ci-texto: #E6EDF1; --ci-suave: #93A7B3;
  --ci-rotulo: #9EC8E4; --ci-acento: #5FC0EE; --ci-acento-esc: #9ED4F5;
  --ci-acento-fr: #17323F; --ci-ok: #86EFAC; --ci-ok-fundo: #14351F;
    --ci-aviso: #FBBF24; --ci-aviso-linha: #6B5320; --ci-aviso-fundo: #35290F;
  --ci-polegar: #354A56;
}

/* ===================================================< barra de rolagem   */
/* A calha fica reservada O TEMPO TODO (scrollbar-gutter + largura fixa no
   pseudo-elemento): só a cor do polegar muda. Esconder a barra e devolvê-la
   no hover empurraria o conteúdo alguns pixels a cada passagem do mouse.
   Dois mecanismos porque o Chromium ignora scrollbar-color assim que o
   pseudo-elemento é estilizado. */
.ci-rola {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.ci-rola:hover, .ci-rola.ci-rolando { scrollbar-color: var(--ci-polegar) transparent; }

.ci-rola::-webkit-scrollbar { width: var(--ci-calha); }
.ci-rola::-webkit-scrollbar-track { background: transparent; }
.ci-rola::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
.ci-rola:hover::-webkit-scrollbar-thumb,
.ci-rola.ci-rolando::-webkit-scrollbar-thumb { background: var(--ci-polegar); background-clip: content-box; }

/* =========================================================< esquerda     */

/* style.css do legado tem "aside{width:24%;float:right}" e ".home aside
   {width:33%}". Como itens de grid o float é ignorado, mas a largura em
   porcentagem comprimia as colunas a ~70px. */
.ci > .ci__esq { width: auto; float: none; margin: 0; }

.ci--com-lateral { grid-template-columns: 288px minmax(0, 1fr); }

.ci__esq { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding-right: 2px; }
.ci__esq > * { flex: 0 0 auto; }

/* O atributo hidden perde para o display:flex acima; sem isto a coluna
   apareceria mesmo escondida. */
.ci .ci__esq[hidden] { display: none; }

/* Colada no topo: a página inteira rola, e sem isto os filtros subiriam
   junto e sumiriam justo quando servem. align-self:start é o que permite
   a coluna ser mais baixa que a linha da grade - sticky não gruda em item
   esticado. */
.ci__esq {
  position: sticky; top: 12px; align-self: start;
  max-height: calc(100vh - 24px);
}

/* Entra deslizando da esquerda, uma vez só. */
@media (prefers-reduced-motion: no-preference) {
  .ci--com-lateral > .ci__esq { animation: ci-entra-esquerda .38s cubic-bezier(.2, .7, .3, 1) both; }
}

@keyframes ci-entra-esquerda {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* A linha da entrada: o campo (com o enviar dentro) e, FORA da borda,
   "Nova busca" - que não age sobre o texto, joga fora e recomeça.        */
.ci__entrada-linha { display: flex; align-items: flex-end; gap: 10px; }
.ci__entrada-linha > .ci__campo { flex: 1 1 auto; min-width: 0; }

.ci .ci__nova {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  /* Mesma altura da pílula do campo: os dois se alinham pela base. */
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--ci-linha-forte); border-radius: 22px;
  background: var(--ci-papel); color: var(--ci-suave);
  font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
  text-transform: none; box-shadow: none;
  cursor: pointer;
}
.ci .ci__nova:hover { border-color: var(--ci-acento); color: var(--ci-acento); }

.ci__bloco { background: var(--ci-papel); border: 1px solid var(--ci-linha); border-radius: var(--ci-raio); }

.ci .ci__hist-cab {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 42px; padding: 0 14px; border: 0; border-radius: var(--ci-raio);
  background: none; color: var(--ci-suave); cursor: pointer;
  font-size: 14.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ci__hist-seta { margin-left: auto; transition: transform .18s ease; }
.ci .ci__hist-cab[aria-expanded="true"] .ci__hist-seta { transform: rotate(180deg); }
.ci__hist-corpo { border-top: 1px solid var(--ci-linha); padding: 8px 6px 6px; }
.ci__hist-corpo[hidden] { display: none; }
.ci__hist-lista { max-height: 168px; }
.ci .ci__hist-item {
  display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ci-suave); cursor: pointer;
  font-size: 16px; line-height: 1.35; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci .ci__hist-item:hover { background: var(--ci-acento-fr); color: var(--ci-acento-esc); }
.ci .ci__hist-limpar {
  width: 100%; padding: 6px 8px; margin-top: 4px; border: 0; border-radius: 8px;
  background: none; color: var(--ci-suave); cursor: pointer; font-size: 14.5px; text-align: left;
}
.ci .ci__hist-limpar:hover { color: var(--ci-acento); }
.ci__miudo { padding: 6px 8px 2px; font-size: 13.5px; line-height: 1.45; color: var(--ci-suave); }

.ci__filtros { padding: 4px 6px 10px; }
.ci__filtros-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 6px; font-size: 14.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ci-suave);
}
.ci__grupo { border-top: 1px solid var(--ci-linha); }
.ci__grupo:first-of-type { border-top: 0; }

/* Cada grupo fecha sozinho; o cabeçalho mostra quantos recortes há dentro. */
.ci .ci__grupo-cab {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 38px; padding: 0 8px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; text-align: left;
}
.ci .ci__grupo-cab:hover { background: var(--ci-acento-fr); }
.ci__grupo-nome {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ci-rotulo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci__grupo-n {
  flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
  background: var(--ci-fundo); color: var(--ci-suave);
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ci__grupo-seta { flex: 0 0 auto; color: var(--ci-suave); transition: transform .18s ease; }
.ci .ci__grupo-cab[aria-expanded="true"] .ci__grupo-seta { transform: rotate(180deg); }
.ci .ci__grupo-cab[aria-expanded="true"] .ci__grupo-nome { color: var(--ci-acento); }

.ci__grupo-corpo { padding: 2px 8px 8px; }
.ci__grupo-corpo[hidden] { display: none; }
.ci .ci__valor {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 5px 6px; border: 0; border-radius: 7px;
  background: none; color: var(--ci-acento); cursor: pointer;
  font-size: 16px; line-height: 1.35; text-align: left;
}
.ci .ci__valor:hover { background: var(--ci-acento-fr); }
.ci__valor-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci__valor-n { flex: 0 0 auto; color: var(--ci-suave); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ci__valor-extra[hidden] { display: none; }
.ci .ci__grupo-mais {
  padding: 5px 6px; border: 0; background: none; color: var(--ci-suave);
  cursor: pointer; font-size: 15px;
}
.ci .ci__grupo-mais:hover { color: var(--ci-acento); }

.ci__contando { display: flex; align-items: center; gap: 8px; padding: 10px 8px; font-size: 15px; color: var(--ci-suave); }

/* =========================================================< giro         */

.ci__giro {
  display: inline-block; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--ci-linha-forte); border-top-color: var(--ci-acento);
  border-radius: 50%; animation: ci-giro .7s linear infinite;
}
@keyframes ci-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ci__giro { animation-duration: 2.4s; }
  .ci__hist-seta, .ci__cartao, .ci__linha { transition: none !important; }
  .ci * { scroll-behavior: auto !important; }
}

/* =========================================================< centro       */

.ci__centro {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--ci-papel); border: 1px solid var(--ci-linha); border-radius: var(--ci-raio);
}

/* flex-wrap porque com a fonte maior os dois grupos nao cabem lado a lado
   em tela estreita: sem ele os botoes encolhem e "Visao Macro-FRBR" quebra
   em tres linhas dentro da pilula. Quebrar a BARRA e melhor que quebrar a
   palavra. */
.ci__exibir {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--ci-linha);
  font-size: 16px; color: var(--ci-suave);
}
/* "Exibir como" e rotulo, nao conteudo: partido em duas linhas ele vira
   ruido ao lado dos botoes. */
.ci__exibir > span { white-space: nowrap; }
.ci__exibir[hidden] { display: none; }
.ci__exibir-grupo { display: inline-flex; gap: 2px; padding: 3px; background: var(--ci-fundo); border-radius: 999px; }
.ci .ci__exibir-btn {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; color: var(--ci-suave); cursor: pointer; font-size: 16px;
  white-space: nowrap;
}
.ci .ci__exibir-btn[aria-pressed="true"] { background: var(--ci-papel); color: var(--ci-acento-esc); font-weight: 600; box-shadow: 0 1px 3px rgba(11,26,30,.12); }
/* Chat/Lista só governam a lista normal: numa leitura eles não têm o que
   fazer, e ficar clicável sem efeito é pior que ficar apagado. */
.ci .ci__exibir-btn[disabled] { opacity: .4; cursor: default; }

/* As leituras ficam na esquerda da mesma linha; "Exibir como" continua
   encostado na direita. A margem automática faz a divisão sem um wrapper
   a mais.

   São botões SOLTOS, não um grupo segmentado: cada um liga e desliga por
   conta própria, e o segmento sugeriria escolha única entre eles.        */
.ci__visoes { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }

/* ---------------------------------------------< bases consultadas

   Um botao por base que respondeu com registros. A contagem entra numa
   pilula dentro do botao: ela e o dado que faz a pessoa escolher, entao
   nao pode ficar do mesmo peso do nome.

   margin-right:auto empurra o grupo para a esquerda e deixa o "Exibir
   como" na direita, como estava o grupo de leituras que saiu daqui. */
.ci__bases { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.ci__bases:empty { display: none; }

.ci .ci__base-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 10px 0 12px;
  border: 1px solid var(--ci-linha-forte); border-radius: 8px;
  background: var(--ci-papel); color: var(--ci-suave);
  font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer;
  text-transform: none; box-shadow: none;
}
.ci .ci__base-btn:hover { border-color: var(--ci-acento); color: var(--ci-acento-esc); }
.ci .ci__base-btn[aria-pressed="true"] {
  border-color: var(--ci-acento); background: var(--ci-acento-fr);
  color: var(--ci-acento-esc); font-weight: 600;
}
/* A marca dentro do botao da base. Mesma regra do logo da contagem:
   altura fixa, largura livre - logo de instituicao vem em proporcao
   qualquer. */
.ci__base-logo { height: 20px; width: auto; }

/* A Minha Biblioteca so publica a versao BRANCA do logo, que sumiria no
   fundo claro da tela. Em vez de inverter a cor - que estragaria a marca
   se um dia ela virar colorida - ela ganha a chapa escura em que foi feita
   para viver. Com um arquivo escuro ou colorido, apague estas duas
   regras. */
.ci__base-logo[data-marca="digitais"],
.ci__total-logo[data-marca="digitais"] {
  padding: 3px 6px; border-radius: 4px;;
}
.ci__total-logo[data-marca="digitais"] { padding: 4px 8px; border-radius: 5px; }

.ci__base-n {
  min-width: 20px; padding: 2px 6px; border-radius: 999px;
  background: var(--ci-fundo); color: var(--ci-rotulo);
  font-size: 13.5px; font-weight: 700; text-align: center;
}
.ci .ci__base-btn[aria-pressed="true"] .ci__base-n { background: var(--ci-papel); }

.ci .ci__visao-btn {
  min-height: 30px; padding: 0 13px;
  border: 1px solid var(--ci-linha-forte); border-radius: 8px;
  background: var(--ci-papel); color: var(--ci-suave);
  font-size: 15px; line-height: 1; white-space: nowrap; cursor: pointer;
  text-transform: none; box-shadow: none;
}
.ci .ci__visao-btn:hover { border-color: var(--ci-acento); color: var(--ci-acento-esc); }
.ci .ci__visao-btn[aria-pressed="true"] {
  border-color: var(--ci-acento); background: var(--ci-acento-fr);
  color: var(--ci-acento-esc); font-weight: 600;
}

/* A visão por obra ocupa a largura toda: o cartão tem capa, abas e painel
   de exemplares lado a lado e não cabe espremido ao lado dos filtros. */
.ci--largo { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------< modal do panorama

   Camada própria acima de tudo. O fundo escurece e fecha ao clique; a
   caixa rola por dentro, para o texto longo não esticar a página atrás. */

.ci-travado { overflow: hidden; }

.ci__modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: 'Outfit', 'Signika', Arial, sans-serif;
}
.ci__modal-fundo {
  position: absolute; inset: 0;
  background: rgba(11, 26, 30, .55);
}
.ci__modal-caixa {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 760px; max-height: 100%;
  border-radius: 16px; background: var(--ci-papel, #fff);
  box-shadow: 0 24px 64px rgba(11, 26, 30, .38);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .ci__modal-caixa { animation: ci-modal-entra .22s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes ci-modal-entra {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.ci__modal-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--ci-linha);
}
.ci__modal-cab h3 { margin: 0; font-size: 19.5px; font-weight: 700; color: var(--ci-texto); }
.ci__modal-x {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: var(--ci-fundo);
  color: var(--ci-suave); font-size: 26.5px; line-height: 1; cursor: pointer;
  text-transform: none; box-shadow: none;
}
.ci__modal-x:hover { background: var(--ci-linha); color: var(--ci-texto); }

.ci__modal-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }

/* O texto do panorama. */
.ci__panorama { font-size: 17px; line-height: 1.65; color: var(--ci-texto); }
.ci__panorama h4 { margin: 18px 0 6px; font-size: 17.5px; font-weight: 700; color: var(--ci-acento-esc); }
.ci__panorama h4:first-child { margin-top: 0; }
.ci__panorama p { margin: 0 0 10px; }
.ci__panorama ul { margin: 0 0 10px; padding-left: 20px; list-style: disc; }
.ci__panorama li { margin-bottom: 4px; }
.ci__panorama a { color: var(--ci-acento); text-decoration: underline; text-underline-offset: 2px; }
.ci__panorama a:hover { color: var(--ci-acento-esc); }
.ci__panorama strong { font-weight: 700; }

.ci__panorama-fontes {
  margin-top: 18px; padding: 12px 14px;
  border-top: 1px dashed var(--ci-linha);
  font-size: 14px; line-height: 1.6; color: var(--ci-suave);
}
.ci__panorama-fontes p { margin: 0 0 4px; }
.ci__panorama-fontes ul { margin: 5px 0; padding-left: 18px; list-style: disc; }

@media (max-width: 640px) {
  .ci__modal { padding: 0; }
  .ci__modal-caixa { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* A frase de espera troca a cada 2,2s; sem a transição ela pisca. */
.ci__carregando-texto { transition: opacity .2s ease; }

/* ------------------------------------------< visão por obra (FRBR)

   Segue o modelo entregue: cartão com 3/12 de capa à esquerda e 9/12 de
   conteúdo à direita; dentro da direita, a identificação da obra, as abas
   de edição e o bloco da edição aberta, ele mesmo dividido em 7/12 de
   metadados e 5/12 de exemplares.                                        */

.ci__frbr { padding-bottom: 8px; }

.ci__obra-cartao {
  display: grid; grid-template-columns: 25% minmax(0, 1fr); gap: 24px;
  margin-bottom: 24px; padding: 24px;
  border: 1px solid var(--ci-linha); border-radius: 16px;
  background: var(--ci-papel);
  box-shadow: 0 1px 3px rgba(11, 26, 30, .06);
}
/* O primeiro cartão é o mais relevante da busca: o modelo o destaca com
   borda azul e sombra mais forte. */
.ci__obra-cartao--1 {
  border: 2px solid var(--ci-acento-fr);
  box-shadow: 0 10px 28px rgba(11, 26, 30, .10);
}

/* ---- coluna da capa: caixa cinza com borda, como no modelo */
.ci__obra-capa-col {
  display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 12px;
  padding: 16px;
  border: 1px solid var(--ci-linha); border-radius: 12px;
  background: var(--ci-fundo);
}

.ci__obra-capa {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 144px; max-width: 100%; height: 208px;   /* w-36 h-52 do modelo */
  padding: 12px; border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .2);
  color: #fff; overflow: hidden;
  box-shadow: 0 4px 10px rgba(11, 26, 30, .25);
}
.ci__obra-capa-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 6px;
  /* Sem transição de opacidade: com lazy o onload pode não chegar e a
     capa ficaria invisível. A imagem simplesmente pinta por cima. */
  opacity: 1; transition: none;
}
/* Sobre a imagem, o texto do topo e do pé precisa de sombra para ser
   legível em capa clara. */
.ci__obra-capa-alto, .ci__obra-capa-meio, .ci__obra-capa-pe { position: relative; }
/* Com a foto no ar o desenho tipográfico vira texto solto por cima da capa. */
.ci__obra-capa--foto .ci__obra-capa-alto,
.ci__obra-capa--foto .ci__obra-capa-meio,
.ci__obra-capa--foto .ci__obra-capa-pe { display: none; }
.ci__obra-capa-alto, .ci__obra-capa-pe { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

.ci__obra-capa-alto { display: block; }
.ci__obra-capa-kicker {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .75;
}
.ci__obra-capa-aut {
  display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; opacity: .9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci__obra-capa-meio { display: block; margin: auto 0; text-align: center; }
.ci__obra-capa-emblema { display: block; margin: 0 auto 4px; width: 26px; height: 26px; opacity: .9; }
.ci__obra-capa-emblema svg { width: 100%; height: 100%; }
.ci__obra-capa-tit {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14.5px; font-weight: 800; line-height: 1.2;
}
.ci__obra-capa-pe {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.ci__obra-capa-rot {
  display: block; font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; opacity: .8;
}
.ci__obra-capa-ed { display: block; font-size: 12px; font-weight: 700; }
.ci__obra-capa-ano {
  padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .2);
  font-size: 11px; font-weight: 700;
}

.ci .ci__obra-capa { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
/* Sem ficha conhecida a capa não é clicável: nada de cursor de link nem
   de levantar no hover prometendo um destino que não existe. */
.ci .ci__obra-capa--sem-ficha { cursor: default; }
.ci .ci__obra-capa--sem-ficha:hover { transform: none; box-shadow: 0 4px 10px rgba(11, 26, 30, .25); }
.ci .ci__obra-capa:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(11, 26, 30, .32);
}

.ci .ci__obra-detalhe {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 32px; padding: 0 12px;
  border: 0; border-radius: 8px;
  background: var(--ci-acento); color: #fff;
  font-size: 15px; font-weight: 700;
}
.ci .ci__obra-detalhe:hover { background: var(--ci-acento-esc); }
.ci__obra-detalhe svg { width: 14px; height: 14px; flex: 0 0 auto; }

.ci .ci__obra-pdf {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 30px; padding: 0 12px;
  border: 1px solid #F0B4B4; border-radius: 8px;
  background: #FFF1F1; color: #A4262C;
  font-size: 14.5px; font-weight: 600;
}
.ci .ci__obra-pdf:hover { background: #FFE4E4; }
.ci .ci__obra-pdf[hidden] { display: none; }
.ci__obra-pdf svg { width: 14px; height: 14px; flex: 0 0 auto; }

.ci__obra-conta { font-size: 13.5px; color: var(--ci-suave); text-align: center; }

/* ---- coluna do conteúdo */
.ci__obra-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ci__obra-ident { display: flex; flex-direction: column; gap: 8px; }

.ci .ci__obra-selo {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 800; color: var(--ci-acento);
}
.ci__obra-selo svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ci__obra-ponto { color: var(--ci-linha-forte); }
.ci__obra-classe { font-size: 14.5px; font-weight: 400; color: var(--ci-suave); }

.ci .ci__obra-nome { font-size: 24.5px; font-weight: 700; line-height: 1.25; color: var(--ci-texto); }
.ci .ci__obra-aut { font-size: 16.5px; color: var(--ci-suave); }
.ci .ci__obra-aut strong { color: var(--ci-texto); font-weight: 600; }

/* Tipo de material + a camada do modelo, logo abaixo do autor. */
.ci .ci__obra-tipo { margin-top: 3px; font-size: 15px; color: var(--ci-suave); }
.ci__obra-camada { font-style: normal; color: var(--ci-acento-esc); font-weight: 600; }

/* ---- abas de edição */
.ci__obra-abas-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.ci__obra-abas-rot {
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ci-suave);
}
.ci__obra-abas-frbr {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 800; color: var(--ci-acento);
}
.ci__obra-abas-frbr svg { width: 12px; height: 12px; }

.ci__obra-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.ci .ci__obra-aba {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 0 12px;
  border: 0; border-radius: 8px;
  background: var(--ci-fundo); color: var(--ci-texto);
  font-size: 14.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
}
.ci .ci__obra-aba:hover { background: var(--ci-linha); }
.ci .ci__obra-aba[aria-selected="true"] {
  background: var(--ci-acento); color: #fff;
  box-shadow: 0 1px 3px rgba(11, 26, 30, .18);
}
/* O "+" marca a edição que NÃO veio da busca: está aqui por pertencer à
   mesma obra, e quem lê precisa saber a diferença. */
.ci__obra-extra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(0, 0, 0, .1); font-size: 12px; font-weight: 700;
}
.ci .ci__obra-aba[aria-selected="true"] .ci__obra-extra { background: rgba(255, 255, 255, .3); }

/* ---- bloco da edição aberta: 7/12 de dados, 5/12 de exemplares */
/* A caixa de exemplares tem largura FIXA e fica encostada à direita: com
   colunas proporcionais ela mudava de tamanho a cada troca de edição,
   conforme o texto dos metadados encolhia ou crescia. O que se lê ali é
   sempre a mesma coisa - biblioteca e situação -, então a largura também
   deve ser sempre a mesma. */
.ci__manif {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 16px;
  align-items: start;
  padding: 16px; border: 1px solid var(--ci-linha); border-radius: 12px;
  background: var(--ci-fundo);
}
.ci__manif-dados { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; color: var(--ci-suave); }
.ci .ci__manif-dados h4 { margin-bottom: 4px; font-size: 16.5px; font-weight: 700; color: var(--ci-texto); }
.ci__manif-dados strong { color: var(--ci-texto); font-weight: 700; }
.ci__manif-reg { color: var(--ci-acento); font-weight: 600; }
.ci__manif-sub { margin-bottom: 3px; font-style: italic; }
.ci__manif-dados > span[hidden] { display: none; }

/* Identificacao da edicao numa linha so, quebrando quando nao couber. O
   separador e o vao, nao um caractere: ponto ou barra viram ruido quando um
   dos campos falta. */
.ci__manif-linha { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 2px; }

.ci__manif-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ci__manif-tag {
  padding: 2px 9px; border: 1px solid var(--ci-linha); border-radius: 999px;
  background: var(--ci-fundo); font-size: 14px; color: var(--ci-suave);
}
.ci .ci__manif-fonte { margin-top: 8px; font-size: 14.5px; color: var(--ci-suave); }

/* ---------------------------------------< resultado de base externa

   Sem capa e sem relevancia nossa: o que identifica e o tipo, o titulo e a
   procedencia. */
.ci .ci__ext {
  display: flex; gap: 14px; padding: 13px 14px;
  border-bottom: 1px solid var(--ci-linha); border-left: 3px solid transparent;
  color: inherit; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.ci .ci__ext:last-child { border-bottom: 0; }
.ci .ci__ext:hover { background: var(--ci-fundo); border-left-color: var(--ci-acento); }

/* Capa das bases digitais (Minha Biblioteca, JusLaboris, TST): o mesmo
   recorte do painel (118×170, object-fit cover). Só o tamanho na tela —
   as URLs (CDN, capa_jus, EBSCO) não mudam, o download não aumenta. */
.ci__ext-capa { flex: 0 0 118px; }
.ci__ext-capa .ci__capa {
  width: 118px; height: 170px; aspect-ratio: auto;
  padding: 0; border-radius: 6px;
}
.ci__ext-capa .ci__capa-img {
  display: block; width: 118px; height: 170px;
  object-fit: cover; border-radius: 6px;
}
.ci__ext-capa .ci__capa-pe, .ci__ext-capa .ci__capa-n { display: none; }

/* Sem foto (TST e demais bases): os dados do material, no mesmo desenho
   da capa tipográfica do acervo. Com foto, o texto some. */
.ci__ext-capa .ci__capa--dados {
  padding: 8px 9px;
  border: 2px solid rgba(255, 255, 255, .2);
  box-sizing: border-box;
}
.ci__ext-capa .ci__capa--foto .ci__obra-capa-alto,
.ci__ext-capa .ci__capa--foto .ci__obra-capa-meio,
.ci__ext-capa .ci__capa--foto .ci__obra-capa-pe { display: none; }
.ci__ext-capa .ci__capa--dados .ci__obra-capa-kicker {
  font-size: 7.5px; letter-spacing: .12em; color: #93C5FD; opacity: 1;
}
.ci__ext-capa .ci__capa--dados .ci__obra-capa-aut {
  font-size: 9px; color: #E2E8F0; white-space: nowrap;
}
.ci__ext-capa .ci__capa--dados .ci__obra-capa-tit {
  font-size: 11px; font-weight: 800; line-height: 1.2;
  -webkit-line-clamp: 5;
}
.ci__ext-capa .ci__capa--dados .ci__obra-capa-pe { padding-top: 6px; }
.ci__ext-capa .ci__capa--dados .ci__obra-capa-rot { font-size: 7px; color: #CBD5E1; }
.ci__ext-capa .ci__capa--dados .ci__obra-capa-ed { font-size: 9px; }
.ci__ext-capa .ci__capa--dados .ci__obra-capa-ano {
  font-size: 8.5px; background: rgba(255, 255, 255, .2);
}
.ci__ext-corpo { min-width: 0; flex: 1 1 auto; }

.ci__ext-tipo {
  display: inline-block; margin-bottom: 4px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ci-rotulo);
}
.ci__ext-titulo {
  display: block; font-size: 17.5px; font-weight: 600; line-height: 1.35;
  color: var(--ci-acento);
}
.ci__ext-proc { display: block; margin-top: 3px; font-size: 15px; color: var(--ci-suave); }
.ci__ext-sep { color: var(--ci-linha-forte); }

/* Resumo no resultado, cortado em tres linhas: indicio, nao leitura. */
.ci__ext-resumo {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 15px; line-height: 1.5; color: var(--ci-suave);
}

.ci__ext-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ci__ext-tag {
  padding: 2px 9px; border: 1px solid var(--ci-linha); border-radius: 999px;
  background: var(--ci-papel); font-size: 14px; color: var(--ci-suave);
}

/* Exemplares da base de fora: chamada, onde e situacao, um por linha. */
.ci__ext-exs { display: block; margin-top: 9px; }
.ci__ext-exs-rot {
  display: block; margin-bottom: 4px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ci-suave);
}
.ci__ext-ex {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 3px 0; font-size: 14.5px; color: var(--ci-suave);
}
.ci__ext-ex code {
  padding: 1px 6px; border-radius: 4px;
  background: var(--ci-fundo); font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--ci-texto);
}
.ci__ext-ex-onde { color: var(--ci-suave); }
.ci__ext-ex-mais { display: inline-block; margin-top: 2px; font-size: 14px; color: var(--ci-suave); }

/* Paginacao da base de fora. */
.ci__pag { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; }
/* O display:flex acima vence o [hidden] do navegador. Sem isto a barra
   continua na tela mesmo com o atributo ligado (visão tabulada). */
.ci__pag[hidden] { display: none; }
.ci .ci__pag-btn {
  min-height: 28px; padding: 0 13px;
  border: 1px solid var(--ci-linha-forte); border-radius: 999px;
  background: var(--ci-papel); color: var(--ci-rotulo);
  font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
  text-transform: none; box-shadow: none;
}
.ci .ci__pag-btn:hover:not([disabled]) { border-color: var(--ci-acento); color: var(--ci-acento-esc); }
.ci .ci__pag-btn[disabled] { opacity: .4; cursor: default; }
.ci__pag-onde { font-size: 15px; color: var(--ci-suave); font-variant-numeric: tabular-nums; }
.ci__manif-dados code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px; color: var(--ci-texto);
}

.ci__manif-itens {
  padding: 12px; border: 1px solid var(--ci-linha); border-radius: 12px;
  background: var(--ci-papel); font-size: 14.5px;
  box-shadow: 0 1px 2px rgba(11, 26, 30, .05);
}
.ci__itens-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--ci-linha);
}
.ci__itens-n {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700; color: var(--ci-texto);
}
.ci__itens-n svg { width: 12px; height: 12px; color: var(--ci-acento); }
.ci__itens-n em { font-style: normal; color: var(--ci-acento); font-weight: 800; }
.ci .ci__itens-mais {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border: 0; border-radius: 4px;
  background: var(--ci-fundo); color: var(--ci-texto);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.ci .ci__itens-mais:hover { background: var(--ci-acento); color: #fff; }
.ci__itens-mais svg { width: 9px; height: 9px; }

.ci__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--ci-linha);
}
.ci__item:last-child { border-bottom: 0; }
.ci__item-onde { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ci-texto); }
.ci__item-bib-linha {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  min-width: 0;
}
.ci__item-ident {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ci-texto);
}
.ci__item-sit {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.ci__item-sit--ok       { background: #D1FAE5; color: #065F46; }
.ci__item-sit--espera   { background: #FEF3C7; color: #92400E; }
.ci__item-sit--parado   { background: #FFE4E6; color: #9F1239; }
.ci__item-sit--especial { background: #CCFBF1; color: #115E59; }
.ci__item-sit--reserva  { background: #DBEAFE; color: #1E40AF; }
.ci__item-sit--restaura { background: #FCE7F3; color: #9D174D; }
.ci__item-sit--sumido   { background: #FFEDD5; color: #9A3412; }
.ci__item-sit--baixa    { background: #F1F5F9; color: #334155; }
.ci__item-sit--interno  { background: #EDE9FE; color: #5B21B6; }
.ci__item-sit--curso    { background: #CFFAFE; color: #155E75; }
.ci__item-sit--neutro   { background: #F8FAFC; color: #475569; }
.ci__manif-vazio { font-size: 14.5px; color: var(--ci-suave); }

@media (prefers-color-scheme: dark) {
  .ci:not([data-tema="claro"]) .ci__item-sit--parado { background: #3B1219; color: #FDA4AF; }
  .ci:not([data-tema="claro"]) .ci__obra-pdf { border-color: #6B2B30; background: #2A1416; color: #FDA4AF; }
}
.ci[data-tema="escuro"] .ci__item-sit--parado { background: #3B1219; color: #FDA4AF; }
.ci[data-tema="escuro"] .ci__obra-pdf { border-color: #6B2B30; background: #2A1416; color: #FDA4AF; }

@media (max-width: 900px) {
  .ci__obra-cartao { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  /* Estreito demais para duas colunas: a caixa passa a ocupar a linha. */
  .ci__manif { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------< leituras do resultado      */

.ci__visao { padding: 2px 0 6px; }
.ci__visao-nota { margin-bottom: 12px; font-size: 15px; line-height: 1.5; color: var(--ci-suave); }

/* CDU: recuo por nível, sem lista aninhada - a árvore é rasa por natureza. */
.ci__cdu-classe { margin-bottom: 10px; }
.ci__cdu-cab { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--ci-fundo); }
.ci__cdu-cota { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; color: var(--ci-acento-esc); }
.ci__cdu-nome { flex: 1 1 auto; font-size: 16px; color: var(--ci-texto); }
.ci__cdu-n { font-size: 14px; color: var(--ci-suave); }
.ci .ci__cdu-item { display: block; width: 100%; padding: 6px 10px 6px 30px; border: 0; background: none; color: var(--ci-texto); font-size: 16px; line-height: 1.4; text-align: left; cursor: pointer; }
.ci .ci__cdu-item:hover { background: var(--ci-acento-fr); }
.ci__cdu-cota-item { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; color: var(--ci-suave); }

/* IA: o texto que o modelo escreveu sobre este conjunto. */
.ci__analise { padding: 14px 16px; border: 1px solid var(--ci-linha); border-left: 3px solid var(--ci-acento); border-radius: var(--ci-raio); background: var(--ci-papel); }
.ci__analise h4 { margin: 14px 0 5px; font-size: 16px; font-weight: 700; color: var(--ci-texto); }
.ci__analise h4:first-child { margin-top: 0; }
.ci__analise p { font-size: 16.5px; line-height: 1.6; color: var(--ci-texto); }
.ci__analise ul { margin: 0; padding-left: 18px; }
.ci__analise li { font-size: 16px; line-height: 1.55; color: var(--ci-suave); }
.ci__analise-pe { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ci-linha); font-size: 14px; color: var(--ci-suave); }

.ci__conversa { flex: 1 1 auto; padding: 20px 20px 4px; min-height: 0; }
/* A suavidade da âncora mora aqui, e só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) { .ci__conversa { scroll-behavior: smooth; } }

/* ---------------------------------------------------< estado inicial    */

/* min-height, não height: com os cartões E a esfera na tela o conteúdo
   pode passar da altura da coluna, e aí ele cresce e a conversa rola, em
   vez de cortar a nuvem pela metade. */
.ci__inicio { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 24px 8px; text-align: center; }

/* Respiro entre os cartões e a esfera, quando os dois estão ligados. */
.ci__exemplos + .ci__nuvem { margin-top: 22px; }
.ci__inicio-icone { color: var(--ci-acento); margin-bottom: 14px; }
.ci .ci__inicio h2 { margin-bottom: 8px; font-size: 25.5px; font-weight: 700; color: var(--ci-texto); }
.ci .ci__inicio p { margin-bottom: 20px; font-size: 17.5px; color: var(--ci-suave); max-width: 44ch; }
/* -----------------------------------------< sugestões em cartões (v2)

   A versão 2 da tela inicial: as mesmas sugestões, paradas e todas legíveis
   ao mesmo tempo. O seletor é escopado em .ci__exemplos porque a classe
   .ci__exemplo também veste as tags da esfera e os botões que a análise
   escreve - lá o cartão de 62px não cabe.                                */

.ci__exemplos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; width: 100%; max-width: 640px;
}
.ci .ci__exemplos > .ci__exemplo {
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--ci-aviso-linha); border-radius: 12px;
  background: var(--ci-aviso-fundo); color: var(--ci-aviso); cursor: pointer;
  font-size: 16px; line-height: 1.4; text-align: left;
  text-transform: none; box-shadow: none;
}
.ci .ci__exemplos > .ci__exemplo:hover {
  border-color: var(--ci-aviso);
  /* Só a borda fecha no hover: trocar o fundo de um bloco inteiro em
     amarelo forte cansa a vista. */
  background: var(--ci-aviso-fundo); color: var(--ci-aviso);
}

/* ---------------------------------------------------< nuvem de sugestões

   As tags têm tamanhos diferentes para a nuvem ter relevo, e o tamanho vem
   da POSIÇÃO (nth-child), não do conteúdo: o JS troca o texto de lugar o
   tempo todo e a caixa precisa ficar parada. Se o tamanho seguisse a
   palavra, cada troca empurraria as vizinhas.                            */

.ci__nuvem {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 10px;
  width: 100%; max-width: 680px;
  /* Altura reservada: a nuvem monta com o que couber e não sacode a tela
     quando o JS entra e recorta os excedentes. */
  min-height: 190px;
}

.ci .ci__tag {
  padding: 7px 14px;
  border: 1px solid var(--ci-linha); border-radius: 999px;
  background: var(--ci-papel); color: var(--ci-suave);
  cursor: pointer;
  font-size: 16px; line-height: 1.35; text-align: center;
  text-transform: none; box-shadow: none;   /* o style.css antigo insiste */
  transition: opacity .32s ease, transform .32s ease,
              border-color .16s ease, background-color .16s ease, color .16s ease;
}

/* Relevo da nuvem em linha (o estado sem JS): algumas maiores e mais
   escuras, outras discretas. Na esfera o relevo vem da profundidade. */
.ci .ci__nuvem:not(.ci__nuvem--esfera) > *:nth-child(5n+1) { font-size: 18px; color: var(--ci-texto); font-weight: 600; }
.ci .ci__nuvem:not(.ci__nuvem--esfera) > *:nth-child(5n+3) { font-size: 14.5px; }
.ci .ci__nuvem:not(.ci__nuvem--esfera) > *:nth-child(7n+2) { font-size: 17px; }

/* ----------------------------------------------------< esfera 3D

   Ligada pelo JS. A caixa é quadrada e o centro dela é o centro da esfera:
   cada tag é posicionada em 50%/50% e empurrada dali pelo transform, que o
   quadro de animação reescreve. Nada de transition em transform - as duas
   coisas brigariam e o giro sairia borrachudo.                            */

.ci__nuvem--esfera {
  display: block; position: relative;
  width: 100%; max-width: 560px; height: 360px;
  margin: 0 auto; min-height: 0;
  /* Rede de segurança: o raio já recua o tamanho da tag mais larga, mas
     numa janela muito estreita ainda pode sobrar ponta. Melhor cortar do
     que abrir barra de rolagem na conversa inteira. */
  overflow: hidden;
  /* O cursor governa a rotação: sem isto, a seta sobre a caixa não diz
     que ali tem interação. */
  cursor: crosshair;
}

.ci .ci__nuvem--esfera > .ci__tag {
  position: absolute; left: 50%; top: 50%;
  max-width: none; white-space: nowrap;
  font-size: 16px;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
  will-change: transform, opacity;
}

/* Sob o cursor a esfera congela, então vale destacar quem vai receber o
   clique - e trazer a tag para a frente de todas. */
.ci .ci__nuvem--esfera > .ci__tag:hover,
.ci .ci__nuvem--esfera > .ci__tag:focus-visible {
  opacity: 1 !important;   /* o quadro escreve opacity inline */
  z-index: 200 !important;
  border-color: var(--ci-acento); color: var(--ci-acento-esc);
  background: var(--ci-acento-fr);
}

/* As perguntas inteiras são o exemplo do que dá para escrever: destaque. */
.ci .ci__tag--frase {
  max-width: 330px;
  border-color: var(--ci-acento-fr);
  background: var(--ci-acento-fr); color: var(--ci-acento-esc);
  font-size: 15px; font-weight: 500; text-align: left;
}

/* Busca anterior de quem está na tela: marcada, porque clicar nela é
   repetir, não descobrir. */
.ci .ci__tag--minha { border-style: dashed; border-color: var(--ci-acento); color: var(--ci-acento-esc); }
.ci .ci__tag--minha::before { content: "↺ "; opacity: .75; }

.ci .ci__tag:hover,
.ci .ci__tag:focus-visible {
  border-color: var(--ci-acento); color: var(--ci-acento-esc);
  background: var(--ci-acento-fr);
}
/* O empurrãozinho no hover só no modo em linha: na esfera o transform é
   a posição da tag, e mexer nele a teleportaria. */
.ci .ci__nuvem:not(.ci__nuvem--esfera) > .ci__tag:hover { transform: translateY(-1px); }

/* Durante a troca de palavra: sai apagando para cima, entra subindo. */
.ci .ci__tag--trocando { opacity: 0; transform: translateY(-6px) scale(.96); }

/* A flutuação é contínua e de amplitude pequena - a nuvem respira, não
   se mexe. O atraso vem do nth-child para as tags não subirem em bloco. */
@media (prefers-reduced-motion: no-preference) {
  .ci .ci__nuvem:not(.ci__nuvem--esfera) > .ci__tag { animation: ci-boiar 7s ease-in-out infinite; }
  .ci .ci__nuvem > *:nth-child(3n+1) { animation-delay: -1.4s; animation-duration: 8s; }
  .ci .ci__nuvem > *:nth-child(3n+2) { animation-delay: -3.1s; animation-duration: 6.5s; }
  .ci .ci__nuvem > *:nth-child(4n+3) { animation-delay: -4.6s; }

  /* Parada para quem foi clicar: mira em alvo que se mexe é ruim. */
  .ci .ci__nuvem:hover > *,
  .ci .ci__nuvem:focus-within > * { animation-play-state: paused; }
}

/* Flutua por 'translate', não por 'transform': animação vence declaração
   normal, e se as duas coisas disputassem a mesma propriedade a tag nunca
   sairia do lugar na troca de palavra nem no hover. Navegador antigo que
   não conhece 'translate' só não flutua - o resto funciona igual. */
@keyframes ci-boiar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* Sem movimento nenhum: a nuvem continua inteira e clicável. */
@media (prefers-reduced-motion: reduce) {
  .ci .ci__tag { transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
  .ci .ci__tag--trocando { opacity: 1; transform: none; }
}

/* Recortes aplicados, logo abaixo da pergunta. */
.ci__filtros-ativos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 14px; }
.ci .ci__filtro-ativo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 11px;
  border: 1px solid var(--ci-acento); border-radius: 999px;
  background: var(--ci-acento-fr); color: var(--ci-acento-esc);
  font-size: 14.5px; line-height: 1.3; cursor: pointer;
  text-transform: none; box-shadow: none;
}
.ci .ci__filtro-ativo:hover { background: var(--ci-acento); color: #fff; }
.ci .ci__filtro-x { font-size: 18px; line-height: 1; opacity: .8; }

/* O aviso da ponte por título: é limite conhecido, não erro - então
   informa sem alarmar. */
.ci .ci__nota-ponte {
  margin-top: 8px; padding: 8px 11px;
  border-left: 3px solid var(--ci-aviso-linha); border-radius: 6px;
  background: var(--ci-aviso-fundo); color: var(--ci-aviso);
  font-size: 14.5px; line-height: 1.5;
}

/* ---------------------------------------------------< turno             */

.ci__turno { padding-bottom: 26px; scroll-margin-top: 12px; }

.ci__pergunta-linha { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.ci .ci__pergunta {
  max-width: 85%; padding: 11px 18px;
  border-radius: 18px 18px 6px 18px;   /* canto inferior direito menos redondo */
  background: linear-gradient(135deg, var(--ci-acento-esc), var(--ci-acento));
  color: #fff; font-size: 17.5px; line-height: 1.45; overflow-wrap: anywhere;
}

.ci__carregando { display: flex; align-items: center; gap: 9px; font-size: 17px; color: var(--ci-suave); }
.ci .ci__resposta { margin-bottom: 10px; font-size: 17.5px; line-height: 1.65; }
.ci .ci__total { margin-bottom: 14px; font-size: 17.5px; line-height: 1.6; color: var(--ci-texto); }
.ci .ci__total strong { font-weight: 700; color: var(--ci-acento-esc); font-variant-numeric: tabular-nums; }

/* O logo da casa antes da contagem.
   
   Imagem INLINE, nao item de flex: com display:flex no paragrafo, cada
   trecho de texto em volta do <strong> viraria um item separado e a frase
   ganharia buracos no meio. Altura fixa e largura livre porque logo de
   cliente vem em proporcao qualquer - travar a largura amassaria uns e
   esticaria outros. */
.ci__total-logo { height: 28px; width: auto; margin-right: 9px; vertical-align: -8px; }

/* ---------------------------------------------------< estante de capas  */

/* A CAPA é que tem tamanho fixo (--ci-capa-l/a); a coluna é flexível e
   centraliza a capa dentro dela. Assim a sobra da linha vira respiro entre
   as capas em vez de se acumular na direita, e a capa continua idêntica em
   qualquer largura. O auto-fill cabe quantas couberem e desce sozinho no
   estreito - por isso esta estante não tem media query nenhuma. */
.ci__estante {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ci-capa-l), 1fr));
  justify-items: center; gap: 22px 18px;
}
/* A célula NÃO pode se chamar ci__item: esse nome é a linha de exemplares,
   que é flex - o cartão virava item de flex, perdia a largura e cada capa
   saía de um tamanho. */
.ci__estante-item { min-width: 0; }
.ci__estante-item[hidden] { display: none; }
.ci .ci__cartao { display: block; width: var(--ci-capa-l); color: inherit; }
.ci__estante .ci__capa {
  width: var(--ci-capa-l); height: var(--ci-capa-a);
  aspect-ratio: auto; padding: 10px;   /* padding explícito: o @supports abaixo mexe no padding-bottom */
}

/* A capa tipográfica é o FUNDO PERMANENTE; a imagem entra por cima. Assim
   não há moldura vazia enquanto carrega e a troca nunca aparece. */
/* Navegador sem aspect-ratio (Safari < 15) deixava a capa com a altura da
   imagem que chegasse, e a estante virava um serrote. */
@supports not (aspect-ratio: 3 / 4) {
  .ci__capa { height: 0; padding-bottom: 133.33%; }
  .ci__capa > * { position: absolute; }
}

.ci__capa {
  position: relative; aspect-ratio: 3 / 4; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px; border-radius: 10px; overflow: hidden;
  color: #fff; transition: transform .18s ease, box-shadow .18s ease;
}
.ci .ci__cartao:hover .ci__capa { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,26,30,.2); }
.ci__capa-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 10px;
  /* Sem transição de opacidade disparada por onLoad: com carregamento
     prioritário o evento pode nunca chegar e a capa ficaria invisível.
     O "none" é explícito porque o style.css do legado põe transition em
     elementos genéricos - a imagem simplesmente pinta por cima quando chega. */
  opacity: 1;
  transition: none;
}
/* margin-top:auto porque o titulo saiu de dentro da capa: sem ele, o
   justify-content:space-between do pai nao tem dois filhos para separar e o
   ano subiria para o topo. */
.ci__capa-pe {
  position: relative; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; font-size: 12.5px;
}
.ci__capa-sigla { padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.22); font-weight: 700; }
.ci__capa-n {
  position: absolute; top: 7px; right: 7px; z-index: 2;   /* direita: à esquerda cobre o começo do título */
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ci-acento-esc);
  font-size: 13.5px; font-weight: 700; line-height: 20px; text-align: center;
}
.ci__item-titulo {
  margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ci-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ci .ci__cartao:hover .ci__item-titulo { color: var(--ci-acento); }
.ci__item-autor {
  margin-top: 2px; font-size: 14.5px; line-height: 1.35; color: var(--ci-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ci__mais-linha { display: flex; justify-content: center; margin-top: 14px; }
.ci .ci__mais {
  min-height: 38px; padding: 0 18px; border: 1px solid var(--ci-linha-forte);
  border-radius: 999px; background: var(--ci-papel); color: var(--ci-texto);
  font-size: 16.5px; cursor: pointer;
}
.ci .ci__mais:hover { border-color: var(--ci-acento); color: var(--ci-acento); }

/* ---------------------------------------------------< visão lista       */

.ci__lista-cartao { border: 1px solid var(--ci-linha); border-radius: var(--ci-raio); overflow: hidden; }
.ci__lista-cab { padding: 14px 16px; border-bottom: 1px solid var(--ci-linha); background: var(--ci-fundo); }
.ci .ci__interpretacao { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ci-texto); }
.ci__conceitos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ci__conceito { padding: 4px 10px; border-radius: 999px; background: var(--ci-acento-fr); color: var(--ci-acento-esc); font-size: 14.5px; font-weight: 500; }

/* Título e autor cortados em linhas: registro de catálogo tem título de
   três linhas e menção de responsabilidade com seis autores, e sem corte
   uma única linha da lista ocupava meia tela. */
.ci__linha-titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ci__linha-meta {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ci__linha-reg { display: block; }

.ci .ci__linha {
  display: flex; gap: 14px; padding: 12px 14px;
  border-bottom: 1px solid var(--ci-linha); border-left: 3px solid transparent;
  color: inherit; transition: background-color .15s ease, border-color .15s ease;
}
.ci .ci__linha:last-child { border-bottom: 0; }
.ci .ci__linha:hover { background: var(--ci-fundo); border-left-color: var(--ci-acento); }
.ci__linha-capa { flex: 0 0 70px; }
.ci__linha-capa .ci__capa { padding: 6px; border-radius: 6px; }
.ci__linha-capa .ci__capa-pe, .ci__linha-capa .ci__capa-n { display: none; }
.ci__linha-corpo { min-width: 0; flex: 1 1 auto; }
.ci .ci__linha-titulo { font-size: 17.5px; font-weight: 600; line-height: 1.35; color: var(--ci-acento); }
.ci .ci__linha-meta { margin-top: 3px; font-size: 15px; color: var(--ci-suave); }
.ci .ci__linha-reg {
  margin-top: 4px; font-family: 'Courier New', monospace; font-size: 14px; color: var(--ci-suave);
}
.ci__rel {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 6px;
  background: var(--ci-ok-fundo); color: var(--ci-ok);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------< entrada           */

.ci__entrada { flex: 0 0 auto; padding: 12px 20px 16px; border-top: 1px solid var(--ci-linha); }
.ci__campo {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 8px 8px 16px; border: 1px solid var(--ci-linha-forte);
  border-radius: 22px; background: var(--ci-papel);
}
.ci__campo:focus-within { border-color: var(--ci-acento); box-shadow: 0 0 0 3px var(--ci-acento-fr); }
.ci .ci__texto {
  flex: 1 1 auto; min-width: 0; min-height: 28px; max-height: 132px;
  margin: 0; padding: 4px 0; border: 0; background: none; resize: none;
  color: var(--ci-texto); font-family: inherit; font-size: 18px; line-height: 1.45;
  outline: none; overflow-y: auto;
}
.ci .ci__texto::placeholder { color: var(--ci-suave); opacity: 1; }
.ci .ci__enviar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #4BA3CC, var(--ci-acento));
  color: #fff; cursor: pointer;
}
/* Desabilitado vira círculo cinza com a seta BRANCA por cima, e não o
   botão inteiro a 35% - assim ninguém fica sem ver o ícone enquanto o
   campo está vazio, que é justamente o primeiro estado da tela. */
.ci .ci__enviar[disabled] {
  background: var(--ci-linha-forte); opacity: 1; cursor: default;
}

/* O style.css do legado tem regras soltas para svg e para "button img/svg";
   sem estas três linhas a seta some dentro do botão. display:block também
   tira o espaço de linha-base que desalinhava o ícone no círculo. */
.ci .ci__enviar > svg,
.ci .ci__enviar-icone {
  display: block; width: 18px; height: 18px;
  max-width: none; max-height: none;
  stroke: #fff; fill: none; color: #fff;
}
.ci__entrada-nota { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ci-suave); text-align: center; }

/* ====================================< caixas de apoio (coluna esquerda) */

.ci__caixa-cab {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  border-bottom: 1px solid var(--ci-linha);
  font-size: 15px; font-weight: 700; color: var(--ci-rotulo);
}
.ci__caixa-nome {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ci__previa {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
  background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ci__faixa {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 12px; padding: 10px 12px; border-radius: 10px; background: var(--ci-acento-fr);
}
.ci__faixa-rot { font-size: 14.5px; font-weight: 600; color: var(--ci-acento-esc); }
.ci__faixa-n { font-size: 26.5px; font-weight: 800; color: var(--ci-acento-esc); font-variant-numeric: tabular-nums; }
.ci__mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 10px; }
.ci__mini-capa {
  display: flex; align-items: flex-end;
  aspect-ratio: 3 / 4; padding: 6px; border-radius: 6px;
  color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.2; overflow: hidden;
}
.ci__mini-capa span {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ci__mini-capa--0 { background: linear-gradient(150deg, #14406B, #2E7FB8); }
.ci__mini-capa--1 { background: linear-gradient(150deg, #3B2F6B, #7A4B9E); }
.ci__mini-capa--2 { background: linear-gradient(150deg, #6B2540, #B8437A); }

.ci .ci__fonte-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px 8px; font-size: 14.5px; color: var(--ci-acento);
}
.ci .ci__fonte-link:hover { text-decoration: underline; }
/* "exibir resultados" virou botão (abre a lista aqui dentro, não sai do
   site); estas três linhas o devolvem à aparência de link. */
.ci button.ci__fonte-link {
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; text-align: left;
}
.ci .ci__fonte-link[hidden] { display: none; }

/* ------------------------------------< Juslaboris no meio da conversa */

.ci__jus {
  margin-bottom: 26px; padding: 14px 16px;
  border: 1px solid var(--ci-linha); border-left: 3px solid var(--ci-acento);
  border-radius: var(--ci-raio); background: var(--ci-papel);
}
.ci .ci__jus-cab { margin-bottom: 10px; font-size: 16.5px; color: var(--ci-texto); }
.ci .ci__jus-cab em { font-style: normal; color: var(--ci-acento-esc); font-weight: 600; }

/* Altura limitada com rolagem própria: uma busca pode voltar com 100
   documentos, e empurrar a conversa cem linhas para baixo perderia o que
   o acervo respondeu. */
.ci__jus-lista {
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--ci-linha);
}
.ci .ci__jus-item {
  display: block; padding: 9px 4px;
  border-bottom: 1px solid var(--ci-linha);
  color: inherit; text-decoration: none;
}
.ci .ci__jus-item:hover { background: var(--ci-fundo); }
.ci .ci__jus-item--sem-link:hover { background: none; cursor: default; }
.ci .ci__jus-titulo { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ci-texto); }
.ci .ci__jus-meta { display: block; margin-top: 2px; font-size: 14px; color: var(--ci-suave); }
.ci .ci__jus-pe { margin-top: 10px; font-size: 14px; color: var(--ci-suave); }
.ci__docs { padding: 0 12px 12px; }
.ci__doc { padding: 9px 0; border-top: 1px solid var(--ci-linha); }
.ci__doc:first-child { border-top: 0; }
.ci__doc-tipo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ci-suave); }
.ci .ci__doc-titulo { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ci-texto); }
.ci .ci__doc-autor { font-size: 14px; color: var(--ci-suave); }
.ci__doc-sit { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 5px; background: var(--ci-ok-fundo); color: var(--ci-ok); font-size: 12.5px; font-weight: 700; }
.ci__fonte { padding: 0 14px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ci-suave); }

/* ------------------------------------------< a ficha por cima da busca

   TELA INTEIRA, nao modal. Por dentro e um painel - a busca continua
   montada atras e fechar nao refaz pergunta nenhuma -, mas por fora tem de
   parecer o que sempre foi: a pagina do registro.

   Um modal diria "isto e um recorte, o que importa esta atras", e aqui e o
   contrario: a ficha e o assunto enquanto estiver aberta. Por isso fundo
   opaco, largura da pagina e nenhuma sombra flutuando.

   position:fixed e nao absolute porque .ci e um grid com rolagem interna -
   dentro dele o painel herdaria a rolagem da coluna e nao cobriria o
   cabecalho. */
.ci__ficha {
  /* Acima do .header-admin, que tem z-index 999998 e estava pintando por
     cima da primeira linha do painel - onde fica justamente o "Voltar". */
  position: fixed; inset: 0; z-index: 999999;
  background: var(--ci-fundo);
  overflow-y: auto; overscroll-behavior: contain;
  animation: ci-ficha-entra .18s ease-out both;
}
.ci__ficha[hidden] { display: none; }

.ci__ficha-painel {
  width: min(1180px, 100%); margin: 0 auto;
  /* 50px no topo para a primeira linha do painel - onde fica o "Voltar" -
     nascer ABAIXO do header. O z-index alto sozinho nao resolveu na pagina
     de verdade; a folga e que resolve, e foi medida la. Mexer nisto sem
     conferir com o header na tela esconde o botao de novo. */
  padding: 50px 16px 40px;
}

@keyframes ci-ficha-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ci__ficha { animation: none; }
}

.ci .ci__ficha-fechar {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 12px; min-height: 30px; padding: 0 13px;
  border: 1px solid var(--ci-linha-forte); border-radius: 999px;
  background: var(--ci-papel); color: var(--ci-rotulo);
  font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
  text-transform: none; box-shadow: none;
}
.ci .ci__ficha-fechar:hover { border-color: var(--ci-acento); color: var(--ci-acento-esc); }

/* A ficha mantem a moldura propria - aqui ela esta sobre o fundo da
   pagina, como na tela dela, e nao dentro de um cartao. */
.ci__ficha-corpo .fic { max-width: none; margin-bottom: 0; }

/* Carregando: centrado no painel. Um spinner no canto superior faz a tela
   parecer travada enquanto a ficha nao chega. */
.ci__ficha-carregando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 55vh; color: var(--ci-suave); font-size: 16.5px;
}
.ci__ficha-carregando .ci__giro { width: 22px; height: 22px; border-width: 2.5px; }

/* O botao do painel so aparece quando o conteudo NAO tem voltar proprio -
   e o caso da ficha de base externa. */
.ci .ci__ficha-fechar[hidden] { display: none; }

/* A ficha de base externa nao tem moldura propria: ganha a mesma daqui. */
.ci__fex {
  background: var(--ci-papel); border: 1px solid var(--ci-linha);
  border-radius: 18px; padding: 24px 26px 26px;
}

/* Com o painel aberto, rolar a pagina de tras confunde: o dedo mexe no que
   nao esta a vista. */
body.ci-sem-rolagem { overflow: hidden; }

/* --- ficha de registro de OUTRO acervo, montada com o que a busca trouxe */
.ci__fex-onde {
  margin: 0 0 6px; font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ci-rotulo);
}
.ci .ci__fex-titulo { margin: 0 0 14px; font-size: 26.5px; font-weight: 700; line-height: 1.25; }

.ci__fex-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 26px; margin: 0 0 18px; }
.ci__fex-campo dt { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ci-suave); }
.ci__fex-campo dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ci-texto); }

.ci__fex-bloco { margin: 0 0 18px; }
.ci .ci__fex-bloco h2 {
  margin: 0 0 8px; font: 700 14.5px/1.3 'Outfit', Arial, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ci-rotulo);
}
.ci__fex-resumo { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ci-texto); }

.ci__fex-assuntos { display: flex; flex-wrap: wrap; gap: 6px; }
.ci__fex-assunto {
  padding: 3px 10px; border: 1px solid var(--ci-linha); border-radius: 999px;
  background: var(--ci-fundo); font-size: 14.5px; color: var(--ci-suave);
}

.ci .ci__fex-ir {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px;
  border-radius: 999px; background: var(--ci-acento); color: #fff;
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.ci .ci__fex-ir:hover { background: var(--ci-acento-esc); color: #fff; }
.ci__fex-nota { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ci-suave); }

/* =========================================================< responsivo   */

/* A lateral é apoio, não conteúdo: some antes da conversa. */
@media (max-width: 1023px) {
  .ci { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 170px); }
  .ci__esq { display: none; }
}
@media (max-width: 640px) {
  .ci__exemplos { grid-template-columns: minmax(0, 1fr); }
  /* Estreito: o botão vira só o ícone e o campo fica com o espaço. */
  .ci .ci__nova-rotulo { display: none; }
  .ci .ci__nova { width: 46px; padding: 0; }
  .ci__nuvem { min-height: 0; gap: 7px 8px; }
  .ci .ci__tag--frase { max-width: 100%; }
  .ci__conversa { padding: 16px 14px 4px; }
  .ci__entrada { padding: 10px 14px 14px; }
}

.ci .visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ci .ci__falha-detalhe {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--ci-fundo); color: var(--ci-suave);
  font-family: 'Courier New', monospace; font-size: 14.5px; line-height: 1.5;
  overflow-wrap: anywhere;
}