fix(ai): style usage hover targets and update Pro pin

src/nls/root/strings.js

@@ -2892,9 +2892,9 @@ define({
     "AI_CHAT_USAGE_TURNS_CALLS": "Turns \u00b7 API calls",
     "AI_CHAT_USAGE_API_TIME": "Time in API",
     "AI_CHAT_USAGE_COST": "Cost at list price",
-    "AI_CHAT_USAGE_NOTE": "With a Claude subscription, this cost is included in your plan. Pricing shown is for reference only.",
-    "AI_CHAT_USAGE_SPEND_INCLUDED": "API-equivalent cost estimates. Your subscription or provider billing may differ.",
-    "AI_CHAT_USAGE_SPEND_NO_PRO_CHARGE": "No charge to your Phoenix Pro subscription.",
+    "AI_CHAT_USAGE_NOTE": "You won’t be charged this amount by Phoenix Pro.",
+    "AI_CHAT_USAGE_SPEND_INCLUDED": "With a Claude or ChatGPT subscription, these AI costs are covered by your plan. If you use an API key, billing is handled by your provider.",
+    "AI_CHAT_USAGE_SPEND_NO_PRO_CHARGE": "You won’t be charged this amount by Phoenix Pro.",
     "AI_CHAT_USAGE_OPTION_TURNS": "Show usage after every turn",
     "AI_CHAT_USAGE_OPTION_DOLLARS": "Show $ cost",
     "AI_CHAT_USAGE_CARD_TITLE": "Usage",

src/styles/Extn-AIChatPanel.less

@@ -4896,11 +4896,60 @@
         }
 
         .ai-usage-note {
+            position: relative;
             margin-top: auto;
             padding: 4px 12px 6px;
             color: @project-panel-text-2;
             white-space: normal;
             max-width: 270px;
+
+            &:hover .ai-usage-note-tip,
+            &:focus-within .ai-usage-note-tip {
+                display: block;
+            }
+        }
+
+        .ai-usage-note-trigger {
+            display: flex;
+            align-items: baseline;
+            gap: 6px;
+            padding: 0;
+            border: 0;
+            border-radius: 2px;
+            background: none;
+            box-shadow: none;
+            color: inherit;
+            font: inherit;
+            text-align: left;
+            cursor: help;
+
+            span {
+                text-decoration: underline dotted;
+                text-underline-offset: 3px;
+            }
+
+            &:focus-visible {
+                outline: 1px solid @project-panel-text-1;
+                outline-offset: 3px;
+            }
+        }
+
+        .ai-usage-note-tip {
+            display: none;
+            position: absolute;
+            bottom: 100%;
+            left: 8px;
+            right: 8px;
+            margin-bottom: 6px;
+            padding: 10px 12px;
+            background: @bc-ai-sidebar-bg;
+            border: 1px solid @ai-start-border;
+            border-radius: 8px;
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+            color: @project-panel-text-1;
+            line-height: 1.45;
+            z-index: 1;
+            pointer-events: none;
         }
 
         label.ai-usage-option {
@@ -5950,6 +5999,10 @@
     flex-direction: column;
     gap: 4px;
 
+    .ai-settings-section-note {
+        margin-bottom: 0;
+    }
+
     label {
         font-size: @ai-dialog-text;
         font-weight: 600;
@@ -6192,7 +6245,8 @@
         cursor: pointer;
 
         input[type="checkbox"] {
-            margin: 2px 0 0;
+            margin: 4px 0 0;
+            top: 0;
             flex-shrink: 0;
             cursor: pointer;
         }
@@ -6838,19 +6892,38 @@
     .ai-usage-bars {
         display: flex;
         align-items: flex-end;
-        gap: 3px;
         height: 44px;
         margin-bottom: 4px;
     }
 
     .ai-usage-bar {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        height: 100%;
+        min-width: 0;
+        padding: 0 1.5px;
+        box-sizing: border-box;
+        border-radius: 2px;
+
+        &.ai-usage-bar-hovered {
+            outline: 1px solid @project-panel-text-1;
+            outline-offset: -1px;
+            background: rgba(255, 255, 255, 0.05);
+            filter: brightness(1.2);
+        }
+    }
+
+    .ai-usage-bar-fill {
         display: flex;
         flex-direction: column-reverse;
+        flex-shrink: 0;
         border-radius: 2px 2px 0 0;
         overflow: hidden;
         background: rgba(255, 255, 255, 0.03);
         min-height: 1px;
+        pointer-events: none;
 
         i {
             display: block;
@@ -7114,10 +7187,10 @@
         }
     }
 
-    // The spend figures' tip: a Claude plan covers the spend; Phoenix Pro adds no charge.
+    // Leave enough room for the no-charge sentence; wrap longer copy on narrow windows.
     .ai-usage-tip-note,
     .ai-usage-tip-foot {
-        max-width: 240px;
+        max-width: ~"min(280px, calc(100vw - 42px))";
         white-space: normal;
         line-height: 1.45;
     }

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "c63b994897b344c757263ee4acfe484d64faa61b"
+    "commitID": "4dc933fb3306dd5c8bd098969dce17544c58c0a6"
   }
 }