/**
 * 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,
.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: calc(100dvh - var(--impersonation-banner-h, 0px));
}

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]) > .vai-layout,
.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]) > .vai-layout,
.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]) .vai-main,
.media-folder-fit-page:not([hidden]) .vai-sidebar {
  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;
  overflow: visible;
}

.media-folder-fit-page:not([hidden]) .vai-sidebar-sticky {
  /* Keep Voice AI sticky semantics; fill the rail in the fit viewport. */
  position: sticky;
  top: calc(var(--impersonation-banner-h, 0px) + var(--topbar-stack-offset) + 1rem);
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  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: calc(100dvh - var(--impersonation-banner-h, 0px));
}

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]) > .vai-layout,
.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]) .vai-main,
.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 .vai-sidebar .card > .card-body:empty {
  min-height: 8rem;
}

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

.media-folder-fit-page .vai-sidebar .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]) .vai-main,
  .media-folder-fit-page:not([hidden]) .vai-sidebar {
    height: auto;
    max-height: none;
    overflow: visible;
  }

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

  /* Page scroll (stacked layout): stick Recent / Storage like Voice AI. */
  .media-folder-fit-page:not([hidden]) .vai-sidebar-sticky {
    position: sticky;
    top: calc(var(--impersonation-banner-h, 0px) + var(--topbar-stack-offset) + 1rem);
    flex: none;
    align-self: flex-start;
    width: 100%;
    max-height: calc(100dvh - var(--impersonation-banner-h, 0px) - 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;
  align-items: center;
  gap: .45rem;
  width: 100%;
  min-width: 0;
}

.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 .55rem;
  min-height: 0;
  /* Room for selection / drop-target outline + focus glow. */
  padding: .3rem;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  overflow: 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.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 1rem;
  min-height: 0;
  padding: 0;
}

.media-folder-fit-page > .page-header.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.page-header--media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 0 1rem;
  min-height: 0;
  padding: 0;
}

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

.page-content.contacts-hub-page > .vai-layout {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.page-content.contacts-hub-page .contacts-hub-topbar .contacts-search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  min-width: max-content;
  margin-right: auto;
  overflow: visible;
}

.page-content.contacts-hub-page .contacts-hub-topbar .contacts-search-wrap {
  flex: 0 0 15.5rem;
  width: 15.5rem;
  min-width: 15.5rem;
  max-width: 15.5rem;
  order: 1;
}

.page-content.contacts-hub-page .contacts-hub-topbar .contacts-filter-count {
  flex: 0 0 auto;
  order: 2;
  min-width: max-content;
}

.page-content.contacts-hub-page .contacts-hub-topbar .contacts-toolbar-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .45rem .5rem;
}

@media (max-width: 900px) {
  .page-content.contacts-hub-page .contacts-hub-topbar .contacts-search-group {
    flex: 1 1 100%;
    margin-right: 0;
  }
}

/*
 * Tools plate only (search / counts / actions). Directories are a sibling
 * row above this — never flexed beside the controls, never on this card.
 */
.media-folder-fit-page .list-folder-browser > .media-library-topbar,
.media-folder-fit-page .media-library-browser > .media-library-topbar,
.vai-calls-browser.list-folder-browser > .media-library-topbar,
.vai-calls-browser.media-library-browser > .media-library-topbar,
#agency-users-browser.list-folder-browser > .media-library-topbar,
#agency-phone-browser.list-folder-browser > .media-library-topbar,
#agency-domains-browser.list-folder-browser > .media-library-topbar,
#analytics-contacts-browser.list-folder-browser > .media-library-topbar,
#agency-users-browser.media-library-browser > .media-library-topbar,
#agency-phone-browser.media-library-browser > .media-library-topbar,
#agency-domains-browser.media-library-browser > .media-library-topbar,
#analytics-contacts-browser.media-library-browser > .media-library-topbar {
  flex: 0 0 auto;
  margin: 0 0 .75rem;
  min-height: var(--topbar-h, 56px);
  padding: .55rem 1rem .55rem 1.15rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  gap: .55rem .85rem;
  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)));
}

.media-folder-fit-page .media-library-topbar > .media-library-card-toolbar,
.vai-calls-browser .media-library-topbar > .media-library-card-toolbar,
#agency-users-browser .media-library-topbar > .media-library-card-toolbar,
#agency-phone-browser .media-library-topbar > .media-library-card-toolbar,
#agency-domains-browser .media-library-topbar > .media-library-card-toolbar,
#analytics-contacts-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: .55rem .85rem;
  position: relative;
  z-index: 2;
  background: transparent;
  padding-left: 0;
  overflow: visible;
}

