/* DAM module styles. Scoped to [data-module="dam"].
   v0.2 redesign ("Luminous" / Approach A): compact two-row header,
   collapsible sidebar with colored folder dots, masonry grid with
   gradient-overlay cards, full-viewport lightbox replaces side-drawer
   detail panel, FAB for uploads. Token layer below maps the design's
   short tokens to the platform tokens so the rest of the stylesheet
   reads like the prototype without forking theme values. */

/* Full-bleed: the platform caps every module at
   .strata-module-container { max-width: 1200px; margin: 0 auto }
   (platform/styles.css) and pads .strata-content with 24px. A gallery
   wants every pixel. The platform sets data-module="dam" on the
   module-container element itself -- NOT a descendant -- so the
   :has() trick doesn't match; use a direct attribute selector for
   the container and :has() only for the outer scroll wrapper. */
.strata-content:has([data-module="dam"]) { padding: 0; }
.strata-module-container[data-module="dam"] {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-module="dam"] {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--bg);

  /* Token mapping: design tokens -> real Strata platform tokens.
     The chrome stack has three distinct tones so the header, the
     filter row + sidebar, and the content area each look different:
       --panel    (lightest)   header
       --panel-2  (middle)     filter row, sidebar
       --bg       (darkest)    content / grid / list area
     This mirrors the dir-a layout in docs/dam/dam-redesign.html. The
     v0.1 mapping referenced --bg-primary / --bg-secondary which are
     not Strata tokens, so the chrome rendered transparent and all
     three areas blended into one flat tone. */
  /* v0.3 "flat + floating": the header, filter row, sidebar, and
     content all sit on a single --bg tone; structure is carried by
     1 px borders and padding. The one tonal lift in the module is
     the floating command bar, which uses --panel to read as the
     active surface on top of the flat plane. --dam-panel2 is kept
     pointing at --panel so sidebar active rows, hover states, and
     the command bar all share the same lifted tone. */
  --dam-panel:        var(--panel);
  --dam-panel2:       var(--panel);
  --dam-content-bg:   var(--bg);
  --dam-hover:        var(--row-hover);
  --dam-border:       var(--border);
  --dam-border2:      var(--border-strong);
  --dam-input:        var(--input-bg);
  --dam-t1:           var(--text-primary);
  --dam-t2:           var(--text-secondary);
  --dam-t3:           var(--text-tertiary);
  --dam-accent:       var(--accent);
  --dam-accent-soft:  var(--accent-soft);
  --dam-accent-line:  var(--accent-line);
  --dam-warn:         var(--warning);
  --dam-danger:       var(--error);
  --dam-danger-soft:  var(--error-soft);
  --dam-success:      var(--success);
  --dam-on-accent:    var(--studio-ink);
  --dam-on-image:     var(--studio-ink);
  --dam-on-image-muted: color-mix(in srgb, var(--studio-ink) 62%, transparent);
  --dam-check-bg:     color-mix(in srgb, var(--bg) 58%, transparent);
  --dam-check-border: color-mix(in srgb, var(--studio-ink) 45%, transparent);
  --dam-drop-bg:      color-mix(in srgb, var(--accent) 40%, transparent);
  --dam-group-head:   var(--bg);
  /* Color-temperature swatch indicators (warm/neutral/cool filter). Fixed
     hues -- they read the same in both themes, so no light override needed. */
  --dam-warm:         hsl(28, 85%, 55%);
  --dam-neutral:      hsl(220, 9%, 60%);
  --dam-cool:         hsl(205, 75%, 56%);
  --dam-shlg: 0 8px 40px rgba(0, 0, 0, 0.52);
  --dam-cb-shadow: 0 10px 30px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.22);
  --dam-r: 10px;
  --dam-rs: 7px;
  --dam-t: 0.15s;
}
[data-theme="light"] [data-module="dam"] {
  --dam-shlg: 0 8px 40px rgba(0, 0, 0, 0.13);
  --dam-cb-shadow: 0 10px 30px rgba(17, 17, 32, 0.15), 0 2px 6px rgba(17, 17, 32, 0.08);
}

/* --- View toggle (Grid / List).
   Previously lived in the module header; header was deleted and the
   toggle now sits at the right end of the filter strip next to the
   sort and density controls. Same chrome, new home. --- */

[data-module="dam"] .dam-view-toggle {
  display: flex;
  background: var(--dam-hover);
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  overflow: hidden;
}
[data-module="dam"] .dam-view-toggle button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--dam-t2);
  padding: 4px 9px;
  font-size: 12px;
  font-family: inherit;
  transition: all var(--dam-t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-module="dam"] .dam-view-toggle button.is-active {
  background: var(--dam-panel);
  color: var(--dam-t1);
}

/* --- Filter strip row: view tabs + applied chips + sort + density chips --- */

[data-module="dam"] .dam-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--dam-border);
  background: var(--dam-content-bg);
  overflow: hidden;
  flex-shrink: 0;
}
[data-module="dam"] .dam-tab {
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--dam-rs);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--dam-t2);
  white-space: nowrap;
  transition: all var(--dam-t);
}
[data-module="dam"] .dam-tab:hover { color: var(--dam-t1); background: var(--dam-hover); }
[data-module="dam"] .dam-tab.is-active {
  background: var(--dam-accent-soft);
  border-color: var(--dam-accent-line);
  color: var(--dam-accent);
}
[data-module="dam"] .dam-filter-sep {
  width: 1px;
  height: 16px;
  background: var(--dam-border);
  flex-shrink: 0;
  margin: 0 4px;
}
[data-module="dam"] .dam-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--dam-border);
  background: none;
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dam-t);
}
[data-module="dam"] .dam-chip:hover {
  border-color: var(--dam-border2);
  color: var(--dam-t1);
  background: var(--dam-hover);
}
[data-module="dam"] .dam-chip.is-active {
  background: var(--dam-accent-soft);
  border-color: var(--dam-accent-line);
  color: var(--dam-accent);
}
[data-module="dam"] .dam-chip-close {
  border: none;
  background: none;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
}
[data-module="dam"] .dam-chip-close:hover { opacity: 1; }

[data-module="dam"] .dam-active-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
[data-module="dam"] .dam-active-filters .dam-chip {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Color-temperature swatches (warm / neutral / cool filter). */
[data-module="dam"] .dam-warmth {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
[data-module="dam"] .dam-warmth-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--dam-border);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: all var(--dam-t);
}
[data-module="dam"] .dam-warmth-swatch:hover { border-color: var(--dam-border2); }
[data-module="dam"] .dam-warmth-swatch.is-active {
  border-color: var(--dam-accent);
  box-shadow: 0 0 0 1px var(--dam-accent);
}
[data-module="dam"] .dam-warmth-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
[data-module="dam"] .dam-warmth-dot.dam-warmth-warm { background: var(--dam-warm); }
[data-module="dam"] .dam-warmth-dot.dam-warmth-neutral { background: var(--dam-neutral); }
[data-module="dam"] .dam-warmth-dot.dam-warmth-cool { background: var(--dam-cool); }

