/**
 * Universal folder chip tabs - Media Library, Media picker, Lead Paths,
 * Pages, Automations, and any list-folder browser.
 *
 * Markup (shared by list-folders.js + media-picker.js):
 *   .media-library-folders > nav.media-folder-nav > .media-folder-nav-item > .media-folder-nav-btn
 * Shell (Drive-style: directory badges above the tools plate):
 *   .media-library-browser | .list-folder-browser
 *     > .media-library-folders
 *     > .media-library-topbar
 *       > .media-library-card-toolbar
 *     > .media-library-shell > .media-library-shell-body > .media-library-main
 */

.list-folder-browser,
.media-library-browser {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-library-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.media-library-shell > .media-library-shell-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 18rem;
  padding: 0;
  position: relative;
  /* Flush card body - not a pan/zoom board (dots stay on path canvas + media preview). */
  background: var(--bp-card-bg, var(--c-surface));
}

/* ── Viewport-fit folder browsers (Media / Pages / Paths / Automations) ──
 * Card fills the remaining stage under the page header; folder rail + grid
 * scroll inside. Skip under html.pb-editor-active - Lead Paths only hides
 * the list with display:none, and editor chrome owns the viewport then.
 * Table hubs (Contacts / Fields) are content-sized - exclude so the page scrolls.
 */
html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden]):not(.table-hub-page)):not(.pb-editor-active) {
  overflow: hidden;
}

html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden]):not(.table-hub-page)):not(.pb-editor-active) .dash {
  min-height: 0;
  height: 100dvh;
}

html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden]):not(.table-hub-page)):not(.pb-editor-active) .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden]):not(.table-hub-page)):not(.pb-editor-active) .dashboard-stage {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden]):not(.table-hub-page)):not(.pb-editor-active) #bp-page-root {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden]):not(.table-hub-page)):not(.pb-editor-active) #bp-page-root > .page-content.media-folder-fit-page:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.page-content.media-folder-fit-page:not([hidden]) {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Spacing comes from header / topbar margins - don't double with page-content gap. */
  gap: 0;
}

.page-content.media-folder-fit-page:not([hidden]) > .page-header {
  flex-shrink: 0;
}

.page-content.media-folder-fit-page:not([hidden]) > .list-folder-browser,
.page-content.media-folder-fit-page:not([hidden]) > .media-library-browser,
.page-content.media-folder-fit-page:not([hidden]) > .bp-split--2col-resizable,
.page-content.media-folder-fit-page:not([hidden]) > #media-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-content.media-folder-fit-page:not([hidden]) > .list-folder-browser,
.page-content.media-folder-fit-page:not([hidden]) > .media-library-browser {
  display: flex;
  flex-direction: column;
}

.page-content.media-folder-fit-page:not([hidden]) > .bp-split--2col-resizable,
.page-content.media-folder-fit-page:not([hidden]) > #media-layout {
  align-self: stretch;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

