feat(ai-chat): redesign install + setup screens to match login layout

The CLI-not-installed and Claude-needs-setup screens now share the
.ai-placeholder layout with the login/placeholder screens — left-
aligned header, intro video, body copy, full-width CTA, footer help
link — for one consistent visual language across the four 'AI gated'
surfaces.

Per designer spec, the primary CTAs on these setup-on-dark screens
flip from blue to a white pill (kept blue on the login/placeholder
to keep the desktop-app upsell action distinct). Selector chains
.btn.btn-primary.ai-placeholder-cta-on-dark to beat the dark-mode
.dark .btn.btn-primary !important rule that would otherwise force
blue.

Adds a .ai-placeholder-cta-secondary outlined style for the
'Add Custom Provider' option on the setup screen, plus a centered
'Need Help? Learn More' footer link.

Strings: drops the inline learn-more anchors in CLI_INSTALL_MSG /
CLAUDE_LOGIN_MSG (footer link replaces them), updates
INTRO_CONFIGURE_DESC to match the new subtitle copy, adds
SETUP_NEED_HELP and SETUP_LEARN_MORE.

Author: abose

src/nls/root/strings.js

@@ -2160,15 +2160,17 @@ define({
     "AI_CHAT_SEND_TITLE": "Send message",
     "AI_CHAT_STOP_TITLE": "Stop generation (Esc)",
     "AI_CHAT_CLI_NOT_FOUND": "Claude Code Not Installed",
-    "AI_CHAT_CLI_INSTALL_MSG": "Claude Code CLI must be installed on your system to use AI features in {APP_NAME}. <a class='ai-learn-more-link' href='#'>Learn more</a>",
+    "AI_CHAT_CLI_INSTALL_MSG": "Claude Code CLI must be installed on your system to use AI features in {APP_NAME}.",
     "AI_CHAT_CLI_INSTALL_BTN": "Install Claude Code",
     "AI_CHAT_CLI_INSTALLING": "Installing…",
     "AI_CHAT_CLI_INSTALLING_MSG": "Installing Claude Code, please wait. This may take a while...",
     "AI_CHAT_CLI_RESTART_NOTE": "Restart {APP_NAME} after installation completes.",
     "AI_CHAT_CLAUDE_LOGIN_TITLE": "Setup Claude Code",
-    "AI_CHAT_CLAUDE_LOGIN_MSG": "Claude Code is installed but needs to be configured. <a class='ai-learn-more-link' href='#'>Learn more</a>",
+    "AI_CHAT_CLAUDE_LOGIN_MSG": "Claude Code is installed but it needs configuration.",
     "AI_CHAT_CLAUDE_LOGIN_BTN": "Setup Claude Code",
     "AI_CHAT_ADD_PROVIDER_BTN": "Add Custom Provider",
+    "AI_CHAT_SETUP_NEED_HELP": "Need Help?",
+    "AI_CHAT_SETUP_LEARN_MORE": "Learn More",
     "AI_CHAT_RETRY": "Retry",
     "AI_CHAT_DESKTOP_ONLY": "AI features require the {APP_NAME} desktop app. Download it to get started.",
     "AI_CHAT_DOWNLOAD_BTN": "Download Desktop App",
@@ -2185,7 +2187,7 @@ define({
     "AI_CHAT_LOGIN_BTN": "Sign In",
     "AI_CHAT_INTRO_GUEST_TITLE": "Design layouts, fix bugs, and build faster with AI",
     "AI_CHAT_INTRO_CONFIGURE_TITLE": "Getting started with Claude Code",
-    "AI_CHAT_INTRO_CONFIGURE_DESC": "See this short video on how to set up AI",
+    "AI_CHAT_INTRO_CONFIGURE_DESC": "Watch this short video to set up AI in {APP_NAME}",
     "AI_CHAT_UPSELL_TITLE": "Phoenix Pro + AI",
     "AI_CHAT_UPSELL_MESSAGE": "AI features are available with Phoenix Pro.",
     "AI_CHAT_UPSELL_BTN": "Get Phoenix Pro",

src/styles/Extn-AIChatPanel.less

@@ -2990,6 +2990,71 @@
     margin: 4px 0 0;
 }
 
+/* Setup variant of the primary CTA: white pill on the dark panel, used
+   on the "Install Claude Code" / "Setup Claude Code" screens. The
+   placeholder/login CTA stays blue — only these setup-on-dark surfaces
+   flip to white per the designer spec. The selector chains both .btn
+   and .btn-primary classes (specificity 0,6,0) to beat the
+   `.dark .ai-chat-panel .ai-placeholder .btn.btn-primary` rule that
+   would otherwise force blue in the default dark theme. */
+.ai-chat-panel .ai-placeholder .btn.btn-primary.ai-placeholder-cta.ai-placeholder-cta-on-dark {
+    background-color: #ffffff !important;
+    background-image: none !important;
+    color: #1a1a1a !important;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
+
+    &:hover {
+        background-color: #f4f4f4 !important;
+    }
+
+    &:active {
+        background-color: #e8e8e8 !important;
+    }
+}
+
+/* Outlined / muted secondary CTA — sits directly under the white
+   primary on the setup screen for the "Add Custom Provider" alternative. */
+.ai-chat-panel .ai-placeholder .ai-placeholder-cta-secondary {
+    width: 100%;
+    padding: 12px 18px;
+    font-size: 13.5px;
+    font-weight: 500;
+    line-height: 1.3;
+    border-radius: 8px;
+    margin: 8px 0 0;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: @project-panel-text-1;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.04);
+        border-color: rgba(255, 255, 255, 0.2);
+    }
+}
+
+/* Centered "Need Help? Learn More" footer below the setup CTAs. */
+.ai-chat-panel .ai-placeholder-help {
+    margin-top: 14px;
+    text-align: center;
+    font-size: 12.5px;
+    color: @project-panel-text-2;
+    opacity: 0.75;
+}
+
+.ai-chat-panel .ai-placeholder-help .ai-learn-more-link {
+    color: @bc-primary-btn-bg;
+    text-decoration: none;
+    margin-left: 4px;
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
 /* Re-apply Phoenix's standard `.btn .btn-primary` look inside the
    .ai-unavailable intro states. The blanket reset below (`.ai-chat-panel
    .btn-primary`) blanks bootstrap's button styling so chat-area buttons