/* ===== SCORE DISPLAY & SLIDER ===== */

/* Color variables for slider styling */
:root {
  --slider-progress-color: #ffc107;
  --slider-remaining-color: #ffffff;
}

/* Album badge - fixed position, visible in swiper and grid view (except
   fullscreen). Two rows: the album row (reindex button + album pulldown,
   mirroring the semantic-map titlebar) above the slide position / score text.
   The seek slider measures this element's right edge and lays itself out to
   the right of it (seek-slider.js updateSliderPosition), so the badge may grow
   taller freely but must keep its max-width. */
.fixed-score-display {
  position: fixed;
  top: 12px;
  left: 12px;
  max-width: 260px;
  font-size: 1.05em;
  padding: 4px 14px 4px 8px;
  border-radius: 12px;
  background: rgba(30, 30, 30, 0.85);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  user-select: none;
  min-height: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  white-space: nowrap;
  /* Clip long labels (e.g. "Cluster 234 · indoor general store") rather than
     letting them spill past the 260px max-width. The inner #scoreText handles
     the ellipsis. Hover the badge to see the full text via its title attr. */
  overflow: hidden;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 1000;
  opacity: 0.7;
}

/* The badge idles translucent; make it fully legible while the user is
   interacting with the album pulldown or reindex button. */
.fixed-score-display:hover,
.fixed-score-display:focus-within {
  opacity: 1;
}

/* Row 1: reindex button / progress ring + album pulldown. */
.album-badge-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

/* The progress ring that replaces the button while indexing gets the same
   footprint, so the badge width (which the seek slider is anchored to) does
   not change when the swap happens. */
.album-badge-row .umap-reindex-progress svg {
  width: 16px;
  height: 16px;
}

/* <button> does not inherit color, and the reindex icon is stroked with
   currentColor so it follows the cluster colour like the rest of the badge. */
.album-badge-row .icon-btn {
  color: inherit;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  margin: 0;
  flex-shrink: 0;
}

/* Allow the text span to shrink below its content size inside the flex
   container, and ellipsize whatever doesn't fit. Indented so the position
   text sits under the album name rather than under the reindex icon. */
.fixed-score-display #scoreText {
  min-width: 0;
  max-width: 100%;
  padding-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Star icon styling within score display */
.fixed-score-display .score-star {
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.fixed-score-display .score-star:hover {
  transform: scale(1.2);
}

.fixed-score-display.visible {
  display: flex;
  opacity: 0.7;
}

.fixed-score-display.hidden {
  display: none;
  opacity: 0;
}

/* The .visible/.hidden classes set display:flex/none; keep the column layout
   when score-display.js flips the badge visible. */
.fixed-score-display.visible {
  flex-direction: column;
}

/* Hide score display in fullscreen mode */
:fullscreen .fixed-score-display,
:-webkit-full-screen .fixed-score-display,
:-moz-full-screen .fixed-score-display,
:-ms-fullscreen .fixed-score-display {
  display: none !important;
}

/* Hide the star in grid view (but keep the score display visible) */
.grid-view-active .fixed-score-display .score-star {
  display: none !important;
}

/* Yellow hover strip - fixed at top, position set dynamically by JS */
.slider-hover-strip {
  position: fixed;
  top: 0;
  left: 280px; /* Default, overridden by JS based on score display width */
  right: 12px;
  height: 4px;
  background: var(--slider-progress-color);
  z-index: 501;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.slider-hover-strip.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Slider row - animates in from top, position set dynamically by JS */
.score-slider-row {
  position: fixed;
  top: -80px; /* Start hidden above viewport */
  left: 280px; /* Default, overridden by JS based on score display width */
  right: 12px;
  z-index: 500;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-height: 30px;
  transition: top 0.3s ease;
}

.score-slider-row.visible {
  top: 12px; /* Slide down to visible position */
}

@media (max-width: 480px) {
  .fixed-score-display {
    left: 8px;
    top: 8px;
    /* Narrow enough that the badge, the first tick label's overhang and the
       slider's 140px minimum all fit across a 375px phone. */
    max-width: 150px;
  }
  .slider-hover-strip {
    right: 8px;
  }
  .score-slider-row {
    right: 8px;
  }
}

.slider-hover-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 20px); /* Extend 32px below the container to cover tick labels */;
  z-index: 1;
  pointer-events: auto;
  background: transparent;
}

.slider-with-ticks-container {
  position: relative;
  flex: 1 1 auto;
  min-width: 220px;
  margin: 0;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.3s;
  z-index: 2;
}


.slider-with-ticks-container.visible {
  opacity: 1;
}

.slide-seek-slider {
  width: 100%;
  position: relative;
  height: 18px;
  accent-color: var(--slider-progress-color);
  background: transparent;
  border: none;
  margin: 0;
  transition: opacity 0.3s;
  display: block;
  z-index: 502;
  -webkit-appearance: none;
  appearance: none;
  --slider-progress: 0%;
}

/* Custom slider track styling */
.slide-seek-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--slider-progress-color) var(--slider-progress), var(--slider-remaining-color) var(--slider-progress));
}

