/* ============================================================================
   Ask Opus button — shared purple→pink animated gradient
   ----------------------------------------------------------------------------
   Used in two places:
     • the homepage hero  [Ask Opus](#){ .md-button .ask-ai-button … }
       (pill radius comes from .home-hero .md-button in home-hero.css)
     • the header's top-right "source" slot + its mobile nav-drawer copy,
       rendered by overrides/partials/source.html as <a class="md-source
       ask-ai-button"> on every page except the homepage, sized to match the
       search button (1.6rem tall, .4rem radius, .7rem text).
   The only motion is the gradient slowly drifting; it is switched off under
   prefers-reduced-motion. Selectors carry [data-md-color-scheme] so they
   out-cascade the theme's scheme-scoped hover/colour rules in both schemes.
   ============================================================================ */

[data-md-color-scheme] .md-typeset .md-button.ask-ai-button,
[data-md-color-scheme] .md-source.ask-ai-button {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(115deg,
      #7c3aed 0%, #a855f7 25%, #d946ef 50%, #ec4899 75%, #7c3aed 100%);
  background-size: 300% 100%;
  animation: ask-ai-drift 7s ease-in-out infinite;
}

[data-md-color-scheme] .md-typeset .md-button.ask-ai-button:hover,
[data-md-color-scheme] .md-typeset .md-button.ask-ai-button:focus,
[data-md-color-scheme] .md-source.ask-ai-button:hover,
[data-md-color-scheme] .md-source.ask-ai-button:focus {
  color: #fff;
  opacity: 0.88;
}

/* ── Header variant: match the search button's geometry ──────────────────── */
[data-md-color-scheme] .md-source.ask-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  padding: 0 .8rem;
  border-radius: .4rem;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

/* The theme reserves a fixed 11.5rem column for the repo link with a 1rem /
   1.4rem left margin; shrink it to the button and tuck it in beside the
   search box. [dir=ltr] matches the theme's own selector specificity so this
   wins at every breakpoint. Still hidden below 60em by the theme — the
   nav-drawer copy covers mobile. */
@media screen and (min-width: 60em) {
  [dir=ltr] .md-header__source,
  [dir=rtl] .md-header__source {
    width: auto;
    max-width: none;
    display: flex;
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 0;
  }
  [dir=ltr] .md-header__source { margin-left: .2rem; }
  [dir=rtl] .md-header__source { margin-right: .2rem; }
}

/* Placeholder on pages that opt out (hide: - ask-ai): invisible and inert in
   the header so the search box keeps its position; removed from the drawer. */
[data-md-color-scheme] .md-source.ask-ai-button--placeholder {
  visibility: hidden;
  pointer-events: none;
  animation: none;
}
.md-nav__source .ask-ai-button--placeholder {
  display: none;
}

/* Mobile nav drawer copy: drop the theme's bordered box, go full width. */
.md-nav__source {
  border: 0;
  margin: .4rem .6rem .8rem;
}
[data-md-color-scheme] .md-nav__source .md-source.ask-ai-button {
  display: flex;
  width: 100%;
}

@keyframes ask-ai-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-md-color-scheme] .md-typeset .md-button.ask-ai-button,
  [data-md-color-scheme] .md-source.ask-ai-button {
    animation: none;
  }
}