/* SearXNG "Search with AI" button — sparkle star icon */

:root {
  --ai-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0ea5e9 100%);
  --ai-gradient-hover: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #0284c7 100%);
  --ai-text: #ffffff;
  --ai-glow: rgba(56, 189, 248, 0.7);
  --ai-radius: 999px;
  --ai-bar-height: 54px;
}

/* Group the search bar + AI button in a centered flex row inside the grid cell */
.ai-search-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Results/other pages: search bar fills its container from the left */
body:not(.index_endpoint) .ai-search-group {
  justify-content: flex-start;
}

body:not(.index_endpoint) .ai-search-group > .search_box {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Index page: centered, compact search bar */
body.index_endpoint .ai-search-group {
  justify-content: center;
}

body.index_endpoint .ai-search-group > .search_box {
  flex: 0 1 auto;
  min-width: 0;
  width: 36rem;
  max-width: 100%;
}

/* AI button sits right beside the bar, never wraps below */
.ai-button-wrapper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0 0 0.4rem;
}

/* Re-assert styles that .search_box * would strip */
.search_box .ai-button,
.search_box .ai-button:hover,
.search_box .ai-button:active {
  box-shadow:
    0 4px 18px rgba(29, 78, 216, 0.4),
    0 0 0 2px rgba(56, 189, 248, 0.2);
  border: none;
  border-radius: var(--ai-radius);
}

.ai-button {
  height: var(--ai-bar-height);
  padding: 0 1.2rem;
  border: none;
  border-radius: var(--ai-radius);
  background: var(--ai-gradient);
  color: var(--ai-text);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
  box-shadow:
    0 4px 18px rgba(29, 78, 216, 0.4),
    0 0 0 2px rgba(56, 189, 248, 0.2);
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ai-button:hover {
  background: var(--ai-gradient-hover);
  filter: brightness(1.05);
  box-shadow:
    0 6px 24px rgba(29, 78, 216, 0.48),
    0 0 0 3px rgba(56, 189, 248, 0.3);
}

.ai-button:active {
  transform: scale(0.97);
}

.ai-button svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 4px var(--ai-glow));
  flex-shrink: 0;
}

.ai-button .ai-label-full {
  display: inline;
}

.ai-button .ai-label-short {
  display: none;
}

@media (max-width: 480px) {
  :root {
    --ai-bar-height: 48px;
  }

  .ai-button {
    padding: 0 0.8rem;
    font-size: 0.9rem;
  }

  .ai-button svg {
    width: 20px;
    height: 20px;
  }

  .ai-button .ai-label-full {
    display: none;
  }

  .ai-button .ai-label-short {
    display: inline;
  }
}