*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #f1f5f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.palette-instruction {
  text-align: center;
  color: #0f172a;
}

kbd {
  background: #e2e8f0;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  font-weight: 600;
  font-family: monospace;
  font-size: 0.9rem;
}

.manual-open-btn {
  margin-top: 20px;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.manual-open-btn:hover { background: #2563eb; }

/* Modal Styles */
.palette-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.palette-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.palette-modal {
  width: 100%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.palette-backdrop.is-open .palette-modal {
  transform: scale(1);
}

.palette-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.search-icon {
  color: #64748b;
  margin-right: 12px;
}

.palette-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  font-size: 1.15rem;
  color: #0f172a;
  outline: none;
  font-family: inherit;
}

.palette-input::placeholder {
  color: #94a3b8;
}

.esc-hint {
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.palette-body {
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.palette-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  margin: 12px 0 8px 8px;
  letter-spacing: 1px;
}

.palette-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}

.palette-item:hover, .palette-item.active {
  background: #3b82f6;
  color: #ffffff;
}

.item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-right: 12px;
  color: #ffffff;
}

.blue-icon { background: #3b82f6; }
.purple-icon { background: #a855f7; }
.green-icon { background: #10b981; }

.palette-item.active .item-icon {
  background: #ffffff;
}
.palette-item.active .blue-icon { color: #3b82f6; }
.palette-item.active .purple-icon { color: #a855f7; }
.palette-item.active .green-icon { color: #10b981; }

.item-name {
  font-weight: 500;
  flex-grow: 1;
  color: inherit;
}

.palette-item:not(.active) .item-name {
  color: #1e293b;
}

.item-shortcut {
  color: #94a3b8;
  font-size: 1.2rem;
}

.palette-item.active .item-shortcut {
  color: #bfdbfe;
}

const backdrop = document.getElementById("cmd-backdrop");
const openBtn = document.getElementById("open-palette-btn");
const searchInput = document.querySelector(".palette-input");

function openPalette() {
  backdrop.classList.add("is-open");
  searchInput.focus();
}

function closePalette() {
  backdrop.classList.remove("is-open");
  searchInput.blur();
}

openBtn.addEventListener("click", openPalette);

/* Listen for Cmd+K or Ctrl+K securely */
window.addEventListener("keydown", function(e) {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    if (backdrop.classList.contains("is-open")) {
      closePalette();
    } else {
      openPalette();
    }
  }
  
  if (e.key === "Escape" && backdrop.classList.contains("is-open")) {
    closePalette();
  }
});

/* Close when clicking outside modal */
backdrop.addEventListener("click", function(e) {
  if (e.target === backdrop) {
    closePalette();
  }
});