.media-folder-fit-page:not([hidden]) .bp-split__pane,
.media-folder-fit-page:not([hidden]) .bp-split__pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.media-folder-fit-page:not([hidden]) .list-folder-browser,
.media-folder-fit-page:not([hidden]) .media-library-browser {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.media-folder-fit-page:not([hidden]) .list-folder-browser > .media-library-folders,
.media-folder-fit-page:not([hidden]) .media-library-browser > .media-library-folders,
.media-folder-fit-page:not([hidden]) .list-folder-browser > .media-library-topbar,
.media-folder-fit-page:not([hidden]) .media-library-browser > .media-library-topbar {
  flex: 0 0 auto;
}

.media-folder-fit-page:not([hidden]) .media-library-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.media-folder-fit-page:not([hidden]) .media-library-shell-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Fixed page-size table hubs: card hugs rows - don't stretch into empty viewport. */
.media-folder-fit-page:not([hidden]) .media-library-shell:has(.contacts-table),
.media-folder-fit-page:not([hidden]) .media-library-shell:has(.contacts-table) > .media-library-shell-body,
.media-folder-fit-page:not([hidden]) .media-library-shell:has(.contacts-table) > .card-body.media-library-shell-body {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

.media-folder-fit-page:not([hidden]) .media-library-shell:has(.contacts-table) {
  align-self: stretch;
  width: 100%;
}

.media-folder-fit-page:not([hidden]) .list-folder-browser:has(.contacts-table),
.media-folder-fit-page:not([hidden]) .media-library-browser:has(.contacts-table),
.media-folder-fit-page:not([hidden]) .bp-split__pane:has(.contacts-table),
.media-folder-fit-page:not([hidden]) .bp-split--2col-resizable:has(.contacts-table) {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

.media-folder-fit-page:not([hidden]) .media-library-shell:has(.contacts-table) > .card-footer {
  flex: 0 0 auto;
}

.media-folder-fit-page:not([hidden]) .bp-split__pane-sticky {
  /* Keep Voice AI sticky semantics; fill the rail in the fit viewport. */
  position: sticky;
  top: calc(var(--topbar-stack-offset) + var(--space-13));
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-11);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * Table hubs (Contacts / Fields): table hugs rows (not viewport-fit).
 * Unlock document scroll and let the shell grow with the table.
 * Other folder hubs stay locked above.
 */
html:has(.table-hub-page:not([hidden])):not(.pb-editor-active) {
  overflow: auto;
}

html:has(.table-hub-page:not([hidden])):not(.pb-editor-active) .dash {
  height: auto;
  min-height: 100dvh;
}

html:has(.table-hub-page:not([hidden])):not(.pb-editor-active) .main,
html:has(.table-hub-page:not([hidden])):not(.pb-editor-active) .dashboard-stage,
html:has(.table-hub-page:not([hidden])):not(.pb-editor-active) #bp-page-root {
  height: auto;
  overflow: visible;
  min-height: 0;
}

html:has(.table-hub-page:not([hidden])):not(.pb-editor-active)
  #bp-page-root > .page-content.table-hub-page:not([hidden]),
.page-content.media-folder-fit-page.table-hub-page:not([hidden]) {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

.page-content.media-folder-fit-page.table-hub-page:not([hidden]) > .list-folder-browser,
.page-content.media-folder-fit-page.table-hub-page:not([hidden]) > .media-library-browser,
.page-content.media-folder-fit-page.table-hub-page:not([hidden]) > .bp-split--2col-resizable,
.media-folder-fit-page.table-hub-page:not([hidden]) .list-folder-browser,
.media-folder-fit-page.table-hub-page:not([hidden]) .media-library-browser,
.media-folder-fit-page.table-hub-page:not([hidden]) .bp-split__pane,
.media-folder-fit-page.table-hub-page:not([hidden]) .media-library-shell,
.media-folder-fit-page.table-hub-page:not([hidden]) .media-library-shell-body,
.media-folder-fit-page.table-hub-page:not([hidden]) .media-library-main {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  overflow: visible;
}

/* Empty hub sidebars keep a visible card plate; hide empty inspect until selected. */
.media-folder-fit-page .bp-split__pane .card > .card-body:empty {
  min-height: 8rem;
}

.media-folder-fit-page .bp-split__pane .hub-sidebar-card--inspect[hidden] {
  display: none !important;
}

.media-folder-fit-page .bp-split__pane .hub-sidebar-card--inspect:not([hidden]) > .card-body:empty {
  min-height: 0;
}

@media (max-width: 1100px) {
  html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden])):not(.pb-editor-active) {
    overflow: auto;
  }

  html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden])):not(.pb-editor-active) .dash {
    height: auto;
    min-height: 100dvh;
  }

  html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden])):not(.pb-editor-active) .dashboard-stage,
  html:has(#bp-page-root > .page-content.media-folder-fit-page:not([hidden])):not(.pb-editor-active) .main {
    display: block;
    overflow: visible;
    height: auto;
  }

  .page-content.media-folder-fit-page:not([hidden]) {
    display: flex;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .media-folder-fit-page:not([hidden]) .media-library-shell,
  .media-folder-fit-page:not([hidden]) .media-library-shell-body,
  .media-folder-fit-page:not([hidden]) .list-folder-browser,
  .media-folder-fit-page:not([hidden]) .media-library-browser,
  .media-folder-fit-page:not([hidden]) .bp-split__pane,
  .media-folder-fit-page:not([hidden]) .bp-split__pane {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .media-folder-fit-page:not([hidden]) .bp-split__pane {
    display: block;
    align-self: auto;
  }

  /* Page scroll (stacked layout): stick Recent / Storage like Voice AI. */
  .media-folder-fit-page:not([hidden]) .bp-split__pane-sticky {
    position: sticky;
    top: calc(var(--topbar-stack-offset) + var(--space-13));
    flex: none;
    align-self: flex-start;
    width: 100%;
    max-height: calc(100dvh - var(--topbar-stack-offset) - 2rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .media-folder-fit-page:not([hidden]) .media-library-shell-body {
    min-height: 18rem;
  }

  .media-folder-fit-page:not([hidden]) .media-library-main,
  .media-folder-fit-page:not([hidden]) .media-folder-nav {
    overflow: visible;
  }
}

/* Folders are navigation chips - never show multi-select chrome.
   Drop-target outline is allowed (see .is-drop-target below). */
.media-folder-nav-item.is-browser-selected:not(.is-drop-target) > .media-folder-nav-btn,
.media-folder-nav-item.is-selected:not(.is-drop-target) > .media-folder-nav-btn {
  outline: none;
}

.media-library-folders {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.media-folder-nav-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  width: 100%;
  min-width: 0;
  position: relative;
  isolation: isolate;
  /* Blobby fills the chip; spring overshoot is paint-only (clipped by folders host). */
  --bp-slide-select-inset: 0px;
}

.media-folder-nav-row > .media-folder-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.media-folder-nav-row > .media-folder-nav-item--trash {
  margin-left: 0;
  flex: 0 0 auto;
}

.media-library-folders .media-breadcrumb--tiles {
  margin: 0;
}

/* Drive-style: directory badges sit above the tools plate (not inside it). */
.list-folder-browser > .media-library-folders,
.media-library-browser > .media-library-folders {
  flex: 0 0 auto;
  margin: 0 0 var(--space-9);
  min-height: 0;
  /* Room for selection / drop-target outline + focus glow. */
  padding: var(--space-4);
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  /* Clip jelly spring overshoot so it doesn't grow page scrollWidth. */
  overflow-x: clip;
  overflow-y: visible;
}

/*
 * Folder-fit hubs (Media / Pages / Paths / Fields / Automations / Contacts):
 * Keep the large page title above, then Drive-style directory badges, then the
 * search/tools plate, with the content card below.
 */
.media-folder-fit-page > .page-header--media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  /* Space under the title before the folder/search plate (tighter than card-stack,
   * but not flush - large h1 needs a little air optically). */
  margin: 0 0 var(--space-13);
  min-height: 0;
  padding: 0;
}

.media-folder-fit-page > .page-header--media > :is(h1, h2) {
  margin: 0;
  padding: 0 0 .125rem;
  line-height: 1.2;
}

/*
 * Contacts hub: Media-style plate toolbar + Filters sidebar
 * (vai-layout, same pattern as Fields / Pages).
 */
.page-content.contacts-hub-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.page-content.contacts-hub-page > .page-header--media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 var(--space-13);
  min-height: 0;
  padding: 0;
}

.page-content.contacts-hub-page > .page-header--media > h1 {
  margin: 0;
  padding: 0 0 .125rem;
  line-height: 1.2;
}

.page-content.contacts-hub-page > .bp-split--2col-resizable {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

/*
 * Tools plate only (search / counts / actions). Shared globally for every
 * .list-folder-browser / .media-library-browser — do not add page IDs here.
 * Search sizing lives on .media-library-card-toolbar (media-library.css).
 * Directories are a sibling row above this - never flexed beside the controls.
 */
.list-folder-browser > .media-library-topbar,
.media-library-browser > .media-library-topbar {
  flex: 0 0 auto;
  margin: 0 0 var(--space-11);
  min-height: var(--topbar-h, 56px);
  padding: var(--space-9) var(--space-13) var(--space-9) var(--space-13b);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: var(--space-9) var(--space-12);
  border: none;
  border-radius: var(--bp-card-radius, var(--radius-lg));
  box-shadow: var(--bp-shadow);
  background: var(--bp-shell-bg, var(--bp-card-bg, var(--c-surface)));
}

.list-folder-browser .media-library-topbar > .media-library-card-toolbar,
.media-library-browser .media-library-topbar > .media-library-card-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-9) var(--space-12);
  position: relative;
  z-index: 2;
  background: transparent;
  padding-left: 0;
  overflow: visible;
}

