/* library.css — módulo "Comandos & Prompts". Arquivo isolado (mesmo padrão
   de arquivo próprio por feature usado em .js), só tokens já existentes em
   app.generated.css (--bg, --surface, --accent etc), então segue tema/paleta
   automaticamente sem duplicar variável nenhuma. */

/* Abas exclusivas (facetas is_exclusive, ex: Canal) — seleção única, acima da busca */
.lib-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.lib-tab{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:800;cursor:pointer;border:2px solid var(--border);color:var(--text2);background:var(--surface);transition:transform .15s,border-color .15s,background .15s,color .15s;user-select:none}
.lib-tab:hover{transform:translateY(-1px)}
.lib-tab.active{border-color:var(--tab-color,var(--accent));color:var(--tab-color,var(--accent));background:color-mix(in srgb,var(--tab-color,var(--accent)) 14%,var(--surface))}
.lib-tab-dot{width:8px;height:8px;border-radius:999px;background:var(--tab-color,var(--accent));flex:0 0 auto}

.lib-toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}

.lib-search-row{display:flex;gap:10px;align-items:center}
.lib-search-wrap{position:relative;flex:1}
.lib-search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text3);pointer-events:none}
.lib-search{width:100%;padding:13px 14px 13px 40px;font-size:15px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.lib-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* Ordenação: botão discreto (só ícone) + popover de opções */
.lib-sortbox{position:relative;flex:0 0 auto}
.lib-sort-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px;min-width:170px;display:flex;flex-direction:column}
.lib-sort-option{display:block;padding:8px 10px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap}
.lib-sort-option:hover{background:var(--surface2);color:var(--text)}
.lib-sort-option.active{color:var(--accent);font-weight:700}

.lib-facet-label{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);padding:6px 0;min-width:78px}
.lib-facet-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1}

/* Facetas normais (Tipo/Mídia/Formato/Sujeito/Plataforma) — caixas de seleção
   compactas, alinhadas numa única linha, com popover de tags ao abrir. */
.lib-facetboxes{display:flex;gap:10px;flex-wrap:nowrap}
.lib-facetbox{position:relative;flex:0 0 auto}
.lib-facetbox-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.lib-facetbox-btn:hover{border-color:var(--accent);color:var(--text)}
.lib-facetbox-btn.has-active{border-color:var(--accent);color:var(--accent)}
.lib-facetbox-caret{font-size:10px;color:var(--text3)}
.lib-facetbox-count{font-size:10.5px;font-weight:800;background:var(--accent);color:var(--accent-contrast,#fff);border-radius:999px;padding:1px 6px;min-width:16px;text-align:center}
.lib-facetbox-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:12px;min-width:220px;max-width:320px;display:flex;flex-wrap:wrap;gap:6px}

.lib-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text2);transition:transform .12s,border-color .12s,background .12s,color .12s;user-select:none}
.lib-chip:hover{transform:translateY(-1px)}
.lib-chip.active{color:var(--chip-color,var(--accent));border-color:var(--chip-color,var(--accent));background:color-mix(in srgb,var(--chip-color,var(--accent)) 16%,var(--surface2))}
.lib-chip .lib-dot{width:7px;height:7px;border-radius:999px;background:var(--chip-color,var(--accent));flex:0 0 auto}

.lib-clear-btn{font-size:12px;color:var(--text3);background:none;border:none;cursor:pointer;text-decoration:underline;padding:4px 2px}
.lib-clear-btn:hover{color:var(--text)}

.lib-count{font-size:12.5px;color:var(--text3)}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}

.lib-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--card-accent,var(--border));border-radius:var(--radius);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.lib-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 20%,var(--border))}
.lib-card-image{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface2);display:block;cursor:zoom-in}

/* Lightbox: reaproveita o modal existente, só troca o tamanho/fundo pra
   caber a imagem em quase tela cheia em vez do formulário de 620px. */
