/* ── MSS Color Picker ──────────────────────────────────────────────── */

/* Trigger (replaces the native input) */
.mss-cp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 6px 2px 2px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  vertical-align: middle;
  user-select: none;
  transition: border-color 0.15s;
}
.mss-cp-trigger:hover {
  border-color: #888;
}

.mss-cp-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.mss-cp-swatch-empty {
  background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 10px 10px;
  border-style: dashed;
}


/* ── Main popup ───────────────────────────────────────────────────── */

.mss-cp-popup {
  position: absolute;
  z-index: 10000;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  padding: 8px;
  width: auto;
  min-width: 240px;
}

/* Section labels */
.mss-cp-section-label {
  font-size: 11px;
  font-weight: 500;
  color: #777;
  margin: 4px 0 3px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Separator */
.mss-cp-separator {
  height: 1px;
  background: #e0e0e0;
  margin: 5px 0;
}

/* ── Color cell grid ──────────────────────────────────────────────── */

.mss-cp-row {
  display: flex;
  gap: 2px;
  margin-bottom: 2px;
}

.mss-cp-cell {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.1s, box-shadow 0.1s;
  box-sizing: border-box;
  flex-shrink: 0;
}
.mss-cp-cell:hover {
  transform: scale(1.2);
  z-index: 1;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}
.mss-cp-cell-selected {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #333;
  transform: scale(1.1);
}

/* ── Palette section ──────────────────────────────────────────────── */

.mss-cp-palette-section {
  margin: 2px 0;
  position: relative;
}

.mss-cp-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

/* Palette selector button */
.mss-cp-palette-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fafafa;
  font-size: 11px;
  user-select: none;
  position: relative;
}
.mss-cp-palette-select:hover {
  border-color: #999;
  background: #f0f0f0;
}

.mss-cp-palette-select-name {
  font-weight: 500;
  color: #444;
}

.mss-cp-palette-arrow {
  font-size: 9px;
  color: #888;
  margin-left: 2px;
}

/* Palette dropdown */
.mss-cp-palette-dropdown {
  position: absolute;
  z-index: 10001;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
  min-width: 200px;
  right: 0;
  top: 100%;
  margin-top: 2px;
}

.mss-cp-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #333;
}
.mss-cp-palette-item:hover {
  background: #e8f0fe;
}

.mss-cp-palette-item-label {
  white-space: nowrap;
}

/* Palette thumbnail (mini color dots) */
.mss-cp-palette-thumb {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}

.mss-cp-palette-thumb-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* ── Recent colors ────────────────────────────────────────────────── */

.mss-cp-recent-row {
  min-height: 24px;
  display: flex;
  align-items: center;
}

.mss-cp-recent-empty {
  font-size: 11px;
  color: #bbb;
  font-style: italic;
}

/* ── Action buttons ───────────────────────────────────────────────── */

.mss-cp-actions {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.mss-cp-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: #555;
  border-radius: 3px;
  transition: background 0.15s;
}
.mss-cp-action-btn:hover {
  background: #f0f0f0;
  color: #222;
}

/* Action icons (CSS-only) */
.mss-cp-action-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mss-cp-icon-none {
  border: 1.5px dashed #aaa;
  border-radius: 2px;
  position: relative;
}
.mss-cp-icon-none::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  right: -1px;
  height: 1.5px;
  background: #d00;
  transform: rotate(-45deg);
}

.mss-cp-icon-eyedropper {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M13.354 2.646a2.5 2.5 0 0 0-3.536 0L8.232 4.232l-.94-.94a.5.5 0 0 0-.707 0l-.354.354a.5.5 0 0 0 0 .707l.293.293L2.06 9.11a2 2 0 0 0-.544 1.012l-.582 2.678a.5.5 0 0 0 .588.588l2.678-.582A2 2 0 0 0 5.212 12.263l4.464-4.464.293.293a.5.5 0 0 0 .707 0l.354-.354a.5.5 0 0 0 0-.707l-.94-.94 1.586-1.586a2.5 2.5 0 0 0 0-3.536z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mss-cp-icon-more {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='3' cy='8' r='1.5' fill='%23666'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='%23666'/%3E%3Ccircle cx='13' cy='8' r='1.5' fill='%23666'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Advanced overlay ─────────────────────────────────────────────── */

.mss-cp-adv-overlay {
  position: fixed;
  z-index: 10010;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mss-cp-adv-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 16px;
  min-width: 310px;
}

.mss-cp-adv-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* SV canvas */
.mss-cp-sl-wrap {
  position: relative;
  width: 280px;
  height: 160px;
  cursor: crosshair;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.mss-cp-sl-canvas {
  display: block;
  width: 280px;
  height: 160px;
  border-radius: 3px;
}
.mss-cp-sl-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.15);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
}

/* Hue strip */
.mss-cp-hue-wrap {
  position: relative;
  width: 280px;
  height: 14px;
  cursor: crosshair;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 10px;
}
.mss-cp-hue-canvas {
  display: block;
  width: 280px;
  height: 14px;
  border-radius: 7px;
}
.mss-cp-hue-cursor {
  position: absolute;
  top: -1px;
  width: 6px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  pointer-events: none;
  transform: translateX(-50%);
}

/* Bottom row */
.mss-cp-adv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mss-cp-hex-label {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  float: none !important;
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
}
.mss-cp-hex-input {
  width: 72px;
  font-family: monospace;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.mss-cp-adv-preview {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* Buttons */
.mss-cp-adv-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.mss-cp-adv-ok,
.mss-cp-adv-cancel {
  padding: 6px 20px;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.mss-cp-adv-ok {
  background: #4472c4;
  color: #fff;
  border-color: #3861a8;
}
.mss-cp-adv-ok:hover {
  background: #3861a8;
}
.mss-cp-adv-cancel {
  background: #f5f5f5;
}
.mss-cp-adv-cancel:hover {
  background: #e8e8e8;
}