/* Finder-style lists (owner, 2026-10-06: "change all areas that has any sort
   of list, project lab and drive, to have a menu like this. not buttons.
   buttons look tacky"; "everything").

   One look for every navigation list: no button chrome, a row per item with a
   line icon and a label, a soft tint on hover, the chosen row tinted with its
   icon and label in the accent, and small grey section headings. The rows
   keep their own markup and handlers; this sheet only restyles them.

   Applies to: the Drive's categories and folders, Project Lab's file tree,
   the chat history list, StudioLab's Drive panel and LiveLoop's project list.
   Selectors carry :root:root:root:root and !important because the themes
   paint these surfaces with forced rules. */

:root {
  --finder-row-h: 30px;
  --finder-radius: 8px;
  --finder-hover: rgba(255, 255, 255, .06);
  --finder-active: rgba(255, 255, 255, .10);
  --finder-accent: #4ea1ff;
  --finder-text: #e7e7ec;
  --finder-muted: #8e8e98;
  --finder-heading: #7d7d87;
}
html.light-mode {
  --finder-hover: rgba(0, 0, 0, .05);
  --finder-active: rgba(0, 0, 0, .08);
  --finder-accent: #0a64d8;
  --finder-text: #1d1d1f;
  --finder-muted: #6e6e73;
  --finder-heading: #8a8a8e;
}

/* ── Rows ─────────────────────────────────────────────────────────────── */
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs .v-tab,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row,
:root:root:root:root #cl-tree .cl-file,
:root:root:root:root #cl-tree .cl-dir-row,
:root:root:root:root .history-item {
  display: flex !important; align-items: center !important; gap: 10px !important;
  width: 100% !important; min-height: var(--finder-row-h) !important; margin: 1px 0 !important; padding: 5px 10px !important;
  border: 0 !important; border-radius: var(--finder-radius) !important;
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  color: var(--finder-text) !important; font: 500 13.5px/1.25 -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif !important;
  text-align: left !important; justify-content: flex-start !important; transform: none !important;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs .v-tab i,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row > i,
:root:root:root:root #cl-tree .cl-file > i,
:root:root:root:root #cl-tree .cl-dir-row > i:not(.cl-caret) {
  width: 18px !important; flex: 0 0 18px !important; text-align: center !important;
  font-size: 15px !important; color: var(--finder-muted) !important; background: none !important;
}
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs .v-tab:hover,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row:hover,
:root:root:root:root #cl-tree .cl-file:hover,
:root:root:root:root #cl-tree .cl-dir-row:hover,
:root:root:root:root .history-item:hover { background: var(--finder-hover) !important; }

/* The chosen row: tinted, its icon and label in the accent. */
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs .v-tab.active,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row.active,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row[aria-current="true"],
:root:root:root:root #cl-tree .cl-file.active,
:root:root:root:root #cl-tree .cl-file.selected,
:root:root:root:root .history-item.active {
  background: var(--finder-active) !important; color: var(--finder-accent) !important;
}
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs .v-tab.active i,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row.active > i,
:root:root:root:root #cl-tree .cl-file.active > i,
:root:root:root:root #cl-tree .cl-file.selected > i { color: var(--finder-accent) !important; }

/* Counts sit at the right in grey, like Finder's badges. */
:root:root:root:root #visual-lib-overlay .gallery-sidebar .v-tab .v-tab-count,
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-row .folder-count {
  margin-left: auto !important; padding: 0 !important; border: 0 !important; background: none !important;
  color: var(--finder-muted) !important; font: 500 12px/1 -apple-system, Inter, system-ui, sans-serif !important;
}

/* ── Section headings ─────────────────────────────────────────────────── */
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 8px 8px 4px !important; border: 0 !important; background: none !important; }
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs::before {
  display: block; padding: 10px 10px 4px; color: var(--finder-heading);
  font: 700 11.5px/1 -apple-system, Inter, system-ui, sans-serif; letter-spacing: .02em;
}
:root:root:root:root #visual-lib-overlay .gallery-sidebar .visual-tabs::before { content: 'Library'; }
/* The folder tree already carries its own heading (Folders & projects). */
:root:root:root:root #visual-lib-overlay .gallery-sidebar .gallery-folder-nav { padding: 4px 8px !important; }

/* The sidebar itself: one quiet surface, no panel border. */
:root:root:root:root #visual-lib-overlay .gallery-sidebar { background: transparent !important; border-right: 1px solid rgba(255, 255, 255, .06) !important; }
html.light-mode #visual-lib-overlay .gallery-sidebar { border-right-color: rgba(0, 0, 0, .08) !important; }

/* Chat history keeps its date line, small and grey under the title. */
:root:root:root:root .history-item .history-item-title { color: inherit !important; font-weight: 500 !important; }
:root:root:root:root .history-item .history-item-date { color: var(--finder-muted) !important; font-size: 11.5px !important; }

/* Chat rows keep their menu at the right. */
:root:root:root:root .history-item { justify-content: space-between !important; }

/* LiveLoop's project files: rows that keep their own indent (set per depth
   on the row) and their size at the right; the tools above them are rows too,
   icon then label. */
:root:root:root:root #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder, .ll-files-tool) {
  border: 0 !important; border-radius: var(--finder-radius) !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--finder-text) !important; font: 500 13px/1.25 -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif !important;
}
:root:root:root:root #liveloop-project-files-view .ll-files-list .ll-files-tool { justify-content: flex-start !important; gap: 10px !important; }
:root:root:root:root #liveloop-project-files-view .ll-files-list .ll-files-tool.danger { color: #ff6b6b !important; }
:root:root:root:root #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder, .ll-files-tool) i { color: var(--finder-muted) !important; }
:root:root:root:root #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder, .ll-files-tool):hover { background: var(--finder-hover) !important; }
:root:root:root:root #liveloop-project-files-view .ll-files-list :is(.ll-files-file, .ll-files-folder):is([aria-pressed="true"], .active, .is-active) {
  background: var(--finder-active) !important; color: var(--finder-accent) !important;
}