[data-module="dam"] .dam-filter-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
[data-module="dam"] .dam-filter-open {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-input);
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
[data-module="dam"] .dam-filter-open:hover,
[data-module="dam"] .dam-filter-open[aria-expanded="true"] {
  color: var(--dam-accent);
  border-color: var(--dam-accent-line);
  background: var(--dam-accent-soft);
}
[data-module="dam"] .dam-sort {
  background: var(--dam-input);
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  outline: none;
}
[data-module="dam"] .dam-group-mode {
  background: var(--dam-input);
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  outline: none;
}
[data-module="dam"] .dam-group-mode:focus-visible {
  outline: 2px solid var(--dam-accent);
  outline-offset: 2px;
}
[data-module="dam"] .dam-result-order {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-input);
  color: var(--dam-t2);
  font-size: 12px;
  white-space: nowrap;
}
[data-module="dam"] .dam-density {
  display: inline-flex;
  gap: 2px;
}
[data-module="dam"] .dam-density button {
  padding: 4px 8px;
  min-width: 28px;
  height: 26px;
  border-radius: var(--dam-rs);
  border: 1px solid var(--dam-border);
  background: none;
  color: var(--dam-t2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dam-t);
  touch-action: manipulation;
}
[data-module="dam"] .dam-density button:hover {
  color: var(--dam-t1);
  background: var(--dam-hover);
}
[data-module="dam"] .dam-density button.is-active {
  background: var(--dam-accent-soft);
  border-color: var(--dam-accent-line);
  color: var(--dam-accent);
}

/* --- Layout body (folder sidebar + content) --- */

/* row-reverse puts the sidebar on the RIGHT without changing the
   order of children in the HTML. DOM order stays sidebar-before-content
   so screen readers + tab order read top-to-bottom of the source. */
[data-module="dam"] .dam-body {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  min-height: 0;
}

/* Sidebar is collapsible to 44px. Width transitions smoothly.
   Label + folder counts hide in collapsed state; only colored dots remain. */
[data-module="dam"] .dam-sidebar {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--dam-border);
  background: var(--dam-content-bg);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  overflow-x: hidden;
  overflow-y: auto;
}
[data-module="dam"] .dam-sidebar.is-collapsed { width: 44px; }

[data-module="dam"] .dam-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  flex-shrink: 0;
  gap: 4px;
  background: var(--dam-content-bg);
}
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-head {
  justify-content: center;
  padding: 10px 0;
}

[data-module="dam"] .dam-sidebar-label {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dam-t3);
  white-space: nowrap;
  overflow: hidden;
}
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-label { display: none; }

[data-module="dam"] .dam-sidebar-add,
[data-module="dam"] .dam-sidebar-hide-empty,
[data-module="dam"] .dam-sidebar-collapse,
[data-module="dam"] .dam-sidebar-mobile-close {
  background: none;
  border: none;
  color: var(--dam-t3);
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: all var(--dam-t);
}
[data-module="dam"] .dam-sidebar-add:hover,
[data-module="dam"] .dam-sidebar-hide-empty:hover,
[data-module="dam"] .dam-sidebar-collapse:hover,
[data-module="dam"] .dam-sidebar-mobile-close:hover {
  background: var(--dam-hover);
  color: var(--dam-t1);
}
[data-module="dam"] .dam-sidebar-mobile-close { display: none; }
[data-module="dam"] .dam-sidebar-hide-empty.is-active {
  color: var(--dam-accent);
}
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-add,
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-hide-empty { display: none; }

[data-module="dam"] .dam-sidebar-items {
  padding-bottom: 8px;
}

/* The folder list scrolls WITHIN the rail instead of growing it.
   The Focus Portfolio import took this library to 618 folders; with the whole
   rail as one scroll area, the folder list pushed warmth / tags / ratings so far
   down they were effectively unreachable. Capping it keeps every filter group on
   screen no matter how many folders exist.
   overscroll-behavior stops a flick at the end of the folder list from carrying
   on and scrolling the rail underneath it. */
[data-module="dam"] .dam-sidebar-items.is-folders {
  max-height: 38vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Collapsed rail is a 44px strip of dots -- it has room, and a scrollbar there
   would eat most of the width.
   Scoped to widths where the rail is ACTUALLY a narrow strip: on phones the
   mobile rules re-expand the sidebar into a filter sheet and show the facet
   sections again, so a persisted desktop `sidebarCollapsed` would otherwise
   uncap the list and put all 618 folders above warmth / tags / ratings -- the
   exact problem the cap exists to solve. */
@media (min-width: 769px) {
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-items.is-folders {
    max-height: none;
    overflow-y: visible;
  }
}
/* Unfiled is a catch-all rather than a project, so it sits below the folders
   with a rule separating it -- otherwise, holding ~24k of ~27k assets, it reads
   as the library's front door. */
[data-module="dam"] .dam-sidebar-item.is-unfiled {
  margin-top: 6px;
  border-top: 1px solid var(--dam-border);
  padding-top: 8px;
}

[data-module="dam"] .dam-sidebar-section,
[data-module="dam"] .dam-sidebar-facet-section {
  border-top: 1px solid var(--dam-border);
  padding: 10px 0;
}
[data-module="dam"] .dam-sidebar-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
[data-module="dam"] .dam-sidebar-section-title {
  padding: 0 14px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dam-t3);
}
[data-module="dam"] .dam-sidebar-tag-filter {
  margin: 0 12px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-input);
  color: var(--dam-t3);
}
[data-module="dam"] .dam-sidebar-tag-filter input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--dam-t1);
  font: inherit;
  font-size: 12px;
}
[data-module="dam"] .dam-sidebar-tag-list {
  max-height: 260px;
  overflow-y: auto;
  padding-bottom: 8px;
}
[data-module="dam"] .dam-sidebar-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
[data-module="dam"] .dam-sidebar-tag-row:hover {
  color: var(--dam-t1);
  background: var(--dam-hover);
}
[data-module="dam"] .dam-sidebar-tag-row.is-active {
  color: var(--dam-t1);
  background: var(--dam-accent-soft);
  border-left-color: var(--dam-accent);
}
[data-module="dam"] .dam-sidebar-tag-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-module="dam"] .dam-sidebar-tag-count {
  flex-shrink: 0;
  color: var(--dam-t3);
  font-size: 11px;
}
[data-module="dam"] .dam-sidebar-more,
[data-module="dam"] .dam-sidebar-empty {
  margin: 4px 12px 0;
  color: var(--dam-t3);
  font: inherit;
  font-size: 12px;
}
[data-module="dam"] .dam-sidebar-more {
  width: calc(100% - 24px);
  padding: 6px 8px;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-panel);
  cursor: pointer;
}
[data-module="dam"] .dam-sidebar-more:hover {
  color: var(--dam-t1);
  background: var(--dam-hover);
}
[data-module="dam"] .dam-sidebar-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 0 12px 12px;
}
[data-module="dam"] .dam-sidebar-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: none;
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
}
[data-module="dam"] .dam-sidebar-filter-chip:hover {
  color: var(--dam-t1);
  background: var(--dam-hover);
}
[data-module="dam"] .dam-sidebar-filter-chip.is-active {
  color: var(--dam-accent);
  border-color: var(--dam-accent-line);
  background: var(--dam-accent-soft);
}
[data-module="dam"] .dam-sidebar-filter-wide {
  margin: 0 12px;
  width: calc(100% - 24px);
}

