/* TGMENG public upload page: keep only user-facing upload controls. */
.upload-home .upload-folder-container,
.upload-home .toolbar-manage,
.upload-home .link-button,
.upload-home .config-button,
.upload-home .sign-out-button {
  display: none !important;
}

.upload-home .toolbar {
  position: fixed !important;
  top: 30px !important;
  right: 180px !important;
  bottom: auto !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

.upload-home .compress-button,
.upload-home .compress-button.active,
.upload-home .compress-button:hover {
  position: static !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

/* Keep the desktop overflow menu for upload history and language only. */
.el-dropdown-menu__item:has(.fa-bullhorn),
.el-dropdown-menu__item:has(.fa-book) {
  display: none !important;
}

/* Storage channel is fixed by the site owner, so public users should not choose it. */
.settings-dialog .dialog-section:has(.channel-brand-telegram) {
  display: none !important;
}

/* Stabilize upload history: avoid clip-path/backdrop-filter repaint flicker. */
.history-container {
  clip-path: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 160ms ease !important;
}

.history-container.active {
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.history-container::before {
  background: rgba(28, 28, 30, 0.9) !important;
  backdrop-filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

.history-content {
  padding: 24px clamp(18px, 4vw, 48px) !important;
  overscroll-behavior: contain !important;
}

.grid-view {
  grid-template-columns: repeat(auto-fill, minmax(176px, 220px)) !important;
  justify-content: start !important;
  align-items: start !important;
}

.grid-item {
  width: 100% !important;
  background: rgba(18, 18, 20, 0.78) !important;
  transform: none !important;
  transition: background-color 160ms ease, box-shadow 160ms ease !important;
  contain: layout paint !important;
}

.grid-item:hover {
  transform: none !important;
  background: rgba(24, 24, 27, 0.88) !important;
}

.grid-preview {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.grid-preview img,
.grid-preview video {
  display: block !important;
  background: transparent !important;
}

.grid-overlay {
  background: transparent !important;
  transition: opacity 120ms ease !important;
}

.grid-actions {
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(17, 24, 39, 0.52) !important;
  backdrop-filter: blur(10px) !important;
}

.list-item {
  transform: none !important;
  transition: background-color 160ms ease, box-shadow 160ms ease !important;
}

.list-item:hover {
  transform: none !important;
}

@media (max-width: 768px) {
  .upload-home .toolbar {
    top: 30px !important;
    right: 70px !important;
    bottom: auto !important;
  }

  .upload-home .compress-button,
  .upload-home .compress-button.active,
  .upload-home .compress-button:hover {
    width: 2rem !important;
    height: 2rem !important;
  }

  .history-header {
    padding: 16px 18px !important;
  }

  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 14px !important;
  }
}