.media-folder-fit-page .media-library-topbar .contacts-search-group,
.media-folder-fit-page .media-library-topbar .contacts-search-wrap,
.vai-calls-browser .media-library-topbar .contacts-search-group,
.vai-calls-browser .media-library-topbar .contacts-search-wrap,
#agency-users-browser .media-library-topbar .contacts-search-group,
#agency-phone-browser .media-library-topbar .contacts-search-group,
#agency-domains-browser .media-library-topbar .contacts-search-group,
#analytics-contacts-browser .media-library-topbar .contacts-search-group,
#agency-users-browser .media-library-topbar .contacts-search-wrap,
#agency-phone-browser .media-library-topbar .contacts-search-wrap,
#agency-domains-browser .media-library-topbar .contacts-search-wrap,
#analytics-contacts-browser .media-library-topbar .contacts-search-wrap {
  background: var(--bp-shell-bg, var(--bp-card-bg, var(--c-surface)));
}

@media (max-width: 900px) {
  .media-folder-fit-page .list-folder-browser > .media-library-topbar,
  .media-folder-fit-page .media-library-browser > .media-library-topbar,
  .vai-calls-browser.list-folder-browser > .media-library-topbar,
  .vai-calls-browser.media-library-browser > .media-library-topbar,
  #agency-users-browser.list-folder-browser > .media-library-topbar,
  #agency-phone-browser.list-folder-browser > .media-library-topbar,
  #agency-domains-browser.list-folder-browser > .media-library-topbar,
  #analytics-contacts-browser.list-folder-browser > .media-library-topbar,
  #agency-users-browser.media-library-browser > .media-library-topbar,
  #agency-phone-browser.media-library-browser > .media-library-topbar,
  #agency-domains-browser.media-library-browser > .media-library-topbar,
  #analytics-contacts-browser.media-library-browser > .media-library-topbar {
    min-height: 0;
    padding: .55rem .85rem;
  }

  .media-folder-fit-page .media-library-topbar > .media-library-card-toolbar,
  .vai-calls-browser .media-library-topbar > .media-library-card-toolbar,
  #agency-users-browser .media-library-topbar > .media-library-card-toolbar,
  #agency-phone-browser .media-library-topbar > .media-library-card-toolbar,
  #agency-domains-browser .media-library-topbar > .media-library-card-toolbar,
  #analytics-contacts-browser .media-library-topbar > .media-library-card-toolbar {
    flex-wrap: wrap;
  }
}

.media-folder-fit-page .media-library-topbar .contacts-search-group,
.vai-calls-browser .media-library-topbar .contacts-search-group,
#agency-users-browser .media-library-topbar .contacts-search-group,
#agency-phone-browser .media-library-topbar .contacts-search-group,
#agency-domains-browser .media-library-topbar .contacts-search-group,
#analytics-contacts-browser .media-library-topbar .contacts-search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  margin-right: auto;
  overflow: visible;
}

.media-folder-fit-page .media-library-topbar .contacts-search-wrap,
.vai-calls-browser .media-library-topbar .contacts-search-wrap,
#agency-users-browser .media-library-topbar .contacts-search-wrap,
#agency-phone-browser .media-library-topbar .contacts-search-wrap,
#agency-domains-browser .media-library-topbar .contacts-search-wrap,
#analytics-contacts-browser .media-library-topbar .contacts-search-wrap {
  flex: 0 0 15.5rem;
  width: 15.5rem;
  min-width: 15.5rem;
  max-width: 15.5rem;
  order: 1;
}

.media-folder-fit-page .media-library-topbar .contacts-filter-count,
.vai-calls-browser .media-library-topbar .contacts-filter-count,
#agency-users-browser .media-library-topbar .contacts-filter-count,
#agency-phone-browser .media-library-topbar .contacts-filter-count,
#agency-domains-browser .media-library-topbar .contacts-filter-count,
#analytics-contacts-browser .media-library-topbar .contacts-filter-count {
  flex: 0 0 auto;
  order: 2;
  min-width: max-content;
}

.media-folder-fit-page .media-library-topbar .media-view-toggle,
.media-folder-fit-page .media-library-topbar .media-header-actions,
.media-folder-fit-page .media-library-topbar .contacts-toolbar-actions,
.vai-calls-browser .media-library-topbar .media-header-actions,
.vai-calls-browser .media-library-topbar .contacts-toolbar-actions,
#agency-users-browser .media-library-topbar .media-header-actions,
#agency-phone-browser .media-library-topbar .media-header-actions,
#agency-domains-browser .media-library-topbar .media-header-actions,
#analytics-contacts-browser .media-library-topbar .media-header-actions,
#agency-users-browser .media-library-topbar .contacts-toolbar-actions,
#agency-phone-browser .media-library-topbar .contacts-toolbar-actions,
#agency-domains-browser .media-library-topbar .contacts-toolbar-actions,
#analytics-contacts-browser .media-library-topbar .contacts-toolbar-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.media-folder-fit-page .media-library-topbar .media-view-toggle {
  margin-left: 0;
}

/* Voice AI Calls / Analytics contacts: section title above tools plate (same rhythm as hub pages). */
.vai-calls-browser > .page-header.page-header--media,
#analytics-contacts-browser > .page-header.page-header--media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 .75rem;
  padding: 0;
  min-height: 0;
}