/* Folder row: colored dot + name + count. Active row = accent-soft bg
   with a 2px accent left border. Uses <button> for native keyboard /
   screen-reader semantics. */
[data-module="dam"] .dam-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--dam-t2);
  cursor: pointer;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: all var(--dam-t);
  font-family: inherit;
}
[data-module="dam"] .dam-sidebar-item:hover {
  color: var(--dam-t1);
  background: var(--dam-hover);
}
[data-module="dam"] .dam-sidebar-item.is-active {
  color: var(--dam-t1);
  background: var(--dam-accent-soft);
  border-left-color: var(--dam-accent);
}
[data-module="dam"] .dam-sidebar-item .dam-folder-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.8;
  background: var(--dam-t3);    /* neutral fallback for folders without a color */
}
[data-module="dam"] .dam-sidebar-item.is-active .dam-folder-dot { opacity: 1; }
[data-module="dam"] .dam-sidebar-item .dam-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="dam"] .dam-sidebar-item .dam-folder-count {
  font-size: 11px;
  color: var(--dam-t3);
  flex-shrink: 0;
}
/* Disclosure twisty: a chevron for parent rows (rotates 90deg when open) and
   a same-width spacer for leaf rows so dots/labels stay column-aligned. */
[data-module="dam"] .dam-sidebar-item .dam-folder-twisty {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dam-t3);
  transition: transform var(--dam-t);
}
[data-module="dam"] .dam-sidebar-item .dam-folder-twisty.is-open { transform: rotate(90deg); }
[data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-name,
[data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-count,
[data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-twisty {
  display: none;
}
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-item {
  justify-content: center;
  padding: 8px 0;
  border-left: 0;
}
[data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-dot {
  width: 10px;
  height: 10px;
  opacity: 1;
}
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-section-title,
[data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-facet-section {
  display: none;
}

/* Drop-target highlight. Shown while a file drag or an intra-app asset
   drag hovers a folder tile. Outline sits inside the item bounds so the
   sidebar layout does not shift on hover. */
[data-module="dam"] .dam-sidebar-item.is-drop-target {
  background: var(--dam-accent-soft);
  color: var(--dam-t1);
  box-shadow: inset 0 0 0 2px var(--dam-accent);
}

/* Card being dragged: dim so the drop target is clearly the focus. */
[data-module="dam"] .dam-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

[data-module="dam"] .dam-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dam-content-bg);
}

[data-module="dam"] .dam-content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 60px;
  background: var(--dam-content-bg);
}
[data-module="dam"] .dam-content-scroll.is-grouped {
  padding-top: 0;
}

[data-module="dam"] .dam-breadcrumbs {
  padding: 12px 20px 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}
[data-module="dam"] .dam-breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
}
[data-module="dam"] .dam-breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }

/* --- Grid view (masonry via CSS columns) ---
   Columns preserves aspect ratio per thumb and packs vertically tighter
   than grid/auto-flow. Order flows top-to-bottom per column. Column count
   is driven by --dam-cols, set by the density segmented control. */

[data-module="dam"] .dam-grid {
  columns: var(--dam-cols, 4);
  column-gap: 6px;
}
[data-module="dam"][data-density="S"]  { --dam-cols: 6; }
[data-module="dam"][data-density="M"]  { --dam-cols: 4; }
[data-module="dam"][data-density="L"]  { --dam-cols: 3; }
[data-module="dam"][data-density="XL"] { --dam-cols: 2; }

/* --- Grouped grid (loaded rows bucketed by folder) --- */

[data-module="dam"] .dam-grouped-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-module="dam"] .dam-asset-group {
  min-width: 0;
}
[data-module="dam"] .dam-asset-group-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 7px;
  padding: 12px 2px 8px;
  background: var(--dam-group-head);
  border-bottom: 1px solid var(--dam-border);
  box-shadow: 0 1px 0 var(--dam-border);
}
[data-module="dam"] .dam-asset-group-toggle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  color: var(--dam-t1);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--dam-rs);
}
[data-module="dam"] .dam-asset-group-toggle:hover {
  background: var(--dam-hover);
}
[data-module="dam"] .dam-asset-group-chevron {
  display: inline-flex;
  color: var(--dam-t3);
  transition: transform var(--dam-t);
}
[data-module="dam"] .dam-asset-group:not(.is-collapsed) .dam-asset-group-chevron {
  transform: rotate(90deg);
}
[data-module="dam"] .dam-asset-group-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-module="dam"] .dam-asset-group-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--dam-t3);
}

/* Card -- the <img> fills the card, hover scales it subtly. A gradient
   overlay reveals filename + size on hover; always-on star rating sits
   top-right, checkbox top-left on hover. */
[data-module="dam"] .dam-card {
  position: relative;
  break-inside: avoid;
  margin: 0 0 6px;
  border-radius: var(--dam-r);
  overflow: hidden;
  cursor: pointer;
  background: var(--dam-panel);
}
[data-module="dam"] .dam-card.is-selected {
  outline: 2px solid var(--dam-accent);
  outline-offset: -2px;
}

[data-module="dam"] .dam-card-thumb {
  width: 100%;
  aspect-ratio: var(--dam-aspect, 4 / 3);
  background: var(--dam-panel2);
  background-size: cover;
  background-position: center;
  display: block;
  transition: transform 0.22s ease;
}
[data-module="dam"] .dam-card:hover .dam-card-thumb { transform: scale(1.04); }
[data-module="dam"] .dam-card-thumb.is-loading {
  background: linear-gradient(90deg, var(--dam-panel2), var(--dam-hover), var(--dam-panel2));
  background-size: 200% 100%;
  animation: dam-shimmer 1.4s linear infinite;
}
@keyframes dam-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

[data-module="dam"] .dam-result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dam-border);
  background: var(--dam-content-bg);
}
[data-module="dam"] .dam-result-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--dam-t1);
}
[data-module="dam"] .dam-result-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--dam-t3);
}
[data-module="dam"] .dam-result-clear {
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-panel);
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
[data-module="dam"] .dam-result-clear:hover,
[data-module="dam"] .dam-result-clear:focus-visible {
  border-color: var(--dam-border2);
  color: var(--dam-t1);
  outline: none;
}

