Enhance {agent-skill} directive

[theletterf]

Summary

• Switches the {agent-skill} callout color from teal to plain/grey, matching the existing plain admonition style so it's visually distinct from tips.
• Makes the layout responsive: on desktop the button is bottom-aligned to the right; on mobile it becomes full-width below the text.
• Allows optional supplementary body content inside the directive to clarify the scope of a skill. The default "A skill is available..." line always renders, and custom text appears below it.
• Unifies both text lines to text-base for consistent sizing.
• Updates the learn-more line to "Learn more about agent skills for Elastic".

Addresses #2897

Test plan

• All unit tests pass (./build.sh unit-test — 1524 C# + 301 F# passed, 0 failed).
• Verify the rendered component uses the plain/grey color scheme.
• Verify default text renders when no body content is provided.
• Verify custom body content renders below the default text when provided.
• Confirm the learn-more link and button still render in both cases.
• Verify responsive layout: button is full-width and stacked on mobile, inline on desktop.

[theletterf]

+CC @shainaraskas

[github-actions]

🔍 Preview links for changed docs

• docs/syntax/agent-skill.md

[Mpdreamz]

The orange looks to much like a warning IMO everything else lgtm

[reakaleek]

IMO, the button should be bottom aligned 🤷

[reakaleek]

Also, it needs to be responsive..

on mobile the button should be full width and below the text

[shainaraskas]

this lgtm w/ two thoughts:

Allows optional body content inside the directive to clarify the scope of a skill; falls back to default text when no body is provided.

• I wonder if the optional text should be supplementary (so people don't have to say the "a skill is available" part which I think is still nice?)

---

• Can we tighten up this second line? it's getting some yucky wrapping now that the text is bigger:

  To learn more about Elastic agent skills, refer to the documentation.

  consider [Learn more about Elastic agent skills]. / [Learn more about agent skills for Elastic]. or similar :) (prob the latter to avoid collision with Elastic Agent)

agree w/ martijn + jan's comments as well.

[theletterf]

We're out of colors :D

Pink, gray? What could work better? Summoning @itsalexcm

[Mpdreamz]

LGTM, we can follow up with colors :)

[theletterf]

@Mpdreamz Went for neutral / plain color, since it's more informational and the button already catches the eye. Could we deploy this version?