fix: MaestroButton layout shift - stable min-width and persistent border

- Added min-w-[140px] to prevent width change between states
- Border now always present (same color in both states), preventing 1px jump
- Text wrapped in truncate spans for overflow safety
- Spinning ♩ note preserved in loading state

frontend/src/components/MaestroButton.tsx

@@ -75,24 +75,26 @@ export default function MaestroButton({
       type="button"
       onClick={handleMaestro}
       disabled={isMaestroing}
-      className={`${className} flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-all duration-200 ${
+      className={`${className} flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md min-w-[140px] border transition-colors duration-200 ${
         isMaestroing
-          ? 'bg-kithara-accent/20 text-kithara-accent animate-pulse'
-          : 'bg-kithara-accent/10 text-kithara-accent hover:bg-kithara-accent/25 border border-kithara-accent/30 hover:border-kithara-accent/50'
+          ? 'bg-kithara-accent/20 border-kithara-accent/30 text-kithara-accent animate-pulse'
+          : 'bg-kithara-accent/10 border-kithara-accent/30 hover:bg-kithara-accent/25 hover:border-kithara-accent/50 text-kithara-accent'
       }`}
       title={mode === 'generate'
         ? "Let Maestro write a creative prompt for you"
         : "Let Maestro complete your prompt with musical details"
       }
     >
-      {isMaestroing ? (
-        <>
-          <span className="inline-block animate-spin">♩</span>
-          {mode === 'generate' ? 'Dreaming...' : 'Composing...'}
-        </>
-      ) : (
-        label
-      )}
+        {isMaestroing ? (
+          <>
+            <span className="inline-block animate-spin">♩</span>
+            <span className="truncate">
+              {mode === 'generate' ? 'Dreaming...' : 'Composing...'}
+            </span>
+          </>
+        ) : (
+          <span className="truncate">{label}</span>
+        )}
     </button>
   )
 }