feat(docs): add Talk to Our Engineers button to navbar (CopilotKit#4590)

## Summary

- Adds a **Talk to Our Engineers** CTA button to the right side of the
docs navbar, mirroring the new website's nav button.
- Wires the same PostHog `talk_to_us_clicked` event the website fires,
with `{ location: "docs_nav" }` so docs-originated clicks can be
segmented from website clicks (`"nav"`) in PostHog.
- Fixes a pre-existing layout bug where the navbar's slanted SVG borders
were sized in fixed pixels (`w-[24px] h-[60px]` / `xl:w-[29px]
xl:h-[72px]`) and didn't follow the nav's actual height once Chrome's
default font size was scaled above 16px — the wedge of page background
that leaked through the join is now sealed.

## Behavior

| Viewport | Button |
|---|---|
| `>= 1400px` | Visible |
| `1024–1399px` | Hidden (button text would otherwise force the left
links to wrap) |
| `< 1024px` | Hidden — mobile burger menu surfaces the link |

The button uses `text-muted-foreground` for the resting state to match
the existing nav links and an indigo `#7076D5` hover accent that matches
the active-link underline color. Target is
`https://copilotkit.ai/contact-us` (absolute since docs runs on the
`docs.` subdomain).

## Test plan

- [ ] Click the button on a wide viewport — navigates to
`https://copilotkit.ai/contact-us` and fires `talk_to_us_clicked` with
`{ location: "docs_nav" }` in PostHog.
- [ ] Resize from > 1400px down through 1024px and below — button shows
/ hides at the right thresholds with no left-link wrapping.
- [ ] Toggle dark mode — button border and text stay legible, hover
accent still indigo.
- [ ] Set Chrome's default font size to 20px and reload — no wedge gap
at the slanted-border join between the left and right pill containers.

Author: BenTaylorDev

docs/components/layout/navbar.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "fumadocs-core/link";
 import { usePathname } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
 import { DocsLayoutProps } from "fumadocs-ui/layouts/docs";
 // Components
 import { Logo } from "@/app/logo";
@@ -79,6 +80,12 @@ const Navbar = ({ pageTree }: NavbarProps) => {
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
   const [lastDocsPath, setLastDocsPath] = useState<string | null>(null);
   const pathname = usePathname();
+  const posthog = usePostHog();
+
+  const handleTalkToEngineersClick = () => {
+    posthog?.capture("talk_to_us_clicked", { location: "docs_nav" });
+    window.location.href = "https://copilotkit.ai/contact-us";
+  };
 
   // Read sessionStorage on client only to avoid hydration mismatch (tab-specific)
   useEffect(() => {
@@ -208,14 +215,14 @@ const Navbar = ({ pageTree }: NavbarProps) => {
             alt="Slanted end border"
             width={29}
             height={72}
-            className="hidden -ml-px dark:inline-block shrink-0 w-[24px] h-[60px] xl:w-[29px] xl:h-[72px] object-cover"
+            className="hidden -ml-px dark:inline-block shrink-0 h-full w-auto object-cover"
           />
           <Image
             src="/images/navbar/slanted-end-border-light.svg"
             alt="Slanted end border"
             width={29}
             height={72}
-            className="-ml-px dark:hidden shrink-0 w-[24px] h-[60px] xl:w-[29px] xl:h-[72px] object-cover"
+            className="-ml-px dark:hidden shrink-0 h-full w-auto object-cover"
           />
         </div>
 
@@ -225,20 +232,29 @@ const Navbar = ({ pageTree }: NavbarProps) => {
             alt="Slanted start border"
             width={29}
             height={72}
-            className="hidden -mr-px dark:inline-block shrink-0 w-[24px] h-[60px] xl:w-[29px] xl:h-[72px] object-cover"
+            className="hidden -mr-px dark:inline-block shrink-0 h-full w-auto object-cover"
           />
           <Image
             src="/images/navbar/slanted-start-border-light.svg"
             alt="Slanted start border"
             width={29}
             height={72}
-            className="-mr-px dark:hidden shrink-0 w-[24px] h-[60px] xl:w-[29px] xl:h-[72px] object-cover"
+            className="-mr-px dark:hidden shrink-0 h-full w-auto object-cover"
           />
 
           <div
             className="flex gap-1 items-center pr-2 w-max h-full rounded-r-2xl border border-l-0 backdrop-blur-lg md:pr-4 shrink-0 border-border"
             style={{ backgroundColor: "var(--sidebar)" }}
           >
+            <button
+              type="button"
+              onClick={handleTalkToEngineersClick}
+              className="hidden [@media(width>=1400px)]:flex items-center h-9 px-4 mr-2 text-sm font-medium rounded-full border border-border bg-transparent text-muted-foreground hover:text-[#7076D5] hover:border-[#7076D5] hover:bg-[#7076D5]/10 transition-colors duration-200 cursor-pointer whitespace-nowrap"
+              aria-label="Talk to our engineers"
+            >
+              Talk to Our Engineers
+            </button>
+
             {RIGHT_LINKS.map((link) => {
               // Only show Free Developer Access at narrow widths (between 768px and 1028px)
               const isIconOnlyLink = link.label === "Free Developer Access";