/* =========================================
   COMMAND PALETTE (Minimalist / Round)
   ================================********* */

/* --- 1. The Full Screen Overlay --- */
.cmd-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
  
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}

.cmd-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

/* --- 2. The Modal Box --- */
.cmd-modal {
  width: 100%;
  max-width: 600px;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 12px; /* Soft rounded corners for the modal */
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  overflow: hidden;
  margin: 0 1rem;
  
  transform: translateY(20px);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cmd-overlay.is-open .cmd-modal {
  transform: translateY(0);
}

/* --- 3. Header & Input --- */
.cmd-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

#cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 1.4rem;
  letter-spacing: -0.04rem;
  color: var(--color-primary);
  outline: none;
  padding: 0;
}

.cmd-esc-hint {
  font-size: 0.7rem;
  background: var(--color-border);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.01rem;
  color: var(--color-muted);
  font-weight: 600;
}

/* --- 4. The List --- */
.cmd-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
  
  /* --- THE FIX --- */
  /* This creates a "safe zone" for the scrollIntoView() logic.
     When scrolling to the top item, it leaves 0.5rem gap from the header.
     When scrolling to the bottom item, it leaves 0.5rem gap from the bottom edge. */
  scroll-padding-block-start: 0.5rem;
  scroll-padding-block-end: 0.5rem;
}

.cmd-group-title {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
}

/* --- 5. The List Items --- */
.cmd-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.8rem 1rem;
  border: none;
  background: transparent;
  text-align: left;
  text-decoration: none;
  
  color: var(--color-secondary);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.015rem;
  
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.cmd-item:hover,
.cmd-item:focus {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  outline: none;
}

.muted-indent-icon {
  /* 1. Make it subtle */
  color: var(--color-border);
  
  /* 2. Add the space (instead of using a spacebar in HTML) */
  margin-right: 0.6rem; 
  
  /* Optional: Ensure it doesn't shrink if text gets long */
  flex-shrink: 0;
}

/* --- 6. The Toggle Switch (TIGHT & ROUND) --- */
.cmd-switch-track {
  width: 44px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 11px; 
  position: relative;
  margin-left: auto;
  transition: border-color 0.3s ease;
}

.cmd-switch-knob {
  /* Bigger knob for a tighter fit */
  width: 18px;
  height: 18px;
  
  background-color: var(--color-secondary);
  border-radius: 50%; 
  
  position: absolute;
  top: 50%;
  /* Start 2px from the left edge (1px border + 1px gap) */
  left: 1px; 
  
  /* Center vertically */
  transform: translateY(-50%);
  
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              background-color 0.3s ease;
}

/* --- 7. Dark Mode Active State --- */
[data-theme="dark"] .cmd-switch-track {
  border-color: var(--color-primary);
}

[data-theme="dark"] .cmd-switch-knob {
  /* Slide Calculation:
     Track Width (44) - Knob Width (18) - Left Start (1) - Right Gap (1) = 24px 
     We use 22px to account for the borders properly.
  */
  transform: translate(22px, -50%);
  background-color: var(--color-primary);
}

/* --- 8. Empty State --- */
.cmd-empty {
  padding: 2rem;
  text-align: center;
  color: var(--color-muted);
}

/* --- 9. Copy Icon Styling --- */
.cmd-copy-icon {
  /* Push to the far right */
  margin-left: auto;
  
  /* FIX 1: Match the switch BORDER color */
  color: var(--color-border); 
  
  /* FIX 2: Keep it thin */
  stroke-width: 1.5px; 
  
  opacity: 1;
  transition: all 0.2s ease;
}

/* Hover State: Highlight when the user hovers the row */
.cmd-item:hover .cmd-copy-icon,
.cmd-item:focus .cmd-copy-icon {
  color: var(--color-secondary); /* Darken it on hover */
  transform: scale(1.05);
}

.cmd-item:hover,
.cmd-item:focus,
.cmd-item.is-selected { /* <-- ADD THIS CLASS */
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  outline: none;
}

/* Make sure the icon inside highlights too */
.cmd-item:hover .cmd-copy-icon,
.cmd-item.is-selected .cmd-copy-icon {
  color: var(--color-primary);
  opacity: 1;
  transform: scale(1.05);
}