/*
 * Kütüphane (library.js): kök / klasör sayfası, klip kartları, seçim çubuğu, klip sayfası, ClipActions, klip seçici.
 * Değerler public/css/tokens.css ve public/webapp/app.css'in :root'undan.
 */
:root {
  --lib-qa: 52px;
  --lib-tile-min: 60px;
  --lib-card-min: 150px;
  --lib-folder-min: 160px;
  --lib-selbar-h: 64px;
}

/* ---------- Arama, filtre, sıralama ---------- */
.lib-controls { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.lib-search { position: relative; display: block; }
.lib-search > .icon { position: absolute; top: 50%; inset-inline-start: var(--sp-4); width: var(--icon-sm); height: var(--icon-sm); transform: translateY(-50%); color: var(--c-text-3); pointer-events: none; }
.lib-search-input { min-height: var(--tap); border-radius: var(--r-md); padding-inline-start: calc(var(--sp-4) + var(--icon-sm) + var(--sp-2)); }
.lib-search-input::-webkit-search-cancel-button { filter: invert(0.6); }
.lib-filter-row { display: flex; align-items: center; gap: var(--sp-2); }
.lib-filter-row .segmented { flex: 1 1 auto; max-width: 360px; }
.lib-sort { display: inline-flex; align-items: center; gap: var(--sp-1-5); min-height: var(--tap); padding: 0 var(--app-sp-14); margin-inline-start: auto; border-radius: var(--r-pill); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); color: var(--c-text-2); font-size: var(--fs-ui); font-weight: var(--fw-medium); white-space: nowrap; }
.lib-sort:hover { background: var(--c-s2); color: var(--c-text); }
.lib-sort .icon { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 379px) { .lib-sort-label { display: none; } }

.lib-crumbs { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-3); min-width: 0; }
.lib-crumbs a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
.lib-crumbs a:hover { color: var(--c-text); }
.lib-crumb-sep .icon { width: var(--icon-xs); height: var(--icon-xs); }

/* ---------- Gruplar ve ızgaralar ---------- */
.lib-group .sub-head { margin-top: var(--sp-6); }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
.lib-folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 379px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) {
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(var(--lib-card-min), 1fr)); gap: var(--sp-4) var(--sp-3); }
  .lib-folders { grid-template-columns: repeat(auto-fill, minmax(var(--lib-folder-min), 1fr)); }
}
.lib-body .empty-card { margin-top: var(--sp-6); }

/* ---------- Klip kartı ---------- */
.lib-clip, .lib-folder { position: relative; min-width: 0; }
.lib-clip-link, .lib-folder-link { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; border-radius: var(--r-sm); }
.lib-clip-link .thumb { transition: transform var(--dur-fast) var(--ease); }
.lib-clip-link:active .thumb { transform: scale(0.97); }
.lib-clip.is-selected .thumb { outline: var(--app-ring) solid var(--c-light); outline-offset: var(--bw-2); }
.lib-check { position: absolute; top: var(--sp-2); inset-inline-end: var(--sp-2); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-light); color: var(--c-on-light); }
.lib-check .icon { width: var(--icon-xs); height: var(--icon-xs); }
.lib-badge { position: absolute; bottom: var(--sp-1-5); inset-inline-start: var(--sp-1-5); font-family: var(--font-mono); }
.lib-badge .icon { width: var(--icon-xs); height: var(--icon-xs); }
.lib-fav { position: absolute; top: var(--sp-1-5); inset-inline-start: var(--sp-1-5); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-media-scrim); color: var(--c-on-media); }
.lib-fav .icon { width: var(--icon-xs); height: var(--icon-xs); }
.lib-audio-thumb { display: grid; place-items: center; background: var(--c-s2); border: var(--bw) solid var(--c-line); }
.lib-audio-thumb .wave { height: 28%; }
.lib-audio-thumb .wave i { width: 2px; }
.lib-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--c-text); overflow-wrap: anywhere; text-align: start; }
.lib-name.is-derived { display: flex; flex-direction: column; }
.lib-name-base, .lib-name-suffix { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-name-suffix { color: var(--c-text-3); }

/* ⋯ düğmesi: fareyle üstüne gelince ya da odakta; dokunmatik ekranda her zaman. */
.lib-more { position: absolute; top: var(--sp-1); inset-inline-end: var(--sp-1); display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--c-on-media); opacity: 0; transition: opacity var(--dur-fast); }
.lib-more::before { content: ""; position: absolute; inset: var(--sp-1-5); border-radius: 50%; background: var(--c-media-scrim); }
.lib-more .icon { position: relative; width: var(--icon-sm); height: var(--icon-sm); }
.lib-clip:hover .lib-more, .lib-folder:hover .lib-more, .lib-more:focus-visible, .lib-clip:focus-within .lib-more, .lib-folder:focus-within .lib-more { opacity: 1; }
@media (hover: none) { .lib-more { opacity: 1; } }

