/* ============================================================================
   BIBLIOTECA DE PROMPTS — desenho novo  (12/09/2026)

   11/09: o pacote v5 trouxe a biblioteca quase preta com roxo forte; o Pedro
   disse que era "cor nada a ver com a identidade" e a folha anterior só
   repintou de claro o desenho escuro — o que sobrou foi uma página gigante:
   título de 61px ocupando meia tela, três caixas de "como funciona" do tamanho
   de cartões e 24 prompts com mais ar do que texto.

   12/09 — *"biblioteca tem que melhorar lá bastante o design, cores etc"*:
   - a capa virou uma FAIXA: título em dois tamanhos, a linha do "como
     funciona" em três passos finos, e o contador.
   - a busca e os filtros viram uma barra que gruda no topo ao rolar.
   - o cartão de prompt ficou denso e legível, com a cor da ÁREA (dinheiro,
     tráfego, operação, cliente, comando) no ícone e numa fita à esquerda —
     a mesma família de cores dos 12 funcionários.

   Esta folha é a última da página: ela manda em cima do v5.css. Por isso todo
   seletor começa em `body.v5-biblioteca`.
   ========================================================================== */

body.v5-biblioteca { --b-linha: #E2E6F0; }
body.v5-biblioteca .library-page.active { background: var(--paper); color: var(--text); }
body.v5-biblioteca .library-content { background: var(--paper); max-width: 1400px; }

/* ------------------------------------------------------------------- CAPA */
body.v5-biblioteca .library-masthead {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); align-items: stretch; gap: 0;
  overflow: hidden; background: #fff; border: 1px solid var(--b-linha); border-radius: 24px;
  margin-bottom: 18px; box-shadow: 0 8px 22px -16px rgba(9,11,18,.22);
}
body.v5-biblioteca .library-title h1 {
  /* 16/09: era clamp(34px, 4vw, 56px) e empurrava os cartões para fora da
     primeira tela. A capa perde ~90px de altura e a primeira pergunta passa a
     aparecer sem rolar em 1440x900 — medido. */
  margin: 0 0 12px; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.02;
  letter-spacing: -.035em; color: var(--ink); max-width: 18ch;
}
body.v5-biblioteca .library-title { padding: clamp(24px,3vw,38px); display: flex; flex-direction: column; justify-content: center; }
body.v5-biblioteca .library-title > p {
  margin: 0; max-width: 58ch; color: var(--muted); font-size: 15px; line-height: 1.6;
}
body.v5-biblioteca .library-actions { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
body.v5-biblioteca .library-actions a { padding: 10px 15px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--lime); color: var(--ink); }
body.v5-biblioteca .library-actions a:last-child { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
/* --------------------------------------------------------------- A ESTANTE
   16/09/2026: as capas viraram BOTÃO de filtro. Cinco em vez de quatro (entrou
   "Comando"), cada uma com a contagem da área. O escalonamento continua — é o
   que dá o ar de estante — mas agora ele responde ao mouse e ao teclado. */
body.v5-biblioteca .library-shelf {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  align-content: center; padding: 26px 22px; background: #EFF1F7;
  border-left: 1px solid var(--b-linha);
}
body.v5-biblioteca .library-book {
  min-height: 148px; padding: 12px 7px 11px; border: 0; border-radius: 8px 8px 4px 4px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  gap: 8px; color: #fff; font: 800 10.5px/1.25 Inter, sans-serif; text-align: center;
  box-shadow: inset -5px 0 rgba(0, 0, 0, .12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
body.v5-biblioteca .library-book svg { width: 21px; height: 21px; margin-top: 5px; flex: none; }
body.v5-biblioteca .library-book span { display: block; }
body.v5-biblioteca .library-book b {
  display: block; font: 900 21px/1 Inter, sans-serif; letter-spacing: -.04em; margin-bottom: 2px;
}
body.v5-biblioteca .library-book:hover,
body.v5-biblioteca .library-book:focus-visible {
  transform: translateY(-5px); box-shadow: inset -5px 0 rgba(0,0,0,.12), 0 10px 20px -12px rgba(9,11,18,.5);
}
body.v5-biblioteca .library-book:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* a capa escolhida sai da fila e ganha um traço embaixo */
body.v5-biblioteca .library-book.ativa {
  transform: translateY(-9px);
  box-shadow: inset -5px 0 rgba(0,0,0,.12), 0 0 0 3px var(--ink), 0 12px 22px -12px rgba(9,11,18,.55);
}
/* as outras recuam quando uma está escolhida */
body.v5-biblioteca .library-shelf:has(.ativa) .library-book:not(.ativa) { filter: saturate(.45) opacity(.72); }

body.v5-biblioteca .library-book.dinheiro { background: #1F8F79; }
body.v5-biblioteca .library-book.trafego  { background: #3560D6; transform: translateY(8px); }
body.v5-biblioteca .library-book.operacao { background: #C8741F; min-height: 166px; }
body.v5-biblioteca .library-book.cliente  { background: #A74651; transform: translateY(14px); }
body.v5-biblioteca .library-book.comando  { background: #3BD4B5; transform: translateY(4px); }
body.v5-biblioteca .library-book.trafego:hover,
body.v5-biblioteca .library-book.cliente:hover,
body.v5-biblioteca .library-book.comando:hover { transform: translateY(-5px); }

body.v5-biblioteca .library-shelf p {
  grid-column: 1 / -1; margin: 20px 0 0; color: #46626C; font-size: 12px; text-align: center;
}
body.v5-biblioteca .library-shelf p b { color: var(--ink); font-size: 18px; }

/* ------------------------------------------------------- BUSCA E FILTROS */
body.v5-biblioteca .library-toolbar {
  position: sticky; top: calc(var(--barra, 62px) + 6px); z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(243,245,249,.92); backdrop-filter: blur(10px);
  padding: 10px 0; margin: 0 0 6px;
}
body.v5-biblioteca .library-page .search-box {
  flex: 1 1 340px; min-width: 260px; max-width: none;
  background: #fff; border: 1px solid var(--b-linha); border-radius: 13px; color: #8A98C0;
}
body.v5-biblioteca .library-page .search-box input { color: var(--text); padding: 12px 0; font-size: 14px; }
body.v5-biblioteca .library-page .search-box input::placeholder { color: #8A98C0; }
body.v5-biblioteca .library-page .search-box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(9,11,18,.06); }
body.v5-biblioteca .library-page .filter-row { margin: 0; gap: 6px; flex-wrap: wrap; }
body.v5-biblioteca .library-page .filter-row button {
  display:inline-flex; align-items:center; gap:7px; background: #fff; border: 1px solid var(--b-linha); color: #46626C;
  border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 700;
}
body.v5-biblioteca .library-page .filter-row button svg { width:15px; height:15px; }
body.v5-biblioteca .library-page .filter-row button:hover { border-color: #C1C8DD; color: var(--ink); }
body.v5-biblioteca .library-page .filter-row button.active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* ------------------------------------------------------ TÍTULO DA SEÇÃO */
body.v5-biblioteca .library-section-title {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin: 22px 0 14px;
}
body.v5-biblioteca .library-section-title h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; color: var(--text); }
body.v5-biblioteca .library-section-title p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
body.v5-biblioteca .library-section-title > span { color: var(--muted); font-size: 12.5px; font-weight: 700; }

/* ---------------------------------------------------------- OS CARTÕES */
body.v5-biblioteca .library-page .prompt-grid {
  max-width: none; margin: 0; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.v5-biblioteca .prompt-groups { display: grid; gap: 28px; }
body.v5-biblioteca .prompt-group > header { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
body.v5-biblioteca .prompt-group > header > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; border: 1px solid var(--b-linha); color: #404E76; }
body.v5-biblioteca .prompt-group > header svg { width: 18px; height: 18px; }
body.v5-biblioteca .prompt-group > header h2 { margin: 0; font-size: 19px; color: var(--text); }
body.v5-biblioteca .prompt-group > header small { display: block; color: var(--muted); font-size: 11.5px; }
body.v5-biblioteca .library-page .prompt-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--b-linha); border-radius: 14px;
  padding: 18px; box-shadow: 0 1px 4px -2px rgba(9,11,18,.24);
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.v5-biblioteca .library-page .prompt-card:hover {
  border-color: #B8C1D9; box-shadow: 0 8px 22px -12px rgba(9,11,18,.32);
}
body.v5-biblioteca .prompt-card-top { align-items: center; gap: 10px; }
body.v5-biblioteca .library-page .prompt-card .prompt-icon {
  width: 34px; height: 34px; border-radius: 10px; margin: 0;
  background: var(--cor-fraca, #F2FDFB); color: var(--cor, var(--blue));
}
body.v5-biblioteca .library-page .prompt-card .prompt-icon svg { width: 17px; height: 17px; }
body.v5-biblioteca .prompt-card-top > span {
  color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .1em;
}
body.v5-biblioteca .library-page .prompt-card h3 {
  margin: 14px 0 12px; font-size: 18px; line-height: 1.2; letter-spacing: -.025em; color: var(--text);
}
body.v5-biblioteca .prompt-outcome { flex: 1; background: #F5F6FA; border-radius: 10px; padding: 12px 13px; }
body.v5-biblioteca .prompt-outcome > small {
  display: block; margin-bottom: 5px; color: #447A8F; font-size: 11px; font-weight: 850; letter-spacing: .08em;
}
body.v5-biblioteca .library-page .prompt-card .prompt-outcome p {
  margin: 0; color: #385B69; font-size: 13px; line-height: 1.5;
}
body.v5-biblioteca .library-page .prompt-card footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 0; color: var(--muted); font-size: 11.5px;
}
body.v5-biblioteca .prompt-owner {
  display: grid; grid-template-columns: 16px auto; column-gap: 7px; align-items: center; color: #46626C;
}
body.v5-biblioteca .prompt-owner svg { grid-row: 1 / 3; }
body.v5-biblioteca .prompt-owner span { font-size: 11px; color: #4B8298; line-height: 1; }
body.v5-biblioteca .prompt-owner b { font-size: 13px; color: #345562; line-height: 1.2; }
body.v5-biblioteca .prompt-owner svg { width: 14px; height: 14px; color: var(--cor, var(--blue)); }
body.v5-biblioteca .library-page .prompt-card footer a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink);
  color: #fff; font-size: 12px; font-weight: 800;
}
body.v5-biblioteca .library-page .prompt-card footer a svg { width: 13px; height: 13px; }
body.v5-biblioteca .library-page .prompt-card footer a:hover { background: #273F48; border-color: #273F48; }

/* a cor de cada área — a mesma família dos 12 funcionários */
body.v5-biblioteca .prompt-card[data-cat="dinheiro"] { --cor: #1F8F79; --cor-fraca: #E6F5F2; }
body.v5-biblioteca .prompt-card[data-cat="trafego"]  { --cor: #2F5CD9; --cor-fraca: #E8EDFC; }
body.v5-biblioteca .prompt-card[data-cat="operacao"] { --cor: #C8741F; --cor-fraca: #FBEFE3; }
body.v5-biblioteca .prompt-card[data-cat="cliente"]  { --cor: #B84351; --cor-fraca: #FBE9EB; }
body.v5-biblioteca .prompt-card[data-cat="comando"]  { --cor: #6EEDD4; --cor-fraca: #EFFDFA; }

@media (max-width: 1000px) {
  body.v5-biblioteca .library-masthead { grid-template-columns: 1fr; gap: 18px; }
  body.v5-biblioteca .library-shelf { border-left: 0; border-top: 1px solid var(--b-linha); }
}
@media (max-width: 700px) {
  body.v5-biblioteca .library-title { padding: 26px 22px; }
  body.v5-biblioteca .library-title h1 { font-size: 36px; }
  body.v5-biblioteca .library-masthead { width: 100%; }
  body.v5-biblioteca .library-shelf { grid-template-columns: 1fr 1fr; padding: 22px; }
  body.v5-biblioteca .library-book,
  body.v5-biblioteca .library-book.operacao { min-height: 88px; transform: none; }
  body.v5-biblioteca .library-actions { flex-direction: column; align-items: stretch; }
  body.v5-biblioteca .library-actions a { text-align: center; }
  body.v5-biblioteca .library-page .prompt-grid { grid-template-columns: 1fr; }
  /* A barra vira coluna no v5-app.css. O `flex-basis:340px` da busca, que no
     desktop é largura, virava ALTURA no celular e criava um vazio gigante. */
  body.v5-biblioteca .library-page .search-box { flex: 0 0 auto; width: 100%; min-width: 0; }
  body.v5-biblioteca .library-page .filter-row { width: 100%; }
}
@media (max-width: 860px) {
  body.v5-biblioteca .library-page .prompt-grid { grid-template-columns: 1fr; }
  body.v5-biblioteca .library-section-title { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* 14/09 — a página reflowa; só filtros podem rolar por dentro. */
body.v5-biblioteca { overflow-x: clip; }
body.v5-biblioteca .library-page,
body.v5-biblioteca .library-content,
body.v5-biblioteca .library-masthead,
body.v5-biblioteca .prompt-groups { min-width:0; max-width:100%; }
@media(max-width:700px){
  body.v5-biblioteca .library-content { width:100%; padding-left:16px; padding-right:16px; }
  body.v5-biblioteca .library-title h1 { font-size:clamp(31px,10vw,36px); overflow-wrap:anywhere; }
  body.v5-biblioteca .library-shelf { min-width:0; }
  body.v5-biblioteca .prompt-card footer { min-width:0; flex-wrap:wrap; }
}

/* ================================================================ spec 013
   A BIBLIOTECA MAIS COMPACTA (16/09/2026).

   Pedido do Pedro: *"quero que melhore a biblioteca também de agentes, com
   design mais compacto e simples e objetivo"*.

   Medido: 24 prompts em 5 categorias, duas colunas fixas, cartão com ícone +
   selo + título de 18px + caixa cinza "O QUE VOCÊ RECEBE" + rodapé com dois
   blocos. Era alto o bastante para caber ~4 cartões por tela — e a pessoa
   vinha aqui justamente para ESCOLHER, o que exige comparar vários.

   Agora: grade que se ajusta sozinha (3 a 4 por linha num monitor), o selo da
   categoria sai do cartão (já está no cabeçalho do grupo), a caixa cinza vira
   linha e o rodapé vira uma só. Nenhum cartão perdeu informação — o que saiu
   foi a moldura em volta dela. */
body.v5-biblioteca .library-page .prompt-grid{
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px;
}
body.v5-biblioteca .library-page .prompt-card{
  padding:14px 15px;border-radius:13px;gap:0;
}
/* o selo da categoria é redundante: o grupo acima já diz qual é */
body.v5-biblioteca .library-page .prompt-card .prompt-card-top>span{display:none}
body.v5-biblioteca .library-page .prompt-card .prompt-icon{
  width:28px;height:28px;border-radius:9px;
}
body.v5-biblioteca .library-page .prompt-card .prompt-icon svg{width:15px;height:15px}
body.v5-biblioteca .library-page .prompt-card h3{
  margin:10px 0 7px;font-size:15.5px;line-height:1.25;
}
/* a caixa cinza virou texto: a moldura não dizia nada que o rótulo já não diga */
body.v5-biblioteca .library-page .prompt-card .prompt-outcome{
  background:transparent;padding:0;border-radius:0;
}
body.v5-biblioteca .library-page .prompt-card .prompt-outcome>small{display:none}
body.v5-biblioteca .library-page .prompt-card .prompt-outcome p{
  font-size:12.5px;line-height:1.5;color:#46626C;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body.v5-biblioteca .library-page .prompt-card footer{
  margin-top:11px;padding-top:10px;border-top:1px solid var(--b-linha);font-size:11px;
}
/* "Quem responde" em uma linha só, com o nome do agente em destaque */
body.v5-biblioteca .library-page .prompt-card .prompt-owner{
  grid-template-columns:14px auto;column-gap:6px;
}
body.v5-biblioteca .library-page .prompt-card .prompt-owner span{display:none}
body.v5-biblioteca .library-page .prompt-card .prompt-owner svg{grid-row:auto;width:14px;height:14px}
body.v5-biblioteca .library-page .prompt-card .prompt-owner b{font-size:11.5px}

@media(max-width:620px){
  body.v5-biblioteca .library-page .prompt-grid{grid-template-columns:1fr;gap:10px}
  body.v5-biblioteca .library-page .prompt-card{padding:13px 14px}
  body.v5-biblioteca .library-page .prompt-card h3{font-size:15px}
}