.list-folder-browser .media-library-topbar .contacts-search-group,
.list-folder-browser .media-library-topbar .bp-search-wrap,
.media-library-browser .media-library-topbar .contacts-search-group,
.media-library-browser .media-library-topbar .bp-search-wrap {
  background: var(--bp-shell-bg, var(--bp-card-bg, var(--c-surface)));
}

@media (max-width: 900px) {
  .list-folder-browser > .media-library-topbar,
  .media-library-browser > .media-library-topbar {
    min-height: 0;
    padding: var(--space-9) var(--space-12);
  }

  .list-folder-browser .media-library-topbar > .media-library-card-toolbar,
  .media-library-browser .media-library-topbar > .media-library-card-toolbar {
    flex-wrap: wrap;
  }

  .list-folder-browser .media-library-topbar .contacts-search-group,
  .media-library-browser .media-library-topbar .contacts-search-group {
    flex: 1 1 100%;
    margin-right: 0;
  }
}

.list-folder-browser .media-library-topbar .media-view-toggle,
.list-folder-browser .media-library-topbar .media-header-actions,
.list-folder-browser .media-library-topbar .bp-toolbar-actions,
.media-library-browser .media-library-topbar .media-view-toggle,
.media-library-browser .media-library-topbar .media-header-actions,
.media-library-browser .media-library-topbar .bp-toolbar-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.list-folder-browser .media-library-topbar .media-view-toggle,
.media-library-browser .media-library-topbar .media-view-toggle {
  margin-left: 0;
}