.modal.lib-lightbox-modal{max-width:92vw;width:auto;padding:0;background:transparent;box-shadow:none}
.lib-lightbox-image{display:block;max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:var(--radius);box-shadow:0 24px 64px -12px rgba(0,0,0,.6);margin:0 auto}
.lib-lightbox-close{top:-14px;right:-14px;width:32px;height:32px;border-radius:999px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.lib-card-body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.lib-card-title{font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--card-accent,var(--accent));letter-spacing:-.01em;word-break:break-word}
.lib-card-desc{font-size:12.5px;color:var(--card-accent,var(--accent));font-weight:700;line-height:1.45;flex:0 0 auto}
.lib-card-tags{--lib-mini-tag-scale:1;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:calc(4px * var(--lib-mini-tag-scale));min-width:0;overflow-x:auto;scrollbar-width:none}
.lib-card-tags::-webkit-scrollbar{display:none}
.lib-card-tags .lib-mini-tag{flex:0 0 auto;white-space:nowrap;font-size:calc(10px * var(--lib-mini-tag-scale));font-weight:700;padding:calc(2px * var(--lib-mini-tag-scale)) calc(7px * var(--lib-mini-tag-scale));border-radius:20px;background:color-mix(in srgb,var(--chip-color,var(--accent)) 16%,var(--surface2));color:var(--chip-color,var(--accent))}
.lib-code-wrap{position:relative}
.lib-code{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 34px 10px 12px;max-height:130px;overflow-y:auto;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}
.lib-code-copy-btn{position:absolute;top:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--surface3);border:1px solid var(--border);color:var(--text2);font-size:13px;cursor:pointer;line-height:1}
.lib-code-copy-btn:hover{color:var(--accent);border-color:var(--accent)}
.lib-card-actions{display:flex;gap:8px;margin-top:auto}
.lib-card-actions .btn{flex:1;justify-content:center;padding:8px 12px;font-size:12.5px}
.lib-icon-btn{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;transition:color .12s,border-color .12s}
.lib-icon-btn:hover{color:var(--text);border-color:var(--accent)}

.lib-empty{padding:60px 20px;text-align:center;color:var(--text3);font-size:14px}
.lib-empty strong{display:block;color:var(--text2);font-size:15px;margin-bottom:6px}

/* Formulário de item / gerenciar categorias (dentro do .modal existente) */
.lib-form-field{margin-bottom:14px}
.lib-form-field label{display:block;font-size:12.5px;font-weight:700;color:var(--text2);margin-bottom:6px}
.lib-char-counter{font-size:11px;color:var(--text3);text-align:right;margin-top:3px}
.lib-char-counter.over{color:var(--red)}
.lib-image-hint{font-size:11px;color:var(--text3);margin-bottom:6px}
.lib-image-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lib-image-preview{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface2);border:1px solid var(--border);flex:0 0 auto}
/* O <input type=file> real fica em cima do botão visível, com opacidade
   zero, do tamanho exato dele — o toque vai direto pro input nativo, sem
   depender de <label for>. WebKit no iOS/iPadOS (Safari e Chrome, que usa o
   mesmo motor) não abre o seletor de forma confiável quando o input fica
   reduzido a 1px e a ativação depende só do label; com o input real recebendo
   o toque isso não acontece nunca, em nenhum navegador. */
.lib-image-upload-wrap{position:relative;display:inline-flex;width:auto}
.lib-image-upload-wrap .btn{pointer-events:none;width:auto}
.lib-file-input-overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.lib-tagpicker-facet{margin-bottom:12px}
.lib-tagpicker-facet .lib-facet-label{display:block;margin-bottom:6px}

.lib-manage-facet{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-bottom:12px}
.lib-manage-facet-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.lib-manage-facet-head input{font-weight:700;flex:1}
.lib-exclusive-toggle{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap;cursor:pointer;flex:0 0 auto}
.lib-exclusive-toggle input[type="checkbox"]{width:auto;flex:0 0 auto}
.lib-manage-tag-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lib-manage-tag-row input[type="text"]{flex:1}
.lib-manage-tag-row input[type="color"]{width:34px;height:34px;padding:2px;flex:0 0 auto;cursor:pointer}
.lib-add-row{display:flex;gap:8px;margin-top:8px}
.lib-add-row input{flex:1}

@media (max-width:640px){
  .lib-grid{grid-template-columns:1fr}
  .lib-facet-label{min-width:auto;flex:1 1 100%}
  .lib-facetboxes{flex-wrap:wrap}
}