/**
 * Sparkian ask bar — Geekflare Guides
 *
 * Port of the Tools app's Tailwind classes onto the V3 tokens. The
 * token names line up one for one (--gf-panel, --gf-line, --gf-text,
 * --gf-bg, --gf-quiet, --gf-shadow-lg), so dark mode needs no extra
 * rules: the tokens flip and the bar follows.
 *
 * @package Main
 * @since 1.0.0
 */

.gf-sparkian {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  /* Above the article and the fixed page texture, below the cookie
     notice (9999999) — which the bar hides for anyway. */
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  /* Only the pill itself is clickable, so the rest of the strip doesn't
     swallow clicks on the article underneath. */
  pointer-events: none;
}

/* When the bottom-left corner is taken and shifting right would leave
   too little room to type — a phone, mostly — avoidCorner() in
   gf-sparkian-bar.js sets an inline bottom that clears the obstacle,
   or hides the bar outright when clearing it would strand it mid-page.
   Both are re-evaluated on resize. */
.gf-sparkian--hidden {
  display: none;
}

.gf-sparkian__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--gf-line);
  border-radius: 999px;
  background: var(--gf-panel);
  box-shadow: var(--gf-shadow-lg);
  margin: 0;
}

.gf-sparkian__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--gf-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--gf-text);
  /* iOS zooms the page on focus under 16px; the transform-free way out
     is a 16px font, so bump it only where that matters. */
  padding: 0;
}
.gf-sparkian__input::placeholder {
  color: var(--gf-quiet);
  opacity: 1;
}
/* The theme rings every focusable thing: .gf-v3 :focus-visible draws a
   2px brand outline, and a text input matches :focus-visible on a plain
   mouse click, not just on tab. The pill is meant to read as a quiet
   field, so it gets no focus decoration at all — the caret is the
   indication that it is ready to type in. Three classes to out-specify
   the theme rule. The two buttons keep their own ring, which is what a
   keyboard user needs to tell them apart. */
.gf-sparkian .gf-sparkian__pill .gf-sparkian__input:focus,
.gf-sparkian .gf-sparkian__pill .gf-sparkian__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.gf-sparkian__group {
  position: relative;
  flex: none;
}

.gf-sparkian__ask {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--gf-line);
  border-radius: 999px;
  background: var(--gf-bg);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.gf-sparkian__ask:disabled {
  opacity: 0.5;
  cursor: default;
}
.gf-sparkian__logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: block;
}

/* Custom tooltip rather than the native title attribute: title can't be
   styled and never appears on keyboard focus. */
.gf-sparkian__tip {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--gf-text);
  color: var(--gf-bg);
  font-family: var(--gf-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.gf-sparkian__group:hover .gf-sparkian__tip,
.gf-sparkian__group:focus-within .gf-sparkian__tip {
  opacity: 1;
}

.gf-sparkian__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gf-quiet);
  cursor: pointer;
}
.gf-sparkian__close:hover {
  color: var(--gf-text);
}

.gf-sparkian__ask:focus-visible,
.gf-sparkian__close:focus-visible {
  outline: 2px solid var(--gf-brand);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .gf-sparkian__pill {
    padding-left: 16px;
  }
  .gf-sparkian__input {
    /* Stops iOS Safari zooming in when the field takes focus. */
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-sparkian__ask,
  .gf-sparkian__tip {
    transition: none;
  }
}