Fix modal backdrop styling to use blurred background

Updated share and join modals to use consistent backdrop styling
with blur effect matching the settings modal.

- Changed from bg-black bg-opacity-50 to bg-black/50 backdrop-blur-sm
- Added consistent padding (p-4) to modal containers
- Standardized z-index and flexbox ordering across all modals

Author: damione1

web/templates/join_modal.templ

@@ -1,7 +1,7 @@
 package templates
 
 templ JoinModal(roomID string) {
-	<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" x-data="{ show: true }">
+	<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" x-data="{ show: true }">
 		<div class="elevated-card bg-gradient-to-br from-white to-slate-50 rounded-2xl shadow-2xl max-w-md w-full mx-4 p-8" x-show="show">
 			<h2 class="text-2xl font-bold text-slate-800 mb-2">Join Room</h2>
 			<p class="text-sm text-slate-600 mb-6">Enter your details to participate</p>

web/templates/share.templ

@@ -12,7 +12,7 @@ templ ShareControls(roomID string) {
 		<div
 			x-show="showShareModal"
 			@click.self="showShareModal = false"
-			class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+			class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
 			x-transition
 		>
 			<div class="bg-white rounded-lg shadow-2xl max-w-md w-full mx-4 p-6">
@@ -32,21 +32,30 @@ templ ShareControls(roomID string) {
 						class="w-64 h-64 border-2 border-gray-200 rounded-lg p-4"
 					/>
 				</div>
-				<div class="flex gap-2">
-					<input
-						type="text"
-						readonly
-						:value="window.location.href"
-						@click="$event.target.select()"
-						class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-sm font-mono bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900"
-					/>
-					<button
-						@click="copyUrl()"
-						class="px-6 py-2 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800 whitespace-nowrap transition"
-					>
-						<span x-show="!copied">📋 Copy</span>
-						<span x-show="copied">✓ Copied!</span>
-					</button>
+				<div class="space-y-4">
+					<div class="flex gap-2">
+						<input
+							type="text"
+							readonly
+							:value="window.location.href"
+							@click="$event.target.select()"
+							class="flex-1 px-4 py-2 border border-gray-300 rounded-md text-sm font-mono bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900"
+						/>
+						<button
+							@click="copyUrl()"
+							class="px-6 py-2 bg-gray-900 text-white rounded-md text-sm font-medium hover:bg-gray-800 whitespace-nowrap transition"
+						>
+							<span x-show="!copied">📋 Copy</span>
+							<span x-show="copied">✓ Copied!</span>
+						</button>
+					</div>
+					<div class="flex justify-center">
+						<div
+							class="teams-share-button"
+							:data-href="window.location.href"
+							data-msg-text="Join my Planning Poker session!"
+						></div>
+					</div>
 				</div>
 			</div>
 		</div>