.vai-calls-browser > .page-header.page-header--media > h2,
#analytics-contacts-browser > .page-header.page-header--media > h2 {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

#agency-users-browser > .media-library-shell,
#agency-phone-browser > .media-library-shell,
#agency-domains-browser > .media-library-shell,
#analytics-contacts-browser > .media-library-shell {
  margin: 0;
}

/* Agency Settings table tabs: flush list chrome (match Contacts / Fields hubs). */
#agency-users-browser .media-library-main,
#agency-phone-browser .media-library-main,
#agency-domains-browser .media-library-main {
  padding: 0;
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}

#agency-users-browser .media-library-shell.card .contacts-table-wrap,
#agency-phone-browser .media-library-shell.card .contacts-table-wrap,
#agency-domains-browser .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 .55rem;
  min-height: 0;
  padding: .3rem;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  overflow: 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;
  padding: .15rem;
  gap: .45rem;
  font-size: .875rem;
  font-weight: 500;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  --bp-slide-select-radius: 999px;
}

.media-folder-fit-page .media-folder-nav-btn {
  max-width: 18rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  /* Lightest surface badge on page bg (Drive-style directory chips). */
  background: var(--c-surface, var(--bp-card-bg, #fff));
  color: var(--c-text-muted);
  font-size: .875rem;
  font-weight: 550;
  box-shadow: none;
  border-color: transparent;
}

.media-folder-fit-page .media-folder-nav-btn--menu {
  padding-right: .4rem;
  max-width: 20rem;
}

.media-folder-fit-page .media-folder-nav-btn:hover {
  color: var(--c-text-muted);
  background: color-mix(in srgb, var(--c-surface, var(--bp-card-bg)) 82%, var(--c-text));
  box-shadow: none;
}

.media-folder-fit-page .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.bp-slide-select--live .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav.bp-slide-select--live .media-folder-nav-btn.is-active:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary)));
  font-weight: 600;
}

.media-folder-fit-page .media-folder-nav-sep {
  padding: 0 .2rem;
}

.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: .4rem .45rem .65rem;
}

.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: .85rem 1rem 1rem;
}

.media-library-main.media-picker-grid,
.media-picker-grid.media-library-main {
  padding: .65rem .75rem .85rem;
}

/* Horizontal folder chips (Google Drive–like directory badges) */
.media-folder-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: .45rem;
  min-height: 0;
  max-height: none;
  /* Inset so 2px selection / drop rings aren't clipped by overflow-x scroll. */
  padding: .25rem;
  margin: 0;
  border: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  position: relative;
  isolation: isolate;
  --bp-slide-select-radius: 999px;
}

.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 {
  transition: none;
}

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

/* No-clip jelly: chips sit above the pill so labels keep primary tint. */
.media-folder-nav.bp-slide-select--live.bp-slide-select--no-clip > .media-folder-nav-item,
.media-folder-nav.bp-slide-select--live.bp-slide-select--no-clip .media-folder-nav-btn {
  z-index: 1;
}

/* 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;
}

/* Selected Trash: same jelly fill as other chips (it sits outside slide-select). */
.media-folder-nav-item--trash > .media-folder-nav-btn.is-active,
.media-folder-nav-item--trash.media-folder-nav-item--current > .media-folder-nav-btn.is-active,
.media-folder-fit-page .media-folder-nav-item--trash > .media-folder-nav-btn.is-active,
.media-folder-fit-page .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: .3rem;
}

.media-folder-fit-page .media-folder-nav-item--trash > .media-folder-nav-btn--menu {
  padding-right: .4rem;
}

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

.media-folder-nav-btn--menu {
  padding-right: .3rem;
  gap: .2rem;
  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: color-mix(in srgb, var(--c-surface, var(--bp-card-bg)) 82%, var(--c-text));
  box-shadow: none;
}

.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.bp-slide-select--live .media-folder-nav-btn {
  position: relative;
  z-index: 0;
}

.media-folder-nav.bp-slide-select--live .media-folder-nav-btn.is-active,
.media-folder-nav.bp-slide-select--live .media-folder-nav-btn.is-active:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary)));
  font-weight: 600;
}

.bp-slide-select__mirror .media-folder-nav-btn,
.bp-slide-select__mirror .media-folder-nav-btn.is-active,
.bp-slide-select__mirror .media-folder-nav-btn.is-active:hover {
  color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary))) !important;
  -webkit-text-fill-color: var(--bp-slide-select-fg, var(--c-primary-color, var(--c-primary))) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* 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-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: 2px solid var(--c-primary-color, var(--c-primary));
  outline-offset: 0;
  box-shadow: var(--bp-shadow-focus);
}

.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;
}

/* All directory chips: never start a native text selection when pressing the label. */
.media-folder-nav-item,
.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-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: 999px;
  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;
}

.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 {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .2rem;
  /* Match dashboard top-bar crumb chevrons (`>`). */
  color: var(--c-text-muted);
  font-size: .72rem;
  font-weight: 550;
  line-height: 1;
  user-select: none;
  opacity: .65;
}

.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;
}