From 8748be42561c1ee2b01dbb7e707ec629726f9cfa Mon Sep 17 00:00:00 2001
From: Sergii Demianchuk <sergeydemjanchyk@gmail.com>
Date: Sat, 25 Jul 2026 23:17:25 -0400
Subject: [PATCH] fix(ai): smaller top-anchored chevron (no clip) + primary
 Manage account (PR #51 feedback)

- Hero: shrink the mark 212->182px and absolutely position it 12px from the top so the chevron
  peak clears the modal's rounded edge; only the lower soft circles bleed now, never the chevron.
- Manage account is the accent-filled primary CTA on paid plans (stays quiet on free tier, where
  the Upgrade button owns the accent).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 extensions/levelcode-ai/media/chat.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/extensions/levelcode-ai/media/chat.html b/extensions/levelcode-ai/media/chat.html
index 98e93a8..e35c826 100644
--- a/extensions/levelcode-ai/media/chat.html
+++ b/extensions/levelcode-ai/media/chat.html
@@ -878,8 +878,10 @@
   .acctcard.classic .ovclose:hover { color: var(--cc-text); background: color-mix(in srgb, var(--cc-text3) 18%, transparent); }
   /* Hero — the landing page's floating chevron over four drifting "portal" circles. Decorative (aria-hidden),
      full-bleed at the top of the modal; the motion respects prefers-reduced-motion (guard below). */
-  .acctcard.classic .hero { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; }
-  .acctcard.classic .hero .portalmark { width: 212px; height: auto; display: block; }
+  .acctcard.classic .hero { position: relative; height: 146px; overflow: hidden; }
+  /* Absolutely placed with a top gap so the chevron peak clears the modal's rounded top edge; the SVG is
+     taller than the hero, so only the LOWER soft circles bleed off — the chevron itself is never clipped. */
+  .acctcard.classic .hero .portalmark { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 182px; height: auto; }
   .acctcard.classic .portal-layer { transform-origin: 50% 60%; animation: portalDrift 7s ease-in-out infinite; }
   .acctcard.classic .portal-layer:nth-child(2) { animation-delay: -1.4s; }
   .acctcard.classic .portal-layer:nth-child(3) { animation-delay: -2.8s; }
@@ -2816,6 +2818,9 @@
       // privacy reassurance, which is genuinely useful there.
       const note = gateway ? '' : '<div class="note">Your keys never leave your machine — requests go direct to your provider.</div>';
       const docsLink = '<a class="docs" data-act="docs" role="link" tabindex="0">Documentation <span class="darrow" aria-hidden="true">↗</span></a>';
+      // Highlight Manage account as the primary CTA — EXCEPT on free tier, where the accent belongs to the
+      // Upgrade button (two accent buttons would compete), so Manage stays quiet there.
+      const manageClass = upgradeBtn ? 'abtn' : 'abtn primary';
       acctBody.innerHTML =
         '<div class="hero">' + LC_PORTAL_SVG + '</div>'
         + '<div class="acctmain">'
@@ -2823,7 +2828,7 @@
         +   emailLine
         +   planPill
         +   upgradeBtn
-        +   '<button class="abtn" data-act="manage">Manage account</button>'
+        +   '<button class="' + manageClass + '" data-act="manage">Manage account</button>'
         +   '<button class="signout" data-act="signout">Sign out</button>'
         +   '<div class="acctfoot">' + docsLink + '<div class="synced">Synced · settings · skills · keymaps</div></div>'
         +   note