/* -------------------------------------------------------
                 CUSTOM COLOR PICKER
   ------------------------------------------------------- */
.color-picker-popup {
  position: absolute;
  /* Below .app-tooltip-floating-* (z-index: 9999, tooltip.css) — the
     eyedropper button's own tooltip must render above this panel, not
     behind it. */
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 190px;
  padding: 10px;
  background-color: var(--main-theme-lighter, #2b2b2b);
  border: 1px solid var(--main-theme-darker, #131313);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  user-select: none;
}
/* While the eyedropper is actively sampling the screen — visibility, not
   display, so the panel's own layout (and thus positioning math already
   done for it) stays intact for when it reappears. */
.color-picker-popup.picking {
  visibility: hidden;
}

.color-picker-sv {
  position: relative;
  width: 100%;
  height: 110px;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

.color-picker-sv-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 2px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-picker-hue {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  cursor: var(--cursor-pointer, pointer);
  touch-action: none;
  background: linear-gradient(
    to right,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );
}

.color-picker-hue-thumb {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 2px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.color-picker-preview {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid var(--main-theme-darker, #131313);
}

.color-picker-hex {
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--main-theme-darker, #131313);
  border-radius: 5px;
  background-color: var(--main-theme, #202020);
  color: var(--font-color-clear, #d0d0d0);
  font-size: 12px;
  font-family: inherit;
}
.color-picker-hex:focus {
  outline: 1px solid var(--secondary-color, #5aaafa);
}

.color-picker-eyedropper-btn {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  color: var(--font-color-clear, #d0d0d0);
  cursor: var(--cursor-pointer, pointer);
  font-size: 13px;
}
.color-picker-eyedropper-btn:hover {
  color: var(--highlight, #cfcf00);
  background-color: var(--main-theme-darker, #131313);
}

/* Same plain icon-button look as the eyedropper above - sits at the very
   left of the row (before the preview swatch, colorPicker.js) since it
   picks a whole new color outright rather than sampling/refining the
   current one, the same "starting point" role .color-picker-preview
   itself visually anchors that side of the row for already. */
.color-picker-reroll-btn {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  color: var(--font-color-clear, #d0d0d0);
  cursor: var(--cursor-pointer, pointer);
  font-size: 13px;
}
.color-picker-reroll-btn:hover {
  color: var(--highlight, #cfcf00);
  background-color: var(--main-theme-darker, #131313);
}

/* Firefox/Safari fallback (pickColorFromScreenCapture, colorPicker.js) — a
   full-viewport still frame of whatever the user chose to share, standing
   in for the native EyeDropper overlay neither engine implements. Above
   .color-picker-popup's own z-index (9000) since it replaces it while
   active; below .app-tooltip-floating-*'s (9999) purely by convention, that
   tooltip is already hidden for the duration of picking. */
.color-picker-screen-capture-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  cursor: crosshair;
  background: #000;
}
.color-picker-screen-capture-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.color-picker-screen-capture-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  pointer-events: none;
}
/* Follows the cursor (top/left set in JS on every pointermove) — offset by
   its own margin rather than centered on the cursor, so the ring never sits
   directly under the pixel it's magnifying. Hidden (not display: none, so
   its canvas keeps a stable size to draw into) whenever the pointer strays
   onto the letterbox bars, where there's no source pixel to sample. */
.color-picker-screen-capture-loupe {
  position: fixed;
  width: 90px;
  height: 90px;
  margin-left: 16px;
  margin-top: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.color-picker-screen-capture-loupe.visible {
  opacity: 1;
}
.color-picker-screen-capture-loupe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.color-picker-screen-capture-loupe-hex {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.6);
  /* Doubles as a live color preview (its own text set to the sampled hex in
     JS) — the shadow keeps it legible even when that hex is pale or close
     to the background behind it. */
  text-shadow:
    0 0 2px #000,
    0 0 2px #000;
}