[data-module="dam"] .dam-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
[data-module="dam"] .dam-section-head h3 {
  margin: 0 0 3px;
  font-size: 13px;
  color: var(--dam-t1);
}
[data-module="dam"] .dam-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

[data-module="dam"] .dam-suggest-queue {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--dam-border);
}
[data-module="dam"] .dam-suggest-list {
  display: grid;
  gap: 6px;
}
[data-module="dam"] .dam-suggest-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-panel);
}
[data-module="dam"] .dam-suggest-asset {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: var(--dam-t1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
[data-module="dam"] .dam-suggest-asset:hover strong,
[data-module="dam"] .dam-suggest-asset:focus-visible strong {
  color: var(--dam-accent);
}
[data-module="dam"] .dam-suggest-asset:focus-visible {
  outline: 2px solid var(--dam-accent);
  outline-offset: 2px;
}
[data-module="dam"] .dam-suggest-thumb {
  width: 40px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--dam-panel2);
  background-size: cover;
  background-position: center;
}
[data-module="dam"] .dam-suggest-asset-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}
[data-module="dam"] .dam-suggest-asset-text strong,
[data-module="dam"] .dam-suggest-asset-text span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-module="dam"] .dam-suggest-asset-text strong {
  font-size: 12px;
  font-weight: 650;
  color: var(--dam-t1);
}
[data-module="dam"] .dam-suggest-asset-text span {
  font-size: 11px;
  color: var(--dam-t3);
}
[data-module="dam"] .dam-suggest-actions {
  display: inline-flex;
  gap: 5px;
}

[data-module="dam"] .dam-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10, 8, 20, 0.85) 0%,
    rgba(10, 8, 20, 0.45) 38%,
    transparent 72%);
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 10px 9px;
  gap: 2px;
  pointer-events: none;
  color: var(--dam-on-image);
}
[data-theme="light"] [data-module="dam"] .dam-card-overlay {
  background: linear-gradient(to top,
    rgba(20, 18, 35, 0.9) 0%,
    rgba(20, 18, 35, 0.45) 38%,
    transparent 72%);
}
[data-module="dam"] .dam-card:hover .dam-card-overlay,
[data-module="dam"] .dam-card.is-selected .dam-card-overlay,
[data-module="dam"].is-selecting .dam-card-overlay {
  opacity: 1;
}
[data-module="dam"] .dam-card-filename {
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="dam"] .dam-card-meta {
  font-size: 10.5px;
  color: var(--dam-on-image-muted);
}

/* Always-visible rating badge, top-right, drop-shadow for contrast. */
[data-module="dam"] .dam-card-stars {
  position: absolute;
  top: 7px;
  right: 36px;
  color: var(--dam-warn);
  font-size: 11px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

[data-module="dam"] .dam-card-similar {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dam-panel);
  color: var(--dam-t1);
  border: 1px solid var(--dam-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dam-t), background var(--dam-t), color var(--dam-t);
  z-index: 3;
  padding: 0;
}
[data-module="dam"] .dam-card:hover .dam-card-similar,
[data-module="dam"] .dam-card:focus-within .dam-card-similar {
  opacity: 1;
}
[data-module="dam"] .dam-card-similar:hover,
[data-module="dam"] .dam-card-similar:focus-visible {
  background: var(--dam-accent-soft);
  color: var(--dam-accent);
  outline: none;
}

/* Checkbox circle: top-left, revealed on hover or during selection. */
[data-module="dam"] .dam-card-check {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dam-check-bg);
  color: var(--dam-on-image);
  border: 1.5px solid var(--dam-check-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dam-t);
  z-index: 2;
  padding: 0;
}
[data-module="dam"] .dam-card:hover .dam-card-check,
[data-module="dam"].is-selecting .dam-card-check { opacity: 1; }
[data-module="dam"] .dam-card.is-selected .dam-card-check {
  opacity: 1;
  background: var(--dam-accent);
  border-color: var(--dam-accent);
}

/* Touch devices: always show the info overlay + checkbox since there is
   no hover state to reveal them. */
@media (hover: none) {
  [data-module="dam"] .dam-card-overlay { opacity: 1; }
  [data-module="dam"] .dam-card-check { opacity: 1; }
  [data-module="dam"] .dam-card-similar { opacity: 1; }
  [data-module="dam"] .dam-card:hover .dam-card-thumb { transform: none; }
}

/* --- List view --- */

[data-module="dam"] .dam-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
/* Checkbox cell (list view + tag manager): the card-check button is absolutely
   positioned for grid cards; reset it to normal flow inside a table cell. */
[data-module="dam"] .dam-list-check { width: 30px; }
[data-module="dam"] .dam-list-check .dam-card-check {
  position: static;
  opacity: 1;
  top: auto;
  left: auto;
}
/* Tag manager (Storage tab). */
[data-module="dam"] .dam-tagmgr-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--dam-t2);
}
[data-module="dam"] .dam-tagmgr-scroll {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
}
[data-module="dam"] .dam-tag-act {
  font-size: 11px;
  padding: 3px 8px;
}
[data-module="dam"] .dam-list th,
[data-module="dam"] .dam-list td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--dam-border);
  vertical-align: middle;
}
[data-module="dam"] .dam-list th {
  font-weight: 600;
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
[data-module="dam"] .dam-list tbody tr { cursor: pointer; }
[data-module="dam"] .dam-list tbody tr:hover { background: var(--dam-hover); }
[data-module="dam"] .dam-list tbody tr.is-selected { background: var(--dam-accent-soft); }
[data-module="dam"] .dam-list-thumb {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  background: var(--dam-panel);
  background-size: cover;
  background-position: center;
}

/* --- Empty state --- */

[data-module="dam"] .dam-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary);
}
[data-module="dam"] .dam-empty h3 {
  color: var(--text-secondary);
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 500;
}
[data-module="dam"] .dam-empty p {
  margin: 0;
  font-size: 13px;
}
[data-module="dam"] .dam-empty .btn-primary {
  margin-top: 16px;
}

/* --- Infinite-scroll sentinel (Phase 2) ---
   Bottom-of-grid trigger element observed by the IntersectionObserver.
   For the grid (CSS columns) it spans the full width below the masonry;
   for the list it sits below the table. Quiet "Loading more..." affordance
   with a small spinner. Tokens only -- no hardcoded colors. */
[data-module="dam"] .dam-scroll-sentinel {
  column-span: all;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  font-size: 12px;
  color: var(--dam-t3);
}
[data-module="dam"] .dam-scroll-load {
  border: 1px solid var(--dam-border);
  border-radius: var(--dam-rs);
  background: var(--dam-panel);
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
[data-module="dam"] .dam-scroll-load:hover,
[data-module="dam"] .dam-scroll-load:focus-visible {
  background: var(--dam-hover);
  color: var(--dam-t1);
  outline: 2px solid var(--dam-accent);
  outline-offset: 2px;
}
[data-module="dam"] .dam-scroll-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--dam-border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dam-scroll-spin 0.7s linear infinite;
}
@keyframes dam-scroll-spin {
  to { transform: rotate(360deg); }
}

