/* ============================================================
   ask-ai-widget.css
   Barra de botones para abrir la página en ChatGPT, Claude,
   Perplexity o Gemini con una consulta pre-rellenada. Mismo
   patrón visual que share-widget.css, para que ambas barras
   convivan sin desentonar si aparecen en la misma página.
   ============================================================ */
.ask-ai-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  background: var(--bg-soft, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
}
.ask-ai-bar-label {
  font-family: var(--font-mono, monospace);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-muted, #6B7280);
  margin-right: .25rem;
}
.ask-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #E5E7EB);
  background: var(--bg-card, #fff);
  color: var(--ask-ai-color, var(--ink, #111827));
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: -.02em;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  flex-shrink: 0;
}
.ask-ai-btn:hover {
  transform: translateY(-2px);
  border-color: var(--ask-ai-color, var(--accent, #4F6BF4));
  background: var(--ask-ai-bg, var(--accent-light, #EEF1FE));
}

@media (max-width: 480px) {
  .ask-ai-bar { padding: .85rem 1rem; }
}