/* Optional section title above tools plate (Calls, Analytics contacts, …). */
.list-folder-browser > .page-header--media,
.media-library-browser > .page-header--media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 var(--space-11);
  padding: 0;
  min-height: 0;
}

.list-folder-browser > .page-header--media > :is(h1, h2),
.media-library-browser > .page-header--media > :is(h1, h2) {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.list-folder-browser > .media-library-shell,
.media-library-browser > .media-library-shell {
  margin: 0;
}

/*
 * Table hubs nested in tabs/settings (Users, Phone, Domains, …):
 * content-sized list chrome matching Contacts / Fields.
 * Markup: add list-folder-browser--table on the browser root.
 */
.list-folder-browser--table .media-library-main,
.media-library-browser.list-folder-browser--table .media-library-main {
  padding: 0;
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

.list-folder-browser--table .media-library-shell.card .contacts-table-wrap,
.media-library-browser.list-folder-browser--table .media-library-shell.card .contacts-table-wrap {
  height: auto;
  max-height: none;
  overflow: visible;
}

/*
 * Directory badge row: full-width sibling ABOVE the tools card.
 * No plate / shadow / surface behind the row - only the chips themselves.
 * Padding keeps drop/selection rings from clipping at the row edges.
 */
.media-folder-fit-page .list-folder-browser > .media-library-folders,
.media-folder-fit-page .media-library-browser > .media-library-folders,
.list-folder-browser > .media-library-folders,
.media-library-browser > .media-library-folders {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  margin: 0 0 var(--space-9);
  min-height: 0;
  padding: var(--space-4);
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  /* Contain jelly spring overshoot - visual only, no page scroll growth. */
  overflow-x: clip;
  overflow-y: visible;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.media-folder-fit-page .media-folder-nav-row {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.media-folder-fit-page .media-folder-nav {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  /* Must clear --bp-ring-width so selection/drop rings aren't clipped. */
  padding: max(var(--space-3), calc(var(--bp-ring-width, 2px) + var(--bp-ring-offset, 0px) + 1px));
  gap: var(--space-7);
  font-size: var(--bp-text-md);
  font-weight: 500;
  flex-wrap: wrap;
  overflow: visible;
}

.media-folder-fit-page .media-folder-nav-btn {
  max-width: 18rem;
  padding: var(--space-9) var(--space-13);
  border-radius: var(--radius);
  background: var(--c-surface, var(--bp-card-bg, #fff));
  color: var(--c-text-muted);
  font-size: var(--bp-text-md);
  font-weight: 550;
  box-shadow: none;
  border-color: transparent;
}

.media-folder-fit-page .media-folder-nav-btn--menu {
  padding-right: var(--space-6);
  max-width: 20rem;
}

.media-folder-fit-page .media-folder-nav-btn:hover {
  color: var(--c-text-muted);
  background: var(--c-surface, var(--bp-card-bg, #fff));
  outline: var(--bp-ring-hover);
  outline-offset: var(--bp-ring-offset);
  box-shadow: none;
}

.media-folder-fit-page .media-folder-nav-row:not(.bp-slide-select--live) .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav:not(.bp-slide-select--live):not(:has(.media-folder-nav-row.bp-slide-select--live)) .media-folder-nav-btn.is-active {
  color: var(--c-primary-color, var(--c-primary));
  font-weight: 600;
  background: var(--c-surface, var(--bp-card-bg, #fff));
  box-shadow: none;
}

.media-folder-fit-page .media-folder-nav-sep {
  padding: 0 var(--space-2);
}

.media-folder-fit-page .media-folder-nav-icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* Drop the outer content plate - item cards sit on page bg under the topbar. */
.media-folder-fit-page .media-library-shell.card,
.media-folder-fit-page .card.media-library-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}

.media-folder-fit-page .media-library-shell > .media-library-shell-body,
.media-folder-fit-page .media-library-shell > .card-body.media-library-shell-body {
  background: transparent;
  border-radius: 0;
}

/* Table hubs (Fields / Contacts / list mode): keep the content card plate. */
.media-folder-fit-page .media-library-shell.card:has(.contacts-table),
.media-folder-fit-page .card.media-library-shell:has(.contacts-table) {
  background: var(--bp-card-bg, var(--c-surface));
  border: none;
  box-shadow: var(--bp-shadow);
  border-radius: var(--bp-card-radius, var(--radius-lg));
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

.media-folder-fit-page .media-library-shell.card:has(.contacts-table) > .media-library-shell-body,
.media-folder-fit-page .media-library-shell.card:has(.contacts-table) > .card-body.media-library-shell-body {
  background: transparent;
  min-height: 0;
}

.media-folder-fit-page .media-library-shell.card:has(.contacts-table) .media-library-main {
  padding: 0;
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

/* Table wraps size to rows (fixed 15/page) - no forced pane fill. */
.media-folder-fit-page .media-library-shell.card:has(.contacts-table) .contacts-table-wrap,
.media-folder-fit-page .media-library-shell.card:has(.contacts-table) .table-wrap,
.media-folder-fit-page #fields-list .contacts-table-wrap,
.media-folder-fit-page #fields-list .table-wrap {
  height: auto;
  max-height: none;
  overflow: visible;
}

.media-folder-fit-page #fields-list.media-library-main {
  overflow: visible;
}

/* Hide empty pagination chrome (grid mode / single page). */
.media-library-shell > .card-footer:has(.pagination:empty) {
  display: none;
}

.media-folder-fit-page .media-library-main {
  /* Leave room for card hover/selection outlines (parents clip overflow). */
  padding: var(--space-6) var(--space-7) var(--space-10);
}

.media-library-shell-body.is-resizing {
  user-select: none;
  cursor: col-resize;
}

.media-library-shell-body.is-resizing .media-library-main,
.media-library-shell-body.is-resizing .media-library-folders {
  pointer-events: none;
}

.media-folder-resizer {
  display: none !important;
}

.media-library-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-12) var(--space-13) var(--space-13);
}

.media-library-main.media-picker-grid.media-library-main {
  padding: var(--space-10) var(--space-11) var(--space-12);
}

/* Horizontal folder chips (Google Drive–like directory badges) */
.media-folder-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  min-height: 0;
  max-height: none;
  /* Inset so selection / drop rings aren't clipped. */
  padding: max(var(--space-3), calc(var(--bp-ring-width, 2px) + var(--bp-ring-offset, 0px) + 1px));
  margin: 0;
  border: none;
  overflow: visible;
  position: relative;
  isolation: isolate;
  --bp-slide-select-inset: 0px;
}

.media-folder-nav.bp-slide-select--live .bp-slide-select__pill,
.media-folder-nav.bp-slide-select--live .bp-slide-select__clip,
.media-folder-nav.bp-slide-select--live .bp-slide-select__mirror-host,
.media-folder-nav-row.bp-slide-select--live .bp-slide-select__pill,
.media-folder-nav-row.bp-slide-select--live .bp-slide-select__clip,
.media-folder-nav-row.bp-slide-select--live .bp-slide-select__mirror-host {
  transition: none;
}

.media-folder-nav-row.bp-slide-select--live.bp-slide-select--springing {
  overflow: visible;
}

.media-folder-nav-row.bp-slide-select--live.bp-slide-select--springing .media-folder-nav {
  overflow: visible;
}

.media-folder-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  min-width: 0;
  z-index: 0;
}

/*
 * Live jelly: white chip surfaces on the underlay only.
 * Do not style `.bp-slide-select__mirror …` here - that clip sits above the
 * pill; an opaque fill there hides the blobby completely.
 */
.media-folder-nav.bp-slide-select--live > .media-folder-nav-item > .media-folder-nav-btn,
.media-folder-nav-row.bp-slide-select--live > .media-folder-nav .media-folder-nav-btn,
.media-folder-nav-row.bp-slide-select--live > .media-folder-nav-item--trash > .media-folder-nav-btn {
  background: var(--c-surface, var(--bp-card-bg, #fff)) !important;
  outline: var(--bp-ring-idle);
  outline-offset: var(--bp-ring-offset);
  box-shadow: none !important;
}

.media-folder-nav.bp-slide-select--live > .media-folder-nav-item > .media-folder-nav-btn:hover,
.media-folder-nav-row.bp-slide-select--live > .media-folder-nav .media-folder-nav-btn:hover,
.media-folder-nav-row.bp-slide-select--live > .media-folder-nav-item--trash > .media-folder-nav-btn:hover {
  outline: var(--bp-ring-hover);
}

.media-folder-nav.bp-slide-select--live > .media-folder-nav-item > .media-folder-nav-btn.is-active:hover,
.media-folder-nav-row.bp-slide-select--live > .media-folder-nav .media-folder-nav-btn.is-active:hover,
.media-folder-nav-row.bp-slide-select--live > .media-folder-nav-item--trash > .media-folder-nav-btn.is-active:hover {
  outline: var(--bp-ring-hover);
}

/* Clip mirror must stay clear so jelly (below) shows through. */
.media-folder-nav.bp-slide-select--live .bp-slide-select__mirror .media-folder-nav-btn,
.media-folder-nav-row.bp-slide-select--live .bp-slide-select__mirror .media-folder-nav-btn {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Soft-trash directory: pinned to the right of the folder row - same chip chrome. */
.media-folder-nav-item--trash {
  flex-shrink: 0;
}

.media-folder-nav-item--trash > .media-folder-nav-btn {
  color: var(--c-text-muted);
  font-weight: 550;
}

.media-folder-nav-item--trash .media-folder-nav-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.media-folder-nav-item--trash .media-folder-nav-label {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Pre-slide-select fallback when trash sits outside a live row (skeleton nav-only). */
.media-folder-nav-row:not(.bp-slide-select--live) .media-folder-nav-item--trash > .media-folder-nav-btn.is-active,
.media-folder-nav-row:not(.bp-slide-select--live) .media-folder-nav-item--trash.media-folder-nav-item--current > .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav-row:not(.bp-slide-select--live) .media-folder-nav-item--trash > .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav-row:not(.bp-slide-select--live) .media-folder-nav-item--trash.media-folder-nav-item--current > .media-folder-nav-btn.is-active {
  background: var(--bp-slide-select-bg, var(--bp-jelly-bg));
  color: var(--bp-slide-select-fg, var(--bp-jelly-fg, var(--c-primary-color, var(--c-primary))));
  font-weight: 650;
  outline: none;
  box-shadow: none;
}

.media-folder-nav-item--trash > .media-folder-nav-btn--menu {
  padding-right: var(--space-4);
}

.media-folder-fit-page .media-folder-nav-item--trash > .media-folder-nav-btn--menu {
  padding-right: var(--space-6);
}

.media-folder-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  flex: 0 0 auto;
  width: auto;
  max-width: 18rem;
  min-width: 0;
  margin: 0;
  padding: var(--space-9) var(--space-13);
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius);
  background: var(--c-surface, var(--bp-card-bg, #fff));
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--bp-text-md);
  font-weight: 550;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  /* Same ring language as media grid cards (hover / select / drop). */
  outline: var(--bp-ring-idle);
  outline-offset: var(--bp-ring-offset);
  transition: background var(--dur, .15s) var(--ease, ease),
    color var(--dur, .15s) var(--ease, ease);
  box-sizing: border-box;
}

.media-folder-nav-btn--menu {
  padding-right: var(--space-4);
  gap: var(--space-2);
  max-width: 16rem;
}

.media-folder-nav-menu-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  opacity: .72;
  cursor: pointer;
}

.media-folder-nav-menu-btn .bp-icon-mask {
  width: .85rem;
  height: .85rem;
  background-color: currentColor;
}

.media-folder-nav-menu-btn:hover:not(:disabled) {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: none;
  color: inherit;
}

.media-folder-nav-menu-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--c-primary) 55%, transparent);
  outline-offset: 1px;
  opacity: 1;
}

.media-folder-nav-btn:hover {
  color: var(--c-text-muted);
  background: var(--c-surface, var(--bp-card-bg, #fff));
  outline: var(--bp-ring-hover);
  outline-offset: var(--bp-ring-offset);
  box-shadow: none;
}

.media-folder-nav:not(.bp-slide-select--live):not(:has(.media-folder-nav-row.bp-slide-select--live)) .media-folder-nav-btn.is-active {
  background: var(--bp-jelly-bg, color-mix(in srgb, var(--c-primary) 12%, white));
  color: var(--bp-jelly-fg, var(--c-primary));
  font-weight: 600;
  box-shadow: none;
}

.media-folder-nav:not(.bp-slide-select--live):not(:has(.media-folder-nav-row.bp-slide-select--live)) .media-folder-nav-btn.is-active:hover {
  outline: var(--bp-ring-hover);
  outline-offset: var(--bp-ring-offset);
  box-shadow: none;
}

/* Drop target: outline only - keep chip fill/color (selected jelly, trash, etc.). */
.media-folder-nav-item.is-drop-target > .media-folder-nav-btn,
.media-folder-nav.bp-slide-select--live .media-folder-nav-item.is-drop-target > .media-folder-nav-btn,
.media-folder-nav.bp-slide-select--live .media-folder-nav-item.is-drop-target > .media-folder-nav-btn.is-active,
.media-folder-nav.bp-slide-select--live .media-folder-nav-item.is-drop-target > .media-folder-nav-btn.is-active:hover,
.media-folder-nav-row.bp-slide-select--live .media-folder-nav-item.is-drop-target > .media-folder-nav-btn,
.media-folder-nav-row.bp-slide-select--live .media-folder-nav-item.is-drop-target > .media-folder-nav-btn.is-active,
.media-folder-nav-row.bp-slide-select--live .media-folder-nav-item.is-drop-target > .media-folder-nav-btn.is-active:hover,
.media-folder-nav-item--trash.is-drop-target > .media-folder-nav-btn,
.media-folder-nav-item--trash.is-drop-target > .media-folder-nav-btn.is-active,
.media-folder-nav-item--trash.is-drop-target.media-folder-nav-item--current > .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav-item.is-drop-target > .media-folder-nav-btn,
.media-folder-fit-page .media-folder-nav-item.is-drop-target > .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav-item--trash.is-drop-target > .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav-item--trash.is-drop-target.media-folder-nav-item--current > .media-folder-nav-btn.is-active {
  outline: var(--bp-ring-active);
  outline-offset: var(--bp-ring-offset);
  box-shadow: none;
}

.media-folder-nav-item.is-dragging,
.media-folder-nav-item.pb-dnd-source,
.media-folder-nav-item.is-dnd-snapping-home {
  cursor: grabbing;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Jelly is a sibling of the chip - hide it only while the *selected* folder flies.
   Dragging a different folder must leave the current selection pill in place. */
.media-folder-nav:has(> .media-folder-nav-item.pb-dnd-source > .media-folder-nav-btn.is-active) > .bp-slide-select__pill,
.media-folder-nav:has(> .media-folder-nav-item.pb-dnd-source > .media-folder-nav-btn.is-active) > .bp-slide-select__clip,
.media-folder-nav:has(> .media-folder-nav-item.pb-dnd-source > .media-folder-nav-btn.is-active) > .bp-slide-select__mirror-host,
.media-folder-nav:has(> .media-folder-nav-item.is-dragging > .media-folder-nav-btn.is-active) > .bp-slide-select__pill,
.media-folder-nav:has(> .media-folder-nav-item.is-dragging > .media-folder-nav-btn.is-active) > .bp-slide-select__clip,
.media-folder-nav:has(> .media-folder-nav-item.is-dragging > .media-folder-nav-btn.is-active) > .bp-slide-select__mirror-host,
.media-folder-nav:has(> .media-folder-nav-item.is-dnd-snapping-home > .media-folder-nav-btn.is-active) > .bp-slide-select__pill,
.media-folder-nav:has(> .media-folder-nav-item.is-dnd-snapping-home > .media-folder-nav-btn.is-active) > .bp-slide-select__clip,
.media-folder-nav:has(> .media-folder-nav-item.is-dnd-snapping-home > .media-folder-nav-btn.is-active) > .bp-slide-select__mirror-host,
.media-folder-nav-row:has(.media-folder-nav-item.pb-dnd-source > .media-folder-nav-btn.is-active) > .bp-slide-select__pill,
.media-folder-nav-row:has(.media-folder-nav-item.pb-dnd-source > .media-folder-nav-btn.is-active) > .bp-slide-select__clip,
.media-folder-nav-row:has(.media-folder-nav-item.pb-dnd-source > .media-folder-nav-btn.is-active) > .bp-slide-select__mirror-host,
.media-folder-nav-row:has(.media-folder-nav-item.is-dragging > .media-folder-nav-btn.is-active) > .bp-slide-select__pill,
.media-folder-nav-row:has(.media-folder-nav-item.is-dragging > .media-folder-nav-btn.is-active) > .bp-slide-select__clip,
.media-folder-nav-row:has(.media-folder-nav-item.is-dragging > .media-folder-nav-btn.is-active) > .bp-slide-select__mirror-host,
.media-folder-nav-row:has(.media-folder-nav-item.is-dnd-snapping-home > .media-folder-nav-btn.is-active) > .bp-slide-select__pill,
.media-folder-nav-row:has(.media-folder-nav-item.is-dnd-snapping-home > .media-folder-nav-btn.is-active) > .bp-slide-select__clip,
.media-folder-nav-row:has(.media-folder-nav-item.is-dnd-snapping-home > .media-folder-nav-btn.is-active) > .bp-slide-select__mirror-host {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* All directory chips: never start a native text selection when pressing the label. */
.media-folder-nav-item > .media-folder-nav-btn,
.media-folder-nav-item .media-folder-nav-label,
.media-folder-nav-item .media-folder-nav-icon {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Movable directories: grab to nest / trash (beat horizontal scroll + text selection). */
.media-folder-nav-item[data-media-dnd="folder"],
.media-folder-nav-item[data-media-dnd="folder"] > .media-folder-nav-btn,
.media-folder-nav-item[data-media-dnd="folder"] .media-folder-nav-label,
.media-folder-nav-item[data-media-dnd="folder"] .media-folder-nav-icon {
  touch-action: none;
  cursor: grab;
}

.media-folder-nav-item--system > .media-folder-nav-btn,
.media-folder-nav-item--home > .media-folder-nav-btn {
  cursor: default;
}

.media-folder-nav-item[data-media-dnd="folder"].is-dragging,
.media-folder-nav-item[data-media-dnd="folder"].is-dragging > .media-folder-nav-btn,
.media-folder-nav-item[data-media-dnd="folder"].pb-dnd-source,
.media-folder-nav-item[data-media-dnd="folder"].pb-dnd-source > .media-folder-nav-btn {
  cursor: grabbing;
}

.media-folder-nav-item[data-media-dnd="folder"] .media-folder-nav-menu-btn {
  cursor: pointer;
  touch-action: manipulation;
}

.media-folder-dnd-float {
  display: inline-flex;
  align-items: center;
  max-width: min(18rem, 70vw);
  padding: 0;
  border-radius: var(--radius);
  box-shadow: var(--bp-shadow-hover, var(--bp-shadow));
  background: transparent;
}

/* Survive global .pb-canvas-dnd-float { opacity: .32 !important } from the path editor. */
body > .pb-canvas-dnd-float.media-folder-dnd-float {
  position: fixed !important;
  z-index: 10070 !important;
  left: 0;
  top: 0;
  margin: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  cursor: grabbing;
  will-change: transform;
}

/* GPU snap cover: hide the DOM float only while a live GL canvas is flying. */
/* GPU magic-lamp cover host (shared with bp-system). */
.is-bp-gl-host,
body > .pb-canvas-dnd-float.is-dnd-gl-host,
body > .bp-dnd-float.is-dnd-gl-host {
  opacity: 0 !important;
}

.media-folder-dnd-float > .media-folder-nav-btn {
  margin: 0;
  pointer-events: none;
}

/* Float is outside the slide-select nav - paint the selected fill on the chip itself. */
.media-folder-dnd-float > .media-folder-nav-btn.is-active,
body > .media-folder-dnd-float > .media-folder-nav-btn.is-active {
  background: var(--bp-slide-select-bg, var(--bp-jelly-bg, color-mix(in srgb, var(--c-primary) 12%, white))) !important;
  color: var(--bp-slide-select-fg, var(--bp-jelly-fg, var(--c-primary))) !important;
  box-shadow: none !important;
  font-weight: 600;
}

.media-folder-nav-item--home .media-folder-nav-btn,
.media-folder-nav-item--ancestor .media-folder-nav-btn,
.media-folder-nav-item--current .media-folder-nav-btn {
  color: var(--c-text-muted);
  font-weight: 600;
}

.media-folder-nav-item--home .media-folder-nav-btn.is-active,
.media-folder-nav-item--current .media-folder-nav-btn.is-active {
  font-weight: 650;
}

.media-folder-nav-sep,
.media-breadcrumb__sep {
  flex: 0 0 auto;
  display: inline-block;
  width: var(--bp-icon-size-xs);
  height: var(--bp-icon-size-xs);
  margin: 0 var(--space-2);
  color: var(--c-text-muted);
  background-color: currentColor;
  -webkit-mask: var(--bp-icon-chevron-right) center / contain no-repeat;
  mask: var(--bp-icon-chevron-right) center / contain no-repeat;
  user-select: none;
}

.media-folder-nav-icon {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  color: currentColor;
  background-color: currentColor;
}

.media-folder-nav-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}