/* --- Lightbox -------------------------------------------------
   Full-viewport overlay that replaces the old side-drawer detail panel.
   Layout: header (close + filename + position + prev/next) -> body
   (image-area flex + 260px metadata rail) -> actions. z-4500 per
   platform.md z-scale (above popovers, below modal so a confirm over
   Delete still renders on top). */

/* The backdrop needs to cover the entire viewport. `position: fixed`
   anchors to the viewport UNLESS an ancestor has transform / filter /
   backdrop-filter / perspective / contain: paint / will-change:
   transform -- any of these would create a new "containing block for
   fixed" and the backdrop would shrink to the ancestor's bounds.
   No such ancestor exists in the platform today; these !important
   marks plus the specificity bump (scoped to [data-module="dam"])
   protect against future scoped overrides landing in platform/styles.
   Using `inset: 0` WITHOUT also setting width: 100vw is deliberate:
   if a stray containing block ever appears, inset: 0 will still fill
   that block (visible), whereas width: 100vw anchored to a narrower
   containing block would render 100vw starting at the block's left
   edge and overflow the viewport right. */
[data-module="dam"] .dam-lightbox-backdrop {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  background: rgba(9, 8, 16, 0.93);
  z-index: 4500;
  display: flex;
  flex-direction: column;
  animation: dam-lb-fade 0.15s ease-out;
}
[data-theme="light"] .dam-lightbox-backdrop {
  background: rgba(235, 233, 248, 0.95);
}
@keyframes dam-lb-fade { from { opacity: 0; } to { opacity: 1; } }

.dam-lightbox-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--dam-border);
  background: var(--dam-panel);
}
.dam-lightbox-close,
.dam-lightbox-nav {
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  touch-action: manipulation;
}
.dam-lightbox-nav {
  background: var(--dam-hover);
  width: 32px;
  height: 32px;
  font-size: 18px;
}
.dam-lightbox-close:hover,
.dam-lightbox-nav:not([disabled]):hover {
  background: var(--dam-hover);
  color: var(--text-primary);
}
.dam-lightbox-nav:not([disabled]):hover {
  background: var(--dam-accent-soft);
  color: var(--accent);
}
.dam-lightbox-nav[disabled] { opacity: 0.22; cursor: default; }

.dam-lightbox-filename {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dam-lightbox-position {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.dam-lightbox-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
.dam-lightbox-img {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: pan-y;
}
/* Opacity is the transition property for seamless prev/next swaps --
   navigateDetail flips opacity to 0 on arrow, preloads the next
   signed URL, and flips back to 1 once the image decodes. The
   dam-lb-img scale-in keyframe only runs on initial mount (the img
   element is recreated on mount but persists across arrow presses
   thanks to the new in-place update path). */
.dam-lightbox-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  animation: dam-lb-img 0.18s ease-out;
  display: block;
  transition: opacity 0.15s ease-out;
}
@keyframes dam-lb-img {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.dam-lightbox-img.is-zoomed { cursor: zoom-out; overflow: auto; align-items: flex-start; touch-action: auto; }
.dam-lightbox-img.is-zoomed img { max-width: none; max-height: none; width: auto; height: auto; }

.dam-lightbox-meta {
  width: 300px;
  min-width: 300px;                    /* flex won't let min-content push it wider */
  max-width: 300px;                    /* nor will oversized children */
  flex-shrink: 0;
  border-left: 1px solid var(--dam-border);
  background: var(--dam-panel);
  overflow: hidden auto;               /* clip horizontal; scroll vertical */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
/* Each section gets min-width: 0 so flex children can shrink below their
   content's intrinsic min-width -- without this, a long unbreakable
   string inside a meta-sec would expand the section (and visually
   "push" the rail sideways, which is what the user reported). */
.dam-meta-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dam-meta-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  overflow-wrap: anywhere;
  color: var(--text-tertiary);
}
.dam-meta-val {
  font-size: 13px;
  color: var(--text-primary);
  overflow-wrap: anywhere;             /* allow long filenames to wrap */
  word-break: break-word;
}
.dam-meta-val.is-dim { color: var(--text-secondary); }
.dam-meta-sec input,
.dam-meta-sec textarea,
.dam-meta-sec select {
  width: 100%;
  background: var(--dam-panel2);
  border: 1px solid var(--dam-border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.dam-meta-sec textarea { resize: vertical; min-height: 56px; }
.dam-meta-sec input:focus,
.dam-meta-sec textarea:focus,
.dam-meta-sec select:focus {
  border-color: var(--dam-accent-line);
}
.dam-meta-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dam-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--dam-hover);
  border: 1px solid var(--dam-border);
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 100%;                     /* never overflow the meta rail */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dam-meta-tag button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  padding: 0 1px;
  opacity: 0.6;
}
.dam-meta-tag button:hover { opacity: 1; }

/* Project photos (project-photos 1c) -- detail-rail Projects section + the
   browse sidebar project facet. Chips reuse .dam-meta-tag above. */
.dam-asset-projects { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dam-project-chips:empty { display: none; }
.dam-lib-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.dam-lib-toggle input { width: auto; margin: 0; accent-color: var(--accent); cursor: pointer; }
[data-module="dam"] .dam-project-facet {
  width: 100%;
  background: var(--dam-panel2);
  border: 1px solid var(--dam-border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  margin-bottom: 8px;
}
[data-module="dam"] .dam-project-facet:focus { border-color: var(--dam-accent-line); }

[data-module="dam"] .dam-suggest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
[data-module="dam"] .dam-suggest-empty {
  font-size: 12px;
  color: var(--dam-t3);
}
[data-module="dam"] .dam-suggest-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 4px;
  padding: 3px 5px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--dam-accent-line);
  background: var(--dam-accent-soft);
  color: var(--dam-accent);
  font-size: 11px;
}
[data-module="dam"] .dam-suggest-tag.is-queue {
  flex-shrink: 0;
}
[data-module="dam"] .dam-suggest-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-module="dam"] .dam-suggest-confidence {
  flex-shrink: 0;
  color: var(--dam-t2);
}
[data-module="dam"] .dam-suggest-tag button {
  width: 18px;
  height: 18px;
  border: 1px solid var(--dam-border);
  border-radius: 50%;
  background: var(--dam-panel);
  color: var(--dam-t2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font: inherit;
  line-height: 1;
}
[data-module="dam"] .dam-suggest-tag button:hover,
[data-module="dam"] .dam-suggest-tag button:focus-visible {
  color: var(--dam-accent);
  border-color: var(--dam-accent-line);
  outline: none;
}

[data-module="dam"] .dam-meta-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--dam-border);
  border-radius: 6px;
  background: var(--dam-panel2);
  color: var(--dam-t1);
  font: inherit;
  font-size: 13px;
  padding: 7px 8px;
  cursor: pointer;
}
[data-module="dam"] .dam-meta-action:hover,
[data-module="dam"] .dam-meta-action:focus-visible {
  border-color: var(--dam-accent-line);
  color: var(--dam-accent);
  outline: none;
}