/* ---------- Klasör kartı ---------- */
.lib-folder-link { padding: var(--sp-2); background: var(--c-s1); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); }
.lib-folder-link:hover { background: var(--c-s2); }
.lib-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-0-5); aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--c-s3); }
.lib-mosaic .thumb { aspect-ratio: auto; height: 100%; border-radius: 0; }
.lib-mosaic-empty { background: var(--c-s2); }
.lib-folder-meta { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-1) var(--sp-1); min-width: 0; }
.lib-folder-icon { display: grid; place-items: center; width: var(--app-row-icon); height: var(--app-row-icon); flex: none; border-radius: var(--r-xs); background: var(--c-s3); color: var(--c-text-2); }
.lib-folder-icon .icon { width: var(--icon-sm); height: var(--icon-sm); }
.lib-folder-text { display: flex; flex-direction: column; min-width: 0; }
.lib-folder-name { font-weight: var(--fw-semibold); font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-folder-count { font-size: var(--fs-xs); color: var(--c-text-3); }

/* ---------- Yükleniyor ---------- */
.lib-loading { display: flex; flex-direction: column; gap: var(--sp-5); }
.lib-sk-search { height: var(--tap); border-radius: var(--r-md); }
.lib-sk-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.lib-sk-thumb { aspect-ratio: 9 / 16; border-radius: var(--r-sm); }
.lib-sk-line { height: 12px; min-height: 12px; width: 70%; border-radius: var(--r-pill); }

/* ---------- Seçim çubuğu (alt sekme çubuğunun yerine) ---------- */
.lib-selbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; padding-bottom: var(--app-safe-b); background: var(--c-bg); border-top: var(--bw) solid var(--c-line); }
.lib-selbar-inner { display: grid; grid-template-columns: repeat(3, 1fr); height: var(--lib-selbar-h); max-width: var(--app-narrow); margin: 0 auto; }
.lib-sel-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-0-5); color: var(--c-text); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.lib-sel-action .icon { width: var(--icon-lg); height: var(--icon-lg); }
.lib-sel-action.is-danger { color: var(--c-error); }
.lib-sel-action:disabled { color: var(--c-text-3); }
@media (min-width: 900px) { .lib-selbar { inset-inline-start: var(--app-side-w); } }
html.shell-hidden .view:has(.lib-body) { padding-bottom: calc(var(--lib-selbar-h) + var(--app-safe-b) + var(--sp-8)); }

/* ---------- Sayfacıklar ---------- */
.lib-name-form, .lib-move, .picker-wrap { display: flex; flex-direction: column; gap: var(--sp-4); }
.lib-name-form .sheet-actions { margin-top: 0; }
.lib-move .group { max-height: 52dvh; overflow: auto; }
.lib-move-row { padding-inline-start: calc(var(--sp-4) + var(--depth, 0) * var(--sp-5)); }

/* ---------- Klip sayfası ---------- */
.clip-head { margin-bottom: var(--sp-2); }
.clip-player .player-box { max-height: 62dvh; }
.clip-sk-player { aspect-ratio: 9 / 16; max-height: 62dvh; margin: 0 auto; border-radius: var(--r-lg); }
.clip-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-5); }
.clip-title-row { display: flex; align-items: flex-start; gap: var(--sp-2); width: 100%; }
.clip-title { flex: 1 1 auto; min-width: 0; font-size: 1.625rem; font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); line-height: var(--lh-title); overflow-wrap: anywhere; text-align: start; }
.clip-meta { color: var(--c-text-3); font-size: var(--fs-sm); }
.lib-style-pill { display: inline-flex; align-items: center; gap: var(--sp-1-5); height: var(--ctl-xs); padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-2); }
.lib-style-pill .icon { width: var(--icon-xs); height: var(--icon-xs); }
.clip-actions-slot { margin-top: var(--sp-6); }

/* ---------- ClipActions ---------- */
.clip-actions { display: flex; flex-direction: column; }
.clip-actions .sub-head { margin-top: var(--sp-8); }
.clip-actions .group + .group { margin-top: var(--sp-3); }
.qa-row { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--sp-2); justify-items: center; }
.qa { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 100%; max-width: 96px; color: var(--c-text); }
.qa-circle { display: grid; place-items: center; width: var(--lib-qa); height: var(--lib-qa); border-radius: 50%; background: var(--c-s1); border: var(--bw) solid var(--c-line-2); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast); }
.qa:hover .qa-circle { background: var(--c-s2); }
.qa:active .qa-circle { transform: scale(0.97); }
.qa[aria-pressed="true"] .qa-circle { background: var(--c-s5); border-color: var(--c-text); }
.qa.is-busy .qa-circle { opacity: 0.55; }
.qa-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-text-2); text-align: center; line-height: var(--lh-snug); }
.clip-status:not(:empty) { margin-top: var(--sp-3); }
.clip-status-text { text-align: center; font-size: var(--fs-sm); color: var(--c-text-2); }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 339px) { .tile-grid { grid-template-columns: 1fr; } }
.tile { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--lib-tile-min); padding: var(--sp-2-5) var(--sp-3); border-radius: var(--r-lg); background: var(--c-s1); border: var(--bw) solid var(--c-line); text-align: start; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast); }
.tile:hover:not(:disabled) { background: var(--c-s2); }
.tile:active:not(:disabled) { transform: scale(0.97); }
.tile:disabled { opacity: 0.7; }
.tile-icon { display: grid; place-items: center; width: var(--app-row-icon); height: var(--app-row-icon); flex: none; border-radius: var(--r-xs); background: var(--c-s3); }
.tile-icon .icon { width: var(--icon-sm); height: var(--icon-sm); }
.tile-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-ui); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

/* ---------- Klip seçici ---------- */
.picker { display: flex; flex-direction: column; gap: var(--sp-4); }
.picker.has-folders { min-height: 55dvh; }
.picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
.picker-clip { display: flex; flex-direction: column; gap: var(--sp-1-5); min-width: 0; border-radius: var(--r-sm); text-align: start; }
.picker-clip:hover .thumb { outline: var(--bw) solid var(--c-line-4); }
.picker-clip .lib-name { font-size: var(--fs-xs); }