@emailmaker/filemanager 0.10.77 → 0.10.79

package/file-manager.css

@@ -1,1896 +1,1692 @@
-.em-filemanager .noFilesContainer {
-  text-align: center;
-}
-
-.em-filemanager .noFilesImage {
-  margin: calc(var(--marginLG) * 1px) auto;
-  color: var(--colorPrimary);
-}
-.em-filemanager .noFilesImage > svg {
-  width: 100%;
-  height: 100%;
-}
-
-.em-filemanager .noFilesTitle {
-  text-align: center;
-  padding: 0 calc(var(--marginLG) * 1px);
-  font-weight: 500;
-  line-height: 1;
-  font-size: 16px;
-}
-
-.em-filemanager .noFilesDescription {
-  text-align: center;
-  color: var(--colorTextSecondary);
-  padding: 0 calc(var(--marginLG) * 1px);
-  line-height: 1.5;
-  margin: auto;
-  max-width: 420px;
-}
-@charset "UTF-8";
-.em-filemanager .contentLayout {
+.em-filemanager .iconsTab {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  padding: 36px 16px;
+}
+.em-filemanager .iconsTab.hasSearch {
+  padding-top: 0;
 }
 
-.em-filemanager .headerContainer {
+.em-filemanager .iconsSearchWrapper {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  line-height: 0;
   display: flex;
-  justify-content: space-between;
-  margin-bottom: calc(var(--marginLG) * 1px);
+  flex-direction: column;
   align-items: center;
-  padding: calc(var(--marginLG) * 1px) calc(var(--marginLG) * 1px) 0 calc(var(--marginLG) * 1px);
+  padding: 24px;
 }
 
-.em-filemanager .actionsContainer {
+.em-filemanager .iconsSearchForm {
   display: flex;
   gap: 8px;
+  width: 100%;
+  margin-bottom: 0;
 }
 
-.em-filemanager .filesContainer {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+.em-filemanager .iconsSearchFormCenteredContainer {
   display: flex;
   flex-direction: column;
-  z-index: 1;
-  -webkit-overflow-scrolling: touch;
-  isolation: isolate;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 24px 24px 0;
 }
 
-.em-filemanager .filesLoadingOverlay {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
+.em-filemanager .iconsSearchFormCentered {
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  align-items: flex-start;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.45);
-  backdrop-filter: blur(1px);
-  pointer-events: auto;
 }
-
-.em-filemanager .emptyStateWrapper {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.em-filemanager .iconsSearchFormCentered .iconsSearchFormInput {
+  width: 640px;
+  max-width: 100%;
+  padding: 0;
+  margin: auto auto 12px;
+  transition: all 300ms ease;
 }
-
-.em-filemanager .searchContainer {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  width: 300px;
+.em-filemanager .iconsSearchFormCentered .iconsSearchFormInputInput {
+  max-width: 100%;
+  width: 100%;
 }
 
-.em-filemanager .breadcrumbContainer {
-  margin-bottom: calc(var(--margin) * 1px);
+.em-filemanager .iconsSearchFormInput {
+  width: 240px;
+  padding: 0;
+  margin-bottom: 0;
+  transition: all 300ms ease;
 }
 
-.em-filemanager .paginationContainer {
+.em-filemanager .iconsSearchResults {
+  width: 100%;
   display: flex;
-  justify-content: center;
-  margin-top: calc(var(--margin) * 1px);
-  margin-bottom: calc(var(--margin) * 1px);
-  height: 90px;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.em-filemanager .iconsSearchResults .iconsSearchFormInput {
+  width: 240px;
+  flex: 0 0 auto;
+  margin-bottom: 0;
 }
 
-.em-filemanager .paginationContainerEnd {
+.em-filemanager .iconsControlsControls {
   display: flex;
-  justify-content: flex-end;
-  margin-top: calc(var(--margin) * 1px);
+  align-items: center;
+  gap: 16px;
 }
 
-.em-filemanager .uploadIcon > span {
-  font-size: 64px;
-  color: var(--colorPrimary);
-  margin-bottom: calc(var(--margin) * 1px);
-  animation: uploadIconPulse 2s infinite;
+.em-filemanager .iconsSearchFormInputInput {
+  width: 100%;
 }
 
-.em-filemanager .uploadText {
-  font-size: 18px;
-  color: var(--colorPrimary);
-  font-weight: 500;
-  text-align: center;
-  margin-top: calc(var(--marginXS) * 1px);
+.em-filemanager .iconsControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 24px 6px 24px 24px;
+  border-bottom: 1px solid var(--colorBorder);
 }
 
-.em-filemanager .uploadSubtext {
-  font-size: 14px;
-  color: var(--colorTextSecondary);
-  text-align: center;
-  margin-top: calc(var(--paddingXXS) * 1px);
+.em-filemanager .iconsControlsFamilySlug {
+  opacity: 0.7;
 }
 
-.em-filemanager .tableContainer {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  width: 100%;
+.em-filemanager .iconsControlElement {
   display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 0;
+  align-items: center;
+  gap: 8px;
+}
+.em-filemanager .iconsControlElement > span {
+  color: var(--colorTextTertiary);
 }
 
-.em-filemanager .tableLoadingWrapper {
-  width: 100%;
+.em-filemanager .iconsControlsStrokeWidth {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-.tableLoadingWrapper .ant-table-tbody > tr {
-  cursor: pointer;
+.em-filemanager .iconsControlsStrokeWidth > span {
+  color: var(--colorTextTertiary);
 }
-
-.em-filemanager .imagePreview {
-  max-width: 100%;
-  display: block;
-  transition: transform 0.3s ease;
+.em-filemanager .iconsControlsStrokeWidth .ant-input-number {
+  width: 80px;
 }
 
-.em-filemanager .imagePreview:hover {
-  transform: scale(1.05);
+.em-filemanager .iconsControlsCompact {
+  position: relative;
 }
 
-.em-filemanager .fileManagerTableFolder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.em-filemanager .iconsControlsInputNumber {
+  width: 110px;
 }
 
-.em-filemanager .fileManagerTableFolderInner {
-  display: flex;
+.em-filemanager .iconsControlsDropdownBtn {
+  padding: 0;
+  height: 32px;
+  min-width: 36px;
+  width: 36px;
+  border-top-right-radius: 6px !important;
+  border-bottom-right-radius: 6px !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  display: inline-flex;
   align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
+  justify-content: center;
+  color: var(--colorTextTertiary);
+}
+.em-filemanager .iconsControlsDropdownBtn:hover {
+  color: var(--colorTextSecondary);
 }
 
-/* Breadcrumb styles */
-.em-filemanager .breadcrumbLink {
-  cursor: pointer;
+.em-filemanager .iconsControlsCompact .iconsControlsDropdownBtn {
+  border-top-right-radius: 6px !important;
+  border-bottom-right-radius: 6px !important;
 }
 
-/* Sort select styles */
-.em-filemanager .sortSelect {
-  width: 220px;
+.em-filemanager .sliderDropdown {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: calc(100% + 6px);
+  width: 240px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding: 10px 12px;
+  z-index: 1000;
 }
 
-/* Table column styles */
-.em-filemanager .fileNameCol {
-  max-width: calc(100% - 430px);
-  padding: 8px;
+.em-filemanager .iconsControlsHeader {
+  display: flex;
+  align-items: center;
 }
 
-.em-filemanager .fileItemCount {
-  font-size: 12px;
-  color: var(--colorTextTertiary);
-  margin-top: 2px;
+.em-filemanager .iconsSearchFormSelect {
+  width: 160px !important;
 }
 
-.em-filemanager .fileSize {
-  color: var(--colorTextTertiary);
+.em-filemanager .iconsSearchFormStyleItem {
+  margin-bottom: 0;
+  animation: fadeInSlide 300ms ease forwards;
 }
 
-.em-filemanager .fileDate {
-  color: var(--colorTextTertiary);
-  white-space: nowrap;
-  position: relative;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: block;
+@keyframes fadeInSlide {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
-
-.em-filemanager .tableMenu {
-  padding: 20px 7px;
-  display: flex;
-  text-align: center;
-  justify-content: center;
+.em-filemanager .iconsSearchDivider {
+  margin-top: 24px;
+  margin-bottom: 0;
+  border-color: var(--colorBorder);
+  width: 100%;
 }
 
-.em-filemanager .tableImagePreview {
-  display: block !important;
-  object-fit: contain;
-  border-radius: calc(var(--borderRadius) * 1px);
+.em-filemanager .iconsSearchFormInputIcon {
+  font-size: 16px;
+  cursor: pointer;
 }
 
-.em-filemanager .tableFolderIcon {
-  color: var(--colorPrimary);
-  font-size: 28px;
-  width: 44px;
-  height: 44px;
+.em-filemanager .iconsGrid {
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 24px;
 }
-.em-filemanager .tableFolderIcon > svg {
+
+.em-filemanager .iconsBottomBar {
+  position: sticky;
+  bottom: 0;
+  background: var(--colorBgLayout);
+  z-index: 5;
   width: 100%;
-  height: 100%;
 }
 
-.em-filemanager .buttonDeselected {
-  margin-left: 12px;
-  margin-right: 12px;
+.em-filemanager .iconsBottomBarContent {
+  display: flex;
+  justify-content: right;
+  padding: 17px 24px;
+  align-items: center;
 }
 
-.em-filemanager .buttonSelectAll {
-  margin-left: 12px;
+.em-filemanager .iconsGridEmpty {
+  margin: 40px 0px;
 }
 
-.em-filemanager .gridRow {
-  margin: 0;
-  gap: 20px;
-  padding: 0 24px 24px;
+.em-filemanager .iconsGridEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
 }
 
-.em-filemanager .gridCard {
-  border-radius: 16px;
-  overflow: hidden;
-  width: 220px;
-  height: 100%;
-  -webkit-user-select: none;
-          user-select: none;
-  cursor: pointer;
-  border: 2px solid transparent;
+.em-filemanager .resultsContainer {
+  width: 640px;
+  max-width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 60px 16px;
+  border-radius: 12px;
+  background-color: var(--colorBgContainer);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
 }
-.em-filemanager .gridCard:hover {
+
+.em-filemanager .playButton {
   color: var(--colorPrimary);
-  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1607843137), 0 3px 6px 0 rgba(0, 0, 0, 0.1215686275), 0 5px 12px 4px rgba(0, 0, 0, 0.0901960784);
-}
-.gridCard .ant-card-body {
-  height: calc(100% - 180px);
-  max-height: calc(100% - 180px);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+  margin-bottom: 16px;
 }
 
-.em-filemanager .selectedRow {
-  outline: 2px solid var(--colorPrimary) !important;
-  outline-offset: -1px;
+.em-filemanager .title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 4px;
 }
 
-.em-filemanager .gridCardSelected,
-.em-filemanager .gridCardSelected:hover {
-  border-color: var(--colorPrimary);
+.em-filemanager .subtitle {
+  font-size: 14px;
+  color: var(--colorSecondary);
+  line-height: 1.2;
 }
-.em-filemanager .gridCardSelected .gridCheckbox,
-.em-filemanager .gridCardSelected:hover .gridCheckbox {
-  opacity: 1;
+
+.em-filemanager .iconsGridInfiniteScroll {
+  overflow: hidden !important;
 }
 
-.em-filemanager .gridCardContent {
-  position: relative;
-  padding: 0;
-  height: 100%;
+.em-filemanager .iconsGridLoadingMore {
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
+  justify-content: center;
+  padding: 16px 0;
 }
 
-.em-filemanager .gridCheckbox {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 1;
-  opacity: 0;
+.em-filemanager .iconsGridGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--icons-grid-min-col, 148px), 1fr));
+  gap: 16px;
 }
 
-.em-filemanager .gridPreviewContainer {
+.em-filemanager .iconsGridVirtualCanvas {
+  position: relative;
   width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: calc(var(--marginXS) * 1px);
 }
 
-.em-filemanager .gridPreviewContainerFolder {
-  width: 100%;
-  /* aspect-ratio: 1 / 1; */
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--colorBgContainer);
-  border-radius: calc(var(--borderRadiusSM) * 1px);
-  margin-bottom: calc(var(--marginXS) * 1px);
-  height: 100%;
+.em-filemanager .iconsGridItem {
+  position: relative;
+  border-radius: 8px;
+  padding: 12px;
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px #f0f0f0;
 }
 
-.em-filemanager .gridFolderIcon {
+.em-filemanager .iconsGridItemThumbnail {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
-.em-filemanager .gridFolderIconImage {
-  color: var(--colorPrimary);
-  width: 64px;
-  height: 64px;
-}
-.em-filemanager .gridFolderIconImage > svg {
+.em-filemanager .iconsGridItemSvg {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.em-filemanager .gridFileName {
-  font-weight: 400;
-  line-height: 1.3;
-  margin-bottom: 4px;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.em-filemanager .iconsGridItemImg {
+  max-width: 100%;
+  object-fit: contain;
 }
 
-.em-filemanager .gridFileInfo {
-  color: #8c8c8c;
-  font-size: 13px;
-  line-height: 1.3;
+.em-filemanager .iconsGridItemName {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 1.2;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 0 0 auto;
 }
 
-.em-filemanager .gridCard .gridFileMenu {
-  opacity: 0;
-}
-.em-filemanager .gridCard:hover .gridCheckbox,
-.em-filemanager .gridCard:hover .gridFileMenu {
-  opacity: 1;
-}
-
-.em-filemanager .gridFileMenuButton {
-  padding: 0;
-  width: calc(var(--formControlHeight) * 1px);
-  min-width: calc(var(--formControlHeight) * 1px);
-  height: calc(var(--formControlHeight) * 1px);
-  min-height: calc(var(--formControlHeight) * 1px);
+.em-filemanager .iconsGridItemSelected::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 2px solid #1890ff;
+  border-radius: inherit;
+  pointer-events: none;
 }
 
-.em-filemanager .classsssssss {
-  background: red;
-  color: #4361ee;
+.em-filemanager .iconsGridItemInsertButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
 }
 
-.em-filemanager .sortContainer {
+.em-filemanager .iconsGridLoading {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+  width: 100%;
+  min-height: 50vh;
 }
 
-.em-filemanager .sortLabel {
-  font-size: 14px;
-  color: #6b7280;
+.em-filemanager .iconsControlsBackButton {
+  margin-right: 20px;
 }
 
-.em-filemanager .actionsBox {
+.em-filemanager .iconsGridCheckbox {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.em-filemanager .iconsGridItem:hover .iconsGridCheckbox {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.em-filemanager .iconsGridShowCheckboxes .iconsGridCheckbox {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.em-filemanager .iconsHeaderContainer {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24px 24px;
+  margin: 0;
+  border-bottom: 1px solid var(--colorBorder);
 }
 
-@media (max-width: 1550px) {
-  .em-filemanager .gridCard {
-    width: 220px;
-  }
+.em-filemanager .iconsHeaderContainerLeft {
+  display: flex;
+  gap: 10px;
+  align-items: center;
 }
-/* Upload Container Styles */
-.em-filemanager .uploadContainer {
-  width: 640px;
-  border-radius: 12px;
-  padding: 20px;
-  margin: auto;
-  position: relative;
+
+.em-filemanager .iconsHeaderDivider {
+  margin-top: 24px;
+  margin-bottom: 0;
+  border-color: var(--colorBorder);
+  width: 100%;
 }
 
-.em-filemanager .uploadArea {
-  border: 2px dashed var(--colorBorder);
-  border-radius: 12px;
-  background-color: var(--colorBgContainer);
-  cursor: pointer;
-  padding: 16px 36px;
-  text-align: center;
-  margin-bottom: 16px;
+.em-filemanager .copyToFolderModalBody {
   position: relative;
 }
-.em-filemanager .uploadArea:hover {
-  border-color: var(--colorPrimary);
+
+.em-filemanager .copyToFolderModalLoadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.6);
+  pointer-events: all;
 }
-.em-filemanager .uploadArea.active {
-  border-color: var(--colorPrimary);
-  background-color: var(--colorBgContainer);
+.em-filemanager .noFilesContainer {
+  text-align: center;
 }
 
-.em-filemanager .uploadIcon {
-  font-size: 48px;
+.em-filemanager .noFilesImage {
+  margin: calc(var(--marginLG) * 1px) auto;
   color: var(--colorPrimary);
-  margin-bottom: 10px;
 }
-
-.em-filemanager .blockText {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
+.em-filemanager .noFilesImage > svg {
+  width: 100%;
+  height: 100%;
 }
 
-.em-filemanager .textTitle {
+.em-filemanager .noFilesTitle {
+  text-align: center;
+  padding: 0 calc(var(--marginLG) * 1px);
+  font-weight: 500;
+  line-height: 1;
   font-size: 16px;
-  font-weight: 600;
-  color: var(--colorTextPrimary);
 }
 
-.em-filemanager .textDescription {
-  font-size: 14px;
-  color: #8c8c8c;
+.em-filemanager .noFilesDescription {
+  text-align: center;
+  color: var(--colorTextSecondary);
+  padding: 0 calc(var(--marginLG) * 1px);
+  line-height: 1.5;
+  margin: auto;
+  max-width: 420px;
 }
-
-.em-filemanager .buttons {
+@charset "UTF-8";
+.em-filemanager .contentLayout {
   display: flex;
-  gap: 16px;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 36px 16px;
 }
 
-.em-filemanager .btnAi,
-.em-filemanager .btnPhoto {
-  flex: 1;
-  font-size: 14px;
-  cursor: pointer;
+.em-filemanager .headerContainer {
   display: flex;
+  justify-content: space-between;
+  margin-bottom: calc(var(--marginLG) * 1px);
   align-items: center;
-  justify-content: center;
-  border: 1px solid var(--colorBorder);
-  border-radius: 12px;
-  background-color: var(--colorBgContainer);
-  padding: 24px 26px;
-  gap: 16px;
+  padding: calc(var(--marginLG) * 1px) calc(var(--marginLG) * 1px) 0 calc(var(--marginLG) * 1px);
 }
-.em-filemanager .btnAi:hover,
-.em-filemanager .btnPhoto:hover {
-  border-color: var(--colorPrimary);
+
+.em-filemanager .actionsContainer {
+  display: flex;
+  gap: 8px;
 }
 
-/* Drag overlay for non-empty folder drop */
-.em-filemanager .dragOverlay {
+.em-filemanager .filesContainer {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  -webkit-overflow-scrolling: touch;
+  isolation: isolate;
+}
+
+.em-filemanager .filesLoadingOverlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.35);
+  inset: 0;
+  z-index: 5;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 99999;
+  background: rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(1px);
   pointer-events: auto;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-}
-.em-filemanager .dragOverlay .uploadIcon {
-  color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
 }
-.em-filemanager .dragOverlay .uploadIcon span,
-.em-filemanager .dragOverlay .uploadIcon .anticon,
-.em-filemanager .dragOverlay .uploadIcon svg {
-  color: inherit !important;
+
+.em-filemanager .emptyStateWrapper {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.em-filemanager .dragOverlayInner {
-  background: rgba(255, 255, 255, 0.95);
-  border: 2px dashed var(--colorPrimary);
-  border-radius: 16px;
-  padding: 28px 36px;
-  text-align: center;
-  pointer-events: none;
+.em-filemanager .searchContainer {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 300px;
 }
 
-/* Невидимый capture layer для перехвата drag событий в Chrome на macOS.
-   Покрывает весь viewport с максимальным z-index, чтобы перехватить события
-   до того, как их перехватит родительское приложение. */
-.em-filemanager .dragCaptureLayer {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  z-index: 2147483647 !important;
-  background: transparent !important;
-  pointer-events: auto !important;
-  opacity: 1 !important;
-  cursor: copy;
-  isolation: isolate;
-  overflow: visible !important;
-  transform: none !important;
+.em-filemanager .breadcrumbContainer {
+  margin-bottom: calc(var(--margin) * 1px);
 }
 
-/* Полноэкранный overlay при drag файлов (покрывает viewport, в т.ч. маску модалки) */
-.em-filemanager .dragOverlayGlobal {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  z-index: 2147483646 !important;
-  background: rgba(0, 0, 0, 0.35) !important;
-  display: flex !important;
-  align-items: center;
+.em-filemanager .paginationContainer {
+  display: flex;
   justify-content: center;
-  pointer-events: auto !important;
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-  isolation: isolate;
-  overflow: visible !important;
-  transform: none !important;
+  margin-top: calc(var(--margin) * 1px);
+  margin-bottom: calc(var(--margin) * 1px);
+  height: 90px;
 }
-.em-filemanager .dragOverlayGlobal .uploadIcon {
-  color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
+
+.em-filemanager .paginationContainerEnd {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: calc(var(--margin) * 1px);
 }
-.em-filemanager .dragOverlayGlobal .uploadIcon span,
-.em-filemanager .dragOverlayGlobal .uploadIcon .anticon,
-.em-filemanager .dragOverlayGlobal .uploadIcon svg {
-  color: inherit !important;
+
+.em-filemanager .uploadIcon > span {
+  font-size: 64px;
+  color: var(--colorPrimary);
+  margin-bottom: calc(var(--margin) * 1px);
+  animation: uploadIconPulse 2s infinite;
 }
 
-.em-filemanager .noFiles {
-  width: 640px;
-  text-align: center;
-  padding: calc(var(--marginLG) * 1px);
-  padding-top: 57px !important;
-  padding-bottom: 57px !important;
-  margin: auto;
-  line-height: 1.3;
-  border: 1px solid var(--colorBorderSecondary);
-  border-radius: calc(var(--borderRadius) * 2px);
-}
-
-.em-filemanager .noFilesIcon {
+.em-filemanager .uploadText {
+  font-size: 18px;
   color: var(--colorPrimary);
-  margin-bottom: calc(var(--margin) * 1px);
-}
-
-.em-filemanager .textTitle_trash {
-  margin-top: 2px;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
+  font-weight: 500;
+  text-align: center;
+  margin-top: calc(var(--marginXS) * 1px);
 }
 
-.em-filemanager .textDescription_trash {
-  margin-top: 10px;
+.em-filemanager .uploadSubtext {
   font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  color: #8c8c8c;
-}
-@charset "UTF-8";
-.em-filemanager .folderTree .emptyFolderContainer {
+  color: var(--colorTextSecondary);
   text-align: center;
-  color: #999;
-  line-height: 1.3;
-}
-.em-filemanager .folderTree .folderItemContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  min-width: 0; /* Позволяет flex-элементам сжиматься */
+  margin-top: calc(var(--paddingXXS) * 1px);
 }
-.em-filemanager .folderTree .folderItemContainer .folderLabel {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 8px;
+
+.em-filemanager .tableContainer {
   flex: 1;
-  min-width: 0; /* Позволяет сжиматься */
-  overflow: hidden; /* Скрываем переполнение */
-  /* Иконки не должны сжиматься */
-}
-.em-filemanager .folderTree .folderItemContainer .folderLabel > svg,
-.em-filemanager .folderTree .folderItemContainer .folderLabel > *:first-child {
-  flex-shrink: 0;
-}
-.em-filemanager .folderTree .folderItemContainer .folderLabel .folderLabelItem {
-  font-size: 14px;
-  white-space: nowrap; /* Запрещаем перенос строк */
-  overflow: hidden; /* Скрываем переполнение */
-  text-overflow: ellipsis; /* Показываем троеточие */
-  flex: 1; /* Занимает доступное место */
-  min-width: 0; /* Позволяет сжиматься */
-}
-.em-filemanager .folderTree .folderItemContainer .fileCount {
-  color: #666;
-  font-size: 12px;
-  min-width: 20px;
-  flex-shrink: 0; /* Запрещаем сжатие счетчика */
-}
-.em-filemanager .folderTree .foldersTitle {
-  cursor: pointer;
+  min-height: 0;
+  overflow: hidden;
   width: 100%;
-  min-width: 0; /* Позволяет сжиматься */
-  overflow: hidden; /* Скрываем переполнение */
-}
-.em-filemanager .folderTree .foldersTitle .foldersTitleItem {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 8px;
-  flex: 1;
-  min-width: 0; /* Позволяет сжиматься */
-  overflow: hidden; /* Скрываем переполнение */
-  /* Иконки не должны сжиматься */
-}
-.em-filemanager .folderTree .foldersTitle .foldersTitleItem > svg,
-.em-filemanager .folderTree .foldersTitle .foldersTitleItem > *:first-child {
-  flex-shrink: 0;
-}
-.em-filemanager .folderTree .foldersTitle .foldersTitleItem .folderLabelItem {
-  font-size: 14px;
-  white-space: nowrap; /* Запрещаем перенос строк */
-  overflow: hidden; /* Скрываем переполнение */
-  text-overflow: ellipsis; /* Показываем троеточие */
-  flex: 1; /* Занимает доступное место */
-  min-width: 0; /* Позволяет сжиматься */
-}
-
-.em-filemanager .folderSelectionTree {
-  max-height: 300px;
-  overflow-y: auto;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
 }
 
-/* Component-specific tree overrides */
-
-.em-filemanager .folderMenu .folderItemContainer {
+.em-filemanager .tableLoadingWrapper {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 2px 0;
-  min-width: 0;
+}
+.tableLoadingWrapper .ant-table-tbody > tr {
+  cursor: pointer;
 }
 
-.em-filemanager .folderIcon {
-  margin-right: 8px;
-  font-size: 18px;
-  flex-shrink: 0; /* Запрещаем сжатие иконки */
+.em-filemanager .imagePreview {
+  max-width: 100%;
+  display: block;
+  transition: transform 0.3s ease;
 }
 
-.em-filemanager .folderLabelItem {
-  font-size: 14px;
-  white-space: nowrap; /* Запрещаем перенос строк */
-  overflow: hidden; /* Скрываем переполнение */
-  text-overflow: ellipsis; /* Показываем троеточие */
-  flex: 1; /* Занимает доступное место */
-  min-width: 0; /* Позволяет сжиматься */
-  -webkit-user-select: none;
-          user-select: none;
+.em-filemanager .imagePreview:hover {
+  transform: scale(1.05);
 }
 
-.em-filemanager .foldersTitleItem {
+.em-filemanager .fileManagerTableFolder {
   display: flex;
+  justify-content: center;
   align-items: center;
-  flex: 1;
-  cursor: pointer;
-  min-width: 0; /* Позволяет сжиматься */
-  overflow: hidden; /* Скрываем переполнение */
 }
-.em-filemanager .formFooter {
+
+.em-filemanager .fileManagerTableFolderInner {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
 }
 
-.em-filemanager .folderButton {
-  display: flex;
-  gap: 4px;
+/* Breadcrumb styles */
+.em-filemanager .breadcrumbLink {
+  cursor: pointer;
 }
-.em-filemanager .folderButton .span {
-  line-height: 1.5;
+
+/* Sort select styles */
+.em-filemanager .sortSelect {
+  width: 220px;
 }
 
-.em-filemanager .foldersWrapper {
-  padding: 16px;
-  background-color: var(--colorFillTertiary);
-  border-radius: 12px;
+/* Table column styles */
+.em-filemanager .fileNameCol {
+  max-width: calc(100% - 430px);
+  padding: 8px;
 }
 
-.em-filemanager .ant-modal-footer {
-  margin-top: 24px;
+.em-filemanager .fileItemCount {
+  font-size: 12px;
+  color: var(--colorTextTertiary);
+  margin-top: 2px;
 }
 
-.em-filemanager .formItem {
-  margin-bottom: 0;
+.em-filemanager .fileSize {
+  color: var(--colorTextTertiary);
 }
 
-.em-filemanager .folderToolsField {
-  display: none;
+.em-filemanager .fileDate {
+  color: var(--colorTextTertiary);
+  white-space: nowrap;
+  position: relative;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
 }
-.em-filemanager .folderToolsField .ant-btn {
-  height: 32px;
-  padding: 0 10px;
-  display: inline-flex;
-  align-items: center;
+
+.em-filemanager .tableMenu {
+  padding: 20px 7px;
+  display: flex;
+  text-align: center;
   justify-content: center;
 }
-.em-filemanager .folderToolsField .ant-btn:first-child {
-  width: 32px;
-  min-width: 32px;
-  padding: 0;
-}
 
-.em-filemanager .inputButtonOk {
-  border: 1px solid var(--colorBorder);
-  margin-right: -11px;
-}
-.em-filemanager .inputButtonOk:hover {
-  color: var(--colorPrimary) !important;
-  border-color: var(--colorPrimary);
-  background-color: transparent !important;
+.em-filemanager .tableImagePreview {
+  display: block !important;
+  object-fit: contain;
+  border-radius: calc(var(--borderRadius) * 1px);
 }
 
-.em-filemanager .permanentDeleteWarning {
-  margin-top: 12px;
-  margin-bottom: 0;
-  line-height: 1.5;
+.em-filemanager .tableFolderIcon {
+  color: var(--colorPrimary);
+  font-size: 28px;
+  width: 44px;
+  height: 44px;
 }
-
-.em-filemanager .clearTrashProgress {
-  margin-top: 16px;
+.em-filemanager .tableFolderIcon > svg {
+  width: 100%;
+  height: 100%;
 }
-.em-filemanager .clearTrashProgress .progressText {
-  text-align: center;
-  margin-top: 8px;
-  color: #666;
+
+.em-filemanager .buttonDeselected {
+  margin-left: 12px;
+  margin-right: 12px;
 }
 
-.em-filemanager .closeIcon {
-  color: rgba(0, 0, 0, 0.45) !important;
+.em-filemanager .buttonSelectAll {
+  margin-left: 12px;
 }
 
-.em-filemanager .modalContentWithLoader {
-  position: relative;
+.em-filemanager .gridRow {
+  margin: 0;
+  gap: 20px;
+  padding: 0 24px 24px;
 }
 
-.em-filemanager .modalLoaderOverlay {
-  position: absolute;
-  inset: 0;
+.em-filemanager .gridCard {
+  border-radius: 16px;
+  overflow: hidden;
+  width: 220px;
+  height: 100%;
+  -webkit-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+.em-filemanager .gridCard:hover {
+  color: var(--colorPrimary);
+  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1607843137), 0 3px 6px 0 rgba(0, 0, 0, 0.1215686275), 0 5px 12px 4px rgba(0, 0, 0, 0.0901960784);
+}
+.gridCard .ant-card-body {
+  height: calc(100% - 180px);
+  max-height: calc(100% - 180px);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.6);
-  z-index: 1000;
+  flex-direction: row;
+  justify-content: space-between;
 }
-@charset "UTF-8";
 
-.em-filemanager .button:hover {
-  background-color: var(--colorBgContainer);
-  color: var(--colorPrimary);
+.em-filemanager .selectedRow {
+  outline: 2px solid var(--colorPrimary) !important;
+  outline-offset: -1px;
 }
 
-.em-filemanager .foldersTitle {
+.em-filemanager .gridCardSelected,
+.em-filemanager .gridCardSelected:hover {
+  border-color: var(--colorPrimary);
+}
+.em-filemanager .gridCardSelected .gridCheckbox,
+.em-filemanager .gridCardSelected:hover .gridCheckbox {
+  opacity: 1;
+}
+
+.em-filemanager .gridCardContent {
+  position: relative;
+  padding: 0;
+  height: 100%;
   display: flex;
-  align-items: center;
-  flex: 1;
-  cursor: pointer;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.em-filemanager .folderActions {
+.em-filemanager .gridCheckbox {
   position: absolute;
-  top: 4px; /* Выравниваем по заголовку Folders */
-  right: 4px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  z-index: 10;
+  top: 8px;
+  left: 8px;
+  z-index: 1;
+  opacity: 0;
 }
-.em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only {
-  padding: calc(var(--paddingXXS) * 1px) calc(var(--paddingSM) * 1px);
-  cursor: pointer;
-  color: var(--colorTextSecondary);
-  display: flex;
-  gap: calc(var(--marginXS) * 1px);
+
+.em-filemanager .gridPreviewContainer {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
   align-items: center;
+  margin-bottom: calc(var(--marginXS) * 1px);
+}
+
+.em-filemanager .gridPreviewContainerFolder {
+  width: 100%;
+  /* aspect-ratio: 1 / 1; */
+  display: flex !important;
   justify-content: center;
+  align-items: center;
+  background-color: var(--colorBgContainer);
   border-radius: calc(var(--borderRadiusSM) * 1px);
-  transition: all var(--motionDurationFast);
-  box-shadow: none;
-  border: none;
-  width: 32px;
-  height: 32px;
-}
-.em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only:hover {
-  background-color: var(--colorBgLayout);
-  color: inherit;
+  margin-bottom: calc(var(--marginXS) * 1px);
+  height: 100%;
 }
 
-.em-filemanager .customExpandIcon {
-  display: inline-flex;
+.em-filemanager .gridFolderIcon {
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  cursor: pointer;
-  color: #666;
-  font-size: 10px;
-  transition: transform 0.2s ease;
+  border-radius: 8px;
 }
 
-.em-filemanager .customExpandIcon:hover {
+.em-filemanager .gridFolderIconImage {
   color: var(--colorPrimary);
+  width: 64px;
+  height: 64px;
 }
-
-.em-filemanager .fileCount {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
+.em-filemanager .gridFolderIconImage > svg {
+  width: 100%;
   height: 100%;
-  padding: 0 6px;
-  margin-left: 8px;
-  color: #8D8D8D;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  cursor: default;
-  flex-shrink: 0; /* Запрещаем сжатие счетчика */
-  margin-right: 10px;
 }
 
-/* :global(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected):hover {
-  color: red !important;
-} */
-/* Стили для выделения текста в выбранной папке */
+.em-filemanager .gridFileName {
+  font-weight: 400;
+  line-height: 1.3;
+  margin-bottom: 4px;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 
-/* Стили для иконки в выбранной папке */
-/* .folderMenu :global(.ant-tree-treenode-selected .folderIcon),
-.folderMenu :global(.ant-tree-node-selected .folderIcon) {
-  color: red !important;
-} */
-/* CSS переменные для упрощения расчетов */
-.em-filemanager .uploadButton {
-  width: 100%;
-  justify-content: flex-start;
+.em-filemanager .gridFileInfo {
+  color: #8c8c8c;
+  font-size: 13px;
+  line-height: 1.3;
+  white-space: nowrap;
 }
-.em-filemanager .uploadButton button:hover {
-  background-color: var(--colorPrimaryHover) !important;
+
+.em-filemanager .gridCard .gridFileMenu {
+  opacity: 0;
+}
+.em-filemanager .gridCard:hover .gridCheckbox,
+.em-filemanager .gridCard:hover .gridFileMenu {
+  opacity: 1;
 }
 
-.em-filemanager .folderMenu {
-  padding-left: 0;
-  padding-right: 0; /* Место для кнопки справа */
+.em-filemanager .gridFileMenuButton {
+  padding: 0;
+  width: calc(var(--formControlHeight) * 1px);
+  min-width: calc(var(--formControlHeight) * 1px);
+  height: calc(var(--formControlHeight) * 1px);
+  min-height: calc(var(--formControlHeight) * 1px);
 }
 
-/* Стили для линий дерева */
+.em-filemanager .classsssssss {
+  background: red;
+  color: #4361ee;
+}
 
-/* Улучшение отображения folder-item-container */
-.em-filemanager .folderMenu .folderItemContainer {
-  width: 100%;
+.em-filemanager .sortContainer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 2px 0;
-  min-width: 0; /* Позволяет flex-элементам сжиматься */
+  gap: 8px;
 }
 
-/* Стили для корневого элемента Folders */
+.em-filemanager .sortLabel {
+  font-size: 14px;
+  color: #6b7280;
+}
 
-/* Стили для ellipsis - удаляем max-width для гибкости */
+.em-filemanager .actionsBox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-/* Стили для пустого состояния */
-.em-filemanager .folderMenu .emptyFolderContainer {
+@media (max-width: 1550px) {
+  .em-filemanager .gridCard {
+    width: 220px;
+  }
+}
+/* Upload Container Styles */
+.em-filemanager .uploadContainer {
+  width: 640px;
+  border-radius: 12px;
   padding: 20px;
-  text-align: center;
+  margin: auto;
+  position: relative;
 }
 
-/* Убираем отступы у корневого узла */
-
-.em-filemanager .folderIcon {
-  margin-right: 8px;
-  font-size: 18px;
-  flex-shrink: 0; /* Запрещаем сжатие иконки */
+.em-filemanager .uploadArea {
+  border: 2px dashed var(--colorBorder);
+  border-radius: 12px;
+  background-color: var(--colorBgContainer);
+  cursor: pointer;
+  padding: 16px 36px;
+  text-align: center;
+  margin-bottom: 16px;
+  position: relative;
+}
+.em-filemanager .uploadArea:hover {
+  border-color: var(--colorPrimary);
+}
+.em-filemanager .uploadArea.active {
+  border-color: var(--colorPrimary);
+  background-color: var(--colorBgContainer);
 }
 
-.em-filemanager .folderLabelItem {
-  font-size: 14px;
-  white-space: nowrap; /* Запрещаем перенос строк */
-  overflow: hidden; /* Скрываем переполнение */
-  text-overflow: ellipsis; /* Показываем троеточие */
-  flex: 1; /* Занимает доступное место */
-  min-width: 0; /* Позволяет сжиматься */
-  -webkit-user-select: none;
-          user-select: none;
+.em-filemanager .uploadIcon {
+  font-size: 48px;
+  color: var(--colorPrimary);
+  margin-bottom: 10px;
 }
 
-.em-filemanager .foldersTitleItem {
+.em-filemanager .blockText {
   display: flex;
-  align-items: center;
-  flex: 1;
-  cursor: pointer;
-  min-width: 0; /* Позволяет сжиматься */
-  overflow: hidden; /* Скрываем переполнение */
+  flex-direction: column;
+  text-align: left;
 }
 
-/* .foldersTitleItem .folderLabelItem {
-  font-weight: 500;
-  color: #262626;
-} */
-/* Класс для заголовка папок */
-.em-filemanager .folderLabel {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
+.em-filemanager .textTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--colorTextPrimary);
 }
 
-.em-filemanager .foldersContainer {
-  position: relative;
-  width: 100%;
+.em-filemanager .textDescription {
+  font-size: 14px;
+  color: #8c8c8c;
 }
 
-/* Дополнительные стили для улучшения визуала */
-/* .folderMenu :global(.ant-tree-treenode:hover .folder-label span) {
-  color: #1890ff;
-} */
-/* Стили для дивайдера между папками */
-.em-filemanager .uploadButton .ant-btn {
+.em-filemanager .buttons {
+  display: flex;
+  gap: 16px;
+}
+
+.em-filemanager .btnAi,
+.em-filemanager .btnPhoto {
+  flex: 1;
+  font-size: 14px;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 3px;
+  border: 1px solid var(--colorBorder);
+  border-radius: 12px;
+  background-color: var(--colorBgContainer);
+  padding: 24px 26px;
+  gap: 16px;
+}
+.em-filemanager .btnAi:hover,
+.em-filemanager .btnPhoto:hover {
+  border-color: var(--colorPrimary);
 }
 
-/* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
-  color: #1890ff !important;
-} */
-.em-filemanager .buttonWrapper {
-  margin-bottom: 24px;
+/* Drag overlay for non-empty folder drop */
+.em-filemanager .dragOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.35);
   display: flex;
-  gap: 4px;
-}
-.em-filemanager .buttonWrapper > :first-child {
-  flex: 1;
-  height: 40px;
-  padding-left: 10px;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  pointer-events: auto;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
-.em-filemanager .buttonWrapper > :last-child {
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
+.em-filemanager .dragOverlay .uploadIcon {
+  color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
 }
-
-.em-filemanager .uploadButtonIcon {
-  font-size: 20px;
+.em-filemanager .dragOverlay .uploadIcon span,
+.em-filemanager .dragOverlay .uploadIcon .anticon,
+.em-filemanager .dragOverlay .uploadIcon svg {
+  color: inherit !important;
 }
 
-.em-filemanager .uploadButtonTitle {
-  line-height: 1em;
+.em-filemanager .dragOverlayInner {
+  background: rgba(255, 255, 255, 0.95);
+  border: 2px dashed var(--colorPrimary);
+  border-radius: 16px;
+  padding: 28px 36px;
+  text-align: center;
+  pointer-events: none;
 }
 
-.em-filemanager .emptyFolderContainer {
-  -webkit-user-select: none;
-          user-select: none;
-  cursor: default;
-  color: var(--colorTextTertiary);
+/* Невидимый capture layer для перехвата drag событий в Chrome на macOS.
+   Покрывает весь viewport с максимальным z-index, чтобы перехватить события
+   до того, как их перехватит родительское приложение. */
+.em-filemanager .dragCaptureLayer {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 2147483647 !important;
+  background: transparent !important;
+  pointer-events: auto !important;
+  opacity: 1 !important;
+  cursor: copy;
+  isolation: isolate;
+  overflow: visible !important;
+  transform: none !important;
 }
 
-.em-filemanager .folderItemContainer {
-  width: 100%;
-  display: flex;
+/* Полноэкранный overlay при drag файлов (покрывает viewport, в т.ч. маску модалки) */
+.em-filemanager .dragOverlayGlobal {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 2147483646 !important;
+  background: rgba(0, 0, 0, 0.35) !important;
+  display: flex !important;
   align-items: center;
-  justify-content: space-between;
-  padding: 2px 0;
-  min-width: 0; /* Позволяет flex-элементам сжиматься */
-}
-@charset "UTF-8";
-.em-filemanager .uploadProgress {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 4005;
-  max-width: 400px;
-  min-width: 320px;
+  justify-content: center;
+  pointer-events: auto !important;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  isolation: isolate;
+  overflow: visible !important;
+  transform: none !important;
 }
-
-.em-filemanager .uploadProgress__card {
-  background: var(--colorBgContainer);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  overflow: hidden;
+.em-filemanager .dragOverlayGlobal .uploadIcon {
+  color: var(--colorPrimary, var(--ant-color-primary, #1677ff)) !important;
 }
-
-.em-filemanager .uploadProgress__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--colorBorderSecondary);
+.em-filemanager .dragOverlayGlobal .uploadIcon span,
+.em-filemanager .dragOverlayGlobal .uploadIcon .anticon,
+.em-filemanager .dragOverlayGlobal .uploadIcon svg {
+  color: inherit !important;
 }
 
-.em-filemanager .uploadProgress__header-title {
-  font-size: 14px;
-  color: var(--colorText);
+.em-filemanager .noFiles {
+  width: 640px;
+  text-align: center;
+  padding: calc(var(--marginLG) * 1px);
+  padding-top: 57px !important;
+  padding-bottom: 57px !important;
+  margin: auto;
+  line-height: 1.3;
+  border: 1px solid var(--colorBorderSecondary);
+  border-radius: calc(var(--borderRadius) * 2px);
 }
 
-.em-filemanager .uploadProgress__header-buttons {
-  display: flex;
-  gap: 4px;
+.em-filemanager .noFilesIcon {
+  color: var(--colorPrimary);
+  margin-bottom: calc(var(--margin) * 1px);
 }
 
-.em-filemanager .uploadProgress__header-button {
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(0, 0, 0, 0.45);
+.em-filemanager .textTitle_trash {
+  margin-top: 2px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
 }
 
-.em-filemanager .uploadProgress__header-button:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.65);
+.em-filemanager .textDescription_trash {
+  margin-top: 10px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: #8c8c8c;
 }
-
-.em-filemanager .uploadProgress__close-icon {
-  color: var(--colorTextTertiary) !important;
+@charset "UTF-8";
+.em-filemanager .folderTree .emptyFolderContainer {
+  text-align: center;
+  color: #999;
+  line-height: 1.3;
 }
-
-.uploadProgress__body {
-  padding: 12px;
+.em-filemanager .folderTree .folderItemContainer {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 0; /* Позволяет flex-элементам сжиматься */
 }
-.uploadProgress__body .ant-list-item-meta {
+.em-filemanager .folderTree .folderItemContainer .folderLabel {
   display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.uploadProgress__body .ant-list-item-meta-content {
-  width: auto;
-  min-width: 0;
-}
-.uploadProgress__body .ant-list-item-meta-title {
-  margin: 0;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  flex: 1;
+  min-width: 0; /* Позволяет сжиматься */
+  overflow: hidden; /* Скрываем переполнение */
+  /* Иконки не должны сжиматься */
 }
-.uploadProgress__body .ant-list-item-action {
-  margin-inline-start: 16px;
+.em-filemanager .folderTree .folderItemContainer .folderLabel > svg,
+.em-filemanager .folderTree .folderItemContainer .folderLabel > *:first-child {
   flex-shrink: 0;
 }
-
-.em-filemanager .uploadProgress__common-error {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 10px 12px;
-  margin-top: 12px;
-  background: var(--colorErrorBg, #fff2f0);
-  border-radius: 6px;
-  border: 1px solid var(--colorErrorBorder, #ffccc7);
-}
-
-.em-filemanager .uploadProgress__common-error-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
+.em-filemanager .folderTree .folderItemContainer .folderLabel .folderLabelItem {
+  font-size: 14px;
+  white-space: nowrap; /* Запрещаем перенос строк */
+  overflow: hidden; /* Скрываем переполнение */
+  text-overflow: ellipsis; /* Показываем троеточие */
+  flex: 1; /* Занимает доступное место */
+  min-width: 0; /* Позволяет сжиматься */
 }
-
-.em-filemanager .uploadProgress__common-error-hint {
-  font-size: 12px !important;
-  margin-top: 4px;
-  margin-left: 28px; /* icon width + gap */
+.em-filemanager .folderTree .folderItemContainer .fileCount {
+  color: #666;
+  font-size: 12px;
+  min-width: 20px;
+  flex-shrink: 0; /* Запрещаем сжатие счетчика */
 }
-
-.em-filemanager .uploadProgress__list-wrapper {
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
+.em-filemanager .folderTree .foldersTitle {
+  cursor: pointer;
+  width: 100%;
+  min-width: 0; /* Позволяет сжиматься */
+  overflow: hidden; /* Скрываем переполнение */
 }
-
-.em-filemanager .uploadProgress__status-icon {
+.em-filemanager .folderTree .foldersTitle .foldersTitleItem {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-.em-filemanager .uploadProgress__status-icon-icon {
-  font-size: 20px;
-  color: #52c41a;
-}
-
-.em-filemanager .uploadProgress__file-item {
-  padding: 8px 0 !important;
-  border-bottom: 1px solid var(--colorBorderSecondary);
-}
-
-.em-filemanager .uploadProgress__file-item--error {
-  padding: 10px 0 !important;
-}
-
-.uploadProgress__body--error .uploadProgress__file-item {
-  display: grid !important;
-}
-
-/* Ошибка загрузки: стиль как у уведомления — читаемый список */
-.em-filemanager .uploadProgress__error-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 4px;
-}
-
-.em-filemanager .uploadProgress__error-message {
-  font-size: 12px !important;
-  line-height: 1.3;
-}
-
-.em-filemanager .uploadProgress__error-hint {
-  font-size: 11px !important;
-  line-height: 1.3;
-  color: var(--colorTextSecondary) !important;
-}
-
-.em-filemanager .uploadProgress__file-item:last-child {
-  border-bottom: none;
-}
-
-.em-filemanager .uploadProgress__file-avatar {
-  background-color: transparent !important;
-}
-
-.em-filemanager .uploadProgress__file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.em-filemanager .uploadProgress__file-name {
-  font-size: 13px;
-  line-height: 1.2;
-  max-width: 100%;
-}
-
-.em-filemanager .uploadProgress__file-size {
-  font-size: 12px;
-}
-
-.em-filemanager .uploadProgress__progress-bar {
-  margin-top: 4px;
-}
-
-/* Минимизированное состояние */
-.em-filemanager .uploadProgress__minimized {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 4005;
-}
-
-.em-filemanager .uploadProgress__minimized-button {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Скроллбар для списка файлов */
-.em-filemanager .uploadProgress__file-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.em-filemanager .uploadProgress__file-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
+  gap: 8px;
+  padding: 0 8px;
+  flex: 1;
+  min-width: 0; /* Позволяет сжиматься */
+  overflow: hidden; /* Скрываем переполнение */
+  /* Иконки не должны сжиматься */
 }
-
-.em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
+.em-filemanager .folderTree .foldersTitle .foldersTitleItem > svg,
+.em-filemanager .folderTree .foldersTitle .foldersTitleItem > *:first-child {
+  flex-shrink: 0;
 }
-
-/* Анимации */
-.em-filemanager .uploadProgress {
-  animation: slideInFromLeft 0.3s ease-out;
+.em-filemanager .folderTree .foldersTitle .foldersTitleItem .folderLabelItem {
+  font-size: 14px;
+  white-space: nowrap; /* Запрещаем перенос строк */
+  overflow: hidden; /* Скрываем переполнение */
+  text-overflow: ellipsis; /* Показываем троеточие */
+  flex: 1; /* Занимает доступное место */
+  min-width: 0; /* Позволяет сжиматься */
 }
 
-.em-filemanager .uploadProgress__minimized {
-  animation: slideInFromLeft 0.3s ease-out;
+.em-filemanager .folderSelectionTree {
+  max-height: 300px;
+  overflow-y: auto;
 }
 
-@keyframes slideInFromLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-/* Адаптивность */
-@media (max-width: 768px) {
-  .em-filemanager .uploadProgress {
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    max-width: calc(100vw - 20px);
-    min-width: auto;
-  }
-  .em-filemanager .uploadProgress__minimized {
-    top: 10px;
-    left: 10px;
-  }
-}
-.em-filemanager .gifTab {
-  height: 100%;
-  min-height: 0;
-}
+/* Component-specific tree overrides */
 
-.em-filemanager .scrollableDiv {
+.em-filemanager .folderMenu .folderItemContainer {
   width: 100%;
-  height: 100%;
-  overflow: auto;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  line-height: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 24px;
-}
-
-.em-filemanager .gifSearchInput {
-  padding: 0;
-  width: 640px;
-  max-width: 100%;
-  transition: width 1s ease;
-  margin: auto auto 24px;
-}
-
-.em-filemanager .search {
-  max-width: 100%;
+  justify-content: space-between;
+  padding: 2px 0;
+  min-width: 0;
 }
 
-.em-filemanager .searchResults {
-  width: 100%;
-}
-.em-filemanager .searchResults .gifSearchInput {
-  width: 100%;
+.em-filemanager .folderIcon {
+  margin-right: 8px;
+  font-size: 18px;
+  flex-shrink: 0; /* Запрещаем сжатие иконки */
 }
 
-.em-filemanager .virtualCanvas {
-  position: relative;
-  width: 100%;
+.em-filemanager .folderLabelItem {
+  font-size: 14px;
+  white-space: nowrap; /* Запрещаем перенос строк */
+  overflow: hidden; /* Скрываем переполнение */
+  text-overflow: ellipsis; /* Показываем троеточие */
+  flex: 1; /* Занимает доступное место */
+  min-width: 0; /* Позволяет сжиматься */
+  -webkit-user-select: none;
+          user-select: none;
 }
 
-.em-filemanager .myMasonryGrid {
+.em-filemanager .foldersTitleItem {
   display: flex;
-  width: auto;
-  text-align: center;
-}
-
-.em-filemanager .myMasonryGridColumn {
-  background-clip: padding-box;
-}
-
-.em-filemanager .listItem {
+  align-items: center;
+  flex: 1;
   cursor: pointer;
-  position: relative;
-  transition: all 0.3s ease;
-  border: 1px solid #f0f2f5;
-  margin-bottom: 20px;
-  display: inline-block;
-  border-radius: 6px;
-  min-height: 100px;
-  max-height: 100px;
-  max-width: inherit;
-  overflow: hidden;
-  background: #f0f2f5;
-}
-.em-filemanager .listItem .overlayImage {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  width: 110px;
-  height: 40px;
-  background-size: cover;
-  opacity: 0;
-  transition: opacity 0.5s ease;
-}
-.em-filemanager .listItem img {
-  display: block;
-  border-radius: 6px;
-  height: auto;
-  object-fit: contain;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-.em-filemanager .listItem.loaded {
-  max-height: 1000px;
-  border: 1px solid #d9d9d9;
-}
-.em-filemanager .listItem.loaded img {
-  opacity: 1;
-  height: 100%;
-  width: 100%;
-  margin: auto;
-}
-.em-filemanager .listItem.loaded .loadedImage {
-  opacity: 0.5;
-}
-.em-filemanager .listItem:hover {
-  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
-}
-.em-filemanager .listItem:hover p.creatorInfo {
-  opacity: 1;
-}
-.em-filemanager .listItem:hover .overlayImage {
-  opacity: 1;
-}
-.em-filemanager .listItem p.creatorInfo {
-  position: absolute;
-  border-radius: 0 0 6px 0;
-  bottom: 0;
-  right: 0;
-  margin: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  padding: 5px;
-  font-size: 10px;
-  opacity: 0;
-  line-height: 1.2;
-}
-.em-filemanager .listItem p.creatorInfo:hover a {
-  color: #fff;
-  text-decoration: underline;
-}
-.em-filemanager .listItem p.creatorInfo a {
-  color: #fff;
-  text-decoration: none;
-}
-
-.em-filemanager .searchOutputWrapper {
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
+  min-width: 0; /* Позволяет сжиматься */
+  overflow: hidden; /* Скрываем переполнение */
 }
-
-.em-filemanager .divider {
-  margin-bottom: calc(var(--marginLG) * 1px);
-  border-color: var(--colorBorder);
+.em-filemanager .formFooter {
+  display: flex;
+  justify-content: space-between;
 }
 
-.em-filemanager .myMasonryGrid {
+.em-filemanager .folderButton {
   display: flex;
-  width: auto;
-  text-align: center;
-  gap: calc(var(--marginLG) * 1px);
+  gap: 4px;
 }
-
-.em-filemanager .myMasonryGridColumn {
-  background-clip: padding-box;
+.em-filemanager .folderButton .span {
+  line-height: 1.5;
 }
 
-.em-filemanager .resultsContainer {
-  width: 640px;
-  max-width: 100%;
-  overflow: auto;
-  box-sizing: border-box;
-  padding: 60px 16px;
+.em-filemanager .foldersWrapper {
+  padding: 16px;
+  background-color: var(--colorFillTertiary);
   border-radius: 12px;
-  background-color: var(--colorBgContainer);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
 }
 
-.em-filemanager .playButton {
-  color: var(--colorPrimary);
-  margin-bottom: 16px;
+.em-filemanager .ant-modal-footer {
+  margin-top: 24px;
 }
 
-.em-filemanager .title {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-  margin-bottom: 4px;
+.em-filemanager .formItem {
+  margin-bottom: 0;
 }
 
-.em-filemanager .subtitle {
-  font-size: 14px;
-  color: var(--colorSecondary);
-  line-height: 1.2;
+.em-filemanager .folderToolsField {
+  display: none;
 }
-.em-filemanager .stockTab {
-  height: 100%;
-  min-height: 0;
+.em-filemanager .folderToolsField .ant-btn {
+  height: 32px;
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
-
-.em-filemanager .stockSearchInput {
+.em-filemanager .folderToolsField .ant-btn:first-child {
+  width: 32px;
+  min-width: 32px;
   padding: 0;
-  width: 640px;
-  transition: all 200ms ease;
-  margin: auto auto 24px;
 }
 
-.em-filemanager .searchOutputWrapper {
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
+.em-filemanager .inputButtonOk {
+  border: 1px solid var(--colorBorder);
+  margin-right: -11px;
 }
-
-.em-filemanager .divider {
-  margin-bottom: calc(var(--marginLG) * 1px);
-  border-color: var(--colorBorder);
+.em-filemanager .inputButtonOk:hover {
+  color: var(--colorPrimary) !important;
+  border-color: var(--colorPrimary);
+  background-color: transparent !important;
 }
 
-.em-filemanager .search {
-  max-width: 100%;
+.em-filemanager .permanentDeleteWarning {
+  margin-top: 12px;
+  margin-bottom: 0;
+  line-height: 1.5;
 }
 
-.em-filemanager .searchResults {
-  width: 100%;
-}
-.em-filemanager .searchResults .stockSearchInput {
-  width: 100%;
+.em-filemanager .clearTrashProgress {
+  margin-top: 16px;
 }
-.em-filemanager .searchResults label {
-  height: calc(var(--formControlHeight) * 1px);
-  line-height: calc(var(--formControlHeight) * 1px);
+.em-filemanager .clearTrashProgress .progressText {
+  text-align: center;
+  margin-top: 8px;
+  color: #666;
 }
 
-.em-filemanager .virtualCanvas {
-  position: relative;
-  width: 100%;
+.em-filemanager .closeIcon {
+  color: rgba(0, 0, 0, 0.45) !important;
 }
 
-.em-filemanager .blocksSearchDividerWrapper {
-  margin: 0;
+.em-filemanager .modalContentWithLoader {
+  position: relative;
 }
 
-.em-filemanager .scrollableDiv {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  line-height: 0;
+.em-filemanager .modalLoaderOverlay {
+  position: absolute;
+  inset: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 24px;
-}
-
-.em-filemanager .myMasonryGrid {
-  display: flex;
-  width: auto;
-  text-align: center;
-  gap: calc(var(--marginLG) * 1px);
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 1000;
 }
+@charset "UTF-8";
 
-.em-filemanager .myMasonryGridColumn {
-  background-clip: padding-box;
+.em-filemanager .button:hover {
+  background-color: var(--colorBgContainer);
+  color: var(--colorPrimary);
 }
 
-.em-filemanager .listItem {
+.em-filemanager .foldersTitle {
+  display: flex;
+  align-items: center;
+  flex: 1;
   cursor: pointer;
-  position: relative;
-  transition: all 0.3s ease;
-  border: 1px solid #f0f2f5;
-  margin-bottom: 20px;
-  display: inline-block;
-  border-radius: 6px;
-  min-height: 100px;
-  max-height: 100px;
-  max-width: inherit;
-  overflow: hidden;
-  background: #f0f2f5;
 }
-.em-filemanager .listItem .overlayImage {
+
+.em-filemanager .folderActions {
   position: absolute;
-  bottom: 10px;
-  right: 10px;
-  width: 110px;
-  height: 40px;
-  background-size: cover;
-  opacity: 0;
-  transition: opacity 0.5s ease;
-}
-.em-filemanager .listItem img {
-  display: block;
-  border-radius: 6px;
-  height: auto;
-  object-fit: contain;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-.em-filemanager .listItem.loaded {
-  max-height: 1000px;
-  border: 1px solid #d9d9d9;
+  top: 4px; /* Выравниваем по заголовку Folders */
+  right: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 10;
 }
-.em-filemanager .listItem.loaded img {
-  opacity: 1;
-  height: 100%;
-  width: 100%;
-  margin: auto;
+.em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only {
+  padding: calc(var(--paddingXXS) * 1px) calc(var(--paddingSM) * 1px);
+  cursor: pointer;
+  color: var(--colorTextSecondary);
+  display: flex;
+  gap: calc(var(--marginXS) * 1px);
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--borderRadiusSM) * 1px);
+  transition: all var(--motionDurationFast);
+  box-shadow: none;
+  border: none;
+  width: 32px;
+  height: 32px;
 }
-.em-filemanager .listItem.loaded .loadedImage {
-  opacity: 0.5;
+.em-filemanager .folderActions .button.ant-btn.ant-btn-icon-only:hover {
+  background-color: var(--colorBgLayout);
+  color: inherit;
 }
-.em-filemanager .listItem:hover {
-  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+
+.em-filemanager .customExpandIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  cursor: pointer;
+  color: #666;
+  font-size: 10px;
+  transition: transform 0.2s ease;
 }
-.em-filemanager .listItem:hover p.creatorInfo {
-  opacity: 1;
+
+.em-filemanager .customExpandIcon:hover {
+  color: var(--colorPrimary);
 }
-.em-filemanager .listItem:hover .overlayImage {
-  opacity: 1;
+
+.em-filemanager .fileCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 100%;
+  padding: 0 6px;
+  margin-left: 8px;
+  color: #8D8D8D;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  cursor: default;
+  flex-shrink: 0; /* Запрещаем сжатие счетчика */
+  margin-right: 10px;
 }
-.em-filemanager .listItem p.creatorInfo {
-  position: absolute;
-  border-radius: 0 0 6px 0;
-  bottom: 0;
-  right: 0;
-  margin: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  padding: 5px;
-  font-size: 10px;
-  opacity: 0;
-  line-height: 1.2;
+
+/* :global(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected):hover {
+  color: red !important;
+} */
+/* Стили для выделения текста в выбранной папке */
+
+/* Стили для иконки в выбранной папке */
+/* .folderMenu :global(.ant-tree-treenode-selected .folderIcon),
+.folderMenu :global(.ant-tree-node-selected .folderIcon) {
+  color: red !important;
+} */
+/* CSS переменные для упрощения расчетов */
+.em-filemanager .uploadButton {
+  width: 100%;
+  justify-content: flex-start;
 }
-.em-filemanager .listItem p.creatorInfo:hover a {
-  color: #fff;
-  text-decoration: underline;
+.em-filemanager .uploadButton button:hover {
+  background-color: var(--colorPrimaryHover) !important;
 }
-.em-filemanager .listItem p.creatorInfo a {
-  color: #fff;
-  text-decoration: none;
+
+.em-filemanager .folderMenu {
+  padding-left: 0;
+  padding-right: 0; /* Место для кнопки справа */
 }
 
-.em-filemanager .stockColorFilter {
+/* Стили для линий дерева */
+
+/* Улучшение отображения folder-item-container */
+.em-filemanager .folderMenu .folderItemContainer {
+  width: 100%;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 0;
+  min-width: 0; /* Позволяет flex-элементам сжиматься */
 }
-.em-filemanager .stockColorFilter label,
-.em-filemanager .stockColorFilter [class^=ant-radio] {
-  border-radius: 6px !important;
-  width: 24px;
-  height: 24px;
-  margin: 4px 4px;
-  padding: 0;
-  font-size: 0;
-  border-width: 1px;
+
+/* Стили для корневого элемента Folders */
+
+/* Стили для ellipsis - удаляем max-width для гибкости */
+
+/* Стили для пустого состояния */
+.em-filemanager .folderMenu .emptyFolderContainer {
+  padding: 20px;
+  text-align: center;
 }
-.em-filemanager .stockColorFilter label::before,
-.em-filemanager .stockColorFilter [class^=ant-radio]::before {
-  display: none;
+
+/* Убираем отступы у корневого узла */
+
+.em-filemanager .folderIcon {
+  margin-right: 8px;
+  font-size: 18px;
+  flex-shrink: 0; /* Запрещаем сжатие иконки */
 }
-.em-filemanager .stockColorFilter label.allColors,
-.em-filemanager .stockColorFilter [class^=ant-radio].allColors {
-  background-image: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
+
+.em-filemanager .folderLabelItem {
+  font-size: 14px;
+  white-space: nowrap; /* Запрещаем перенос строк */
+  overflow: hidden; /* Скрываем переполнение */
+  text-overflow: ellipsis; /* Показываем троеточие */
+  flex: 1; /* Занимает доступное место */
+  min-width: 0; /* Позволяет сжиматься */
+  -webkit-user-select: none;
+          user-select: none;
 }
-.em-filemanager .stockColorFilter label.blackColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].blackColor {
-  background: #222222;
+
+.em-filemanager .foldersTitleItem {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  cursor: pointer;
+  min-width: 0; /* Позволяет сжиматься */
+  overflow: hidden; /* Скрываем переполнение */
 }
-.em-filemanager .stockColorFilter label.bwColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].bwColor {
-  background-image: linear-gradient(135deg, #222222 50%, white 50%);
+
+/* .foldersTitleItem .folderLabelItem {
+  font-weight: 500;
+  color: #262626;
+} */
+/* Класс для заголовка папок */
+.em-filemanager .folderLabel {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
-.em-filemanager .stockColorFilter label.whiteColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].whiteColor {
-  background: #ffffff;
+
+.em-filemanager .foldersContainer {
+  position: relative;
+  width: 100%;
 }
-.em-filemanager .stockColorFilter label.orangeColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].orangeColor {
-  background: #fa8c16;
+
+/* Дополнительные стили для улучшения визуала */
+/* .folderMenu :global(.ant-tree-treenode:hover .folder-label span) {
+  color: #1890ff;
+} */
+/* Стили для дивайдера между папками */
+.em-filemanager .uploadButton .ant-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
 }
-.em-filemanager .stockColorFilter label.redColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].redColor {
-  background: #f5222d;
+
+/* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
+  color: #1890ff !important;
+} */
+.em-filemanager .buttonWrapper {
+  margin-bottom: 24px;
+  display: flex;
+  gap: 4px;
 }
-.em-filemanager .stockColorFilter label.purpleColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].purpleColor {
-  background: #722ed1;
+.em-filemanager .buttonWrapper > :first-child {
+  flex: 1;
+  height: 40px;
+  padding-left: 10px;
 }
-.em-filemanager .stockColorFilter label.magentaColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].magentaColor {
-  background: #eb2f96;
+.em-filemanager .buttonWrapper > :last-child {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
 }
-.em-filemanager .stockColorFilter label.greenColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].greenColor {
-  background: #52c41a;
+
+.em-filemanager .uploadButtonIcon {
+  font-size: 20px;
 }
-.em-filemanager .stockColorFilter label.tealColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].tealColor {
-  background: #43c3c3;
+
+.em-filemanager .uploadButtonTitle {
+  line-height: 1em;
 }
-.em-filemanager .stockColorFilter label.blueColor,
-.em-filemanager .stockColorFilter [class^=ant-radio].blueColor {
-  background: #1677ff;
+
+.em-filemanager .emptyFolderContainer {
+  -webkit-user-select: none;
+          user-select: none;
+  cursor: default;
+  color: var(--colorTextTertiary);
 }
 
-.em-filemanager .resultsContainer {
-  width: 640px;
-  max-width: 100%;
-  overflow: auto;
-  box-sizing: border-box;
-  padding: 60px 16px;
-  border-radius: 12px;
-  background-color: var(--colorBgContainer);
+.em-filemanager .folderItemContainer {
+  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-direction: column;
+  justify-content: space-between;
+  padding: 2px 0;
+  min-width: 0; /* Позволяет flex-элементам сжиматься */
+}
+@charset "UTF-8";
+.em-filemanager .uploadProgress {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 4005;
+  max-width: 400px;
+  min-width: 320px;
 }
 
-.em-filemanager .playButton {
-  color: var(--colorPrimary);
-  margin-bottom: 16px;
+.em-filemanager .uploadProgress__card {
+  background: var(--colorBgContainer);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.em-filemanager .title {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-  margin-bottom: 4px;
+.em-filemanager .uploadProgress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--colorBorderSecondary);
 }
 
-.em-filemanager .subtitle {
+.em-filemanager .uploadProgress__header-title {
   font-size: 14px;
-  color: var(--colorSecondary);
-  line-height: 1.2;
+  color: var(--colorText);
 }
 
-.em-filemanager .dark .stockTab .listItem {
-  border: 1px solid #2b2b2b;
-  background: #2b2b2b;
+.em-filemanager .uploadProgress__header-buttons {
+  display: flex;
+  gap: 4px;
 }
-.em-filemanager .slideshowContainer {
-  position: relative;
-  margin: auto;
-  overflow: hidden;
-  border-radius: 6px;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+
+.em-filemanager .uploadProgress__header-button {
+  padding: 0;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: rgba(0, 0, 0, 0.45);
 }
 
-.em-filemanager .slideshowImage {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
-  opacity: 0;
-  object-fit: contain;
+.em-filemanager .uploadProgress__header-button:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.65);
 }
-.em-filemanager .limits-couter-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+
+.em-filemanager .uploadProgress__close-icon {
+  color: var(--colorTextTertiary) !important;
 }
-.em-filemanager .limits-couter-wrapper .limit-counter {
-  margin: 15px 16px 15px 0;
-  padding: 0 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  pointer-events: none;
-  height: 34px;
+
+.uploadProgress__body {
+  padding: 12px;
   display: flex;
-  align-items: center;
+  flex-direction: column;
 }
-.em-filemanager .imageAi {
-  height: calc(100% - 142px);
-  padding: calc(var(--marginLG) * 1px);
-  overflow: hidden;
+.uploadProgress__body .ant-list-item-meta {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
 }
-.em-filemanager .imageAi .imageAiExample {
-  padding-bottom: calc(var(--marginLG) * 1px);
+.uploadProgress__body .ant-list-item-meta-content {
+  width: auto;
+  min-width: 0;
 }
-.em-filemanager .imageAi .imageAiExample span {
-  color: var(--colorTextSecondary);
+.uploadProgress__body .ant-list-item-meta-title {
+  margin: 0;
 }
-
-.em-filemanager .slideshowImage {
-  width: auto;
-  height: auto;
-  border-radius: 6px;
+.uploadProgress__body .ant-list-item-action {
+  margin-inline-start: 16px;
+  flex-shrink: 0;
 }
 
-.em-filemanager .imageItem {
+.em-filemanager .uploadProgress__common-error {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  text-align: center;
-  min-height: 100px;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  margin-top: 12px;
+  background: var(--colorErrorBg, #fff2f0);
   border-radius: 6px;
+  border: 1px solid var(--colorErrorBorder, #ffccc7);
 }
-.em-filemanager .imageItem .buttons {
+
+.em-filemanager .uploadProgress__common-error-row {
   display: flex;
-  justify-content: space-between;
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
+  align-items: flex-start;
+  gap: 8px;
 }
 
-.em-filemanager .textAreaInputHybrid {
-  padding: 0 0 0 1px;
-  border: none;
-  outline: none;
-  min-height: 0;
+.em-filemanager .uploadProgress__common-error-hint {
+  font-size: 12px !important;
+  margin-top: 4px;
+  margin-left: 28px; /* icon width + gap */
 }
 
-.em-filemanager .textAreaInputHybrid textarea {
-  padding: 3px 11px;
-  line-height: 26px;
-  height: 32px;
-  min-height: 32px;
+.em-filemanager .uploadProgress__list-wrapper {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.em-filemanager .loading {
+.em-filemanager .uploadProgress__status-icon {
   display: flex;
-  justify-content: center;
   align-items: center;
-  min-height: 150px;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
 }
 
-.em-filemanager .spin {
+.em-filemanager .uploadProgress__status-icon-icon {
+  font-size: 20px;
+  color: #52c41a;
+}
+
+.em-filemanager .uploadProgress__file-item {
+  padding: 8px 0 !important;
+  border-bottom: 1px solid var(--colorBorderSecondary);
+}
+
+.em-filemanager .uploadProgress__file-item--error {
+  padding: 10px 0 !important;
+}
+
+.uploadProgress__body--error .uploadProgress__file-item {
+  display: grid !important;
+}
+
+/* Ошибка загрузки: стиль как у уведомления — читаемый список */
+.em-filemanager .uploadProgress__error-item {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 150px;
+  gap: 4px;
+  margin-top: 4px;
 }
 
-.em-filemanager .status {
-  margin: calc(var(--margin) * 1px) 0 0 0;
+.em-filemanager .uploadProgress__error-message {
+  font-size: 12px !important;
+  line-height: 1.3;
 }
 
-.em-filemanager .carousel {
-  border-radius: 6px;
-  overflow: hidden;
+.em-filemanager .uploadProgress__error-hint {
+  font-size: 11px !important;
+  line-height: 1.3;
+  color: var(--colorTextSecondary) !important;
 }
 
-.em-filemanager .carouselImage {
-  border-radius: calc(var(--borderRadiusLG) * 1px);
-  overflow: hidden;
-  transition: width 1s;
-  transition: height 1s;
-  max-height: 100%;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  object-fit: contain;
+.em-filemanager .uploadProgress__file-item:last-child {
+  border-bottom: none;
 }
 
-.em-filemanager .small {
-  width: 302px;
-  height: 202px;
+.em-filemanager .uploadProgress__file-avatar {
+  background-color: transparent !important;
 }
 
-.em-filemanager .large {
-  width: 524px;
-  height: 350px;
+.em-filemanager .uploadProgress__file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.em-filemanager .arrow {
-  z-index: 3000;
-  display: block;
-  position: absolute;
-  top: 50%;
-  background-color: transparent;
-  opacity: 0.8;
-  transform: translateY(-50%);
+.em-filemanager .uploadProgress__file-name {
+  font-size: 13px;
+  line-height: 1.2;
+  max-width: 100%;
 }
 
-.em-filemanager .arrowNext {
-  right: 0;
-  transform: translateY(-50%) translateX(-100%);
+.em-filemanager .uploadProgress__file-size {
+  font-size: 12px;
 }
 
-.em-filemanager .arrowPrev {
-  left: 0;
+.em-filemanager .uploadProgress__progress-bar {
+  margin-top: 4px;
 }
 
-.em-filemanager .arrowBtn {
-  border-radius: 100px;
+/* Минимизированное состояние */
+.em-filemanager .uploadProgress__minimized {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 4005;
 }
 
-.em-filemanager .arrowBtnNext {
-  right: 10px;
+.em-filemanager .uploadProgress__minimized-button {
+  font-size: 12px;
+  height: 28px;
+  padding: 0 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.em-filemanager .arrowBtnPrev {
-  left: 10px;
+/* Скроллбар для списка файлов */
+.em-filemanager .uploadProgress__file-list::-webkit-scrollbar {
+  width: 6px;
 }
 
-.em-filemanager .row {
-  padding: 0 2px;
+.em-filemanager .uploadProgress__file-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
 }
 
-.em-filemanager .inputAffixWrapper {
-  padding-left: 0;
+.em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
 }
 
-.em-filemanager .textarea {
-  font-size: 16px;
+.em-filemanager .uploadProgress__file-list::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
-.em-filemanager .inputIcon {
-  font-size: 16px;
-  top: 0;
-  right: 0;
+/* Анимации */
+.em-filemanager .uploadProgress {
+  animation: slideInFromLeft 0.3s ease-out;
 }
 
-.em-filemanager .imageAiDark .carouselImage {
-  border: 1px solid #434343;
-  background: #2b2b2b;
+.em-filemanager .uploadProgress__minimized {
+  animation: slideInFromLeft 0.3s ease-out;
 }
 
-.em-filemanager .imageAiDark .antBtn {
-  background: #1f1f1f;
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
-
-.em-filemanager .imageAiDark .antBtn:hover {
-  color: var(--colorPrimary);
+/* Адаптивность */
+@media (max-width: 768px) {
+  .em-filemanager .uploadProgress {
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    max-width: calc(100vw - 20px);
+    min-width: auto;
+  }
+  .em-filemanager .uploadProgress__minimized {
+    top: 10px;
+    left: 10px;
+  }
 }
-.em-filemanager .iconsTab {
-  display: flex;
-  flex-direction: column;
+.em-filemanager .gifTab {
   height: 100%;
   min-height: 0;
 }
-.em-filemanager .iconsTab.hasSearch {
-  padding-top: 0;
-}
 
-.em-filemanager .iconsSearchWrapper {
+.em-filemanager .scrollableDiv {
   width: 100%;
   height: 100%;
-  min-height: 0;
-  overflow: hidden;
+  overflow: auto;
+  overflow-x: hidden;
   box-sizing: border-box;
   line-height: 0;
   display: flex;
@@ -1899,221 +1695,376 @@
   padding: 24px;
 }
 
-.em-filemanager .iconsSearchForm {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  margin-bottom: 0;
+.em-filemanager .gifSearchInput {
+  padding: 0;
+  width: 640px;
+  max-width: 100%;
+  transition: width 1s ease;
+  margin: auto auto 24px;
 }
 
-.em-filemanager .iconsSearchFormCenteredContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 24px 24px 0;
+.em-filemanager .search {
+  max-width: 100%;
 }
 
-.em-filemanager .iconsSearchFormCentered {
-  display: flex;
-  flex-direction: row;
+.em-filemanager .searchResults {
   width: 100%;
-  align-items: flex-start;
-  justify-content: center;
-}
-.em-filemanager .iconsSearchFormCentered .iconsSearchFormInput {
-  width: 640px;
-  max-width: 100%;
-  padding: 0;
-  margin: auto auto 12px;
-  transition: all 300ms ease;
 }
-.em-filemanager .iconsSearchFormCentered .iconsSearchFormInputInput {
-  max-width: 100%;
+.em-filemanager .searchResults .gifSearchInput {
   width: 100%;
 }
 
-.em-filemanager .iconsSearchFormInput {
-  width: 240px;
-  padding: 0;
-  margin-bottom: 0;
-  transition: all 300ms ease;
+.em-filemanager .virtualCanvas {
+  position: relative;
+  width: 100%;
 }
 
-.em-filemanager .iconsSearchResults {
-  width: 100%;
+.em-filemanager .myMasonryGrid {
   display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.em-filemanager .iconsSearchResults .iconsSearchFormInput {
-  width: 240px;
-  flex: 0 0 auto;
-  margin-bottom: 0;
+  width: auto;
+  text-align: center;
 }
 
-.em-filemanager .iconsControlsControls {
-  display: flex;
-  align-items: center;
-  gap: 16px;
+.em-filemanager .myMasonryGridColumn {
+  background-clip: padding-box;
 }
 
-.em-filemanager .iconsSearchFormInputInput {
+.em-filemanager .listItem {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s ease;
+  border: 1px solid #f0f2f5;
+  margin-bottom: 20px;
+  display: inline-block;
+  border-radius: 6px;
+  min-height: 100px;
+  max-height: 100px;
+  max-width: inherit;
+  overflow: hidden;
+  background: #f0f2f5;
+}
+.em-filemanager .listItem .overlayImage {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  width: 110px;
+  height: 40px;
+  background-size: cover;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+.em-filemanager .listItem img {
+  display: block;
+  border-radius: 6px;
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+.em-filemanager .listItem.loaded {
+  max-height: 1000px;
+  border: 1px solid #d9d9d9;
+}
+.em-filemanager .listItem.loaded img {
+  opacity: 1;
+  height: 100%;
   width: 100%;
+  margin: auto;
+}
+.em-filemanager .listItem.loaded .loadedImage {
+  opacity: 0.5;
+}
+.em-filemanager .listItem:hover {
+  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+}
+.em-filemanager .listItem:hover p.creatorInfo {
+  opacity: 1;
+}
+.em-filemanager .listItem:hover .overlayImage {
+  opacity: 1;
+}
+.em-filemanager .listItem p.creatorInfo {
+  position: absolute;
+  border-radius: 0 0 6px 0;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  padding: 5px;
+  font-size: 10px;
+  opacity: 0;
+  line-height: 1.2;
+}
+.em-filemanager .listItem p.creatorInfo:hover a {
+  color: #fff;
+  text-decoration: underline;
+}
+.em-filemanager .listItem p.creatorInfo a {
+  color: #fff;
+  text-decoration: none;
 }
 
-.em-filemanager .iconsControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 24px 6px 24px 24px;
-  border-bottom: 1px solid var(--colorBorder);
+.em-filemanager .searchOutputWrapper {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.em-filemanager .iconsControlsFamilySlug {
-  opacity: 0.7;
+.em-filemanager .divider {
+  margin-bottom: calc(var(--marginLG) * 1px);
+  border-color: var(--colorBorder);
 }
 
-.em-filemanager .iconsControlElement {
+.em-filemanager .myMasonryGrid {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  width: auto;
+  text-align: center;
+  gap: calc(var(--marginLG) * 1px);
 }
-.em-filemanager .iconsControlElement > span {
-  color: var(--colorTextTertiary);
+
+.em-filemanager .myMasonryGridColumn {
+  background-clip: padding-box;
 }
 
-.em-filemanager .iconsControlsStrokeWidth {
+.em-filemanager .resultsContainer {
+  width: 640px;
+  max-width: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: 60px 16px;
+  border-radius: 12px;
+  background-color: var(--colorBgContainer);
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-.em-filemanager .iconsControlsStrokeWidth > span {
-  color: var(--colorTextTertiary);
+  justify-content: center;
+  flex-direction: column;
 }
-.em-filemanager .iconsControlsStrokeWidth .ant-input-number {
-  width: 80px;
+
+.em-filemanager .playButton {
+  color: var(--colorPrimary);
+  margin-bottom: 16px;
 }
 
-.em-filemanager .iconsControlsCompact {
-  position: relative;
+.em-filemanager .title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 4px;
 }
 
-.em-filemanager .iconsControlsInputNumber {
-  width: 110px;
+.em-filemanager .subtitle {
+  font-size: 14px;
+  color: var(--colorSecondary);
+  line-height: 1.2;
+}
+.em-filemanager .stockTab {
+  height: 100%;
+  min-height: 0;
 }
 
-.em-filemanager .iconsControlsDropdownBtn {
+.em-filemanager .stockSearchInput {
   padding: 0;
-  height: 32px;
-  min-width: 36px;
-  width: 36px;
-  border-top-right-radius: 6px !important;
-  border-bottom-right-radius: 6px !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--colorTextTertiary);
-}
-.em-filemanager .iconsControlsDropdownBtn:hover {
-  color: var(--colorTextSecondary);
+  width: 640px;
+  transition: all 200ms ease;
+  margin: auto auto 24px;
 }
 
-.em-filemanager .iconsControlsCompact .iconsControlsDropdownBtn {
-  border-top-right-radius: 6px !important;
-  border-bottom-right-radius: 6px !important;
+.em-filemanager .searchOutputWrapper {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.em-filemanager .sliderDropdown {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: calc(100% + 6px);
-  width: 240px;
-  background: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-  padding: 10px 12px;
-  z-index: 1000;
+.em-filemanager .divider {
+  margin-bottom: calc(var(--marginLG) * 1px);
+  border-color: var(--colorBorder);
 }
 
-.em-filemanager .iconsControlsHeader {
-  display: flex;
-  align-items: center;
+.em-filemanager .search {
+  max-width: 100%;
 }
 
-.em-filemanager .iconsSearchFormSelect {
-  width: 160px !important;
+.em-filemanager .searchResults {
+  width: 100%;
+}
+.em-filemanager .searchResults .stockSearchInput {
+  width: 100%;
 }
-
-.em-filemanager .iconsSearchFormStyleItem {
-  margin-bottom: 0;
-  animation: fadeInSlide 300ms ease forwards;
+.em-filemanager .searchResults label {
+  height: calc(var(--formControlHeight) * 1px);
+  line-height: calc(var(--formControlHeight) * 1px);
 }
 
-@keyframes fadeInSlide {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.em-filemanager .iconsSearchDivider {
-  margin-top: 24px;
-  margin-bottom: 0;
-  border-color: var(--colorBorder);
+.em-filemanager .virtualCanvas {
+  position: relative;
   width: 100%;
 }
 
-.em-filemanager .iconsSearchFormInputIcon {
-  font-size: 16px;
-  cursor: pointer;
+.em-filemanager .blocksSearchDividerWrapper {
+  margin: 0;
 }
 
-.em-filemanager .iconsGrid {
+.em-filemanager .scrollableDiv {
   width: 100%;
-  flex: 1 1 auto;
-  min-height: 0;
+  height: 100%;
   overflow: auto;
   overflow-x: hidden;
   box-sizing: border-box;
+  line-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 24px;
 }
 
-.em-filemanager .iconsBottomBar {
-  position: sticky;
-  bottom: 0;
-  background: var(--colorBgLayout);
-  z-index: 5;
-  width: 100%;
+.em-filemanager .myMasonryGrid {
+  display: flex;
+  width: auto;
+  text-align: center;
+  gap: calc(var(--marginLG) * 1px);
 }
 
-.em-filemanager .iconsBottomBarContent {
-  display: flex;
-  justify-content: right;
-  padding: 17px 24px;
-  align-items: center;
+.em-filemanager .myMasonryGridColumn {
+  background-clip: padding-box;
 }
 
-.em-filemanager .iconsGridEmpty {
-  margin: 40px 0px;
+.em-filemanager .listItem {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.3s ease;
+  border: 1px solid #f0f2f5;
+  margin-bottom: 20px;
+  display: inline-block;
+  border-radius: 6px;
+  min-height: 100px;
+  max-height: 100px;
+  max-width: inherit;
+  overflow: hidden;
+  background: #f0f2f5;
+}
+.em-filemanager .listItem .overlayImage {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  width: 110px;
+  height: 40px;
+  background-size: cover;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+.em-filemanager .listItem img {
+  display: block;
+  border-radius: 6px;
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+.em-filemanager .listItem.loaded {
+  max-height: 1000px;
+  border: 1px solid #d9d9d9;
+}
+.em-filemanager .listItem.loaded img {
+  opacity: 1;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+}
+.em-filemanager .listItem.loaded .loadedImage {
+  opacity: 0.5;
+}
+.em-filemanager .listItem:hover {
+  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+}
+.em-filemanager .listItem:hover p.creatorInfo {
+  opacity: 1;
+}
+.em-filemanager .listItem:hover .overlayImage {
+  opacity: 1;
+}
+.em-filemanager .listItem p.creatorInfo {
+  position: absolute;
+  border-radius: 0 0 6px 0;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  padding: 5px;
+  font-size: 10px;
+  opacity: 0;
+  line-height: 1.2;
+}
+.em-filemanager .listItem p.creatorInfo:hover a {
+  color: #fff;
+  text-decoration: underline;
+}
+.em-filemanager .listItem p.creatorInfo a {
+  color: #fff;
+  text-decoration: none;
 }
 
-.em-filemanager .iconsGridEmptyState {
+.em-filemanager .stockColorFilter {
   display: flex;
-  justify-content: center;
-  align-items: center;
+}
+.em-filemanager .stockColorFilter label,
+.em-filemanager .stockColorFilter [class^=ant-radio] {
+  border-radius: 6px !important;
+  width: 24px;
+  height: 24px;
+  margin: 4px 4px;
   padding: 0;
+  font-size: 0;
+  border-width: 1px;
+}
+.em-filemanager .stockColorFilter label::before,
+.em-filemanager .stockColorFilter [class^=ant-radio]::before {
+  display: none;
+}
+.em-filemanager .stockColorFilter label.allColors,
+.em-filemanager .stockColorFilter [class^=ant-radio].allColors {
+  background-image: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
+}
+.em-filemanager .stockColorFilter label.blackColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].blackColor {
+  background: #222222;
+}
+.em-filemanager .stockColorFilter label.bwColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].bwColor {
+  background-image: linear-gradient(135deg, #222222 50%, white 50%);
+}
+.em-filemanager .stockColorFilter label.whiteColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].whiteColor {
+  background: #ffffff;
+}
+.em-filemanager .stockColorFilter label.orangeColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].orangeColor {
+  background: #fa8c16;
+}
+.em-filemanager .stockColorFilter label.redColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].redColor {
+  background: #f5222d;
+}
+.em-filemanager .stockColorFilter label.purpleColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].purpleColor {
+  background: #722ed1;
+}
+.em-filemanager .stockColorFilter label.magentaColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].magentaColor {
+  background: #eb2f96;
+}
+.em-filemanager .stockColorFilter label.greenColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].greenColor {
+  background: #52c41a;
+}
+.em-filemanager .stockColorFilter label.tealColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].tealColor {
+  background: #43c3c3;
+}
+.em-filemanager .stockColorFilter label.blueColor,
+.em-filemanager .stockColorFilter [class^=ant-radio].blueColor {
+  background: #1677ff;
 }
 
 .em-filemanager .resultsContainer {
@@ -2128,177 +2079,226 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  text-align: center;
 }
 
 .em-filemanager .playButton {
   color: var(--colorPrimary);
   margin-bottom: 16px;
 }
-
-.em-filemanager .title {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.2;
-  margin-bottom: 4px;
+
+.em-filemanager .title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+
+.em-filemanager .subtitle {
+  font-size: 14px;
+  color: var(--colorSecondary);
+  line-height: 1.2;
+}
+
+.em-filemanager .dark .stockTab .listItem {
+  border: 1px solid #2b2b2b;
+  background: #2b2b2b;
+}
+.em-filemanager .slideshowContainer {
+  position: relative;
+  margin: auto;
+  overflow: hidden;
+  border-radius: 6px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.em-filemanager .slideshowImage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  opacity: 0;
+  object-fit: contain;
+}
+.em-filemanager .limits-couter-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.em-filemanager .limits-couter-wrapper .limit-counter {
+  margin: 15px 16px 15px 0;
+  padding: 0 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  pointer-events: none;
+  height: 34px;
+  display: flex;
+  align-items: center;
+}
+.em-filemanager .imageAi {
+  height: calc(100% - 142px);
+  padding: calc(var(--marginLG) * 1px);
+  overflow: hidden;
+}
+.em-filemanager .imageAi .imageAiExample {
+  padding-bottom: calc(var(--marginLG) * 1px);
 }
-
-.em-filemanager .subtitle {
-  font-size: 14px;
-  color: var(--colorSecondary);
-  line-height: 1.2;
+.em-filemanager .imageAi .imageAiExample span {
+  color: var(--colorTextSecondary);
 }
 
-.em-filemanager .iconsGridInfiniteScroll {
-  overflow: hidden !important;
+.em-filemanager .slideshowImage {
+  width: auto;
+  height: auto;
+  border-radius: 6px;
 }
 
-.em-filemanager .iconsGridLoadingMore {
+.em-filemanager .imageItem {
   display: flex;
   justify-content: center;
-  padding: 16px 0;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  min-height: 100px;
+  border-radius: 6px;
 }
-
-.em-filemanager .iconsGridGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--icons-grid-min-col, 148px), 1fr));
-  gap: 16px;
+.em-filemanager .imageItem .buttons {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.em-filemanager .iconsGridVirtualCanvas {
-  position: relative;
-  width: 100%;
+.em-filemanager .textAreaInputHybrid {
+  padding: 0 0 0 1px;
+  border: none;
+  outline: none;
+  min-height: 0;
 }
 
-.em-filemanager .iconsGridItem {
-  position: relative;
-  border-radius: 8px;
-  padding: 12px;
-  background: #fff;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 1px #f0f0f0;
+.em-filemanager .textAreaInputHybrid textarea {
+  padding: 3px 11px;
+  line-height: 26px;
+  height: 32px;
+  min-height: 32px;
 }
 
-.em-filemanager .iconsGridItemThumbnail {
+.em-filemanager .loading {
   display: flex;
-  align-items: center;
   justify-content: center;
-  flex: 1 1 auto;
-  min-height: 0;
+  align-items: center;
+  min-height: 150px;
 }
 
-.em-filemanager .iconsGridItemSvg {
-  width: 100%;
-  height: 100%;
+.em-filemanager .spin {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
+  height: 150px;
 }
 
-.em-filemanager .iconsGridItemImg {
-  max-width: 100%;
-  object-fit: contain;
+.em-filemanager .status {
+  margin: calc(var(--margin) * 1px) 0 0 0;
 }
 
-.em-filemanager .iconsGridItemName {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 1.2;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.em-filemanager .carousel {
+  border-radius: 6px;
   overflow: hidden;
-  flex: 0 0 auto;
 }
 
-.em-filemanager .iconsGridItemSelected::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border: 2px solid #1890ff;
-  border-radius: inherit;
-  pointer-events: none;
+.em-filemanager .carouselImage {
+  border-radius: calc(var(--borderRadiusLG) * 1px);
+  overflow: hidden;
+  transition: width 1s;
+  transition: height 1s;
+  max-height: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  object-fit: contain;
 }
 
-.em-filemanager .iconsGridItemInsertButton {
+.em-filemanager .small {
+  width: 302px;
+  height: 202px;
+}
+
+.em-filemanager .large {
+  width: 524px;
+  height: 350px;
+}
+
+.em-filemanager .arrow {
+  z-index: 3000;
+  display: block;
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: 50%;
+  background-color: transparent;
+  opacity: 0.8;
+  transform: translateY(-50%);
 }
 
-.em-filemanager .iconsGridLoading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 50vh;
+.em-filemanager .arrowNext {
+  right: 0;
+  transform: translateY(-50%) translateX(-100%);
 }
 
-.em-filemanager .iconsControlsBackButton {
-  margin-right: 20px;
+.em-filemanager .arrowPrev {
+  left: 0;
 }
 
-.em-filemanager .iconsGridCheckbox {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 2;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease-in-out;
+.em-filemanager .arrowBtn {
+  border-radius: 100px;
 }
 
-.em-filemanager .iconsGridItem:hover .iconsGridCheckbox {
-  opacity: 1;
-  pointer-events: auto;
+.em-filemanager .arrowBtnNext {
+  right: 10px;
 }
 
-.em-filemanager .iconsGridShowCheckboxes .iconsGridCheckbox {
-  opacity: 1;
-  pointer-events: auto;
+.em-filemanager .arrowBtnPrev {
+  left: 10px;
 }
 
-.em-filemanager .iconsHeaderContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 24px 24px;
-  margin: 0;
-  border-bottom: 1px solid var(--colorBorder);
+.em-filemanager .row {
+  padding: 0 2px;
 }
 
-.em-filemanager .iconsHeaderContainerLeft {
-  display: flex;
-  gap: 10px;
-  align-items: center;
+.em-filemanager .inputAffixWrapper {
+  padding-left: 0;
 }
 
-.em-filemanager .iconsHeaderDivider {
-  margin-top: 24px;
-  margin-bottom: 0;
-  border-color: var(--colorBorder);
-  width: 100%;
+.em-filemanager .textarea {
+  font-size: 16px;
 }
 
-.em-filemanager .copyToFolderModalBody {
-  position: relative;
+.em-filemanager .inputIcon {
+  font-size: 16px;
+  top: 0;
+  right: 0;
 }
 
-.em-filemanager .copyToFolderModalLoadingOverlay {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.6);
-  pointer-events: all;
+.em-filemanager .imageAiDark .carouselImage {
+  border: 1px solid #434343;
+  background: #2b2b2b;
+}
+
+.em-filemanager .imageAiDark .antBtn {
+  background: #1f1f1f;
+}
+
+.em-filemanager .imageAiDark .antBtn:hover {
+  color: var(--colorPrimary);
 }
 @charset "UTF-8";
 /* FileManagerApp стили */
@@ -2541,62 +2541,6 @@
   border-radius: 0 calc(var(--borderRadiusLG) * 1px) calc(var(--borderRadiusLG) * 1px) 0;
   padding-right: 8px;
 }
-.em-filemanager .file-manager__layout .resize-guide {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--colorPrimary);
-  z-index: 1000;
-  pointer-events: none;
-}
-.em-filemanager .file-manager__layout .sidebar-resizer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 8px;
-  height: 100%;
-  cursor: col-resize;
-  background-color: transparent;
-  transition: background-color 0.2s;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.em-filemanager .file-manager__layout .sidebar-resizer:hover,
-.em-filemanager .file-manager__layout .sidebar-resizer.resizing {
-  background-color: var(--colorBorder);
-}
-.em-filemanager .file-manager__layout .sidebar-resizer-indicator {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 1px;
-  height: 100%;
-  background-color: transparent;
-}
-.em-filemanager .file-manager__layout .sidebar-resizer-dots {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.em-filemanager .file-manager__layout .sidebar-resizer-dots span {
-  display: block;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background-color: #ccc;
-}
-.em-filemanager .file-manager__layout .sidebar-resizer-text {
-  transform: rotate(90deg);
-  white-space: nowrap;
-  font-size: 10px;
-  letter-spacing: 1px;
-  color: #ccc;
-  margin-top: 20px;
-}
 .em-filemanager .file-manager__layout .zero-divider {
   margin: 0;
 }
@@ -3232,14 +3176,6 @@ body[data-fm-dragging=true] .ant-modal-wrap .ant-modal-content {
   margin-top: 8px;
   opacity: 0.8;
 }
-@keyframes pulse {
-  from {
-    box-shadow: 0 0 4px rgba(24, 144, 255, 0.6);
-  }
-  to {
-    box-shadow: 0 0 12px rgba(24, 144, 255, 0.8);
-  }
-}
 
 .em-filemanager .pi .tiny-scrollbar .block.inline-flex {
   display: block;