.dam-meta-stars {
  display: inline-flex;
  gap: 2px;
}
.dam-meta-stars button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.dam-meta-stars button.is-filled {
  color: var(--dam-warn);
}

/* Phone: metadata rail collapses into a scrollable footer panel. */
@media (max-width: 720px) {
  [data-module="dam"] .dam-lightbox-backdrop {
    background: var(--bg);
  }
  .dam-lightbox-header {
    min-height: 56px;
    padding: 8px 10px;
  }
  .dam-lightbox-close,
  .dam-lightbox-nav {
    width: 44px;
    height: 44px;
  }
  .dam-lightbox-filename {
    font-size: 15px;
    font-weight: 650;
  }
  .dam-lightbox-position {
    font-size: 14px;
  }
  .dam-lightbox-body {
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
  }
  .dam-lightbox-img {
    flex: 0 0 auto;
    min-height: 0;
    max-height: 46dvh;
    padding: 12px;
  }
  .dam-lightbox-img img {
    max-height: calc(46dvh - 24px);
  }
  .dam-lightbox-meta {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--dam-border);
    overflow: visible;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 18px;
  }
  .dam-meta-sec input,
  .dam-meta-sec textarea,
  .dam-meta-sec select {
    min-height: 44px;
    font-size: 16px;
    padding: 9px 10px;
  }
  .dam-meta-sec textarea {
    min-height: 92px;
  }
  .dam-meta-stars {
    gap: 4px;
  }
  .dam-meta-stars button {
    min-width: 44px;
    min-height: 44px;
    font-size: 28px;
  }
  [data-module="dam"] .dam-meta-action {
    min-height: 44px;
    font-size: 14px;
  }
  [data-module="dam"] .dam-suggest-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  [data-module="dam"] .dam-suggest-actions {
    justify-content: flex-start;
  }
}

/* --- Floating command bar ------------------------------------------
   Bottom-center pill; morphs between default (Upload / Search /
   New folder) and selecting (N selected / Move / Tag / Rate / Delete
   / Clear) states via a single class flip on .dam-commandbar. Uses
   --dam-panel so it reads as the ONE lifted surface against the flat
   --bg plane that the rest of the chrome now sits on. z-index 90
   keeps it above content but below the lightbox (z-4500 per
   platform.md). Width animates on content swap. */

[data-module="dam"] .dam-commandbar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: var(--dam-panel);
  border: 1px solid var(--dam-border);
  border-radius: 999px;
  box-shadow: var(--dam-cb-shadow);
  z-index: 90;
  max-width: calc(100vw - 48px);
  transition: max-width var(--dam-t) ease;
  animation: dam-cb-in 0.18s ease-out;
}
@keyframes dam-cb-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

[data-module="dam"] .dam-cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--dam-t1);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dam-t), color var(--dam-t);
  touch-action: manipulation;
}
[data-module="dam"] .dam-cb-btn svg { flex-shrink: 0; color: var(--dam-t2); }
[data-module="dam"] .dam-cb-btn:hover { background: var(--dam-hover); }
[data-module="dam"] .dam-cb-btn:hover svg { color: var(--dam-t1); }
[data-module="dam"] .dam-cb-camera { display: none; }

[data-module="dam"] .dam-cb-primary {
  background: var(--dam-accent);
  color: var(--dam-on-accent);
}
[data-module="dam"] .dam-cb-primary svg { color: inherit; }
[data-module="dam"] .dam-cb-primary:hover {
  background: var(--dam-accent);
  filter: brightness(1.08);
}

[data-module="dam"] .dam-cb-danger { color: var(--dam-danger); }
[data-module="dam"] .dam-cb-danger svg { color: var(--dam-danger); }
[data-module="dam"] .dam-cb-danger:hover { background: var(--dam-danger-soft); }

[data-module="dam"] .dam-cb-ghost { color: var(--dam-t2); font-weight: 500; }

[data-module="dam"] .dam-cb-selection-head,
[data-module="dam"] .dam-cb-selection-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-module="dam"] .dam-cb-sep {
  width: 1px;
  height: 20px;
  background: var(--dam-border);
  flex-shrink: 0;
  margin: 0 2px;
}

[data-module="dam"] .dam-cb-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 34px;
  border-radius: 999px;
  background: var(--dam-input);
  border: 1px solid transparent;
  min-width: 220px;
  cursor: text;
  transition: border-color var(--dam-t), min-width var(--dam-t);
}
[data-module="dam"] .dam-cb-search:focus-within {
  border-color: var(--dam-accent-line);
  min-width: 300px;
}
[data-module="dam"] .dam-cb-search svg { color: var(--dam-t3); flex-shrink: 0; }
[data-module="dam"] .dam-cb-search input {
  border: none;
  background: none;
  outline: none;
  color: var(--dam-t1);
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-width: 0;
}
[data-module="dam"] .dam-cb-search input::placeholder { color: var(--dam-t3); }

/* Natural-language visual search trigger, attached inside the search pill. */
[data-module="dam"] .dam-cb-visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--dam-border);
  background: none;
  color: var(--dam-t2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--dam-t), color var(--dam-t), border-color var(--dam-t);
}
[data-module="dam"] .dam-cb-visual svg { color: inherit; flex-shrink: 0; }
[data-module="dam"] .dam-cb-visual:hover,
[data-module="dam"] .dam-cb-visual:focus-visible {
  background: var(--dam-hover);
  color: var(--dam-t1);
  border-color: var(--dam-accent-line);
}

[data-module="dam"] .dam-cb-count {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dam-accent);
  background: var(--dam-accent-soft);
  border-radius: 999px;
  white-space: nowrap;
}

