/* Mobile-focused overrides for Settings modal: center, compact, remove inner scrollbar */
@media (max-width: 700px) {
  /* Center the settings dropdown perfectly in viewport */
  .dropdown-panel,
  #settings-dropdown {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 520px !important;
    max-height: calc(100vh - 28px) !important;
    padding: 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* hide internal long-scrollbars, we will make content compact */
    -webkit-overflow-scrolling: touch !important;
    z-index: 22000 !important;
    /* Transparent green glass look */
    background: linear-gradient(180deg, rgba(4,79,63,0.55), rgba(2,44,36,0.35)) !important;
    backdrop-filter: blur(10px) saturate(1.1) !important;
    color: #fff !important;
    border: 1px solid rgba(212,175,55,0.10) !important;
  }

  /* Remove ugly native scrollbars for this panel */
  .dropdown-panel::-webkit-scrollbar,
  #settings-dropdown::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Compact the header and controls so everything fits */
  .dropdown-panel .dropdown-header,
  #settings-dropdown .dropdown-header {
    padding: 8px 10px !important;
  }
  .dropdown-panel .dropdown-content,
  #settings-dropdown .dropdown-content {
    padding: 8px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #fff !important;
  }

  /* Make each setting item more compact */
  .dropdown-panel .setting-item,
  #settings-dropdown .setting-item {
    padding: 8px !important;
    gap: 8px !important;
    font-size: 0.88rem !important;
    align-items: center !important;
    color: #fff !important;
  }

  /* Ensure upload input area is readable on glass and layout is clean */
  #settings-dropdown .bg-upload-controls,
  .dropdown-panel .bg-upload-controls {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 6px;
  }

  /* New grouped upload layout: row for URL + Apply, stacked overall */
  .bg-upload-block { gap: 12px; }
  .bg-upload-row {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
  }
  .bg-upload-row input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.06);
    box-sizing: border-box;
  }
  .bg-upload-row .setting-btn.mini.apply {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 8px;
  }
  /* Reset button full width and separated */
  .reset-full { margin-top: 6px; }

  /* Ensure all setting items have consistent gap and spacing for professional look */
  #settings-dropdown .setting-item,
  .dropdown-panel .setting-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  #settings-dropdown .setting-item > label,
  .dropdown-panel .setting-item > label {
    margin-bottom: 0;
  }

  /* Tighter Mobile Beauty controls (removed elsewhere) */
  #mobile-beauty-setting {
    display: none !important;
  }

  /* Tighter Mobile Beauty controls */
  #mobile-beauty-level {
    min-width: 80px !important;
    width: 90px !important;
    height: 30px !important;
  }
  #mobile-beauty-level-label {
    min-width: 48px !important;
    font-size: 0.82rem !important;
  }

  /* Compact toggles */
  .switch-label {
    gap: 8px !important;
    font-size: 0.88rem !important;
  }
  .switch-label .slider {
    width: 44px !important;
    height: 24px !important;
    padding: 2px !important;
  }
  .switch-label .slider::after {
    width: 16px !important;
    height: 16px !important;
    transform: translateX(0) !important;
  }
  .switch-label input[type="checkbox"]:checked + .slider::after {
    transform: translateX(20px) !important;
  }

  /* Smaller buttons inside settings (mobile) */
  .setting-btn,
  .setting-btn.mini,
  .saved-all-dl-btn {
    min-width: 88px !important;
    padding: 8px 10px !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1) !important, box-shadow 220ms ease !important;
    transform-style: preserve-3d !important;
  }

  /* Make upload/apply/reset buttons pop and read clearly on compact settings */
  #settings-dropdown .bg-upload-block .setting-btn,
  #settings-dropdown .bg-upload-row .setting-btn.mini.apply,
  #settings-dropdown .bg-upload-block .reset-full {
    background: linear-gradient(180deg, #ffd54f 0%, #ffcc00 60%) !important;
    color: #04251f !important;
    font-weight: 900 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important, 0 16px 36px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transform-origin: center !important;
  }

  /* Micro hover/press states for mobile - subtle but more tactile */
  #settings-dropdown .bg-upload-block .setting-btn:hover,
  #settings-dropdown .bg-upload-row .setting-btn.mini.apply:hover,
  #settings-dropdown .bg-upload-block .reset-full:hover {
    transform: translateY(-4px) translateZ(6px) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28) !important;
  }
  #settings-dropdown .bg-upload-block .setting-btn:active,
  #settings-dropdown .bg-upload-row .setting-btn.mini.apply:active,
  #settings-dropdown .bg-upload-block .reset-full:active {
    transform: translateY(-1px) translateZ(2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.20) !important;
  }

  /* Apply the playful pop once when the settings panel is opened for these buttons */
  #settings-dropdown .bg-upload-block .setting-btn.playful-pop,
  .dropdown-panel .bg-upload-block .setting-btn.playful-pop {
    animation: playfulPop 560ms cubic-bezier(.22,.9,.36,1) both !important;
  }

  /* Reduce text sizes and margins within the panel */
  .dropdown-panel,
  .dropdown-panel * {
    font-size: 0.92rem !important;
    color: #fff !important;
  }
  .dropdown-panel .setting-note,
  #settings-dropdown .setting-note {
    font-size: 0.78rem !important;
    margin-top: 4px !important;
    color: rgba(255,255,255,0.86) !important;
  }

  /* Ensure inputs wrap and don't force overflow */
  .dropdown-panel input[type="text"],
  .dropdown-panel .url-input-wrap,
  #settings-dropdown input[type="text"],
  #settings-dropdown .url-input-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Allow inner content to scroll subtly only if absolutely necessary (no bulky native scrollbar shown) */
  .dropdown-panel .dropdown-content-inner,
  #settings-dropdown .dropdown-content-inner {
    max-height: calc(100vh - 140px) !important;
    overflow: auto !important;
  }
  .dropdown-panel .dropdown-content-inner::-webkit-scrollbar,
  #settings-dropdown .dropdown-content-inner::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  .dropdown-panel .dropdown-content-inner::-webkit-scrollbar-thumb,
  #settings-dropdown .dropdown-content-inner::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
  }
}

