/* =========================================================================
   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; background: #16232A;
  }
  .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: center; 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: 16px; }
  .ci__obra-ident { display: flex; flex-direction: column; gap: 3px; }
  
  .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 pequena a esquerda, como na lista do acervo. */
  .ci__ext-capa {
      flex: 0 0 115px;
  }
  
  /* A da JusLaboris e meia vez maior.
     
     As outras bases mandam capa de livro, que a 62 px ainda se reconhece
     pela arte. A JusLaboris manda a miniatura da PAGINA do documento, feita
     pelo DSpace: e folha de texto, e nesse tamanho vira um borrao cinza.
     So a largura muda - a altura vem do aspect-ratio da .ci__capa. */
  .ci__ext-capa[data-marca="jus"] { flex: 0 0 93px; }
  
  .ci__ext-capa .ci__capa { padding: 6px; border-radius: 6px; }
  .ci__ext-capa .ci__capa-pe, .ci__ext-capa .ci__capa-n { display: none; }
  .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; }
  .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-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: var(--ci-ok-fundo); color: var(--ci-ok); }
  .ci__item-sit--espera { background: var(--ci-aviso-fundo); color: var(--ci-aviso); }
  .ci__item-sit--parado { background: #FFE4E6; color: #9F1239; }
  .ci__item-sit--neutro { background: var(--ci-fundo); color: var(--ci-suave); }
  .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;
  }