[data-module="dam"] .dam-cb-select-wrap {
  position: relative;
  display: inline-flex;
}
[data-module="dam"] .dam-cb-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 28px 0 12px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--dam-border);
  background: transparent;
  color: var(--dam-t1);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: background var(--dam-t), border-color var(--dam-t);
}
[data-module="dam"] .dam-cb-select:hover { background: var(--dam-hover); }
[data-module="dam"] .dam-cb-select:focus { border-color: var(--dam-accent-line); }
[data-module="dam"] .dam-cb-select-wrap::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--dam-t2);
  border-bottom: 1.5px solid var(--dam-t2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Selection-mode state: danger tint on the bar border to signal
   "destructive operations available." Subtle -- pulls the eye without
   dominating. */
[data-module="dam"] .dam-commandbar.is-selecting {
  border-color: var(--dam-accent-line);
}

/* Hide the command bar while the lightbox is open so the bar doesn't
   float over the image. Selection state is preserved in module state
   so the bar reappears on close with whatever was selected. */
[data-module="dam"]:has(.dam-lightbox-backdrop) .dam-commandbar { display: none; }

[data-module="dam"] .dam-mobile-filter-backdrop {
  display: none;
}

/* --- Upload progress ---
   Sits to the right of the command bar. Bottom offset matches the
   bar (20 px) so the two float at the same horizontal line; the
   panel is anchored to the right edge and shouldn't overlap the
   centered bar at any viewport >= 700 px. */

[data-module="dam"] .dam-upload-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: min(360px, 95vw);
  background: var(--dam-panel);
  border: 1px solid var(--dam-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  z-index: 85;
  overflow: hidden;
}
[data-module="dam"] .dam-upload-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dam-border);
  font-size: 13px;
  font-weight: 600;
}
[data-module="dam"] .dam-upload-header button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
}
[data-module="dam"] .dam-upload-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px 0;
}
[data-module="dam"] .dam-upload-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 6px 14px;
  font-size: 12px;
}
[data-module="dam"] .dam-upload-item .dam-upload-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
[data-module="dam"] .dam-upload-item .dam-upload-status {
  color: var(--text-tertiary);
  font-size: 11px;
}
[data-module="dam"] .dam-upload-item.is-error .dam-upload-status { color: var(--dam-danger); }
[data-module="dam"] .dam-upload-item.is-done .dam-upload-status { color: var(--dam-success); }
[data-module="dam"] .dam-upload-item .dam-upload-bar {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--dam-panel2);
  border-radius: 2px;
  overflow: hidden;
}
[data-module="dam"] .dam-upload-item .dam-upload-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 160ms ease;
}

/* --- Drop zone --- */

