/* Keep scrolling inside the file browser, with preview sharing its height. */
.app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.app-sidebar { min-height: 0; overflow-y: auto; }
.app-main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.mobile-topbar { flex-shrink: 0; }
.workspace {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-height: min-content;
  padding-bottom: 24px;
}
.workspace-head, .mobile-filters, .section-head { flex-shrink: 0; }
.file-section {
  display: flex;
  flex-direction: column;
  flex: 1 0 160px;
  min-height: 0;
}
.file-content,
.file-section.preview-open .file-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.file-section.preview-open .file-content {
  grid-template-columns: minmax(0, 1fr) 340px;
}
.file-browser {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.file-table-head { position: sticky; top: 0; z-index: 2; }
.preview-pane { min-height: 0; overflow: hidden; }
.preview-pane > header { flex-shrink: 0; }
.preview-body {
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.preview-body img, .preview-body video {
  min-height: 0;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.preview-body iframe { height: 100%; min-height: 0; }
@media (max-width: 900px) {
  .app-main { height: 100%; }
}
@media (max-width: 650px) {
  .workspace { padding-bottom: 88px; }
  .file-section.preview-open .file-content { grid-template-columns: minmax(0, 1fr); }
  .preview-pane { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
}