/* Custom Command Palette styling */
.simple-command-palette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}

.simple-command-palette-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

.simple-command-palette-modal {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: 90vw;
  background-color: #2d1e30; /* Always use dark purple background */
  color: #fff; /* Always use white text */
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border: 1px solid rgba(104, 35, 109, 0.3);
  transition: all 0.3s ease;
}

#command-palette-input {
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-bottom: 2px solid rgba(104, 35, 109, 0.5);
  font-size: 16px;
  outline: none;
  background-color: #3a2a3d; /* Always use dark purple input */
  transition: all 0.3s ease;
  color: #fff; /* Always use white text */
  font-weight: 500;
}

#command-palette-input:focus {
  border-bottom-color: rgba(104, 35, 109, 0.8);
  background-color: #3a2a3d; /* Keep dark background on focus */
}

.command-palette-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 4px;
  background-color: #2d1e30; /* Always use dark purple background */
}

.command-palette-section {
  padding: 10px 0;
}

.command-palette-section-title {
  padding: 6px 16px;
  font-size: 12px;
  font-weight: bold;
  color: #d4a5db; /* Always use light purple for section titles */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.command-palette-commands {
  margin-bottom: 8px;
}

.command-palette-command {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  flex-wrap: wrap;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin: 2px 4px;
  color: #f0f0f0; /* Always use white text */
}

.command-palette-command:hover, .command-palette-command.selected {
  background-color: rgba(104, 35, 109, 0.3); /* Darker hover state */
}

.command-palette-command.selected {
  outline: 2px solid rgba(104, 35, 109, 0.3);
  position: relative;
  background-color: rgba(104, 35, 109, 0.25); /* Darker selected state */
}

.command-palette-icon {
  flex: 0 0 24px;
  margin-right: 14px;
  color: #d4a5db; /* Always use light purple for icons */
}

.command-palette-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #f0f0f0; /* Always use white text */
}

.command-palette-shortcut {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: rgba(104, 35, 109, 0.3); /* Darker background */
  font-size: 12px;
  color: #f0f0f0; /* Always use white text */
  font-weight: 600;
}

.command-palette-excerpt {
  flex-basis: 100%;
  margin-top: 6px;
  margin-left: 38px;
  font-size: 13px;
  color: #ccc; /* Always use light gray for excerpts */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.5;
}

/* Style for search results section */
.command-palette-search-results-section {
  border-top: 1px solid rgba(104, 35, 109, 0.2);
  margin-top: 10px;
  padding-top: 10px;
}

.command-palette-no-results {
  padding: 20px;
  text-align: center;
  color: #ccc; /* Always use light gray for no results */
  font-style: italic;
}

/* Command palette button styling */
.command-palette-button {
  display: flex;
  align-items: center;
  height: 100%;
}

.command-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.command-k-style-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all 0.3s ease;
  padding: 0.8rem 1.6rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  white-space: nowrap;
  gap: 6px;
  font-weight: 500;
  cursor: pointer;
  height: 40px; /* Set a fixed height to match navigation links */
  margin: auto 0; /* Center vertically in the container */
}

.command-k-style-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.command-k-style-btn:focus,
.command-k-style-btn.focused {
  outline: 2px solid rgba(212, 165, 219, 0.6);
  outline-offset: 1px;
}

.command-k-style-btn .search-icon {
  margin-left: 4px;
  font-size: 1em;
  color: #000000;
}

.command-k-style-btn .default-theme-text,
.command-k-style-btn .mac-theme-text {
  font-weight: 500;
  color: #000000;
}

/* Hide previous button styling */
.command-palette-button .btn {
  display: none;
}

/* Hide one of the shortcut texts depending on platform */
.mac-theme-text, .default-theme-text {
  display: none;
}

/* Mobile styling for command palette button */
@media screen and (max-width: 768px) {
  .command-palette-button {
    margin: 0.8rem 0;
    width: 100%;
  }
  
  .command-k-style-btn {
    width: 100%;
    justify-content: center;
    padding: 0.8rem;
  }
  
  .simple-command-palette-modal {
    width: 95vw;
    max-width: 95vw;
    top: 15%;
  }
  
  .command-palette-excerpt {
    display: none; /* Hide excerpts on mobile to save space */
  }
}

/* Original Dark mode styling has been moved to the base styles above.
   These styles have been applied directly to make the command palette
   consistently use the dark purple theme across all browsers. */

/* Custom styles for the shortcut help modal */
.shortcut-help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shortcut-help-content {
  background-color: #f9f5fb;
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(104, 35, 109, 0.3);
  color: #333;
}

.shortcut-help-content h2 {
  margin-top: 0;
  color: #68236D;
}

.shortcut-help-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.shortcut-help-content th,
.shortcut-help-content td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid rgba(104, 35, 109, 0.2);
}

.shortcut-help-content kbd {
  display: inline-block;
  padding: 3px 6px;
  font-size: 0.9em;
  line-height: 1.4;
  color: #68236D;
  background-color: rgba(104, 35, 109, 0.15);
  border: 1px solid rgba(104, 35, 109, 0.3);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin: 0 2px;
  font-family: inherit;
  font-weight: 600;
}

.shortcut-help-footer {
  margin-top: 24px;
  text-align: center;
}

.shortcut-help-footer button {
  padding: 8px 16px;
  background-color: #68236D;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.shortcut-help-footer button:hover {
  background-color: #7d2982;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
  .shortcut-help-content {
    background-color: #2d1e30;
    color: #f0f0f0;
    border-color: rgba(104, 35, 109, 0.3);
  }
  
  .shortcut-help-content h2 {
    color: #d4a5db;
  }
  
  .shortcut-help-content th,
  .shortcut-help-content td {
    border-bottom-color: rgba(104, 35, 109, 0.3);
  }
  
  .shortcut-help-content kbd {
    color: #f0f0f0;
    background-color: rgba(104, 35, 109, 0.25);
    border-color: rgba(104, 35, 109, 0.4);
  }
  
  .shortcut-help-footer button:hover {
    background-color: #8d3092;
  }
}

/* Command palette footer containing keyboard shortcuts help */
.command-palette-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background-color: rgba(104, 35, 109, 0.1);
  border-top: 1px solid rgba(104, 35, 109, 0.3);
  gap: 16px;
  flex-wrap: wrap;
}

.command-palette-footer-item {
  display: flex;
  align-items: center;
  color: #ddd;
  font-size: 13px;
}

.command-palette-footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background-color: rgba(104, 35, 109, 0.25);
  border: 1px solid rgba(104, 35, 109, 0.4);
  border-radius: 4px;
  color: #f0f0f0;
  margin: 0 3px;
  font-size: 12px;
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

/* Footer dark styling is now applied to all color schemes above */