[data-module="dam"].is-dropping::before {
  content: 'Drop files to upload';
  position: fixed;
  inset: 56px 0 0 0;
  z-index: 120;
  background: var(--dam-drop-bg);
  color: var(--dam-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  pointer-events: none;
}

/* --- Dashboard --- */

[data-module="dam"] .dam-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 16px 20px;
}
[data-module="dam"] .dam-stat-card {
  padding: 14px 16px;
  border: 1px solid var(--dam-border);
  border-radius: 8px;
  background: var(--dam-panel2);
}
[data-module="dam"] .dam-stat-card h4 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
[data-module="dam"] .dam-stat-card .dam-stat-number {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
[data-module="dam"] .dam-stat-card .dam-stat-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
[data-module="dam"] .dam-stat-bar {
  margin-top: 8px;
  background: var(--dam-panel);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}
[data-module="dam"] .dam-stat-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* --- Phone breakpoint --- */

@media (max-width: 640px) {
  [data-module="dam"] {
    height: 100%;
    min-height: 0;
  }
  [data-module="dam"].is-mobile-filters-open {
    overflow: hidden;
  }
  [data-module="dam"] .dam-filter-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    overflow: visible;
  }
  [data-module="dam"] .dam-tab,
  [data-module="dam"] .dam-view-toggle button,
  [data-module="dam"] .dam-filter-open {
    min-height: 40px;
  }
  [data-module="dam"] .dam-tab {
    flex: 1 1 0;
    padding: 0 6px;
    font-size: 13px;
    text-align: center;
  }
  [data-module="dam"] .dam-filter-sep { display: none; }
  [data-module="dam"] .dam-active-filters {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  [data-module="dam"] .dam-active-filters:empty { display: none; }
  [data-module="dam"] .dam-filter-right {
    order: 2;
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px;
  }
  [data-module="dam"] .dam-filter-open {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
  }
  [data-module="dam"] .dam-filter-open span {
    display: none;
  }
  [data-module="dam"] .dam-sort,
  [data-module="dam"] .dam-group-mode,
  [data-module="dam"] .dam-result-order {
    min-width: 0;
    height: 40px;
    font-size: 16px;
  }
  [data-module="dam"] .dam-sort {
    width: 100%;
  }
  [data-module="dam"] .dam-result-order {
    justify-content: center;
  }
  [data-module="dam"] .dam-group-mode {
    display: none;
  }
  [data-module="dam"] .dam-view-toggle {
    display: none;
  }
  [data-module="dam"] .dam-density {
    display: inline-flex;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--dam-border);
    border-radius: var(--dam-rs);
    background: var(--dam-input);
  }
  [data-module="dam"] .dam-density button {
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-color: transparent;
    background: none;
    font-size: 11px;
  }
  [data-module="dam"] .dam-density button.is-active {
    background: var(--dam-accent-soft);
    border-color: var(--dam-accent-line);
  }
  [data-module="dam"] .dam-mobile-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8800;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--bg) 68%, transparent);
  }
  [data-module="dam"] .dam-sidebar {
    position: fixed;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: 0;
    z-index: 8801;
    display: flex;
    width: auto;
    max-height: min(82dvh, 680px);
    border-left: 0;
    border-top: 1px solid var(--dam-border2);
    border-radius: 16px 16px 0 0;
    background: var(--dam-panel);
    box-shadow: var(--dam-shlg);
    transition: transform var(--dam-t) ease;
    transform: translateY(calc(100% + 16px));
    pointer-events: none;
    overscroll-behavior: contain;
  }
  [data-module="dam"].is-mobile-filters-open .dam-sidebar {
    transform: translateY(0);
    pointer-events: auto;
  }
  [data-module="dam"] .dam-sidebar.is-collapsed {
    width: auto;
  }
  [data-module="dam"] .dam-sidebar-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--dam-border);
    background: var(--dam-panel);
  }
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-head {
    justify-content: space-between;
    padding: 12px 14px;
  }
  [data-module="dam"] .dam-sidebar-label {
    display: block;
    font-size: 12px;
  }
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-label,
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-section-title,
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-facet-section {
    display: block;
  }
  [data-module="dam"] .dam-sidebar-collapse {
    display: none;
  }
  [data-module="dam"] .dam-sidebar-mobile-close {
    display: inline-flex;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  [data-module="dam"] .dam-sidebar-add,
  [data-module="dam"] .dam-sidebar-hide-empty {
    display: inline-flex;
    width: 44px;
    height: 44px;
  }
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-add,
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-hide-empty {
    display: inline-flex;
  }
  [data-module="dam"] .dam-sidebar-section,
  [data-module="dam"] .dam-sidebar-facet-section {
    display: block;
  }
  [data-module="dam"] .dam-sidebar-section-title {
    display: block;
  }
  [data-module="dam"] .dam-sidebar-item,
  [data-module="dam"] .dam-sidebar-tag-row,
  [data-module="dam"] .dam-sidebar-filter-chip,
  [data-module="dam"] .dam-sidebar-more {
    min-height: 44px;
  }
  [data-module="dam"] .dam-sidebar-tag-filter {
    min-height: 44px;
  }
  [data-module="dam"] .dam-sidebar-tag-filter input {
    font-size: 16px;
  }
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-name,
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-count,
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-twisty {
    display: inline-flex;
  }
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-sidebar-item {
    justify-content: flex-start;
    padding: 7px 12px;
    border-left: 2px solid transparent;
  }
  [data-module="dam"] .dam-sidebar.is-collapsed .dam-folder-dot {
    width: 8px;
    height: 8px;
    opacity: 0.8;
  }
  [data-module="dam"] .dam-content-scroll {
    padding: 8px 10px 148px;
  }
  [data-module="dam"].is-selecting .dam-content-scroll {
    padding-bottom: 216px;
  }
  [data-module="dam"] .dam-content-scroll.is-grouped {
    padding-top: 0;
  }
  [data-module="dam"] .dam-asset-group-head {
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px 0 8px;
  }
  [data-module="dam"] .dam-asset-group-toggle {
    min-height: 44px;
    padding: 0 6px;
    font-size: 15px;
    text-align: left;
  }
  [data-module="dam"] .dam-asset-group-count {
    font-size: 12px;
  }
  [data-module="dam"][data-density="S"] { --dam-cols: 3; }
  [data-module="dam"][data-density="M"] { --dam-cols: 2; }
  [data-module="dam"][data-density="L"],
  [data-module="dam"][data-density="XL"] { --dam-cols: 1; }
  [data-module="dam"] .dam-grid {
    column-gap: 10px;
  }
  [data-module="dam"] .dam-card {
    margin-bottom: 10px;
    border-radius: 12px;
  }
  [data-module="dam"] .dam-card-overlay {
    padding: 18px 18px 16px;
  }
  [data-module="dam"] .dam-card-filename {
    font-size: 15px;
    font-weight: 650;
  }
  [data-module="dam"] .dam-card-meta {
    font-size: 13px;
  }
  [data-module="dam"] .dam-card-check,
  [data-module="dam"] .dam-card-similar {
    top: 12px;
    width: 40px;
    height: 40px;
  }
  [data-module="dam"] .dam-card-check {
    left: 12px;
    opacity: 0;
    pointer-events: none;
  }
  [data-module="dam"] .dam-card-similar {
    right: 12px;
  }
  [data-module="dam"][data-density="S"] .dam-card-similar,
  [data-module="dam"][data-density="M"] .dam-card-similar {
    display: none;
  }
  [data-module="dam"].is-selecting .dam-card-check,
  [data-module="dam"] .dam-card.is-selected .dam-card-check {
    opacity: 1;
    pointer-events: auto;
  }
  [data-module="dam"] .dam-card-stars {
    top: 22px;
    right: 66px;
    font-size: 13px;
  }
  [data-module="dam"][data-density="S"] .dam-grid {
    column-gap: 8px;
  }
  [data-module="dam"][data-density="S"] .dam-card {
    margin-bottom: 8px;
    border-radius: 9px;
  }
  [data-module="dam"][data-density="M"] .dam-grid {
    column-gap: 10px;
  }
  [data-module="dam"][data-density="M"] .dam-card {
    margin-bottom: 10px;
  }
  [data-module="dam"][data-density="L"] .dam-grid,
  [data-module="dam"][data-density="XL"] .dam-grid {
    column-gap: 0;
  }
  [data-module="dam"][data-density="L"] .dam-card,
  [data-module="dam"][data-density="XL"] .dam-card {
    margin-bottom: 14px;
  }
  [data-module="dam"][data-density="S"] .dam-card-overlay,
  [data-module="dam"][data-density="M"] .dam-card-overlay {
    padding: 10px;
  }
  [data-module="dam"][data-density="S"] .dam-card-filename,
  [data-module="dam"][data-density="M"] .dam-card-filename {
    font-size: 12px;
  }
  [data-module="dam"][data-density="S"] .dam-card-meta {
    display: none;
  }
  [data-module="dam"][data-density="S"] .dam-card-similar {
    top: 7px;
    right: 7px;
    width: 34px;
    height: 34px;
  }
  [data-module="dam"][data-density="S"] .dam-card-check {
    top: 7px;
    left: 7px;
    width: 34px;
    height: 34px;
  }
  /* Command bar goes edge-to-edge at phone width, respecting the
     iOS safe-area inset. Labels next to icons get hidden to keep the
     bar from overflowing; the icons + ARIA labels carry meaning. */
  [data-module="dam"] .dam-commandbar {
    left: 12px;
    right: 12px;
    bottom: calc(61px + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: none;
    justify-content: center;
    overflow-x: auto;
    border-radius: 22px;
  }
  [data-module="dam"] .dam-cb-btn span { display: none; }
  [data-module="dam"] .dam-cb-camera {
    display: inline-flex;
  }
  [data-module="dam"] .dam-commandbar.is-selecting {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
    overflow: visible;
    animation: none;
  }
  [data-module="dam"] .dam-commandbar.is-selecting .dam-cb-btn span {
    display: inline;
  }
  [data-module="dam"] .dam-cb-selection-head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
  }
  [data-module="dam"] .dam-cb-selection-head .dam-cb-btn {
    height: 36px;
    padding: 0 10px;
    border-color: var(--dam-border);
    background: var(--dam-input);
  }
  [data-module="dam"] .dam-commandbar.is-selecting .dam-cb-count {
    height: 36px;
    flex: 1 1 auto;
    justify-content: center;
  }
  [data-module="dam"] .dam-cb-selection-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  [data-module="dam"] .dam-cb-selection-actions .dam-cb-btn {
    min-width: 0;
    height: 44px;
    justify-content: center;
    padding: 0 8px;
    border-color: var(--dam-border);
    background: var(--dam-input);
  }
  [data-module="dam"] .dam-cb-selection-actions .dam-cb-btn svg {
    color: var(--dam-t2);
  }
  [data-module="dam"] .dam-cb-selection-actions .dam-cb-danger {
    color: var(--dam-danger);
    background: var(--dam-danger-soft);
    border-color: color-mix(in srgb, var(--dam-danger) 35%, var(--dam-border));
  }
  [data-module="dam"] .dam-cb-selection-actions .dam-cb-danger svg {
    color: var(--dam-danger);
  }
  [data-module="dam"] .dam-cb-search {
    min-width: 0;
    flex: 1 1 auto;
  }
  [data-module="dam"] .dam-cb-search input { font-size: 16px; }   /* block iOS zoom */
  [data-module="dam"] .dam-cb-search:focus-within { min-width: 0; }
  /* Icon-only Visual trigger on phones. The button stays 24px visually to
     fit the 34px search pill; an invisible ::after overlay extends the hit
     area to the 44px touch minimum. */
  [data-module="dam"] .dam-cb-visual span { display: none; }
  [data-module="dam"] .dam-cb-visual { padding: 0 8px; }
  [data-module="dam"] .dam-cb-visual::after {
    content: '';
    position: absolute;
    inset: -10px -7px;
  }
  [data-module="dam"] .dam-upload-panel {
    bottom: calc(125px + env(safe-area-inset-bottom, 0px));
    right: 12px; left: 12px; width: auto;
  }
}