.command-palette-section {
      border: none;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  transition: transform 1s ease, opacity 0.5s ease;
}

.slide-up {
  justify-content: flex-start; /* stop vertical centering once content grows */
  transform: translateY(-50px);
  margin: 0;
}

      .command-palette-header {
        justify-content: center;
          transition: opacity 0.5s ease;
      }

      .command-palette-header h1{
        text-align: center;
        color: #fff;
      }

      .command-palette-section.slide-up .command-palette-header {
        opacity: 0;
      }

      .searchBarContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-md);

        margin: 0 var(--space-md);
       position: relative;
      }

.searchInputWrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: var(--space-lg) auto 0;
}

.searchIcon {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 1;
}

.mainSearchInput {
  resize: none;
  border-radius: var(--radius-lg);
  width: 100%;
  height: 50px;
  margin: 0;
  max-width: none;
  padding-left: calc(var(--space-md) * 2 + 18px);
}

      .mainSearchInput:hover {
  height: 60px;
  padding-top: var(--space-md);
  padding-right: var(--space-md);
  padding-bottom: var(--space-md);
  border: 1px solid var(--border-secondary);
}
.mainSearchInput:focus {
  height: 100px;
  padding-top: var(--space-md);
  padding-right: var(--space-md);
  padding-bottom: var(--space-md);
  border: 1px solid var(--border-secondary);
}

      .command-palette-section.slide-up .mainSearchInput {
        min-height: auto;
height: 50px;
      }


      .searchHintFade::placeholder {
  opacity: 0;
  transition: opacity .25s ease;
}

      .quickActionsContainer {
        display: flex;
        justify-content: center;
        gap: var(--space-md);
        margin-bottom: var(--space-lg);
      }

      .quickActionsContainer .actionBtn {
        width: 170px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .quickActionsContainer .actionBtn:hover {
        background: var(--surface-primary);
        color: var(--color);
      }

      .mainSearchResultContainer {
        align-self: flex-start;
        width: 100%;
        overflow: auto;
        margin-top: var(--space-lg);
      }
#MainSearchResults.mainSearchResultContainer h2{
        text-align: left;
        color: #fff;
        margin-left: var(--space-lg);
      }