/* "Ask AI" pill: components/AskAi.php + web/js/ask-ai.js. Loaded on the
   public site and in the app catalog, so every token has a fallback. */
.ask-ai {
    display: inline-flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 16px; border-radius: 999px;
    background: #fff; border: 1px solid var(--border-strong, rgba(26, 30, 92, 0.18));
    color: var(--brand-indigo, #1A1E5C);
    font: 600 14px/1 var(--font-body, 'Onest', system-ui, sans-serif);
    cursor: pointer; white-space: nowrap;
    transition: border-color var(--dur-1, 120ms) var(--ease, ease), color var(--dur-1, 120ms) var(--ease, ease);
}
.ask-ai:hover { border-color: var(--brand-violet, #5B4FE8); }
.ask-ai:active { transform: translateY(1px); }
.ask-ai:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(91, 79, 232, 0.30)); }
.ask-ai-logos { display: inline-flex; align-items: center; gap: 8px; }
.ask-ai-logo {
    display: block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
}
.ask-ai.is-copied { color: var(--success, #2A8A5C); border-color: var(--success, #2A8A5C); }
.ask-ai.is-copied .ask-ai-logos { display: none; }

.ask-ai-block { margin: 0 0 var(--s-5, 24px); }
.ask-ai-manual { margin-top: 8px; max-width: 560px; }
.ask-ai-manual p { margin: 0 0 4px; font-size: 13px; color: var(--ink-mid, #5a5d7a); }
.ask-ai-manual textarea {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    font: 12px/1.5 var(--font-mono, ui-monospace, monospace);
    border: 1px solid var(--border-strong, rgba(26, 30, 92, 0.18)); border-radius: 10px;
}

/* Site header: compact; logos go first when space runs out, the pill last
   (robot and field pages keep their own pill in the content). */
.pub-nav .ask-ai { height: 34px; padding: 0 12px; font-size: 13px; }
@media (max-width: 900px) { .pub-nav .ask-ai-logos { display: none; } }
@media (max-width: 640px) { .pub-nav .ask-ai { display: none; } }