/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   library.css — Library page inner tabs, device & package lists
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Lift the Library content (tabs + sticky search) closer to the top — tighter
   header gap here only, so Settings keeps its roomier header. */
.page--library .page-header { margin-bottom:10px; }

/* ── Inner tabs ── */
.inner-tabs {
  display:flex;gap:8px;margin-bottom:10px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:5px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.inner-tab {
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px;border-radius:calc(var(--radius-lg) - 4px);
  background:transparent;border:none;cursor:pointer;
  font-size:.8rem;font-weight:500;font-family:var(--font-sans);
  color:var(--text-secondary);
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              transform var(--dur-fast) var(--spring);
  outline:none;white-space:nowrap;appearance:none;-webkit-appearance:none;
}
.inner-tab:active { transform:scale(.95); }
.inner-tab.active { background:var(--bg-surface-3);color:var(--text-primary);box-shadow:0 2px 10px rgba(0,0,0,.3); }
.inner-tab.active svg { color:var(--accent-primary);filter:drop-shadow(0 0 4px rgba(129,140,248,.5)); }
.inner-tab__count {
  font-size:.65rem;font-weight:600;
  background:rgba(129,140,248,.15);color:var(--accent-primary);
  border:1px solid rgba(129,140,248,.2);
  padding:1px 6px;border-radius:var(--radius-full);line-height:1.4;
}
.lib-panel { display:none; }
.lib-panel.active { display:block;animation:fadeIn var(--dur-med) var(--ease-out); }

/* ── Search bar ── (solid surface so it stays readable while sticky) */
.lib-search {
  display:flex;align-items:center;gap:10px;
  background:var(--bg-surface-2);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:12px;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.lib-search:focus-within {
  border-color:var(--glass-border-active);
  background:var(--bg-surface-3);
  box-shadow:0 0 0 3px rgba(129,140,248,.12);
}
.lib-search__icon { color:var(--text-tertiary);flex-shrink:0; }
.lib-search:focus-within .lib-search__icon { color:var(--accent-primary); }
.lib-search__input {
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  color:var(--text-primary);font-family:var(--font-sans);
  font-size:.85rem;font-weight:500;
}
.lib-search__input::placeholder { color:var(--text-tertiary);font-weight:400; }
/* hide native search clear button for consistent look */
.lib-search__input::-webkit-search-cancel-button { -webkit-appearance:none;appearance:none; }

/* ── Empty / no-results state ── */
.lib-empty {
  text-align:center;color:var(--text-tertiary);
  font-size:.82rem;font-weight:500;padding:32px 16px;
  animation:fadeIn var(--dur-med) var(--ease-out);
}

/* ── Device list ── */
.device-list { display:flex;flex-direction:column;gap:10px; }
.device-card {
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--spring);
  animation:slideUp var(--dur-med) var(--ease-out) both;
}
.device-card:hover  { background:var(--glass-bg-hover);border-color:var(--glass-border-active); }
.device-card:active { transform:scale(.97); }
.device-card__avatar {
  width:42px;height:42px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(129,140,248,.2),rgba(167,139,250,.15));
  border:1px solid rgba(129,140,248,.2);
  display:grid;place-items:center;flex-shrink:0;color:var(--accent-primary);
}
.device-card__info  { flex:1;min-width:0; }
.device-card__name  { font-size:.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; }
.device-card__meta  { font-size:.72rem;color:var(--text-secondary); }
.device-card__status { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.device-card__status--online  { background:var(--accent-success);box-shadow:0 0 8px rgba(52,211,153,.6); }
.device-card__status--offline { background:var(--text-tertiary); }

/* ── Package list ── */
.package-list { display:flex;flex-direction:column;gap:8px; }
.package-card {
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:12px 14px;
  display:flex;align-items:flex-start;gap:12px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  cursor:pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--spring);
  animation:slideUp var(--dur-med) var(--ease-out) both;
}
.package-card:hover  { background:var(--glass-bg-hover);border-color:var(--glass-border-active); }
.package-card:active { transform:scale(.97); }
.package-card__icon {
  width:45px;height:45px;border-radius:var(--radius-md);
  overflow:hidden;flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--glass-border);
}
.package-card__icon .app-icon-img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .3s var(--ease-out);
}
.package-card__info { flex:1;min-width:0;display:flex;flex-direction:column;gap:1px; }
.package-card__device {
  font-size:.62rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-tertiary);opacity:.75;
  margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.package-card__name { font-size:.825rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px; }
