Task #436: tint the whole incoming-note popup with the note color

The popup was a colored body sitting inside a white frame; users
wanted the WHOLE popup to look like the sticky note itself, with
only the outer ring + chrome remaining as frame.

- Outer rounded-2xl card now uses `colorBg(current.color)` directly
  (replacing `bg-background`). Default-color notes still render on
  `bg-white dark:bg-card` so the look is unchanged for uncolored
  notes.
- Removed the inner card-in-card colored body wrapper; title +
  content/checklist now render directly on the tinted surface.
- Header divider switched from `bg-muted/40` (opaque chrome) to a
  translucent `border-black/10 dark:border-white/10` so the tint
  flows under the avatar/title/X without an opaque strip.
- Action row moved into its own bordered footer strip (same
  translucent divider) so the 3 buttons stay legible on every
  palette tint while letting the colored surface bleed through.
- Added `data-popup-color` on the card for diagnostics.
- Reply popups inherit the same tint via the existing `color` field
  on the reply payload (no plumbing change).

No payload, locale, or test-id changes. All popup e2e suites pass:
notes-popup-on-receive (3/3), notes-popup-touch-tap (2/2).

artifacts/tx-os/src/components/notes/incoming-note-popup.tsx

@@ -372,9 +372,15 @@ export function IncomingNotePopup() {
       }}
     >
         <div
-          className={`rounded-2xl ring-4 ring-amber-400/70 shadow-2xl shadow-amber-500/30 overflow-hidden transition-transform duration-200 ${colorBg(
-            current.color,
-          )} ${enterAnim ? "scale-100" : "scale-95"}`}
+          className={`rounded-2xl ring-4 ring-amber-400/70 shadow-2xl shadow-amber-500/30 overflow-hidden transition-transform duration-200 ${
+            // Default-color notes keep the original neutral popup
+            // chrome (bg-background) so uncolored notes look exactly
+            // like before. Only explicitly-colored notes paint the
+            // whole card with their palette tint.
+            current.color === "default"
+              ? "bg-background"
+              : colorBg(current.color)
+          } ${enterAnim ? "scale-100" : "scale-95"}`}
           data-popup-color={current.color}
         >
           {/* Drag handle / header — sits ON the tinted surface (no
@@ -386,7 +392,7 @@ export function IncomingNotePopup() {
             onPointerMove={onHandlePointerMove}
             onPointerUp={onHandlePointerEnd}
             onPointerCancel={onHandlePointerEnd}
-            className="flex items-center gap-3 px-4 py-3 cursor-grab active:cursor-grabbing select-none border-b border-black/10 dark:border-white/10 touch-none"
+            className="flex items-center gap-3 px-4 py-3 cursor-grab active:cursor-grabbing select-none border-b border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 touch-none"
             data-testid="incoming-note-popup-drag-handle"
             title={t("notes.popup.dragHint")}
           >
@@ -463,7 +469,7 @@ export function IncomingNotePopup() {
               buttons stay legible against any tint, while still
               letting the colored surface bleed through (no opaque
               white footer). */}
-          <div className="px-4 py-3 border-t border-black/10 dark:border-white/10">
+          <div className="px-4 py-3 border-t border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5">
             <div className="flex flex-wrap gap-2 sm:flex-nowrap justify-end">
               <Button
                 type="button"