/* Use the same neutral controls as the "Предложить игру" form. */
#mediaPanel.is-figma-proposal .figma-media-categories button {
  border: 0 !important;
  border-radius: 6px !important;
  color: #f0f0f0 !important;
  background: #202020 !important;
  box-shadow: none !important;
}

#mediaPanel.is-figma-proposal .figma-media-categories button.active {
  color: #121212 !important;
  background: #f0f0f0 !important;
  box-shadow: none !important;
}

#mediaPanel.is-figma-proposal #mediaDropzone {
  border: 0 !important;
  border-radius: 6px !important;
  background: #202020 !important;
  box-shadow: none !important;
}

#mediaPanel.is-figma-proposal #mediaDropzone:is(:hover, :focus-visible) {
  border: 0 !important;
  box-shadow: none !important;
}

#mediaPanel.is-figma-proposal #mediaSubmissionComment {
  border: 0 !important;
  border-radius: 6px !important;
  background: #202020 !important;
  box-shadow: none !important;
}

#mediaPanel.is-figma-proposal #mediaSubmissionComment:focus {
  box-shadow: inset 0 0 0 1px #e63d3d !important;
}

#libraryFiltersMenu,
#catalogSortMenu {
  border: 0 !important;
  border-radius: 6px !important;
  background: #202020 !important;
  box-shadow: none !important;
}

/* Popovers and dialogs sit flat against their overlay. */
:is(.auction-dialog, .tier-dialog, .suggestions-dialog, .media-dialog,
  .admin-portal-dialog, .modal-panel, .media-file-preview-dialog,
  .catalog-dropdown, .nav-dropdown) {
  box-shadow: none !important;
}

#mediaPanel.is-figma-proposal .media-dialog {
  box-shadow: none !important;
}

/* The sort menu reaches the toolbar's outside edge, including on narrow screens. */
#catalog .catalog-menu-wrap:has(#catalogSortMenu) {
  margin-left: auto;
}

#catalogSortMenu {
  right: -10rem !important;
  left: auto !important;
}

@media (max-width: 720px) {
  #catalogSortMenu { right: -8rem !important; }
}

/* The collapse control follows the final card inside the scrollable list. */
.media-panel.is-figma-proposal .figma-upload-media-pane .media-selected.is-expanded:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 2px !important;
}

.media-panel.is-figma-proposal .media-selected-scroll {
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.media-panel.is-figma-proposal .media-selected-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 142px;
  align-content: start;
  gap: 2px;
}

#mediaPanel #mediaSelected,
#mediaPanel #mediaSelected .media-selected-scroll {
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent !important;
  -ms-overflow-style: none !important;
}

#mediaPanel #mediaSelected::-webkit-scrollbar,
#mediaPanel #mediaSelected .media-selected-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.media-panel.is-figma-proposal .media-selected-collapse {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: calc(100% - 12px);
  height: 44px !important;
  margin: 8px 6px 6px;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #f0f0f0 !important;
  background: #202020 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

@media (max-width: 600px) {
  .media-panel.is-figma-proposal .figma-upload-media-pane .media-selected.is-expanded:not([hidden]) {
    height: min(42dvh, 360px) !important;
  }

  .media-panel.is-figma-proposal .media-selected-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 180px;
  }
}

.media-panel.is-figma-proposal .media-selected-collapse:is(:hover, :focus-visible) {
  color: #121212 !important;
  background: #f0f0f0 !important;
}

.media-panel.is-figma-proposal .media-selected-more,
.media-panel.is-figma-proposal .media-selected-more:is(:hover, :focus-visible) {
  background: #202020 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.media-panel.is-figma-proposal .media-selected-empty {
  background: #111 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Draw the remove icon from two centered strokes, independent of font metrics. */
.media-panel.is-figma-proposal .media-selected-actions button.danger {
  position: relative;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #202020 !important;
}

.media-panel.is-figma-proposal .media-selected-actions button.danger::before,
.media-panel.is-figma-proposal .media-selected-actions button.danger::after {
  content: '' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px !important;
  height: 2px !important;
  border-radius: 1px;
  background: currentColor;
}

.media-panel.is-figma-proposal .media-selected-actions button.danger::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.media-panel.is-figma-proposal .media-selected-actions button.danger::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#libraryFiltersMenu button,
#catalogSortMenu button {
  border-radius: 6px !important;
}

/* Compact, selectable media previews replace the text-only file counter. */
.media-file-preview:not(.is-admin-preview) .media-file-preview-footer {
  min-height: 96px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 8px 16px 12px !important;
  pointer-events: auto !important;
}

.media-file-preview-thumbnails {
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.media-file-preview-thumbnails::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.media-file-preview-thumb {
  position: relative;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #202020;
  opacity: .6;
  cursor: pointer;
  transition: opacity .18s ease, border-color .18s ease;
}

.media-file-preview-thumb:is(:hover, :focus-visible),
.media-file-preview-thumb.is-active {
  border-color: #f0f0f0;
  opacity: 1;
}

.media-file-preview-thumb:focus-visible {
  outline: 2px solid #ef3d3f;
  outline-offset: 2px;
}

.media-file-preview-thumb img,
.media-file-preview-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.media-file-preview-thumb-play {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, .75);
  font-size: 10px;
  pointer-events: none;
}

@media (max-width: 700px) {
  .media-file-preview:not(.is-admin-preview) .media-file-preview-nav {
    bottom: 108px;
  }

  .media-file-preview-thumb {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}