.slide-seek-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--slider-progress-color) var(--slider-progress), var(--slider-remaining-color) var(--slider-progress));
}

/* Custom slider thumb styling */
.slide-seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slider-progress-color);
  cursor: pointer;
  margin-top: -5px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.slide-seek-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slider-progress-color);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
  .slider-with-ticks-container {
    min-width: 140px;
  }
}

.slider-ticks-row {
  position: absolute;
  left: 0;
  top: 100%; /* Position just below the slider */
  width: 100%; /* Full width of the slider container */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  pointer-events: none;
  z-index: 3;
}

.context-label {
  position: absolute;
  right: 100%;
  top: 100%; /* Same vertical position as ticks */
  font-size: 0.85em;
  color: white;
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
  user-select: none;
  opacity: 0.9;
  /* width: 80px; */
  margin-top: 5px; /* Align with tick labels */
  margin-right: 32px; /* Clears the first tick label, which is centred on the slider's left end */
  z-index: 3;
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 8px;
  display: inline-block;
  letter-spacing: 0.03em;
}

/* No room for the axis caption beside the badge on a phone. (After the base
   rule above so it wins the cascade at equal specificity.) */
@media (max-width: 480px) {
  .context-label {
    display: none;
  }
}

.slider-ticks {
  flex: 1;
  position: relative;
  height: 32px;
}

.slider-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 0;
}

.slider-tick-mark {
  width: 2px;
  height: 8px;
  transform: translateY(-4px);
  background: white;
  margin-bottom: 2px;
  opacity: 0.7;
}

.slider-tick-label {
  font-size: 0.75em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  opacity: 0.95;
  user-select: none;
  background: rgba(30, 30, 30, 0.85);
  border-radius: 4px;
  padding: 1px 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.slider-info-panel {
  position: absolute;
  pointer-events: none;
  background: rgba(30,30,30,0.95);
  color: #faea0e;
  font-size: 0.95em;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
  white-space: nowrap;
  transition: left 0.05s, top 0.05s;
  display: none;
}

/* ===== THUMBNAIL GALLERY (64px thumbnails) ===== */
.thumbnail-gallery-row {
  width: 100%;
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: auto;
  height: 64px; /* Accommodate 64px thumbnails + padding */
}

.thumbnail-swiper-container {
  width: 100%;
  max-width: 100%;
  height: 64px; /* Match thumbnail size */
  overflow: hidden;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px);
  padding: 4px; /* Small padding */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.thumbnail-swiper-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  transition: transform 0.3s ease;
  gap: 8px;
  padding: 0 4px; /* Prevent edge clipping */
}

.thumbnail-slide {
  flex-shrink: 0;
  width: 64px; /* Thumbnail size */
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.thumbnail-slide.active {
  border-color: #fff;
  transform: scale(1.1);
  z-index: 1;
}

.thumbnail-slide:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.thumbnail-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-slide.loading {
  background: rgba(100, 100, 100, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-slide.loading::after {
  content: "•";
  color: #fff;
  font-size: 24px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .thumbnail-gallery-row {
    height: 56px;
    margin-bottom: 10px;
  }
  
  .thumbnail-swiper-container {
    height: 56px;
    padding: 3px;
  }
  
  .thumbnail-slide {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .thumbnail-gallery-row {
    height: 48px;
    margin-bottom: 8px;
  }
  
  .thumbnail-swiper-container {
    height: 48px;
    padding: 2px;
  }
  
  .thumbnail-slide {
    width: 48px;
    height: 48px;
  }
}

/* Show gallery when slider container is visible */
.slider-with-ticks-container.visible .thumbnail-gallery-row {
  display: flex;
}

/* ===== THUMBNAIL PAGER BUTTONS ===== */
.thumbnail-pager-prev,
.thumbnail-pager-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0.7;
  backdrop-filter: blur(4px);
}

.thumbnail-pager-prev {
  left: 4px;
}

.thumbnail-pager-next {
  right: 4px;
}

.thumbnail-pager-prev:hover,
.thumbnail-pager-next:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.thumbnail-pager-prev:active,
.thumbnail-pager-next:active {
  transform: translateY(-50%) scale(0.95);
}

.thumbnail-pager-prev svg,
.thumbnail-pager-next svg {
  width: 16px;
  height: 16px;
}

/* Hide pager buttons when not enough thumbnails */
.thumbnail-swiper-container:not(.has-multiple-pages) .thumbnail-pager-prev,
.thumbnail-swiper-container:not(.has-multiple-pages) .thumbnail-pager-next {
  display: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .thumbnail-pager-prev,
  .thumbnail-pager-next {
    width: 28px;
    height: 28px;
  }
  
  .thumbnail-pager-prev svg,
  .thumbnail-pager-next svg {
    width: 14px;
    height: 14px;
  }
}

.thumbnail-swiper-wrapper.slide-next {
  animation: gallery-slide-next 0.3s ease;
}
.thumbnail-swiper-wrapper.slide-prev {
  animation: gallery-slide-prev 0.3s ease;
}

@keyframes gallery-slide-next {
  from { transform: translateX(40px); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes gallery-slide-prev {
  from { transform: translateX(-40px); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}