:root { --page-gutter: clamp(16px, 4vw, 56px); }

#workspace, .panel, .surface, .asset-surface, .group-surface,
.upload-layout, .organize-layout, .group-detail { min-width: 0; }
.topbar, .tabs { padding-inline: var(--page-gutter); }
main { padding-inline: var(--page-gutter); }
.topbar { gap: 12px; }
.topbar > div, .top-actions, .section-heading > div { min-width: 0; }
#session-label, .section-heading, .row-between, .list-item strong,
.list-item small, #selected-batch, .group-detail p { overflow-wrap: anywhere; }
.tabs { min-width: 0; }
.tab { min-width: 0; }
.upload-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
.organize-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.inline-form > input, .list-item > div, .progress-item .row-between > strong { min-width: 0; }
.list-item { min-width: 0; }
button.list-item { width: 100%; text-align: left; }
.list-item .status { flex-shrink: 0; }
.asset-surface > .row-between h3 { flex: 0 0 auto; white-space: nowrap; }
.asset-surface > .row-between select { flex: 1 1 auto; width: auto; min-width: 0; }
.progress-item .row-between > strong { overflow-wrap: anywhere; }
.upload-controls, .bulk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .8rem 0; }
.upload-controls .button, .bulk-toolbar .button { min-height: 44px; }
.upload-summary { font-weight: 700; color: #244f55; }
.upload-controls .button:disabled { opacity: .48; cursor: not-allowed; }

.asset-grid, .group-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  overflow: visible;
}
.asset-grid > .empty, .group-list > .empty { grid-column: 1 / -1; }
.asset-card, .group-asset { min-width: 0; width: auto; position: relative; }
.asset-card { display: flex; flex-direction: column; }
.asset-card.selected { outline: 3px solid #0b7d78; }
.asset-preview { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
.asset-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-meta { min-width: 0; padding: 8px 10px; overflow-wrap: anywhere; }
.asset-name { display: block; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.asset-check { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: 6px 10px; font-size: .84rem; }
.asset-check input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
.asset-actions { margin-top: auto; padding: 4px 10px 10px; }
.asset-actions .button { width: 100%; min-width: 0; min-height: 44px; white-space: normal; }

.group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr));
  gap: 8px; max-height: 264px; overflow-x: hidden; overflow-y: auto;
  padding: 0 2px 10px 0;
}
.group-chip { width: 100%; min-width: 0; min-height: 64px; white-space: normal; }
.group-chip strong, .group-chip span { display: block; overflow-wrap: anywhere; }
.group-chip strong { line-height: 1.35; }
.group-detail .row-between { align-items: flex-start; }
.group-detail .row-between h3 { min-width: 0; overflow-wrap: anywhere; }
.group-detail .row-between .status { flex-shrink: 0; }
.group-assets { margin: 12px 0 18px; }
.group-asset { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.group-asset .asset-preview { height: auto; }
.group-asset .asset-name { font-size: 12px; }
.group-asset small { color: #6a817d; }
.group-asset-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.group-asset-actions .button { min-width: 0; min-height: 44px; padding: 7px 3px; font-size: 12px; white-space: normal; }
.search-results { flex-wrap: wrap; }
.search-results input { flex: 1 1 180px; min-width: 0; }
.search-results .button { min-height: 44px; }
.group-actions .button { min-height: 44px; white-space: normal; }
#upload-list .list-item { flex-wrap: wrap; }
#upload-list .list-item > div { min-width: 0; overflow-wrap: anywhere; }
#upload-list .list-item > .button { min-height: 44px; white-space: normal; }

@media (max-width: 940px) {
  .upload-layout, .organize-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .top-actions { flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .tab { min-height: 48px; padding: 10px 3px; white-space: normal; }
  .section-heading { min-width: 0; }
  .surface { padding: 16px; }
  .asset-grid, .group-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .group-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-controls .button, .bulk-toolbar .button { flex: 1 1 calc(50% - .6rem); white-space: normal; }
  .bulk-toolbar span { width: 100%; }
  .file-button { display: block; width: 100%; text-align: center; white-space: normal; min-height: 44px; }
  .row-between { min-width: 0; }
  .row-between > .button { min-height: 44px; white-space: normal; }
}