/* =========================================================
   Módulo Biblioteca (dentro do Artefato)
   ========================================================= */
.lib {
  --lib-line: var(--ds-line); --lib-hover: var(--ds-hover); --lib-muted: var(--ds-text-muted); /* tokens do DS */
  position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 14px;
}

.lib-head { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--lib-line); }
.lib-search {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
  background: rgb(0 0 0 / .04); color: var(--lib-muted);
}
.dark .lib-search { background: rgb(255 255 255 / .05); }
.lib-search input { flex: 1; min-width: 0; background: transparent; color: inherit; outline: none; }
.lib-search input { color: rgb(38 38 38); }
.dark .lib-search input { color: rgb(245 245 245); }
.lib-search input::placeholder { color: var(--lib-muted); }

.lib-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lib-chips::-webkit-scrollbar { display: none; }
.lib-chip {
  flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--lib-line); color: var(--lib-muted); transition: background-color .2s, color .2s, border-color .2s;
}
.lib-chip:hover { background: var(--lib-hover); }
.lib-chip.active { background: rgb(124 58 237 / .1); border-color: rgb(124 58 237 / .3); color: rgb(109 40 217); }
.dark .lib-chip.active { background: rgb(167 139 250 / .14); border-color: rgb(167 139 250 / .35); color: rgb(196 181 253); }

.lib-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 20px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.lib-card {
  position: relative; display: flex; flex-direction: column; border: 1px solid var(--lib-line); border-radius: 16px;
  overflow: hidden; animation: fade-up .35s var(--ease-out) both; transition: border-color .2s, box-shadow .2s;
}
.lib-card:hover { border-color: rgb(0 0 0 / .14); box-shadow: 0 4px 18px -8px rgb(0 0 0 / .15); }
.dark .lib-card:hover { border-color: rgb(255 255 255 / .16); box-shadow: none; }

.lib-thumb {
  position: relative; display: grid; place-items: center; height: 110px; overflow: hidden;
  background: rgb(0 0 0 / .03); color: var(--lib-muted);
}
.dark .lib-thumb { background: rgb(255 255 255 / .03); }
.lib-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-thumb.kind-image { color: rgb(14 165 233); background: rgb(14 165 233 / .07); }
.lib-thumb.kind-doc   { color: rgb(124 58 237); background: rgb(124 58 237 / .07); }
.lib-thumb.kind-audio { color: rgb(22 163 74);  background: rgb(22 163 74 / .07); }
.lib-thumb.kind-video { color: rgb(234 88 12);  background: rgb(234 88 12 / .07); }
.lib-ext {
  position: absolute; left: 10px; bottom: 8px; padding: 1px 6px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; background: rgb(255 255 255 / .85); color: rgb(64 64 64);
}
.dark .lib-ext { background: rgb(0 0 0 / .45); color: rgb(229 229 229); }
.lib-ext:empty { display: none; }

.lib-meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.lib-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-sub { font-size: 12px; color: var(--lib-muted); }
.lib-src {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; max-width: 100%;
  font-size: 12px; color: var(--lib-muted); text-align: left; transition: color .2s;
}
.lib-src span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-src:hover { color: rgb(109 40 217); }
.dark .lib-src:hover { color: rgb(196 181 253); }

.lib-actions {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 2px; border-radius: 12px;
  background: rgb(255 255 255 / .92); box-shadow: 0 2px 8px rgb(0 0 0 / .08);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s var(--ease-out);
}
.dark .lib-actions { background: rgb(38 38 38 / .92); }
.lib-actions .btn-icon { height: 30px; width: 30px; }
.lib-card:hover .lib-actions, .lib-card:focus-within .lib-actions { opacity: 1; transform: none; }
@media (hover: none) { .lib-actions { opacity: 1; transform: none; } }


/* Item "Biblioteca" ativo na lateral */
.nav-group-btn.is-open { background: rgb(0 0 0 / .07); }
.dark .nav-group-btn.is-open { background: rgb(255 255 255 / .07); }

.lib-upload {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; background: rgb(23 23 23); color: #fff; transition: opacity .2s;
}
.lib-upload:hover { opacity: .85; }
.dark .lib-upload { background: #fff; color: rgb(23 23 23); }