.package-card__pkg  { font-size:.68rem;color:var(--text-tertiary);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.package-card__badge {
  font-size:.62rem;font-weight:600;padding:2px 8px;
  border-radius:var(--radius-full);flex-shrink:0;
}
.package-card__badge--active  { background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.25);color:var(--accent-success); }
.package-card__badge--bypass  { background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.25);color:var(--accent-primary); }

/* ── Header rows (search + add pill, and the sort/filter controls) ──
   No wrapping box: the rows are transparent layout-only flex containers, so the
   search field, "+ Add" pill and sort/filter chips sit directly on the page
   background. The search row stays sticky (search mid-scroll); the search field
   has its own solid surface so it reads cleanly when content scrolls beneath it.
   No backdrop-filter anywhere here → no Chromium sticky-ghost rectangle. */
/* Sticky header wrapping the search row + sort/filter controls — both stay
   pinned while the list scrolls. CRITICAL: nothing here may carry a full-bleed
   background — any opaque/backdrop fill (sticky element OR its children) makes
   Chromium WebView paint a lagging "ghost" rectangle on scroll. Everything stays
   transparent; only the inset pills/chips are solid and float over the list as
   it scrolls beneath — exactly the search row's original behaviour. */
.lib-stickyhead {
  position:sticky; top:0; z-index:20;
  background:transparent;
}
.lib-searchrow {
  display:flex; align-items:center; gap:10px;
  padding:2px 0 12px;
  background:transparent;
}
.lib-searchrow .lib-search { flex:1; min-width:0; margin:0; }

/* compact "+ Add" pill beside the search — glassy accent (like the old button).
   No fixed height: same vertical padding + border as .lib-search so the two
   pills are exactly the same height and align in the row. */
.add-pill {
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:var(--radius-lg);
  background:rgba(129,140,248,.14); border:1px solid rgba(129,140,248,.3);
  color:var(--accent-primary); font-family:var(--font-sans); font-size:.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap; outline:none; appearance:none; -webkit-appearance:none;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--spring), color var(--dur-fast) var(--ease-out);
}
.add-pill:hover  { background:rgba(129,140,248,.22); border-color:var(--glass-border-active); }
.add-pill:active { transform:scale(.93); }
.add-pill svg { width:16px; height:16px; }

.lib-controls {
  display:flex; align-items:center; gap:8px;
  padding:0 0 14px;
  background:transparent;
  overflow-x:auto; scrollbar-width:none;
}
.lib-controls::-webkit-scrollbar { display:none; }

/* Sort/filter pills: SOLID matte-glass surface (not see-through) so they read
   cleanly while sticky over the scrolling list. NO backdrop-filter — that's the
   sticky-ghost culprit; instead a solid surface + a faint inset top sheen gives
   the frosted-glass feel without a compositing layer (mirrors the search bar). */
.lib-sort {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  padding:5px 11px; border-radius:var(--radius-full);
  background:var(--bg-surface-2); border:1px solid var(--glass-border-active);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 6px rgba(0,0,0,.18);
  color:var(--text-secondary); font-family:var(--font-sans);
  font-size:.74rem; font-weight:600; cursor:pointer; white-space:nowrap;
  outline:none; appearance:none; -webkit-appearance:none;
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--spring), color var(--dur-fast);
}
.lib-sort:active { transform:scale(.94); }
.lib-sort:hover  { background:var(--bg-surface-3); color:var(--text-primary); }
.lib-sort svg { color:var(--accent-primary); flex-shrink:0; }

.lib-filters { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.fchip {
  padding:4px 11px; border-radius:var(--radius-full);
  background:var(--bg-surface-2); border:1px solid var(--glass-border-active);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 6px rgba(0,0,0,.18);
  color:var(--text-secondary); font-family:var(--font-sans);
  font-size:.72rem; font-weight:600; cursor:pointer; white-space:nowrap;
  outline:none; appearance:none; -webkit-appearance:none;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--spring);
}
.fchip:active { transform:scale(.92); }
.fchip.active {
  background:rgba(129,140,248,.20); border-color:rgba(129,140,248,.5); color:var(--accent-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 6px rgba(0,0,0,.18);
}

/* the panel itself slides a touch when swapping via swipe */
.lib-panel.active { animation:fadeIn var(--dur-med) var(--ease-out); }