/* --- New hover lift animation for search, saved & settings top buttons --- */
/* Apply a consistent subtle lift + shadow on mouse hover/focus for interactive top controls */
#search-toggle-button,
#saved-files-button,
#settings-toggle-button,
#search-back-button {
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, opacity 160ms ease;
  will-change: transform, box-shadow;
  /* Ensure default state has a subtle 3D presence */
  transform-origin: center;
}

#search-toggle-button:hover,
#saved-files-button:hover,
#settings-toggle-button:hover,
#search-back-button:hover,
#search-toggle-button:focus,
#saved-files-button:focus,
#settings-toggle-button:focus,
#search-back-button:focus {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 22px rgba(0,0,0,0.20), 0 4px 8px rgba(0,0,0,0.10);
  z-index: 12100 !important;
  opacity: 1;
}

/* Slightly stronger lift on desktop for clearer hover feedback */
@media (min-width: 800px) {
  #search-toggle-button:hover,
  #saved-files-button:hover,
  #settings-toggle-button:hover,
  #search-back-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 34px rgba(0,0,0,0.26), 0 6px 12px rgba(0,0,0,0.12);
  }
}

/* Ensure touch devices do not get hover styles lingering after tap */
@media (hover: none) {
  #search-toggle-button:hover,
  #saved-files-button:hover,
  #settings-toggle-button:hover,
  #search-back-button:hover {
    transform: none;
    box-shadow: none;
  }
}

/* Desktop / preview: enable subtle lift only on hover-capable devices (precise control for settings icon) */
@media (hover: hover) and (pointer: fine) {
  #settings-toggle-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 32px rgba(2,20,16,0.34);
  }
}

/* Ensure the settings button also gives a visible "lift" feedback on mobile/touch:
   Use :active (press) and a forced rule for small viewports so tapping the button
   shows the same lift/box-shadow as desktop hover. This overrides the global
   hover:none block that disables hover styles on touch devices. */
@media (max-width: 700px) {
  /* Ensure the Settings button still shows the lift animation on touch devices:
     include :hover in addition to :active/:focus and force with !important so it isn't
     suppressed by the global hover:none rule. */
  #settings-toggle-button:hover,
  #settings-toggle-button:active,
  #settings-toggle-button:focus {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 14px 32px rgba(2,20,16,0.34) !important;
    z-index: 12100 !important;
  }
}

/* === Override: Ensure "No saved files yet." is strongly visible (red) ===
   This forces the empty state label text color to a clear red for high contrast,
   overriding other theme rules that made it light/grey. */
#saved-files-dropdown .saved-empty,
#saved-files-panel .saved-empty,
.saved-empty {
  color: #e51a1a !important; /* vivid red for clarity */
  font-weight: 900 !important; /* stronger weight for emphasis */
  text-shadow: none !important;
}

/* Ensure per-card save button shows a clear golden/yellow saved state on all viewports */
.card-save-button.saved {
  background: linear-gradient(180deg, #ffd54f 0%, #ffcc00 60%) !important;
  color: #04251f !important;
  box-shadow: 0 10px 26px rgba(212,175,55,0.18) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}